.nivo-controlNav a { background-image:url(../nav/nivo-slider-bullets_9c1006.png); } .nivo-html-caption-text { color:#ffffff; font-size:16px; text-align:center; padding-top:40px; } .product_table { width:778px; cellpadding:20px; vertical-align:middle; } .product_rahmen { background-color:#eade92; border-color:#7cb632; border-style:solid; border-width:1px; } .product_headline { font-size:12pt; font-weight:bold; align:center; } .product_zeile { height:42px; margin-bottom: 20px; vertical-align:middle; font-size:12pt; font-weight:bold; } mt-m { margin-top:10px; } table.tsubnav td.tsubnav { width:50%; vertical-align:top; text-align:center; border-width:1px; border-style:solid; padding:10px 0; } .Balken { font-size:16px; font-family:arial; font-weight:bold; color:#FFFFFF; background-color:#6FB055; line-height:18px; } .Artikel { font-size:14px; font-family:arial; font-weight:bold; color:#878787; line-height:15px; } .SpLi { padding-left:5px; } .SpRe { text-align:center; } .Linie { width:100%; color:#878787; height:2px; margin-top:30px; margin-bottom:30px; } .Ueberschrift { font-size:40px; font-family:arial; font-weight:normal; color:#6FB055; } .Ueberschrift2 { font-size:20px; font-family:arial; font-weight:normal; color:#878787; } .Text { font-size:14px; font-family:arial; font-weight:normal; color:#878787; text-align:justify; vertical-align:top; line-height:16pt; } #errorDummyForUserInput1 { display:none; } /* eigentlich schon obsolete, temporaer aber noch erhalten */ /* .float_l { float:left; } .float_r { float:right; } .clear_b::after { clear:both; display:block; content:""; } .clear_l::after { clear:left; display:block; content:""; } .clear_r::after { clear:right; display:block; content:""; } .clear { clear:both; display:block; } */ /*************************** NEU NEU NEU ***************************/ /*** ---------------------- ***/ /*------------------- Inhalt -*/ /*----------------------------*/ /*-------- Kapitel 1: Basics -*/ /*-------------- Allgemeines -*/ /*-------------------- Grids -*/ /*------- spezielle Elemente -*/ /*------------------ Plugins -*/ /*---------------- Abstaende -*/ /*---------------- Schriften -*/ /*------------------- Rahmen -*/ /*------------------- Farben -*/ /*-------------------- float -*/ /*----------------- position -*/ /*----------------- Groessen -*/ /*------------------ display -*/ /*------------- Sichtbarkeit -*/ /*------------------- Cursor -*/ /*-------------- Transitions -*/ /*- Kapitel 2: Media Queries -*/ /*---------------- min 480px -*/ /*---------------- min 680px -*/ /*---------------- min 880px -*/ /*** ---------------------- ***/ /*** Allgemeines ***/ * { box-sizing:border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { -webkit-text-size-adjust:100%; -moz-text-size-adjust:none; -ms-text-size-adjust:100%; overflow-x:hidden; background-color:#000000; } body, html { margin:0; height:100%; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#3ecbe7; } body.generator { margin-top:0 !important; } body.iframe { background:transparent; background-image:none; } body.mzdummy { background-color:#000000; } body, html, div { outline:0 none; } h4 { font-size:1em; color:#3ecbe7; } h3 { font-size:1.2em; color:#3ecbe7; } h2 { font-size:1.3em; color:#3ecbe7; } figure { margin:0; padding:0; } a { color:#3ecbe7; } a:hover { color:#3ecbe7; } hr { background-color:#dddddd; color:#dddddd; border:0; height:1px; } input, select, textarea, number, password, submit, button, email, tel, url { font-size:1em; padding:0.8em; font-family:Arial,Helvetica; background-color:#000000; color:#ffffff; } input:not([type="submit"]):disabled, select:disabled, textarea:disabled, number:disabled, password:disabled, email:disabled, tel:disabled, url:disabled { background-color:transparent; } input[type="submit"] { -webkit-appearance:none; -moz-appearance:none; appearance:none; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } input[type="number"] { -moz-appearance:textfield; } :focus { outline:none; } /*.button:focus, .button_put2cart:focus, select:focus, input:focus { outline:1px dotted #3ecbe7; }*/ :focus-visible { outline:none !important; box-shadow:inset 0 0 0 2px #271e18; border-radius:3px; } .paypalppcp .component-frame:focus-visible { box-shadow: none; } /*eigene input-Elemente*/ .checkbox { position:relative; display:inline-block; vertical-align:middle; } .checkbox input[type="checkbox"] { position:absolute; z-index:-1; margin:0; font-size:0; height:0; width:0; visibility:hidden; } .checkbox input[type="checkbox"] + label { display:inline-block; padding:0.2em; border:1px solid #3ecbe7; border-radius:2px; font-family:'Font Awesome 5 Free'; position:relative; width: 1.5em; height:1.5em; transition:border-color 0.3s; overflow:hidden; background-color:#000000; cursor:pointer; } .checkbox input[type="checkbox"].error + label { border-color:#ff0000; } .checkbox input[type="checkbox"] + label::before { position:absolute; top:2px; left:-2em; transition:left 0.3s; content:"\f00c"; font-weight:900; color:#ffffff; } .checkbox input[type="checkbox"]:checked + label::before { left:0.2em; } .checkbox input[type="checkbox"]:focus + label { border-color:#271e18; } .checkbox input[type="checkbox"]:disabled + label { border-color:#000000; } .checkbox + label { display:inline-block; margin:0.25em 0 0.25em 0; width:calc(100% - 4em); vertical-align:middle; cursor:pointer; } .checkbox.checkbox_top + label { vertical-align:top; } .checkbox.checkbox_bottom + label { vertical-align:bottom; } .checkbox:not(.hide_1) + label { margin-left:0.7em; } .radio { background-color:#000000; position:relative; display:inline-block; } .radio input[type="radio"] { position:absolute; z-index:-1; margin:0; font-size:0; height:0; width:0; } .radio input[type="radio"] + label { display:inline-block; padding:0.2em; border:1px solid #3ecbe7; border-radius:50%; font-family:'Font Awesome 5 Free'; position:relative; width: 1.5em; height:1.5em; transition:border-color 0.3s; overflow:hidden; } .radio input[type="radio"] + label::after { position:absolute; display:block; top:50%; left:50%; transform:translateY(-50%) translateX(-50%); -ms-transform:translateY(-50%) translateX(-50%); transition:height 0.3s, width 0.3s; content:""; background-color:#3ecbe7; width:0em; height:0em; overflow:hidden; font-size:2em; border-radius:50%; } .radio input[type="radio"]:checked + label::after { height:0.5em; width:0.5em; } .radio input[type="radio"]:focus + label { border-color:#271e18; } .radio input[type="radio"]:disabled + label { border-color:#000000; } .radio + label { display:inline-block; vertical-align:top; margin:0.3em 0 0.4em 0.4em; width:calc(100% - 3em); } .toggle input[type=checkbox] { height:0; width:0; margin:0; visibility:hidden; position:absolute; } .toggle label { cursor:pointer; text-indent:-9999px; width:30px; height:15px; background:grey; display:block; border-radius:15px; position:relative; } .toggle.dark label { background:#333; } .toggle label:after { content:''; position:absolute; top:2px; left:2px; width:11px; height:11px; background:#fff; border-radius:30px; transition:0.3s; } .toggle input:checked + label { background: #cd0a0a; } .toggle input:checked + label:after { left:calc(100% - 2px); transform:translateX(-100%); } .toggle label:active:after { width:20px; } address { font-style: normal; } .ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /*eigene Dialogboxen*/ .alert { transform:scale(1.0001); transform-origin:0 0; /*zoom:1.0001;*/ } /** Browser-Anpassungen **/ /*IE9*/ img { border-style:none; } /*** Grids ***/ /**Columns / Spalten**/ /*25-75*/ .col-2--25-75 { display:-webkit-box; display:-ms-flexbox; display:flex; } .col-2--25-75 > * { } .col-2--25-75 > *:nth-child(1) { width:25%; } .col-2--25-75 > *:nth-child(2) { width:75%; } /*25-50-25*/ .col-3--25-50-25 { display:-webkit-box; display:-ms-flexbox; display:flex; } .col-3--25-50-25 > * { } .col-3--25-50-25 > *:nth-child(1) { width:25%; } .col-3--25-50-25 > *:nth-child(2) { width:50%; } .col-3--25-50-25 > *:nth-child(3) { width:25%; } /**Rows / Zeilen**/ .row-3--auto-max-auto { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -ms-overflow-y:auto; } .row-3--auto-max-auto > * { } .row-3--auto-max-auto > *:nth-child(1) { } .row-3--auto-max-auto > *:nth-child(2) { overflow-y:auto; -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; } .row-3--auto-max-auto > *:nth-child(3) { } /** Shop-Grid **/ .shop-width { max-width:1200px; } #shop { position:relative; } #shop.disable::after { position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; content:""; display:block; z-index:9002; transition:all 0.4s; } #Header { width:100%; position:absolute; z-index:9000; border-bottom:1px solid #18515b; } #Header.sticky { top:0; position:fixed; } body.desktop #Header {position:relative; z-index:1000; border-bottom:none; } @media (min-width:880px){ #Header { position:relative; z-index:1000; } } #Header #header_content { margin:0 auto; position:relative; } @media (min-width:880px){ #Header:not(.style2) { margin:0 auto; } } #Main { display:block; width:100%; margin-top:60px; } @media (min-width:880px){ #Main { margin:0 auto; } } #Middle {} #Left {} #Right {} body:not(.desktop) #logo { display:none; } #logo { position:absolute; top:10px; left:10px; width:180px; height:100px; } /** Shop-Design**/ #Header { background-color:#000000;; } #header_content:not(.button_high):not(.button), #header_content a:not(.button_high):not(.button) { color:#3ecbe7; } #header_content a:not(.button_high):not(.button):hover { color:#3ecbe7; } #Header #header_content { background-repeat:no-repeat; background-position:0 center; } #Header:not(.style2) #header_content { border-style:solid; border-color:#18515b; border-width:0 1px 1px 1px; } /** Skiplink **/ #skiplink a { position: absolute; top:-100px; left:0px; -webkit-transition: top .5s ease-out; transition: top .5s ease-out; z-index: 100; } #skiplink a:focus { position: absolute; left:0px; top:0px; outline-color:transparent; -webkit-transition: top .05s ease-in; transition: top .05s ease-in; } @media (prefers-reduced-motion: reduce) { #skiplink a { transition-duration: 0.001ms !important; } } /** Ende Skiplink **/ #Main { background-color:#000000;; } #Main { border:none; padding:0 10px 10px 10px; } body.desktop #Main { border-style:solid; border-color:#18515b; border-width:0 1px; padding-bottom:15px; } @media (min-width:880px) { #Main { border-style:solid; border-color:#18515b; border-width:0 1px; padding-bottom:15px; } } #mobile-header-options { color:#3ecbe7; } #mobileNavigationTrigger { color:#3ecbe7; border:1px solid #3ecbe7; border-radius:1px; } #middle-left-right { display:flex; display:-ms-flexbox; flex-direction:column; -ms-flex-direction:column; } #Middle { display:block; padding:0; width:100%; order:1; -ms-flex: 1 0 auto; -ms-flex-order:1; } #Left { display:block; padding:0; width:100%; display:none; order:2; -ms-flex: 1 0 auto; -ms-flex-order:2; } #Left:not(:empty) { display:block; padding-top:15px; } #Right { display:block; padding:0; width:100%; display:none; order:3; -ms-flex: 1 0 auto; -ms-flex-order:3; } #Right:not(:empty) { display:block; padding-top:15px; } #Left > *:not(:first-child) { margin-top:15px; } #Right > *:not(:first-child) { margin-top:15px; } #Left > *:first-child { margin-top:0; } #Right > *:first-child { margin-top:0; } /* Footer-Grid */ body.desktop .footercol.col_2 { width:50%; } body.desktop .footercol.col_3 { width:33.33%; } body.desktop .footercol.col_4 { width:25%; } body.desktop .footercol.col_5 { width:20%; } @media (min-width:880px) { .footercol.col_2 { width:50%; } .footercol.col_3 { width:33.33%; } .footercol.col_4 { width:25%; } .footercol.col_5 { width:20%; } } #Footer { width:100%; background-color:#000000;; border-style:solid; border-color:#18515b; border-width:2px 1px 1px 1px; border-top-color:#3ecbe7; } #Footer, #Footer a:not(.button_default) { color:#3ecbe7; } #Footer a:not(.button_default):hover { color:#3ecbe7; } #Footer:not(.style2) { margin:0 auto; } #footer_content { margin:0 auto; overflow:hidden; } #footer_content::after { clear:left; content:""; display:block; } #footer_content > .footercol { padding:15px; padding-bottom:32768px; margin-bottom:-32768px; } #footer_content .footercol_content { padding-bottom:15px; } .footercol_content .item { display:inline-block; margin-bottom:0.8em; } .footercol_content .item:not(:last-child) { margin-right:0.8em; } body.desktop #footer_content > .footercol { float:left; } #footer_content > .footercol:not(:last-child) { border-bottom:1px solid #18515b; } body.desktop #footer_content > .footercol:not(:last-child) { border-bottom:none; } body.desktop #footer_content > .footercol:not(:last-child) { border-right:1px solid #18515b; } @media (min-width:880px) { #footer_content > .footercol { float:left; } #footer_content > .footercol:not(:last-child) { border-bottom:none; } #footer_content > .footercol:not(:last-child) { border-right:1px solid #18515b; } } * + .content_block { margin-top:15px; } .footermenu { margin:0; padding:0; list-style:none; } .footermenu li { padding-top:0.4em; } .footermenu li a { text-decoration:none; } .footermenu .open-submenu { display:none; } #footer_mwst, #shopversion { border-top-style:solid; border-top-color:#18515b; border-top-width:1px; padding:0.8em 15px; text-align:center; font-size:0.9em; color:#aaaaaa; } #footer_mwst a:not(.button_default), #shopversion a:not(.button_default) { color:#aaaaaa; } #footer_mwst a:not(.button_default):hover,#shopversion a:not(.button_default):hover { color:#3ecbe7; } #shopversion:empty { display:none; } /** header-options **/ .header_options { position:absolute; top:0; right:-1px; width:100%; } .header_options::after { clear:left; content:""; display:block; } .header_options .option { line-height:30px; padding-left:10px; padding-right:10px; float:left; border-style:solid; border-width:0 0 1px 1px; border-color:#3ecbe7; background: #18515b; /* Old browsers */background: -moz-linear-gradient(top, #18515b 0%, #18515b 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#18515b), color-stop(100%,#18515b)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #18515b 0%,#18515b 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #18515b 0%,#18515b 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #18515b 0%,#18515b 100%); /* IE10+ */background: linear-gradient(to bottom, #18515b 0%,#18515b 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18515b', endColorstr='#18515b',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */; } .header_options .option:last-child { border-right-width:1px; } .header_options .option { width:100%; } body.desktop .header_options .option { width:auto; } @media (min-width:880px) { .header_options .option { width:auto; } } /** Sprachwechsel, Waehrungswechsel **/ #language_choice_content, #currency_choice_content { position:relative; padding:0; } #language_choice .language, #currency_choice .currency { padding:0 0.8em; } #language_choice .language_container, #currency_choice .currency_container { background: #18515b; /* Old browsers */background: -moz-linear-gradient(top, #18515b 0%, #18515b 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#18515b), color-stop(100%,#18515b)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #18515b 0%,#18515b 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #18515b 0%,#18515b 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #18515b 0%,#18515b 100%); /* IE10+ */background: linear-gradient(to bottom, #18515b 0%,#18515b 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18515b', endColorstr='#18515b',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */; position:absolute; top:30px; right:-1px; z-index:100; white-space:nowrap; } #currency_choice .currency_container.loading::before { content:"" } #currency_choice .currency.active { display:inline-block; } #mobileUser .language, #mobileUser .currency { padding:0.4em 0 !important; } #mobileUser .language.active, #mobileUser .currency.active { padding:0 !important; } #mobileUser .language_container, #mobileUser .currency_container { padding-top:0.4em; } #mobileUser .language_container, #mobileUser .currency_container { background:transparent; position:static; width:100%; border:none; } #more-options-mobile-content > * { padding:0.8em; } #more-options-mobile-content > *:not(:last-child) { border-bottom:1px solid #18515b; } .dropdown { position:relative; padding-right:1em; } .dropdown::after { content:'\f0d7'; font-family:'Font Awesome 5 Free'; font-weight:bold; position:absolute; top:0; right:0.4em; } /** Navigation-Grid **/ .h_menu { display:flex; display:-ms-flexbox; flex-wrap:wrap; -ms-flex-wrap:wrap; } ul.h_menu, .h_menu ul { padding:0; margin:0; list-style-type:none; } .h_menu ul:not(.level2)::after { clear:both; content:""; display:block; } .h_menu li.level0 { padding:0; margin:0; display:block; } .h_menu li > a { padding:1em; display:block; text-decoration:none; } .h_menu ul.level1 { display:none; } /*Topnav*/ #topnav { background-color:#000000;; } #topnav .h_menu li.level0 > a { padding:0.8em 15px; line-height:2em; transition:color 0.3s; color:#3ecbe7; text-transform:uppercase; font-weight:bold; height:100%; } #topnav .h_menu > li.active > a, #topnav .h_menu > li.inpath > a { background-color:#18515b;; transition-delay:0.2s; } #topnav.fixed { z-index:1000; position:fixed; top:0; left:50%; width:100%; transform:translateX(-50%) scale(1.001); transform-origin:0 0; /*transform:translateX(-50%); -ms-transform:translateX(-50%); zoom:1.001;*/ } #topnav.style2, #topnav_placeholder #topnav, #topnav.style1 #topnav_content { width:100%; max-width:none; } #topnav_sub { border-width:1px; border-style:solid; border-color:#18515b; } #topnav_sub.style2 { width:100%; max-width:none; border-width:1px 0; } #topnav_sub.style1 #topnav_sub_content { width:100%; max-width:none; } #naviPos6.h_menu li > a { padding:0.8em 15px; font-weight:bold; } .h_menu.megamenu { position:relative; } .h_menu.megamenu > li > ul { position:absolute; left:0; width:100%; padding:0.8em; } .h_menu.megamenu:not(.touch) > li:hover, .h_menu.megamenu.touch > li.opened { overflow:visible; } .h_menu.megamenu:not(.touch) > li:hover > ul, .h_menu.megamenu.touch > li.opened > ul { visibility:visible; } .h_menu.megamenu:not(.touch) > li:hover > a, .h_menu.megamenu.touch > li.opened > a { position:relative; } .h_menu.megamenu.touch > li > ul a.opened { color:#3ecbe7; } .h_menu.megamenu li.level0.children > a::after { content:""; visibility:hidden; transition-delay:0.2s; } .h_menu.megamenu:not(.touch) li.level0.children:hover > a::after, .h_menu.megamenu.touch li.level0.children.opened > a::after { position:absolute; bottom:-1em; left:50%; transform:translateX(-50%); -ms-transform:translateX(-50%); border-width:1em 1em 0 1em; border-color:#3ecbe7 transparent transparent; border-style:solid; z-index:101; content:""; visibility:visible; transition-delay:0.2s; } .h_menu.megamenu ul.level1 { background-color:#000000; padding:1em 2em; box-shadow:0px 8px 8px -8px #aaaaaa; display:block; visibility:hidden; transition-delay:0.2s;} .h_menu.megamenu li.level1 { display:inline-block; vertical-align:top; margin-top:0.5em; width:19.5%; } .h_menu.megamenu li.level1 > a { padding-bottom:0; color:#3ecbe7; font-weight:bold; min-height: 3.5em; } .h_menu.megamenu li.level2 { padding:0.4em 0; } .h_menu.megamenu li.level2 > a { padding:0 1em; } .h_menu.megamenu ul.level2 ul { display:none; } .h_menu .open-submenu { display:none; } /*Grafiken*/ .h_menu a:not(.level1).smallgraphic > .img { display:inline-block; vertical-align:middle; width:32px; height:2em; position:relative; } .h_menu a:not(.level1).smallgraphic > .img > img { max-width:100%; max-height:100%; width:auto; height:auto; position:absolute; left:0; top:50%; -ms-transform:translateY(-50%); transform:translateY(-50%); } .h_menu a:not(.level1).smallgraphic > .text { padding-left:8px; } .h_menu a:not(.level1) .text { display:inline-block; vertical-align:middle; } .h_menu a.level1.smallgraphic > .img { display:block; } .h_menu a.level1.smallgraphic > .img > img { max-width:100%; max-height:10em; width:auto; height:auto; display:block; } .h_menu a.level1.smallgraphic > .text { display:block; margin-top:0.4em; } .desktop_nav { display:none; } #header_content { height:0; } #topnav_content, #topnav_sub_content { margin:0 auto; } /*vertkales Menue*/ body.desktop .v_menu { border-style:solid; border-width:1px 1px 0 1px; border-color:#18515b; } @media (min-width:880px){ .v_menu { border-style:solid; border-width:1px 1px 0 1px; border-color:#18515b; } } .v_menu a span.bezeichung { display:block; transition:transform 0.2s; transition-delay:0.2s; } ul.v_menu, .v_menu ul { padding:0; margin:0; list-style-type:none; } .v_menu ul:not(.level0) { display:none; } .v_menu li { position:relative; padding:0; margin:0; display:block; background-color:#000000;} .v_menu li:not(.level0).active > a { color:#3ecbe7; } .v_menu li > a { padding:1em; display:block; text-decoration:none; } .v_menu li a, .v_menu_mobile { border-bottom:1px solid #18515b; } .v_menu li.inpath a { border-bottom:0; } .v_menu ul a { border-bottom:0; } .v_menu li.inpath ul ul { border-top:0; } .v_menu li.inpath a { } .v_menu li.inpath ul a { border-bottom:0; } .v_menu li ul { background-color:#000000; } .v_menu li > ul > li { padding-left:1em; } .v_menu li.level0 ul { display:none; } .v_menu li.level0 ul.open_nav { display:block; } .v_menu li.active > ul { display:block; } .v_menu li.inpath > ul { display:block; } .v_menu li.active a.level0, .v_menu li.inpath a.level0 { background-color:#000000;; color:#3ecbe7; } .v_menu li.level0.inpath > .mobile-mega-opener { color:#3ecbe7; } .v_menu li.level1 { border-bottom:1px solid #18515b; } .v_menu ul ul { border-bottom:0; } .v_menu ul.level1 li { background-color:transparent; background-repeat:no-repeat; } .v_menu ul.level1 li { font-weight:normal; } .v_menu li li.active a { background-color:transparent; background-repeat:no-repeat; } .v_menu li li.active li a { background-image:none; } .v_menu span { background-repeat:no-repeat; } /*.v_menu a.level1 { color:#3ecbe7; }*/ .v_menu a.level2 span { margin-left:8px; text-indent:-8px; } .v_menu a.level3 span { margin-left:8px; text-indent:-8px; } .v_menu a.level4 span { margin-left:7px; text-indent:-7px; } .v_menu .smallgraphic { } .v_menu .smallgraphic > .img { display:inline-block; vertical-align:middle; width:32px; height:2em; position:relative; } .v_menu .smallgraphic > .img > img { max-width:100%; max-height:100%; width:auto; height:auto; position:absolute; left:0; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .v_menu .smallgraphic > .text { display:inline-block; width:calc(100% - 40px); padding-left:8px; vertical-align:middle; } .v_menu li.children > a { position:relative; padding-right:30px; } .v_menu .open-submenu { display:block; height:35px; position:absolute; right:5px; top:0; cursor:pointer; border-style:none; border-width:0 0 0 1px; } .v_menu .open-submenu::before,.v_menu .open-submenu::after { top: 42%; left:42%; } .v_menu li.level0.inpath > .open-submenu, .v_menu li.level0.inpath > .open-submenu:hover, .v_menu li.level0.active > .open-submenu:hover { color:#3ecbe7; } /*Grafiken*/ .v_menu .graphicfirst > span { } .v_menu .graphicfirst > span > img { max-height:2em; max-width:100%; } /*mehr Anzeigen*/ .h_menu li.morelink, .h_menu.megamenu li.morelink, .v_menu li.morelink, .morelink { display:none; } .h_menu.megamenu li.level1:nth-child(9) ~ li { display:none; } .h_menu.megamenu li.level1:nth-child(9) + li ~ .morelink { display:inline-block; } .h_menu.megamenu li.level2:nth-child(5) ~ li { display:none; } .h_menu.megamenu li.level2:nth-child(5) + li ~ .morelink { display:inline-block; } /*kleines Menue*/ .mobile-header-icon { margin-left:0.2em; font-size:1.7em; padding:0.4em; } .button-mobile-cart { position:relative; } .inventory_number { position:absolute; top:-3px; right:0; background-color:#000000;; padding:0.07em 0.3em; border-radius:50%; color:#3ecbe7; font-weight:bold; font-size:0.7em; } /*mobiles Menue*/ #close_menu, #close_filter, #close_user { display:block; padding:5px; font-size:2em; cursor:pointer; text-align:center; } #mobileNavigationBox { padding:8px 10px; } #mobileSearchNavigation { width:100%; z-index:2000; top:0; left:0; } body.desktop #mobileSearchNavigation { border:none; } #mobile_logo { margin-left:0.6em; display:block; background-size:contain; background-repeat:no-repeat; background-position:center; } .slideleft, .slideright { position:fixed; top:0; z-index:2100; margin:0; width:250px; height:100%; border:1px solid #18515b; box-shadow:0 0 10px #3ecbe7; z-index:9001; } .slideleft { left:-258px; } .slideright { right:-258px; } .slideleft, .slideright { background-color:#000000; overflow-y:scroll; } body.desktop .slideleft, body.desktop .slideright { background-color:transparent; overflow-y:visible; } @media (min-width:880px){ .slideleft, .slideright { background-color:transparent; overflow-y:visible; } } #mobileNavigation.slideleft { display:block; padding-top:0; } #mobileNavigation > ul > li, #mobileNavigationTrigger { cursor:pointer; } #topnav_placeholder, #nav6_placeholder, #mobileNavigation { display:none; } body.desktop #topnav_placeholder, body.desktop #nav6_placeholder, #mobileNavigation { display:block; } @media (min-width:880px){ #topnav_placeholder, #nav6_placeholder { display:block; } } /** Breadcrumb **/ #breadcrumb { color:#3ecbe7; font-size:0.9em; white-space:nowrap; } #breadcrumb div { display:inline; } #breadcrumb a { color:#3ecbe7; } #markenauswahl + #breadcrumb > div { padding-left:15px; padding-top:0.9em; vertical-align:middle; } /** Filternavigation **/ .filtergroup { padding:0.8em 0; } .filtergroupcap { font-weight:bold; border-bottom:1px solid #18515b; } .filtergroupcap > div { padding-bottom:0.8em; margin:0.8em 0.8em 0 0.8em; } .filtergroupcap.morearrow { padding-left:2.8em; } .filtergroupcap.morearrow::before { left:0.8em; } .filtergroupcap.morearrow > div { margin-left:0; } .filtergroupitems { padding:0.8em 0; } .filteritem { padding:1px; display:block; margin-bottom:0.4em; position:relative; } .filteritem .deactivate { display:none; position:absolute; top:-1px; right:-1px; background-color:#000000; color:#3ecbe7; border:1px solid #3ecbe7; padding:2px; font-size:0.8em; } .filteritem.active .deactivate { display:block; } .filteritem.type0 { text-decoration:none; } .filteritem.type0:not(.active):hover { background-color:#18515b; } .filteritem.type0.active { border-bottom:1px solid #3ecbe7; color:#3ecbe7; font-weight:bold; } .filteritem.type1 { cursor:pointer; } .filteritem.type1:not(.active):hover { background-color:#18515b; } .filteritem.type1.active { border-bottom:1px solid #3ecbe7; color:#3ecbe7; font-weight:bold; } .filteritem.type2 { display:inline-block; border:1px solid #18515b; } .filteritem.type2.active { border:1px solid #3ecbe7; } .filteritem.type3 > label { cursor:pointer; } .filteritem.type3:hover { background-color:#18515b; } .filteritem.type3.active > label { border-bottom:1px solid #3ecbe7; color:#3ecbe7; font-weight:bold; } .filteritem.type4 > label { cursor:pointer; } .filteritem.type4:hover { background-color:#18515b; } .filteritem.type4.active > label { border-bottom:1px solid #3ecbe7; color:#3ecbe7; font-weight:bold; } .filteritem.type5 { cursor:pointer; } .filteritem.type5.active { color:#3ecbe7; font-weight:bold; } .morefilteritemsFooter { cursor:pointer; } /** Artikel-Grid **/ /* catalog grid */ .catalog.grid article::after, .catalog.grid property::after { clear:both; content:""; display:block; } .catalog.grid article .pic { display:block; float:left; position:relative; width:100%; overflow:hidden; } .catalog.grid article .pic > figure > img{ max-height:200px; } .catalog.grid article .desc { float:left; width:100%; /*overflow:hidden;*/ } .catalog.grid article .desc::after { clear:both; content:""; display:block; } .catalog.grid article .desc-left { float:left; width:100%; } .catalog.grid article .desc-right { float:right; width:100%; } .catalog.grid section.childitem { width:100%; } .catalog.grid section.childitem::after { clear:both; content:""; display:block; } .catalog article .agerating_s { position:absolute; bottom:0.8em; left:0.8em; } /*catalog design*/ .catalog.design article { border-color:#18515b; border-style:solid; border-width:1px 0 0; background:#000000; background:linear-gradient(to right, #000000 10%,#000000 65%); background:-moz-gradient(left, #000000 10%,#000000 65%); background:-webkit-linear-gradient(left, #000000 10%,#000000 65%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#000000, endColorstr=#000000 ,GradientType=1 ); } .catalog.design.cart article { border-width:1px 1px 1px 1px; margin-bottom:-1px; } .catalog.design:not(.cart) article { margin-top:15px; border-width:1px; } .catalog.design:not(.cart) article.child { border-width:0; } .catalog.design article .pic { padding:0.8em; text-decoration:none; } .catalog.design article .desc { padding:0.8em; } .catalog.grid article .desc-right { margin-top:15px; } .catalog.design section.childitem { border-top:1px solid #18515b; padding-top:15px; margin-top:15px; } .catalog article .agerating_s { position:absolute; bottom:0.8em; left:0.8em; } /*tiles grid*/ .tiles.grid { display:-ms-flexbox; display:-webkit-flexbox; display:flex; flex-wrap:wrap; -ms-flex-wrap:wrap; } .tiles.grid > * { width:100%; } /*tiles design*/ .tiles.design > * { padding-top:16px; } /*catblog grid*/ .catblog.grid article > div { position:relative; height:100%; } .catblog.grid article > .position-and-dimensions-anchor > div { height:100%; position:relative; } .catblog.grid article .item-image { position:relative; } .catblog.grid article .pic { display:block; position:relative; height:200px; overflow:hidden; } .catblog.grid article .pic figure { display:flex; align-items:center; justify-content:center; } .catblog.grid article .prodpic { width:auto; height:auto; max-width:100%; max-height:100%; } .catblog.grid .productname { height:5em; position:relative; } .catblog.grid .productname > a, .catblog.grid .productname > span { display:block; position:absolute; left:0; top:50%; width:100%; transform:translateY(-50%) scale(1.01); transform-origin:0 0; /*transform:translateY(-50%); -ms-transform:translateY(-50%); zoom:1.01;*/ } .catblog.grid article .desc { width:100%; } .catblog.grid .bottom-container { position:absolute; bottom:0; left:0; } /*catblog design*/ .catblog.design article > .position-and-dimensions-anchor > div { border:1px solid #18515b; background-color:#000000; padding-bottom:50px; transition:box-shadow 0.3s, transform 0.3s; } .catblog .item-image { background-color:#000000; } .catblog.design article .pic { padding:0.8em; text-decoration:none; } .catblog.design .productname:not(.carousel-text) { background-color:#18515b; padding:0.5em; text-align:center; } .catblog.design .productname:not(.carousel-text) > a { padding:0.5em; } .catblog.design article .desc { padding:0.8em 0.8em 0; text-align:center; } .catblog.design .bottom-container { padding:0.8em; width:100%; } .catblog .rating { position:absolute; bottom:0.8em; left:0; width:100%; } .catblog article .agerating_s { display:inline-block; } .catblog .legalinfo { } .catblog .legalinfo > *:not(:last-child) { margin-right:0.4em; } .catblog .var_image { visibility:hidden; opacity:0; transition:opacity 0.5s; } .catblog .var_image img { border:1px solid transparent; } @media (pointer: fine){ .catblog .var_image img:hover { border-color:#18515b; } .catblog article:hover .var_image { visibility:visible; opacity:1; } .catblog.design article:hover > .position-and-dimensions-anchor > div { box-shadow:0 8px 16px #aaaaaa; } .catblog.design article:hover .bottom-container { background-color:#000000; } } /*catblog Inhalte*/ .catblog .oldprice { display:inline; } .catblog .oldprice + .itemprice { display:inline; } /* subnavi */ .subnavi .pic { display: flex; align-items:center; justify-content:center; } /*subnavi grid*/ .subnavi.grid .pic img { max-height:120px; max-width:100%; width:auto; } .subnavi .item > div { height:100%; } .subnavi.grid .pic:not(:empty) { height:120px; } /*subnavi design*/ .subnavi.design .pic { text-align:center } .subnavi.design .item > div { border:1px solid #18515b; background-color:#000000; padding:0.8em; overflow:hidden; position:relative; } .subnavi.design .title { padding-top:0.8em; font-weight:bold; text-align:center; } .subnavi.design .text { margin-top:0.8em; text-align:center; } .subnavi.design .text img { max-width:100%; } /** Produktdetail **/ article.product > section { padding:0.8em 0; } .product .picture { float:left; width:100%; } .product .details { float:right; width:100%; margin-top:10px; } .product .details .border-and-padding { background-color:#000000; border:1px solid #18515b; } .product .functions > .border-and-padding { border:1px solid #18515b; background-color:#000000; padding:0.8em; } #product #form_eingabe > *:first-child { margin-top:0; } .product .priceandmore > *:first-child { margin-top:0; } /* UVP */ .uvp-ehemaliger { display:none; } /* Artikelbilder in Detailansicht */ .apics { text-align:center; position:relative; top:0; left:0; margin-top:-1px; } .apics:empty { margin-top:0; } .apics #detailimage { text-align:center; width:100%; } .apics .detailimage_wrap { position:relative; width:100%; } .apics .detailimage_wrapi { position:absolute; top:0; left:0; bottom:0; right:0; } .apics #slider { height:52px; transition:height 1.0s; overflow:hidden; } .apics #detailimage .pic { text-align:center; width:100%; vertical-align:middle; position:relative; } .apics #detailimage .pic:empty { padding-top:1px; } .apics #detailimage span.makeheight { display:inline-block; width:0; } .apics #detailimage .detailimagea_v { left:0 !important; height:auto !important; } .apics #detailimage .detailimagea_v { visibility:visible !important; } .apics #detailimage { position:relative; top:0; left:0; } .apics #detailimage .detailimage { text-align:center; width:100%; top:0; visibility:hidden; height:0; position:relative; left:-1000000px; max-width:100%; } #slideOverlay { height:100%; width:3em; position:absolute; top:0; right:0; z-index:1000; box-shadow:-3px 0 2px -4px #3ecbe7; border-left:1px solid #000000; } #slideOverlay::after { content:'\f338'; font-family:'Font Awesome 5 Free'; font-weight:900; font-size:4em; color:#000000; text-shadow:0 0 2px #3ecbe7; position:absolute; top:50%; left:50%; transform:translateY(-50%) translateX(-50%); } .slider { position:relative; overflow:hidden; height:52px; } .slider > div { position:absolute; left:0; top:0; width:25000px; text-align:left; } .sliderButton { position:absolute; top:0; } .sliderLeft { left:0; } .sliderRight { right:0; } .slider img { opacity:0.7; } .slider img:hover, .slider .active-img > img { opacity:1; } #slider img { max-height:52px; } #detailimage_zoom { position:absolute; top:0; left:0; } .elevatezoom_detail { max-width:100%; } .aslimbox img { max-width:100%; } /*elevateZoomPlus*/ .zoomWindowContainer > div { height:100% !important; width:100% !important; } .zoomWindow { background-color:#000000; } /*magicZoomPlus*/ .slidebar .slider a.mz-thumb img { opacity:1; } /* crossselling */ .catalog.product article .pic { padding:0 0.8em 0 0; min-height:auto; height:3em; width:auto; } /* Staffelrabatt */ .pricescale { position:relative; } .pricescale .pricescale_visible { cursor:pointer; padding:5px 0; font-weight:bold; font-size:1.2em; } .pricescale .pricescale_table { display:none; transform:translateX(0); -ms-transform:translateX(0); } .pricescale .pricescale_table table td { padding:5px; border:0 solid #18515b; } .pricescale .pricescale_table table td:last-child { border:none; padding-left:15px; } .pricescale .pricescale_table table td:first-child { border-right-width:1px; } .pricescale .pricescale_table table td:nth-child(2) > span { display:block; } .pricescale_saving, .pricescale .pricescale_baseprice .indicator:empty, .pricescale .pricescale_baseprice .indicator:empty + span { display:none; } .pricescale .pricescale_baseprice { font-size:0.8em; white-space:nowrap; } .pricescale .show_table { display:inline-block; } .pricescale .show_table::before { content:"\f0fe"; font-family:"Font Awesome 5 Free"; font-weight:300; padding-right:5px; } .pricescale .show_table::after { content:""; display:none; clear:right; } .pricescale.show_all .pricescale_table { display:inline-block; } .pricescale.show_all .show_table::before { content:"\f146"; } .catblog .item.show_all { overflow:visible; z-index:900; } .catblog .item.show_all .inneritem { overflow: visible; min-height: 100%; height: auto; } .catalog .pricescale_table { text-align:center; } /** merken oder nicht merken **/ .memorise.gemerkt .can-memorise, .memorise:not(.gemerkt) .is-memorise { display:none; } /** Butten zum Produkt **/ .toProductButton { display:none; position:absolute; bottom:3em; left:0; width:100%; } /* .toProductButton { display:block; } .catblog.design article > .position-and-dimensions-anchor > div { padding-bottom:6em; } */ /** Suche **/ #search { position:static; top:42px; left:41%; width:100%; z-index:100; padding:0 10px 8px 10px; } body.desktop #search { position:absolute; top:56px; width:300px; padding:0; } @media (min-width:880px){ #search { position:absolute; top:56px; width:300px; padding:0; } } #searchi { position:relative; } #SearchStr, #SearchStrUnderlay { width:100%; padding-right:2.6em; margin-top:0; } #SearchStrUnderlay { z-index:-1; position:absolute; top:0; } .search button[type="submit"] { position:absolute; top:50%; transform:translateY(-50%); right:0.6em; cursor:pointer; outline:none; display:inline-block; width:1em; height:1em; border:0; padding:0; } .search button[type="submit"]::before { content:'\f002'; } .search button[type="submit"]:hover, .search button[type="submit"]:active { color:#3ecbe7; } /** Bestellungen / Retoure **/ .order-open > div { text-align:center; padding:5px; margin:0; } .order-open > div > span { transition:transform 0.5s; } .order-open > div.show > span { transform:rotate(180deg); -ms-transform:rotate(180deg); } .order-overview .caption { font-weight:bold; } .order-state .fa-check { color:green; } .order-address-content { z-index:10; top:1em; } .order-address:hover .order-address-content { display:block; } .order-address-content, .order-more-numbers { line-height:1.5em; } .order-pay .order-discount { top:1em; } .order-pay:hover .order-discount { display:block; } .order-info .order-orderNr { position:relative; text-align:right; font-style:italic; } .order-info .order-orderNr > div:empty { display:none; } .order-info .order-orderNr:hover .order-more-numbers { display:block; } .order-content { display:none; } .order-position:first-child { border:none; } .order-position .order-pos-pic img { max-width:100%; max-height:150px; } .order-position.child { border-top:none; } .retoureadrblock:first-child { border:none; } .order-retoure-pos { padding-left:3em; } .order-retoure-pos .retoure-pos-pic img { max-width:100%; width:100%; } .retoure-check-pos:not(:first-child) { margin-top:15px; } .retoure-check-pos-pic img { max-width:100%; width:100%; } /** Konfiguratorfilter **/ #konfigurator { } #konfigurator .ebene { padding:0; margin:0; height:0; opacity:0; overflow:hidden; transition:opacity 0.5s; position:relative; } #konfigurator .ebene.showConfiguratorLevel { height:auto; opacity:1; padding:15px 0; margin:15px 0; } #konfigurator .ebene::after { clear:left; content:""; display:block; } #konfigurator .ebene .filterLevelName { text-align:center; font-size:2em; margin-bottom:0.5em; padding-bottom:0.5em; border-style:solid; border-width:0 0 1px 0; border-color:#18515b; } #konfigurator .ebene .filterLevelName > span { } #konfigurator .ebene .filterWrapper { width:100%; position:relative; } #konfigurator .ebene .filter { padding:15px; } #konfigurator .filter > a { display:block; overflow:hidden; width:100%; height:100%; text-align:center; text-decoration:none; position:relative; } #konfigurator .filter > a:focus { outline:0; } #konfigurator .filter > a > img { max-width:250px; width:100%; height:auto; display:inline; border-radius:50%; border:2px solid #18515b; } #konfigurator .filter > a > span { display:block; width:100%; font-size:1.3em; font-weight:bold; padding:10px 1.5em; } #konfigurator .filter > a.selected, #konfigurator .filter > a.selected:hover { color:#3ecbe7; } #konfigurator .filter > a.selected > img { border-color:#3ecbe7; } #konfigurator .slider-item.selected { border:2px solid red; } /** Datenschutzseite **/ #datenschutz #middle > div:not(#headline) { line-height:1.8em; } #datenschutz ol { padding:0; margin:0; counter-reset:section; list-style-type:none; } #datenschutz ol > li { margin-top:2em; font-weight:bold; font-size:1.2rem; } #datenschutz ol > li::before { counter-increment:section; content:counters(section,'.') '. '; } #datenschutz ol > li > * { font-weight:normal; font-size:1rem; } #datenschutz ol > li > p:first-child { font-weight:bold; font-size:1.2rem; display:inline; } #datenschutz ol > li > ol { margin-left:1em; } #datenschutz ol > li ul { list-style-type:square; } #datenschutz dt { margin:1em 0 0.5em 0; font-weight:bold; } #datenschutz .datenschutzbeauftragter p { margin:0.1em 0; } /** Empfehlungen RDE **/ .rdecontent .item { position:relative; } .rdecontent .offer-info { position:absolute; top:0; left:0; padding:0.5em; background:rgba(255,255,255,0.8); } .rdecontent .eek { height:1.5em; } .rdecontent .productdata { line-height:1.5em; } .rde.re_catblog .productname { height:auto; } .rde.re_catalog { margin-top:15px; } .rde + .rde { margin-top:15px; } /*** spezielle Elemente ***/ /** Icons **/ /*Font Awesome*/ /*! * * Font Awesome Free - 5.7.0 * License - Font Awesome Free license: https://fontawesome.com/license/free. * Icons: CC BY 4.0 License */ /* FONT PATH * -------------------------- */ @font-face { font-family:'Font Awesome 5 Free'; font-style:normal; font-weight:900; font-display:block; src: url("fonts/fa-solid-900.eot"); src: url("fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("fonts/fa-solid-900.woff2") format("woff2"), url("fonts/fa-solid-900.woff") format("woff"), url("fonts/fa-solid-900.ttf") format("truetype"), url("fonts/fa-solid-900.svg#fontawesome") format("svg"); } @font-face { font-family:'Font Awesome 5 Free'; font-style:normal; font-weight:400; font-display:block; src: url("fonts/fa-solid-400.eot"); src: url("fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("fonts/fa-regular-400.woff2") format("woff2"), url("fonts/fa-regular-400.woff") format("woff"), url("fonts/fa-regular-400.ttf") format("truetype"), url("fonts/fa-regular-400.svg#fontawesome") format("svg"); } @font-face { font-family:'Font Awesome 5 Free Brands'; font-style:normal; font-weight:400; font-display:block; src: url("fonts/fa-brands-400.eot"); src: url("fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("fonts/fa-brands-400.woff2") format("woff2"), url("fonts/fa-brands-400.woff") format("woff"), url("fonts/fa-brands-400.ttf") format("truetype"), url("fonts/fa-brands-400.svg#fontawesome") format("svg"); } /*Funktionen*/ .fa { display: inline-block; font-family:'Font Awesome 5 Free'; font-style:normal; text-rendering:auto !important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transform:translate(0, 0); -ms-transform:translate(0, 0); font-weight:900 !important; } .far { display: inline-block; font-family:'Font Awesome 5 Free'; font-style:normal; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transform:translate(0, 0); -ms-transform:translate(0, 0); font-weight:400; } .fab { display: inline-block; font-family:'Font Awesome 5 Free Brands'; font-style:normal; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transform:translate(0, 0); -ms-transform:translate(0, 0); font-weight:400; } .pause_icon::before { content:"\f04c"; } /*Pauschen*/ .play_icon::before { content:"\f04b"; } /*Playchen*/ .microphone_icon::before { content:"\f130"; } /*Microfoenchen*/ .microphone_slash_icon::before { content:"\f131"; } /*Microfoenchen mit Slash*/ .wishlist_icon-a::before { content:"\f02e"; } /*Faehnchen*/ .wishlist_icon-b::before { content:"\f02e"; } /*Faehnchen voll*/ .availability_icon::before { content:"\f0c8"; } /*Verfuegbarkeit*/ .cart_icon::before { content:"\f07a"; } /*Warenkoerbchen*/ .delete_icon::before { content:"\f2ed"; } /*Muelltonnchen*/ .refresh_icon::before { content:"\f2f1"; } /*Kreispfeilchen*/ .save_icon::before { content:"\f0c7"; } /*Diskettchen*/ .forbidden_icon::before { content:"\f05e"; } /*Verbotenschildchen*/ .house_icon::before { content:"\f015"; } /*Haeuschen*/ .check_icon::before { content:"\f00c"; } /*Haekchen*/ .close_icon::before { content:"\f00d"; } /*Kreuzchen*/ .pencil-icon::before { content:"\f303"; } /*Stiftchen*/ .loading-icon::before, .spinner_icon::before { content:"\f110"; } /*Kringelchen*/ .pdf_data-icon::before { content:"\f1c1"; } /*pdf-auf-Blaettchen*/ .zip_data-icon::before, ._data-icon::before { content:"\f1c6"; } /*zip-auf-Blaettchen*/ .video_data-icon::before { content:"\f1c8"; } /*video-auf-Blaettchen*/ .user_icon::before { content: "\f007"; } /*Maennchen*/ .search_icon::before { content: "\f002"; } /*Lupchen*/ .envelope_icon::before { content:"\f0e0"; } /*Umschlagchen*/ .phone_icon::before { content:"\f095"; } /*Telefonchen*/ .fax_icon::before { content:"\f1ac"; } /*Faxchen*/ .sign-in_icon::before { content:"\f2f6"; } /*Anmeldenchen*/ .sign-out_icon::before { content:"\f2f5"; } /*Abmeldenchen*/ .guenstiger_icon:before { content:"\f155"; } /*Dollarchen*/ .recommend_icon::before { content:"\f164"; } /*Daeumchen*/ .percent_icon::before { content:"\f295"; } /*Prozentchen*/ .marker_icon::before { content:"\f3c5"; } /*Markerchen*/ .shop_icon::before { content:"\f54f"; } /*Ladenchen*/ .menu_icon::before { content:"\f0c9"; } /*Menuechen*/ .list_icon::before { content:"\f00b"; } /*Listchen*/ .tiles_icon::before { content:"\f00a"; } /*Kachelchen*/ .smallList_icon::before { content:"\f0ca"; } /*kleines Listchen*/ .id_icon::before { content:'\f2c2'; } /*IDchen*/ .gift_icon::before { content:'\f06b'; } /*Geschenkchen*/ .sticky_icon::before { content:'\f249'; } /*Notizchen*/ .calendar_icon::before { content:'\f073'; } /*Kalenderchen*/ .comment_icon::before { content:'\f075'; } /*Textchen*/ .truck_icon::before { content:"\f0d1"; } /*LKWchen*/ .map_icon::before { content:"\f279"; } /*Kaertchen*/ .mapman_icon::before { content:"\f21d"; } /*Nananana Mapman*/ .poll_icon::before { content:"\f681"; } /*Statistikchen*/ .shop_icon::before { content:"\f54f"; } /*Shopchen*/ .doc_icon::before { content:"\f15c"; } .link_icon::before { content:"\f35d"; } .cog_icon::before { content:"\f4fe"; } /*Zahnraedchen an Maennchen*/ .nakedCog_icon::before { content:"\f013"; } /*Zahnraedchen*/ .location_arrow::before { content:"\f124"; color:#4285F4; } /* blaues Ortspfeilchen */ .plus_icon::before { content:"\f067"; } .plus-square_icon::before { content:"\f0fe"; } .minus_icon::before { content:"\f068"; } .minus-square_icon::before { content:"\f146"; } .cube_icon::before { content:"\f1b2"; } /*Wuerfelchen*/ .money_icon::before { content:"\f3d1"; } /*Geldscheinchen*/ .card_icon::before { content:"\f09d"; } /*Kaertchen*/ .sticker_icon::before{ content:"\f0a3"; } .pickup_icon::before { content:"\f4ce"; } /*Abholung*/ .dollar_alt_icon::before { content:"\f651"; } /*Dollar in Blase*/ .dollar_hand_icon::before { content:"\f4c0"; } /*Dollar in Hand*/ .leaf_icon::before { content:"\f06c"; } /*Baumblaettchen*/ .crown_icon::before { content:"\f521"; } /*Kroenchen*/ .file_icon::before { content:"\f574"; } .mesure_icon::before { content:"\f546"; } /*Linealchen Ecke*/ .mesure2_icon::before { content:"\f548"; } /*Linealchen hoch*/ .back_icon::before { content:"\f060"; } /*Zurueckchen*/ .bike_icon::before { content:"\f84a" } /*Fahrradchen*/ .speech_icon::before { content:"\f075"; } .speechd_icon::before { content:"\f4ad"; } .print_icon::before { content:"\f02f" } /*Druckerchen*/ .minimize_icon::before { content:"\f2d1"; } .maximize_icon::before { content:"\f2d0" } .worldmap::before { content:"\f57c"; font-family:"Font Awesome 5 free"; display:block; font-weight:bold; color:#dddddd; position:absolute; } /*Satzzeichen*/ .star_icon::before { content:"\f005"; } /*Sternchen*/ .warning_icon::before { content:"\f071"; } /*Hinweischen*/ .info_icon::before { content:"\f05a"; } /*Ausrufezeichen in Kullerchen*/ .nakedInfo_icon::before { content:"\f129"; } /*Ausrufezeichenchen*/ .question_icon::before { content:"\f059" } /*Fragechen*/ /*Richtungen*/ .down_icon::before { content:"\f0d7"; } /*Runter-Pfeilchen*/ .up_icon::before { content:"\f0d8" } /*Hoch-Pfeilchen*/ .up-sqr_icon::before { content:"\f151" } /*Hoch-Pfeilchen im Kasten*/ .to-start_icon::before { content:"\f048"; } /*Ganz-Links-Pfeilchen*/ .to-end_icon::before { content:"\f051"; } /*Ganz-Rechts-Pfeilchen*/ .next_icon::before { content:"\f04b"; transform:scaleX(0.7); -ms-transform:scaleX(0.7); display:inline-block; } /*Rechts-Pfeilchen*/ .prev_icon::before { content:"\f04b"; transform:rotate(180deg) scaleX(0.7); -ms-transform:rotate(180deg) scaleX(0.7); display:inline-block; } /*Links-Pfeilchen*/ .angle-r_icon::before { content:"\f105"; } /*Rechts-Spitzchen*/ .angle-l_icon::before { content:"\f104"; } /*Links-Spitzchen*/ .angle-u_icon::before { content:"\f106"; } /*Oben-Spitzchen*/ .angle-d_icon::before { content:"\f107"; } /*Unten-Spitzchen*/ .arrow-down_icon::before { content:"\f063" } /*Pfeilchen nach unten*/ .arrow-up_icon::before { content:"\f062"; } /*Pfeilchen nach oben*/ .double-arrow_icon::before { content:"\f338" } /*Pfeilchen hoch runter*/ /*Marken .fab*/ .amazonpay_icon::before { content:"\f42c"; } .amazon_icon::before { content:"\f270"; } .facebook_icon::before { content:"\f39e"; } .twitter_icon::before { content:"\f099"; } /*icon colors*/ .icon-green { color:green; } .icon-yellow { color:yellow; } .icon-red { color:red; } /*icon position*/ .icon-before-text { display:flex; align-items:center; } .icon-before-text > .fa { margin-right:0.4em; } /** Effekte **/ /* Animationen */ .bounce_down { animation:bouncer_down 500ms ease-out alternate; } @keyframes bouncer_down { 0% { top:0; } 100% { top:1em; } } .bounce_up { animation:bouncer_up 500ms ease alternate; } @keyframes bouncer_up { 0% { bottom:0; } 100% { bottom:1em; } } .spin { animation:spinner 1500ms linear; } @keyframes spinner { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } .spin_rev { animation:spinner_rev 1500ms linear; } @keyframes spinner_rev { 0% { transform:rotate(0deg); } 100% { transform:rotate(-360deg); } } .pulse { animation:pulsar 1500ms ease-out } @keyframes pulsar { from { transform:scale(1); opacity:1; } to { transform:scale(1.5); opacity:0; } } .animate_infinite, .loop { animation-iteration-count:infinite; } /*Vue-Transition*/ .slider-enter-active, .slider-leave-active { transition:height 0.3s ease-in-out; overflow:hidden; } .slider-enter, .slider-leave-to { height:0; } /* Filter */ .filter_gray { filter:grayscale(100); } .with-blur { filter:blur(7px) } /* Hover */ @media (pointer: fine){ .hover-effect { transition:transform 0.3s, box-shadow 0.3s; } .hover-effect:hover { transform:translateY(-7px); box-shadow:0 0 10px #aaaaaa; } } .disable.with-dark::after { background-color:rgba(85,85,85,0.8); } /* Verfuegbarkeitsanzeige */ .availability .icon { position:relative; margin-left:0.4em; } .availability .icon:before { content:"\f0c8"; font-size:14px; } .availability .icon:after { content:"\f0c8"; position:absolute; top:1px; left:1px; font-size:12px; } .availability .gruen { color:#03bf00; } /*Hauptfarbe*/ .availability .gruen.fa:before { color:#03A200; } /*Rand*/ .availability .gelb { color:#FFD42C; } .availability .gelb.fa:before { color:#D8B324; } .availability .rot { color:#d30000; } .availability .rot.fa:before { color:#940000; } .availability .icon + .text { margin-left:0.4em; } .availability .text[data-content=""] { display:none; } .cartpos .availability span { font-weight:bold; } /* Bewertungssternchen */ #product_stars:hover > #stars_view { display:table; } #stars_view { position:absolute; top:20px; right:0; display:none; width:250px; z-index:2000; } .evaluation span { margin-right:2px; } .evaluation_row_quant { padding-left:5px; } .evaluation_row_bg { width:60%; position:relative; height:20px; margin:4px 0; } .evaluation_row_bg:last-child { margin-bottom:0; } .evaluation_row_bg:first-child { margin-top:0; } .evaluation_row { height:20px; background-color:#ffd42c; position:relative; } .evaluation_row:after { display:block; height:100%; width:100%; content:''; position:absolute; top:0; left:0; background: -moz-linear-gradient(top, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.75)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,0.75) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,0.75) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,0.75) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,0.75) 0%,rgba(255,255,255,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */ } #star_selection { unicode-bidi:bidi-override; direction:rtl; display:inline-block; } #star_selection > span { color:#18515b; position:relative; display:inline-block; margin:0 1px; } #star_selection > span:hover:before, #star_selection > span:hover ~ span:before, #star_selection > span.eval_mark:before, #star_selection > span.eval_mark ~ span:before, .evaluation .star_full { color:#ffd42c; } .star_full { color:#ffd42c; } .star_empty { color:#dddddd; } /* Admin Icon */ #adminicon { position:fixed; bottom:0; left:0; padding:4px 4px 24px 8px; } #adminicon span:after { content:"\f0ad"; font-size:2em; } #adminicon.isadmin_ { display:none; } /** * Swiper 9.4.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2023 Vladimir Kharlampidi * * Released under the MIT License * * Released on: June 13, 2023 */ /* FONT_START */ @font-face { font-family: 'swiper-icons'; src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA'); font-weight: 400; font-style: normal; } /* FONT_END */ :root { --swiper-theme-color: #000000; /* --swiper-preloader-color: var(--swiper-theme-color); --swiper-wrapper-transition-timing-function: initial; */ } .swiper, swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide, swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } a.swiper-slide:focus-visible:after, a.sliderimage:focus-visible:after { position: absolute; content: ''; top: 0; left: 0; bottom:0; right: 0; z-index: 999; box-shadow: inset 0 0 0 2px #271e18; border-radius: 3px; } a.sliderimage:focus-visible { position: relative; } a.sliderimage:focus-visible:after{ bottom:3px; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 3D Effects */ .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } /* CSS Mode */ .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-horizontal.swiper-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-vertical.swiper-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } .swiper-centered > .swiper-wrapper::before { content: ''; flex-shrink: 0; order: 9999; } .swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; transform: translateZ(0); } .swiper-virtual.swiper-css-mode .swiper-wrapper::after { content: ''; position: absolute; left: 0; top: 0; pointer-events: none; } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { height: 1px; width: var(--swiper-virtual-size); } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { width: 1px; height: var(--swiper-virtual-size); } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-top-offset: 50%; --swiper-navigation-sides-offset: 10px; --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: var(--swiper-navigation-top-offset, 50%); width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size) / 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev.swiper-button-hidden, .swiper-button-next.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-next { display: none !important; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: var(--swiper-navigation-sides-offset, 10px); right: auto; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: 'next'; } .swiper-button-lock { display: none; } :root { /* --swiper-pagination-color: var(--swiper-theme-color); --swiper-pagination-left: auto; --swiper-pagination-right: 8px; --swiper-pagination-bottom: 8px; --swiper-pagination-top: auto; --swiper-pagination-fraction-color: inherit; --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25); --swiper-pagination-progressbar-size: 4px; --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-width: 8px; --swiper-pagination-bullet-height: 8px; --swiper-pagination-bullet-border-radius: 50%; --swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-opacity: 0.2; --swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-horizontal-gap: 4px; --swiper-pagination-bullet-vertical-gap: 6px; */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-vertical > .swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet, :host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Fraction */ .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit); } /* Progress */ .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute; /*ADD_HOST*/ } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0; } .swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } :root { /* --swiper-scrollbar-border-radius: 10px; --swiper-scrollbar-top: auto; --swiper-scrollbar-bottom: 4px; --swiper-scrollbar-left: auto; --swiper-scrollbar-right: 4px; --swiper-scrollbar-sides-offset: 1%; --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1); --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5); --swiper-scrollbar-size: 4px; */ } .swiper-scrollbar { border-radius: var(--swiper-scrollbar-border-radius, 10px); position: relative; -ms-touch-action: none; background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1)); } .swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important; } .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: var(--swiper-scrollbar-sides-offset, 1%); bottom: var(--swiper-scrollbar-bottom, 4px); top: var(--swiper-scrollbar-top, auto); z-index: 50; height: var(--swiper-scrollbar-size, 4px); width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-vertical > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-vertical { position: absolute; left: var(--swiper-scrollbar-left, auto); right: var(--swiper-scrollbar-right, 4px); top: var(--swiper-scrollbar-sides-offset, 1%); z-index: 50; width: var(--swiper-scrollbar-size, 4px); height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5)); border-radius: var(--swiper-scrollbar-border-radius, 10px); left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain; } .swiper-slide-zoomed { cursor: move; touch-action: none; } /* a11y */ .swiper .swiper-notification, swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-grid > .swiper-wrapper { flex-wrap: wrap; } .swiper-grid-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube { overflow: visible; } .swiper-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-cube.swiper-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev, .swiper-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-cube .swiper-slide-shadow-top, .swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0; } .swiper-cube .swiper-cube-shadow:before { content: ''; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px); } .swiper-flip { overflow: visible; } .swiper-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-flip .swiper-slide-shadow-top, .swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-creative .swiper-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height; } .swiper-cards { overflow: visible; } .swiper-cards .swiper-slide { transform-origin: center bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; } /** e-vendo Ergaenzung fuer Swiper */ .carousel-prev.swiper-button-disabled, .carousel-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } /** Carousel **/ .carousel-container { position:relative; } .carousel-container.horizontal { padding:0 30px; } .carousel-container.vertical { padding:30px 0; } .carousel { overflow:hidden; } /*Buttons*/ .carousel-button { padding:2em 1em; text-align:center; z-index:1000; position:absolute; top:50%; transform:translateY(-50%) scale(1.01); transform-origin:0 0; cursor: pointer; /*-webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); zoom:1.01*/ } .carousel-next { right:0; } .carousel-prev { left:0; } .carousel-prev .fa, .carousel-next .fa { font-size:1.8em; } .carousel-container.vertical .carousel-button { padding:0 2em; left:50%; transform:translate(-50%, 0) scale(1.01); transform-origin:0 0; /*-webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); zoom:1.01;*/ } .carousel-container.vertical .carousel-next { bottom:0; top:auto; right:auto; } .carousel-container.vertical .carousel-prev { top:0; right:auto; bottom:auto; } .carousel-container.vertical .carousel-prev .fa, .carousel-container.vertical .carousel-next .fa { transform:rotate(90deg); -ms-transform:rotate(90deg); } /*Slider*/ .carousel .carousel-slider { } .carousel .carousel-slider .slider-item { padding:0 10px; position:relative; text-align:center; } .carousel-container.vertical .carousel .carousel-slider .slider-item { padding:10px 0; } .carousel .carousel-slider .slider-item .carousel-image { height:150px; padding:10px; border:1px solid #dddddd; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-around; } .carousel .carousel-slider .slider-item .carousel-image + .carousel-text { margin-top:10px; min-height:2.3em; } .carousel .carousel-slider .slider-item .carousel-text { font-weight:normal; overflow:hidden; } .carousel .carousel-slider .carousel-image img { max-width:100%; max-height:100%; width:auto; height:auto; display:block; } .carousel .carousel-slider .slider-item .carousel-image .evaluation { position:absolute; bottom:5px; left:0; width:100%; } /*Fallback*/ .carousel.noslide .carousel-slider .slider-item { width:25%; float:left; margin-right:0; } .carousel.noslide .carousel-slider::after { content:""; display:block; clear:left; } .carousel.noslide .carousel-button { display:none; } /** Slideshow **/ .slider-wrapper { position:relative; overflow:hidden; } #slideshow .slideshow-text { color:black; position:absolute; left:0; bottom:0; width:100%; display:block; padding:1em 2em; color:#000; background:rgba(255,255,255,0.8); } #slideshow .slideshow-text:empty { display:none; } #slideshow { padding:0; position:relative; overflow:hidden; } #slideshow.slider_big { height:90px; } #slideshow.slider_normal { height:90px; } #slideshow.slider_big img { max-height:90px; max-width:100%; } #slideshow.slider_normal img { max-height:90px; max-width:100%; } @media (min-width:480px){ #slideshow.slider_big { height:130px; } #slideshow.slider_normal { height:130px; } #slideshow.slider_big img { max-height:130px; } #slideshow.slider_normal img { max-height:130px; } } @media (min-width:640px){ #slideshow.slider_big { height:200px; } #slideshow.slider_normal { height:200px; } #slideshow.slider_big img { max-height:200px; } #slideshow.slider_normal img { max-height:200px; } } @media (min-width:880px){ #slideshow.slider_big { height:300px; } #slideshow.slider_normal { height:270px; } #slideshow.slider_big img { max-height:300px; } #slideshow.slider_normal img { max-height:270px; } } /** Artikelslider **/ .articleslider {} .articleslider a { text-decoration:none; } .articleslider .pic { height:150px; padding:10px; position:relative; overflow:hidden; text-align:center; } .articleslider .image { width:auto; height:auto; max-width:100%; max-height:100%; display:inline; } .articleslider .name { text-align:center; } .articleslider .price { text-align:center; } /** Slidepanel und Trigger **/ .trigger-bottom { padding:0; text-align:center; font-size:0.9em; line-height:20pt; } .trigger-bottom a { display:block; text-decoration:none; } .slidepanel { position:absolute; display:none; width:auto; height:auto; z-index:5000; background-color:#000000; } .slidepanel_close { padding:0 5px; font-size:0.9em; } .slidepanel_close:hover, .slidepanel_close:active { cursor:pointer; } /* Warenkorb-Vorschau, Merkzettel-Vorschau */ .triggerWishlistSmall { border:0 solid #3ecbe7; border-width:0 1px 1px 1px; background-color:#000000; } .slidepanel::-webkit-scrollbar { width:5px; } .slidepanel::-webkit-scrollbar-track { background-color:#000000;; } .slidepanel::-webkit-scrollbar-thumb { background:#3ecbe7; border-radius:4px; } /** Lightbox **/ .vel-modal { background:rgba(0,0,0,.7) !important; } .vel-img { background:white !important; padding:10px; } .afancybox > img { max-width:100%; } /** Breite e. Spalte in Abh. v. Anzahl d. Spalten **/ .col-2 > * { width:50%; } .col-3 > * { width:33.33%; } .col-4 > * { width:25%; } .col-5 > * { width:20%; } .col-6 > * { width:16.66%; } /* Paketdienst-Auswahlbutton */ #deliveryservices .deliveryservice:hover, #deliveryservices .deliveryservice:hover > * { background-color: #000000; } #speedbar::after { clear:left; content:""; display:block; } #speedbar > * { position:relative; text-align:center; float:left; display:block; } #speedbar > *::before { display:block; position:absolute; top:1.8em; left:0; height:5px; width:100%; content:""; } #speedbar > *:first-child::before { width:50%; left:50%; } #speedbar > *:last-child::before { width:50%; right:50%; } #speedbar > *.sp_button::before { background-color:#008000; } #speedbar > *.sp_active::before { background:#008000; background:linear-gradient(to right, #008000 50%, #18515b); } #speedbar > *.sp_disabled::before { background-color:#18515b; } .sp_icon { display:block; padding:0.5em; border-radius:50%; font-size:1.8em; color:#fff; } .sp_icon.sp_button { background-color:#008000; } .sp_icon.sp_button::before { content:"\f00c"; } .sp_icon.sp_active { background-color:#008000; } .sp_icon.sp_active::before { content:"\f303"; } .sp_icon.sp_disabled { background-color:#18515b; } .sp_icon.sp_disabled::before { content:"\f110"; } /** Checkoutprozess **/ .gocheckout { margin:15px 0; } .gocheckout_forward { text-align:center; } .gocheckout_back { text-align:center; } .gocheckout_forward > input { white-space:normal; } @media (min-width:480px){ .gocheckout_forward { float:right; text-align:right; width:50%; } .gocheckout_back { float:left; text-align:left; width:50%; } } .checkout .paymentsystem_info { padding-top:15px; } .checkout_process .checkout_content, body.desktop .checkout_process #loginarea { max-width:920px; margin:0 auto; } #checkboxes > div { margin-top:10px; } #checkboxes > div:first { margin-top:0; } #PaymentMethod_area > .content:hover, #shippingmethod_area > .content:hover { /*background-color: #000000;*/ box-shadow: 0 0 5px #3ecbe7; } /** Service-Page **/ body.service .content { width:600px; padding:20px; margin:50px auto; border-width:1px; border-style:solid; background-color:#000000; } /** Energeeffizienzklassen **/ #eek_label { position:fixed; top:0; left:0; width:100%; height:100%; text-align:center; } #eek_label_img { max-width:100%; max-height:100%; } #eek_label_close { position:absolute; top:0.2em; right:0.4em; color:#333333; cursor:pointer; } .eek_img { max-height:2em; width:auto; } .rdecontent .eek_img { max-height:1.5em; margin-top:0; } .rdecontent .eek_rde { float:left; } .catblog .energy {} /** Markenslider **/ #markenslider { margin-top:15px;} #markenslider .markenslider-item { padding:0 0.8em; } #markenslider .markenslider-item img { max-height:50px; max-width:100%; } /** Links **/ .highlink { text-decoration:none; color:#3ecbe7; } .highlink:hover { color:#3ecbe7; } .nicelink { color:#008000; text-decoration:none; } .nicelink:hover { color:#008000; } .lightlink { color:#3ecbe7; text-decoration:none; } .lightlink.before::before { content:"\00BB"; margin-right:0.4em; } .lightlink.after::after { content:"\00BB"; margin-left:0.4em; } .lightlink > span { vertical-align:middle } .link-extern::before { content:"\f35d"; font-family:"Font Awesome 5 Free"; font-weight:900; margin-right:0.4em; } .link-download::before { content:"\f56d"; font-family:"Font Awesome 5 Free"; font-weight:900; margin-right:0.4em; } .link-styled::after { content:"\f30b"; font-family:"Font Awesome 5 Free"; font-weight:900; margin-left:0.4em; } .link-marker::after { content:"\f064"; font-family:"Font Awesome 5 Free"; font-weight:900; margin-left:0.4em; } /** Video/Bild **/ .ratio_16_9 { width:278px; height:156px; } .ratio_4_3 { width:278px; height:208px; } .video_placeholder { position:relative; cursor:pointer; overflow:hidden; display:block; } .video_placeholder img { width:auto; } .video_placeholder:not(.playing)::before, .video_placeholder:not(.playing)::after { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(1.01); transform-origin:0 0; /*transform:translateX(-50%) translateY(-50%); zoom:1.01;*/ } .youtube_placeholder:not(.playing)::before { content:"\f167"; font-family:"Font Awesome 5 Free Brands"; color:rgb(255,0,0); font-size:60px; font-weight:900; opacity:0.7; transition:color 0.2s, opacity 0.2s; } .youtube_placeholder:not(.playing)::after { content:"\f04b"; font-family:"Font Awesome 5 Free"; color:#fff; font-size:18px; font-weight:900; } .youtube_placeholder:not(.playing):hover::before { opacity:1; } .vimeo_placeholder:not(.playing)::before { content:""; display:block; height:40px; width:65px; border-radius:5px; background-color:#0088CC; opacity:0.7; transition:color 0.2s, opacity 0.2s; } .vimeo_placeholder:not(.playing)::after { content:"\f04b"; font-family:"Font Awesome 5 Free"; color:#fff; font-size:18px; font-weight:900; } .vimeo_placeholder:not(.playing):hover::before { opacity:1; } /** Neu-Banderole **/ .new_sleeve { position:absolute; top:-28px; left:-51px; transform-origin:120px; -ms-transform-origin:120px; transform:rotate(-45deg); -ms-transform:rotate(-45deg); width:120px; padding:0.2em; font-size:1.3em; text-align:center; background-color:#000000;; color:#3ecbe7; opacity:0.8; } /** Aktion-Banderole **/ .sale_sleeve { position:absolute; top:-40px; left:-55px; transform-origin:100px; -ms-transform-origin:100px; transform:rotate(-45deg); -ms-transform:rotate(-45deg); width:100px; padding:0.3em 0 0.2em 0; font-size:1.3em; text-align:center; background-color:#cd0a0a; color:#3ecbe7; opacity:0.8; } .childitem .sale_sleeve { display:none; } /*Verkaufsaktionen*/ .sale_sticker { padding:1em; position:relative; font-size:1.6em; } .sale_sticker_text { font-weight:bold; color:#3ecbe7; position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%, -50%) scale(1.01); transform-origin:0 0; /*transform:translateX(-50%) translateY(-50%); zoom:1.01;*/ } .sale_sticker_graphic { z-index:1; color:#cd0a0a; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(1.01); transform-origin:0 0; /*transform:translateX(-50%) translateY(-50%); zoom:1.01;*/ } /** Warenkorb-Button **/ .button_put2cart { background-color:#000000;; transition:background-color 0.3s; border:none; border-radius:4px; cursor:pointer; color:#3ecbe7; font-size:1em; font-weight:bold; text-align:center; padding:0.8em; } .button_put2cart::before { content:"\f07a"; font-family:'Font Awesome 5 Free';font-weight:900; font-size:1.5em; text-align:center; } .button_put2cart.forbidden { cursor:not-allowed; } .button_put2cart.forbidden::before { content:"\f05e"; } .button_put2cart:hover { background-color:#18515b;; } .product-main-info .button_put2cart::before,.product_varianten .button_put2cart::before { margin-right:0.8em; font-size:1.8em; vertical-align:middle; } /** Warenkorbfeld **/ .cartfield::after { clear:left; content:""; display:block; } .cartfield .unit { float:left; margin-top:0.4em; } .cartfield input { min-width:0; } .field_put2cart { border:1px solid #18515b; padding:0.8em; width:60%; text-align:center; } /*+,- deaktivieren*/ .cart .cartfield .button_default { display:none; } .product-main.detail-page .cartfield { border:1px solid #18515b; border-radius:4px; display:flex; } .catalog.product .cartfield { border:1px solid #18515b; border-radius:4px; display:flex; } .product-main.detail-page .cartfield .unit { margin-top:0; display:inline-block; text-align:center; background-color:#18515b; width:40%; padding:1.0em; float:left; border-radius:4px 0 0 4px; } .catalog.product .cartfield .unit { margin-top:0; display:inline-block; text-align:center; background-color:#18515b; width:40%; padding:0.8em; float:left; border-radius:4px 0 0 4px; } .product-main.detail-page .field_put2cart { border:none; font-weight:bold; font-size:1em; border-radius:0 4px 4px 0; } .catalog.product .field_put2cart { border:none; font-weight:bold; font-size:1em; border-radius:0 4px 4px 0; } /* Warenkorb im Header */ #cartsmall { position:absolute; bottom:calc((90px - (5 * 12px)) / 2); right:15px; } #cartsmall-empty { position:relative; bottom:12px; } .catalog.grid.aside { overflow-y:auto; height:calc(100% - 12em); } .triggerCartSmall { background-color:#000000; } .triggerCartSmall a { color:#3ecbe7; } /** Formulare **/ .mandatory { position:relative; } .mandatory::after { content:"*"; color:#ff0000; font-weight:bold; font-size:2em; position:absolute; left:-0.1em; top:-0.3em; } .mandatory.valid::after { display:none; } .mandatory > .caption-small { padding-left:0.4em; } #SearchStrUnderlay, .input-field > input, .input-field > select, .input-field > textarea { border:1px solid #3ecbe7; border-radius:4px; transition:border-color 0.2s, outline 0.2s; } .input-field > input, .input-field > select, .input-field > button { height:3em; } /*.input-field > input:focus, .input-field > select:focus, .input-field > textarea:focus { border-color:#3ecbe7; outline:#3ecbe7; } */ .input-field { position:relative; margin-top:0.6em; margin-bottom:0.6em; } .input-field > label { position:absolute; transition:all 0.2s; top:0.9em; left:0.8em; color:#3ecbe7; cursor:text; } .input-field.focus > label, .input-field > select + label { top:-0.6em; font-size:0.8em; background-color:#000000; padding:0 0.4em; } .input-field > input.error, .input-field > select.error, .input-field > textarea.error { border-color:#ff0000; } .input-field.show-value { margin:0; } .input-field.show-value > label { display:none; } .input-field.show-value > * { border:none; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; background:transparent; background-color:transparent; background-image:none; padding:0; margin:0; height:auto; resize:none; cursor:text; -webkit-appearance:none; } /*Spam-Abwehr Input Feld*/ .contact_name { position:absolute; overflow:hidden; width:1px; height:1px; left:-9000px; } /* Fehlermarkierung */ .error-field, .error, .error a { color:#ff0000; } .error-with-border .error, .error-with-border.error { border:1px solid #ff0000; } .notice { color:#008000; } .white { color:#fff; } .input-field > input.notice, .input-field > select.notice, .input-field > textarea.notice { border-color:#008000; } input.changed, select.changed, textarea.changed { border-color:#ff0000; } /* Ausblenden mit Checkboxen */ .hidebox:checked + * { display:none; } /* textarea resize */ .hresize { resize:horizontal; } .vresize { resize:vertical; } /** allgemeiner Button **/ .button_default { padding:0.4em 0.6em; border-width:1px; border-style:solid; border-color:#000000 #000000 #18515b #18515b; background: #000000; /* Old browsers */background: -moz-linear-gradient(-45deg, #000000 0%, #18515b 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#000000), color-stop(100%,#18515b)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(-45deg, #000000 0%,#18515b 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, #000000 0%,#18515b 100%); /* Opera 11.10+ */background: -ms-linear-gradient(-45deg, #000000 0%,#18515b 100%); /* IE10+ */background: linear-gradient(135deg, #000000 0%,#18515b 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#18515b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */; transition:background-color 0.3s, background-color 0.3s; border-radius:4px; display:inline-block; cursor:pointer; font-weight:bold; font-size:1em; color:#3ecbe7; } .button_default.big { padding:0.8em 2em; } .button_default.hover, .button_default:hover { background: #18515b; /* Old browsers */background: -moz-linear-gradient(top, #18515b 0%, #18515b 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#18515b), color-stop(100%,#18515b)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #18515b 0%,#18515b 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #18515b 0%,#18515b 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #18515b 0%,#18515b 100%); /* IE10+ */background: linear-gradient(to bottom, #18515b 0%,#18515b 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18515b', endColorstr='#18515b',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */ } a.button_default, a.button_default:hover { color:#3ecbe7; } /** **/ .button_default2 { padding:0.4em 0.6em; border-width:1px; border-style:solid; border-color:#3ecbe7 #3ecbe7 #3ecbe7 #3ecbe7; background: #3ecbe7; /* Old browsers */background: -moz-linear-gradient(-45deg, #3ecbe7 0%, #3ecbe7 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3ecbe7), color-stop(100%,#3ecbe7)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(-45deg, #3ecbe7 0%,#3ecbe7 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, #3ecbe7 0%,#3ecbe7 100%); /* Opera 11.10+ */background: -ms-linear-gradient(-45deg, #3ecbe7 0%,#3ecbe7 100%); /* IE10+ */background: linear-gradient(135deg, #3ecbe7 0%,#3ecbe7 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ecbe7', endColorstr='#3ecbe7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */; transition:background-color 0.3s, background-color 0.3s; border-radius:4px; display:inline-block; cursor:pointer; font-weight:bold; font-size:1em; color:#3ecbe7; } .button_default2.big { padding:0.8em 2em; } .button_default2.hover, .button_default2:hover { background: #3ecbe7; /* Old browsers */background: -moz-linear-gradient(top, #3ecbe7 0%, #3ecbe7 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3ecbe7), color-stop(100%,#3ecbe7)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #3ecbe7 0%,#3ecbe7 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #3ecbe7 0%,#3ecbe7 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #3ecbe7 0%,#3ecbe7 100%); /* IE10+ */background: linear-gradient(to bottom, #3ecbe7 0%,#3ecbe7 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ecbe7', endColorstr='#3ecbe7',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */ } a.button_default2, a.button_default2:hover { color:#3ecbe7; } /** Button mit Checkbox oder Radio **/ .button_check, .button_radio { position:relative; min-height:2.5em; /*border:1px solid #3ecbe7; background-color:#000000; border-radius:4px;*/ display:inline-block; } .button_check:hover, .button_radio:hover { background-color:#000000; } .button_check > input, .button_radio > input { visibility:hidden; position:absolute; left:0; top:0; } .button_check > label, .button_radio > label { display:inline-block; line-height:2.5em; padding:0 0.6em 0 3em; width:100%; font-weight:bold; cursor:pointer; } .button_check > label::before, .button_radio > label::before { content:""; display:block; border:1px solid #18515b; background-color:#000000; border-radius:2px; width:1.5em; height:1.5em; position:absolute; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); left:0.5em; } .button_check > label::after { content:"\f00c"; display:block; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:1.2em; position:absolute; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); left:0.6em; } .button_check > input:not(:checked)+label::after { display:none; } .button_radio { border-top-left-radius:3em; border-bottom-left-radius:3em; } .button_radio > label::before { border-radius:100%; width:1.2em; height:1.2em; } .button_radio > input:checked+label::before { background-color:#3ecbe7; } /** Merkzettel fuer zukuenftige Checkboxen **/ /*.button_check > label::before, .button_radio > label::before { content:""; display:block; border:1px solid #18515b; background-color:#000000; border-radius:2px; width:2.5em; height:2.5em; position:absolute; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); left:0; } .button_check > label::after { content:"\f00c"; display:block; font-family:"FontAwesome"; font-size:1.5em; position:absolute; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); left:0.45em; } .button_check:not(.cart_check):not(.delete_check) > input:not(:checked)+label::after { display:none; } .button_check.cart_check > label::after { content:"\f07a"; color:#18515b; } .button_check.delete_check > label::after { content:"\f014"; color:#18515b; } .button_check.cart_check > input:checked+label::after, .button_check.delete_check > input:checked+label::after { content:"\f00c"; color:#3ecbe7; }*/ /** hervorgehobener Button **/ .button_high { background-color:#000000;; transition:background-color 0.3s, background 0.3s; border:1px solid #3ecbe7; border-radius:4px; cursor:pointer; color:#3ecbe7; font-weight:bold; font-size:1em; padding:0.4em 0.6em; display:inline-block; box-sizing:content-box; } .button_high.big { padding:0.8em 2em; } .button_high:hover { background-color:#18515b;; } a.button_high, a.button_high:hover { color:#3ecbe7; } /** deaktivierter button **/ .button_disabled { background-color:#000000; color:#3ecbe7; cursor:default; } .button_disabled:hover { background-color:#000000; color:#3ecbe7; } /** nach-oben-Button **/ body:not(.scrolled) #toTopButton { display: none; } /*#toTopButton { display:block; position:fixed; right:0.4em; bottom:0.4em; z-index:1001; opacity:0.6; font-size:2.5em; text-decoration:none; color:#000000; background-color:#3ecbe7; padding:0.2em; border-radius:0.2em; }*/ /** Icon Button **/ .icon_button { width:10mm; height:10mm; display:block; position:relative; border-radius:4px; } .icon_button:hover {} /** irgendwas inaktiv darstellen **/ .disabled { opacity:0.6; cursor:default; } .disabled-w-icon { opacity:0.6; position:relative; padding-left:2em; cursor:not-allowed; } .disabled-w-icon::before { content:"\f05e"; font-family:"Font Awesome 5 Free"; font-weight:900; margin-right:0.4em; position:absolute; left:0.5em; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); } /* #ajaxBusy { position:fixed; top:0; left:0; width:100%; height:100%; z-index:999999; background:rgba(255,255,255,0.8); display:none; } #ajaxBusy::after { display:block; content:"\f110"; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:7em; position:absolute; left:50%; top:35%; transform:translateY(-50%); -ms-transform:translateY(-50%); animation:spinner infinite 1500ms linear; } */ #shopBusy { position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; display:none; } #shopBusy.visual { background:rgba(255,255,255,0.8); } #shopBusy.visual::after { display:block; content:"\f110"; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:7em; position:absolute; left:50%; top:35%; transform:translateY(-50%); -ms-transform:translateY(-50%); animation:spinner infinite 1500ms linear; } /** Cookies **/ #cookie-jar, #newCookieJar { z-index:10000; } #newCookieJar { max-height:calc( 100vh - 50px ); overflow-y:auto; } /* ----------------------------------------------------------------------------- vanillajs-datepicker Anfang -------------------------------------------------------------------------- */ .datepicker { width:-moz-min-content; width:min-content; } @media (min-width:320px){ body.page_appointment .datepicker { width:280px; } } @media (min-width:480px){ body.page_appointment .datepicker { width:350px; } } @media (min-width:640px){ body.page_appointment .datepicker { width:420px; } } @media (min-width:880px){ body.page_appointment .datepicker { width:490px; } } .datepicker:not(.active) { display:none; } .datepicker-dropdown { position:absolute; z-index:20; padding-top:0; } .datepicker-dropdown.datepicker-orient-top { padding-top:0; padding-bottom:4px; } .datepicker-picker { display:flex; flex-direction:column; border-radius:4px; background-color:#000000; } .datepicker-dropdown .datepicker-picker { -webkit-box-shadow:0 3px 6px #18515b; box-shadow:0 3px 6px #18515b; } .datepicker-main { flex:auto; padding:2px; } .datepicker-footer { box-shadow:inset 0 1px 1px #18515b; background-color:#000000; } .datepicker-title { box-shadow:inset 0 -1px 1px #18515b; background-color:#000000; padding:0.375rem 0.75rem; text-align:center; font-weight:700; } .datepicker-controls { display:flex; } .datepicker-header .datepicker-controls { padding:2px 2px 0; } .datepicker-controls .button { display:inline-flex; position:relative; align-items:center; justify-content:center; margin:0; border:1px solid; border-color:#000000 #000000 #18515b #18515b; /*border-radius:4px;*/ box-shadow:none; background: #000000; /* Old browsers */background: -moz-linear-gradient(-45deg, #000000 0%, #18515b 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#000000), color-stop(100%,#18515b)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(-45deg, #000000 0%,#18515b 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, #000000 0%,#18515b 100%); /* Opera 11.10+ */background: -ms-linear-gradient(-45deg, #000000 0%,#18515b 100%); /* IE10+ */background: linear-gradient(135deg, #000000 0%,#18515b 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#18515b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ /*background-color:hsl(0, 0%, 100%);*/ cursor:pointer; padding:calc(0.375em - 1px) 0.75em; height:2.25em; vertical-align:top; text-align:center; line-height:1.5; white-space:nowrap; color:#3ecbe7; font-size:1rem; } .datepicker-controls .button:focus, .datepicker-controls .button:active { outline:none; } .datepicker-controls .button:hover { background: #18515b; /* Old browsers */background: -moz-linear-gradient(top, #18515b 0%, #18515b 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#18515b), color-stop(100%,#18515b)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #18515b 0%,#18515b 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #18515b 0%,#18515b 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #18515b 0%,#18515b 100%); /* IE10+ */background: linear-gradient(to bottom, #18515b 0%,#18515b 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18515b', endColorstr='#18515b',GradientType=0 ); /* IE6-9 fallback on horizontal gradient *//*border-color:#b8b8b8; color: hsl(0, 0%, 21%);*/ } .datepicker-controls .button:focus { outline:1px dotted #271e18;/*border-color: hsl(217, 71%, 53%); color: hsl(0, 0%, 21%);*/ } .datepicker-controls .button:focus:not(:active) { box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); } .datepicker-controls .button:active { border-color: #474747; color: hsl(0, 0%, 21%); } .datepicker-controls .button[disabled] { cursor: not-allowed; } .datepicker-header .datepicker-controls .button { border-color: transparent; font-weight: bold; } .datepicker-header .datepicker-controls .button:hover { background: #18515b; /* Old browsers */background: -moz-linear-gradient(top, #18515b 0%, #18515b 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#18515b), color-stop(100%,#18515b)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #18515b 0%,#18515b 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #18515b 0%,#18515b 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #18515b 0%,#18515b 100%); /* IE10+ */background: linear-gradient(to bottom, #18515b 0%,#18515b 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18515b', endColorstr='#18515b',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */ } .datepicker-header .datepicker-controls .button:active { background-color:#000000; } .datepicker-footer .datepicker-controls .button { flex:auto; margin:calc(0.375rem - 1px) 0.375rem; border-radius:2px; font-size:0.75rem; } .datepicker-controls .view-switch { flex:auto; } .datepicker-controls .prev-button, .datepicker-controls .next-button { padding-right:0.375rem; padding-left:0.375rem; flex:0 0 14.2857142857%; } .datepicker-controls .prev-button.disabled, .datepicker-controls .next-button.disabled { visibility:hidden; } .datepicker-view, .datepicker-grid { display:flex; } .datepicker-view { align-items:stretch; width:15.75rem; } body.page_appointment .datepicker-view { width:100%; } .datepicker-grid { flex-wrap:wrap; flex:auto; } .datepicker .days { display:flex; flex-direction:column; flex:auto; } .datepicker .days-of-week { display:flex; } .datepicker .week-numbers { display:flex; flex-direction:column; flex:0 0 9.6774193548%; } .datepicker .weeks { display:flex; flex-direction:column; align-items:stretch; flex:auto; } .datepicker span { display:flex; align-items:center; justify-content:center; border-radius:4px; cursor:default; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .datepicker .dow { height:1.5rem; font-size:0.875rem; font-weight:700; } .datepicker .week { flex:auto; color:#3ecbe7; font-size:0.75rem; } .datepicker-cell, .datepicker .days .dow { flex-basis:14.2857142857%; } .datepicker-cell { height:2.25rem; } .datepicker-cell:not(.day) { flex-basis:25%; height:4.5rem; } .datepicker-cell:not(.disabled):hover { background-color:#000000; cursor:pointer; } .datepicker-cell.focused:not(.selected) { background-color:#000000; } .datepicker-cell.selected, .datepicker-cell.selected:hover { background-color:#000000; color:#3ecbe7; font-weight:600; } .datepicker-cell.disabled { color:#3ecbe7; } .datepicker-cell.prev:not(.disabled), .datepicker-cell.next:not(.disabled) { color:#3ecbe7; } .datepicker-cell.prev.selected, .datepicker-cell.next.selected { color:#dddddd; } .datepicker-cell.highlighted:not(.selected):not(.range):not(.today) { border-radius:0; background-color:#000000; } .datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover { background-color:#18515b; } .datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused { background-color:#000000; } .datepicker-cell.today:not(.selected) { background-color: #3ecbe7; } .datepicker-cell.today:not(.selected):not(.disabled) { color:#000000; } .datepicker-cell.today.focused:not(.selected) { background-color:#000000; } .datepicker-cell.range-end:not(.selected), .datepicker-cell.range-start:not(.selected) { background-color:#3ecbe7; color:#3ecbe7; } .datepicker-cell.range-end.focused:not(.selected), .datepicker-cell.range-start.focused:not(.selected) { background-color:#3ecbe7; } .datepicker-cell.range-start:not(.range-end) { border-radius:4px 0 0 4px; } .datepicker-cell.range-end:not(.range-start) { border-radius:0 4px 4px 0; } .datepicker-cell.range { border-radius:0; background-color:#000000; } .datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover { background-color:#18515b; } .datepicker-cell.range.disabled { color:#3ecbe7; } .datepicker-cell.range.focused { background-color:#18515b; } .datepicker-input.in-edit { border-color:#000000; } .datepicker-input.in-edit:focus, .datepicker-input.in-edit:active { box-shadow: 0 0 0.25em 0.25em #271e18; } /* ----------------------------------------------------------------------------- vanillajs-datepicker Ende -------------------------------------------------------------------------- */ .datepicker-hide { display:none; } /** Produkt **/ .productname { font-size:1.1em; font-weight:bold; } .productnr { font-size:0.9em; } .saleName { color:#cd0a0a; } .saleDuration { font-size:0.9em; } .unit { font-size:0.8em; } /** Preis **/ .itemprice { font-size:1.8em; font-weight:bold; color:#008000; } .product-main .itemprice { font-size:2.3em; } .specialprice { color:#cd0a0a; } .oldprice { color:#3ecbe7; } .baseprice { font-size:0.8em; font-style:italic; } .mwst-hint { font-size:0.8em; color:#3ecbe7; } .mwst-hint a { color:#3ecbe7; } .extraCosts { font-size:0.9em; } .additionalshippingcosts { color:#3ecbe7; font-size:0.8em; } /* Alterskennzeichen */ .agerating_s, .agerating .icon { background-image:url(../nav/icons/usk.png); background-repeat:no-repeat; } .pic .agerating_s { position:absolute; left:6px; bottom:6px; } .rdecontent .agerating_s { left:0; bottom:0; } .agerating { font-size:0.9em; } .agerating .icon { width:40px; height:40px; display:block; } .agerating .text { padding-left:44px; margin-top:-40px; } .agerating_0 .icon { background-position:-40px 0; } .agerating_6 .icon { background-position:-80px 0; } .agerating_12 .icon { background-position:0 -40px; } .agerating_16 .icon { background-position:-40px -40px; } .agerating_18 .icon { background-position:-80px -40px; } .agerating_s { width:20px; height:20px; } .agerating_s_0 { background-position:0 0; } .agerating_s_6 { background-position:-20px 0; } .agerating_s_12 { background-position:0 -20px; } .agerating_s_16 { background-position:-20px -20px; } .agerating_s_18 { background-position:-120px 0; } /** Hersteller **/ .catblog .manufacturer.text, .catblog .manufacturer .text { font-size:1.2em; color:#3ecbe7; font-weight:bold; } .catalog .manufacturer.text, .catalog .manufacturer .text { display:inline-block; padding:0.4em; border:1px solid #18515b; } /* Schutzklick */ body.confirmationpage #schutzklick_wrapper #sisu_container { margin-top:15px; border-style:solid; border-width:1px; padding:15px; } body.checkout #schutzklick_wrapper #sisu_container > div { margin-left:auto; margin-right:auto; margin-bottom:0; } /* Produktvergleich */ #compare { padding-right:1px; } #compare > table { /*border-collapse:collapse;*/ table-layout:fixed; } #compare > table > thead > tr.products { background-color:#000000; z-index:12; border-bottom:1px solid #18515b; } #compare.favorite > table > thead > tr > td:first-of-type, #compare.favorite > table > tbody > tr > td:first-of-type, #compare.favorite > table > tfoot > tr > td:first-of-type { z-index:10; background-color:#000000; position:relative; } #compare.favorite > table > thead > tr.products > td:first-of-type { } #compare > table > tbody > tr > td, #compare > table > thead > tr > td, #compare > table > tfoot > tr > td { text-align:center; } #compare > table > tbody > tr > td { border-bottom:1px solid #18515b; border-right:1px solid #18515b; } #compare > table > tbody > tr:first-child > td, #compare > table > thead + tbody > tr:first-child > th, #compare tr.groupname + tr td, #compare tr.groupname + tr th { border-top:1px solid #18515b; } #compare > table > tbody > tr > th, #compare > table > thead > tr > th, #compare > table > tfoot > tr > th { z-index:11; position:relative; } #compare > table > tbody > tr.groupname > th { text-align:left; padding-top:1em; padding-left:1px; background-color:#000000; font-weight:normal; } #compare > table > tbody > tr > td:not(.vcenter), #compare > table > thead > tr > td { vertical-align:top; } #compare > table > tbody.bg_even > tr:nth-child(even) > td, #compare > table > tbody.bg_odd > tr:nth-child(odd) > td { background-color:#000000; } #compare.favorite > table > tbody.bg_even > tr:nth-child(even) > td:first-of-type, #compare.favorite > table > tbody.bg_odd > tr:nth-child(odd) > td:first-of-type { background-color:#000000; } #compare > table > tbody > tr:not(.groupname) > th { border-bottom:1px solid #000000; vertical-align:top; text-align:left; background-color:#18515b; } #compare > table > tbody > tr:last-child > th { border-bottom:1px solid #18515b; } #compare > table > tbody.collapsed + tbody > tr.groupname > th { padding-top: 0.1em; } #compare .availability .icon { margin-left:0; } #compare .prev, #compare .next { position:absolute; top:40%; background-color:#18515b; padding: 0.5em; cursor:pointer; z-index:13; font-size:1.5em; } #compare .prev { top:130px; left:100px; } #compare .next { top:130px; right:0; } #compare .collapsed .minus-square_icon::before { content:"\f0fe"; } #compare td.add:nth-of-type(1n+3) { display:none; } #compare ~ #noprod { display:none; } #compare .pic { display:block; position:relative; width:100%; height:200px; overflow:hidden; } #compare .buttons { position:absolute; top:0; left:0; z-index:13; } #compare .remove-all { cursor:pointer; } #compare > table > thead > tr > th { width:11em; } @media (max-width:640px) { #compare > table > thead > tr > th { width:9em; } } .compare.listed .can-compare { display:none; } .compare.listed .on-compare-list { display:block; } .compare .poll_icon:not(.invert)::before { font-size:1.3em; line-height:1.1rem; vertical-align:-1px; } .compare .poll_icon.invert::before { font-size:1.1em; line-height:1.1rem; background-color:#3ecbe7; color:#000000; border-left:1px solid #3ecbe7; border-right:1px solid #3ecbe7; border-radius:0.2em; } #product .compare .poll_icon.invert::before, .catblog.design .compare .poll_icon.invert:before { color:#000000; } .compare-button .value { right:-0.5em; top:-0.3em; background-color:#cd0a0a; color:#000000; padding:0.2em 0.5em; font-weight:bold; text-align:center; border:2px solid #000000; border-radius:50%; } /*Services*/ .service:not(:first-child) { margin-top:1.2em; } .service_input_file .service_input { transition:all 1s; } .service_input_file .upload_pane { min-height:5em; width:calc(100% - 2em); } .service_input_file .upload_pane.no-file::after { display:block; content:'\f574'; font-family:'Font Awesome 5 free'; font-weight:900; font-size:3em; margin-top:0.8rem; } .service_input_file .upload_pane.no-file .help-description { display:block; } .service_input_file .service_input.error { background-color:#ffeeee; border:red; } .service_input_file .service_input.isDrag { border-color:green; background-color:lightgreen; } .service_input_file .service_input.isDropped { border-style:dashed; border-color:green; } .service_type_5 .info { min-height:52px; max-height:152px; } /*#checkout_process .service_type_5 .info { min-height:auto; max-height:none; }*/ /** TrustedShops **/ /*Badge im Shop*/ /*div[id^="tsbadgeResponsiveTop"] { position:fixed; top:auto; bottom:0; z-index:3; }*/ /*Card in Bestaetigung*/ /*@media (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 667px), (-webkit-min-device-pixel-ratio: 3) and (max-device-width: 736px), only screen and (max-width: 648px){ div[id^="checkoutTrustcardResponsive"].consumerMembership { height:40% !important; overflow-y:scroll !important; position:fixed; bottom:0; left:0; z-index:2; box-shadow:0 0 15px #3ecbe7; } }*/ /** Suchvorschlagsbereiche (e-vendo RE und FACT-Finder)**/ li.suggestHighlight { background-color:#18515b; } ul.suggestLayerList, ul.suggestLayerBlock { border-color:#3ecbe7; -moz-box-shadow:0 4px 10px 1px #3ecbe7; -webkit-box-shadow:0 4px 10px 1px #3ecbe7; box-shadow:0 4px 10px 1px #3ecbe7; } li.suggestRow { border-bottom-color:#3ecbe7; } .suggestLayer, ul.suggestLayerList, ul.suggestLayerBlock { background-color:#000000; } #suggestLayerContainer { max-width:100%; position:absolute; top:24px; z-index:20000; width:400px; } /* needed otherwise the searchBoxLine will pop-up in IE */ div.suggestFormWrap { position:absolute; z-index:20001; } div.suggestLayer { height:1px; display:none; padding:0; margin:0; background:transparent; } ul.suggestLayerList, ul.suggestLayerBlock { list-style:none; font-size:0.9em; cursor:pointer; border-collapse:separate; padding:0; border-width:2px; border-style:solid; overflow-y: auto; } ul.suggestLayerList li, ul.suggestLayerBlock li { list-style:none; display:block; } li.suggestHeader { font-weight:normal; font-size:0.9em; padding:3px 10px 3px 5px; border-bottom-width:1px; border-bottom-style:solid; } li.suggestRow { margin:0 6px; padding:6px; border-bottom-style:dotted; border-bottom-width:1px; } li.suggestRowWithImage { height:52px; } li.suggestShowAll { text-align:right; border-bottom-width:0; } span.suggestTextQuery { display:block; font-weight:bold; margin-bottom:4px; } span.suggestTextQueryTyped { color:#3ecbe7; text-decoration:underline; } span.suggestTextType { font-size:0.8em; margin-left:5px; } span.suggestTextAmount { font-size:0.8em; } span.suggestImage { padding-right:10px; width:80px; height:40px; float:left; } span.suggestImage img { max-height:40px; max-width:80px; border-width:1px; border-style:solid; border-color:#18515b; } ul.suggestLayerBlock li.suggestHeader { background-image:none; } /* FACT-Finder-Logo */ li.suggestHeaderFF { background-image: url("../nav/logos/fact-finder_suggest.gif"); background-repeat:no-repeat; background-position:98%; } /* FINDOLOGIC Autocomplete */ .ac_odd { /*background-color: #000000;*/ } .ac_over { background-color:#000000; } .ac_results { max-width:100%; background-color:#000000; border-color:#3ecbe7; padding:0; border-width:1px; border-style:solid; overflow:hidden; z-index:99999; min-width:250px; } .ac_results ul { width:100%; list-style-position:outside; list-style:none; padding:0; margin:0; } .ac_results td { vertical-align:middle; margin:0; padding:2px 10px; cursor:default; /* if width will be 100% horizontal scrollbar will apear when scroll mode will be used */ /*width: 100%;*/ font-size:1em /*12px*/; /* it is very important, if line-height not setted or setted in relative units scroll will be broken in firefox */ line-height:16px; overflow:hidden; } .ac_results td.ac_name { text-align:left; } .ac_results td.ac_cat { text-align:right; } .autocompleteCat, .autocompleteCat .flHighlight { background-color:#000000; color:#3ecbe7; font-weight:bold; } .autocompleteCat { margin:-2px -15px 2px; padding:5px; } /*.flHighlight { font-size:inherit; }*/ .ac_results td.ac_image { padding: 2px 5px; } #preview { position:absolute; border-width:1px; border-style:solid; border-color:#3ecbe7; background:#3ecbe7; color:#000000; display:none; z-index: 100000; } .autocompletecount { float:right; font-size:0.9em; } /*.flHighlight { font-weight:normal; }*/ .ui-dialog { z-index:2020; } /** Register, z.B. Marken, Stichwort **/ .register .letters:after { content:"."; display:block; height:0; visibility:hidden; clear:both; } .register .letters > li { float:left; padding:0; margin:0 0.3em; font-size:1.3em; list-style:none;} .registerletter .register > ul { margin:0; margin-left:20px; list-style-type:square; } .registerletter .register .registerpos { margin:0 10px; line-height:20px; } /** Tabs **/ .default_tabs { border:1px solid #18515b; background-color:#000000; margin:0; padding:0; list-style:none; } .default_tab { background-color:#000000; cursor:pointer; padding:1em; margin:0; font-size:1.1em; transition:background-color 0.3s; list-style:none; padding-right:2em; position:relative; } .default_tab:hover { background-color:#18515b; } .default_tab.tabs_activeTab { background-color:#18515b; } .default_tab::after { content:'\f101'; font-family:'Font Awesome 5 Free'; font-weight:900; position:absolute; right:0.8em; top:1em; } .tabs_inactiveDest { display:none; } .tabs_activeDest { display:block; } /** Ueberschriften **/ .caption { font-size:1.4em; font-weight:bold; margin-bottom:0.8em; } .caption-box { background-color:#000000; padding:0.8em; border:1px solid #18515b; font-weight:bold; } .caption-small { font-size:1.2em; font-weight:bold; margin-bottom:0.8em; } .caption-smallest { font-size:1em; font-weight:bold; margin-bottom:0.8em; } /** Box / Area **/ .area {} .area_bg-l { background-color:#000000; } .area_bg { background-color:#000000; } .area .content, .area_bg .content, .area_bg-l .content { border:1px solid #18515b; border-top-width:0; padding:0.8em; } /** Scroll-Box **/ .scrollbox { box-shadow:0 0 16px #18515b; position:fixed; top:0; left:0; background-color:#000000;; } /** Info-Box **/ .infobox { padding:10px; border:solid 1px #000000; box-shadow:0 0 8px #3ecbe7; background-color:#000000; position:relative; } .infosheet { padding:15px; border:1px solid #18515b; box-shadow:0 0 8px #3ecbe7; background-color:#000000; position:fixed; top:0; left:-800px; max-width:800px; width:100%; z-index:1010; height:100%; } .witharrow-t_l::before, .witharrow-t_c::before, .witharrow-t_r::before, .witharrow-r_t::before, .witharrow-r_c::before, .witharrow-r_b::before, .witharrow-b_l::before, .witharrow-b_c::before, .witharrow-b_r::before, .witharrow-l_t::before, .witharrow-l_c::before, .witharrow-l_b::before { content:""; position:absolute; z-index:1; display:block; } .witharrow-t_l::after, .witharrow-t_c::after, .witharrow-t_r::after, .witharrow-r_t::after, .witharrow-r_c::after, .witharrow-r_b::after, .witharrow-b_l::after, .witharrow-b_c::after, .witharrow-b_r::after, .witharrow-l_t::after, .witharrow-l_c::after, .witharrow-l_b::after { content:""; position:absolute; z-index:0; display:block; } .witharrow-t_l, .witharrow-t_c, .witharrow-t_r { margin-top:28px; } .witharrow-r_t, .witharrow-r_c, .witharrow-r_b { margin-right:28px; } .witharrow-b_l, .witharrow-b_c, .witharrow-b_r { margin-bottom:28px; } .witharrow-l_t, .witharrow-l_c, .witharrow-l_b { margin-left:28px; } /* Pfeil oben links*/ .witharrow-t_l::before { top:-14px; left:0px; border:solid 7px transparent; border-bottom-color:#000000; border-left-color:#000000; } .witharrow-t_l::after { top:-16px; left:-1px; border:solid 8px transparent; border-bottom-color:#000000; border-left-color:#000000; } /* Pfeil oben mittig */ .witharrow-t_c::before { top:-26px; right:50%; transform: translateX(50%); -ms-transform: translateX(50%); border:solid 14px transparent; border-bottom-color:#000000; } .witharrow-t_c::after { top:-28px; right:50%; transform: translateX(50%); -ms-transform: translateX(50%); border:solid 14px transparent; border-bottom-color:#000000; } /* Pfeil oben rechts*/ .witharrow-t_r::before { top:-14px; right:0px; border:solid 7px transparent; border-right-color:#000000; border-bottom-color:#000000; } .witharrow-t_r::after { top:-16px; right:-1px; border:solid 8px transparent; border-right-color:#000000; border-bottom-color:#000000; } /* Pfeil rechts oben */ .witharrow-r_t::before { top:0; right:-14px; border:solid 7px transparent; border-top-color:#000000; border-left-color:#000000; } .witharrow-r_t::after { top:-1px; right:-16px; border:solid 8px transparent; border-top-color:#000000; border-left-color:#000000; } /* Pfeil rechts mittig */ .witharrow-r_c::before { right:-26px; bottom:50%; transform: translateY(50%); -ms-transform: translateY(50%); border:solid 14px transparent; border-left-color:#000000; } .witharrow-r_c::after { right:-28px; bottom:50%; transform: translateY(50%); -ms-transform: translateY(50%); border:solid 14px transparent; border-left-color:#000000; } /* Pfeil rechts unten */ .witharrow-r_b::before { right:-14px; bottom:0; border:solid 7px transparent; border-bottom-color:#000000; border-left-color:#000000; } .witharrow-r_b::after { right:-16px; bottom:-1px; border:solid 8px transparent; border-bottom-color:#000000; border-left-color:#000000; } /* Pfeil unten links*/ .witharrow-b_l::before { bottom:-14px; left:0px; border:solid 7px transparent; border-top-color:#000000; border-left-color:#000000; } .witharrow-b_l::after { bottom:-16px; left:-1px; border:solid 8px transparent; border-top-color:#000000; border-left-color:#000000; } /* Pfeil unten mittig */ .witharrow-b_c::before { right:50%; bottom:-26px; transform: translateX(50%); -ms-transform: translateY(50%); border:solid 14px transparent; border-top-color:#000000; } .witharrow-b_c::after { right:50%; bottom:-28px; transform: translateX(50%); -ms-transform: translateY(50%); border:solid 14px transparent; border-top-color:#000000; } /* Pfeil unten rechts*/ .witharrow-b_r::before { right:0px; bottom:-14px;border:solid 7px transparent; border-top-color:#000000; border-right-color:#000000; } .witharrow-b_r::after { right:-1px; bottom:-16px; border:solid 8px transparent; border-top-color:#000000; border-right-color:#000000; } /* Pfeil links oben */ .witharrow-l_t::before { top:0; left:-14px; border:solid 7px transparent; border-top-color:#000000; border-right-color:#000000; } .witharrow-l_t::after { top:-1px; left:-16px; border:solid 8px transparent; border-top-color:#000000; border-right-color:#000000; } /* Pfeil links mittig */ .witharrow-l_c::before { left:-26px; bottom:50%; transform: translateY(50%); -ms-transform: translateY(50%); border:solid 14px transparent; border-right-color:#000000; } .witharrow-l_c::after { left:-28px; bottom:50%; transform: translateY(50%); -ms-transform: translateY(50%); border:solid 14px transparent; border-right-color:#000000; } /* Pfeil links unten */ .witharrow-l_b::before { bottom:0; left:-14px; border:solid 7px transparent; border-right-color:#000000; border-bottom-color:#000000; } .witharrow-l_b::after { bottom:-1px; left:-16px; border:solid 8px transparent; border-right-color:#000000; border-bottom-color:#000000; } /** Pfeile fuer aufklappbare Bereiche - bird vogel **/ .morearrow { position:relative; padding-left:2em; cursor:pointer; vertical-align:middle; } .morearrow::before { display:block; content:"\f078"; font-family:'Font Awesome 5 Free'; font-weight:900; position:absolute; top:0; left:0; transition:transform 0.5s; } .morearrow.open::before { transform:rotateX(-180deg); -ms-transform:rotateX(-180deg); } /** chilltip **/ .chilltiptitle { padding:0.8em; border:solid 1px #000000; box-shadow:0 0 16px #18515b; background-color:#000000;; display:none; height:auto; width:auto; max-width:300px; position:absolute; z-index:1001; } .chilltiptitle p { padding:0; margin:0; } /** Tabelle **/ table.design { border-spacing:0; } table.design tr > * { padding:0.45em; } table.design.noframe tr:first-child > * { padding-top:0; } table.design.noframe tr:last-child > * { padding-bottom:0; } table.design.noframe tr > *:first-child { padding-left:0; } table.design.noframe tr > *:last-child{ padding-right:0; } table.design tr > *.label { padding-right:1em; } table.borders { border-collapse:collapse; } table.borders tr > * { border:1px solid #dddddd; } table.borders_h { border-collapse:collapse; } table.borders_h tr > * { border:0 solid #dddddd; border-width:1px 0; } table.borders_v { border-collapse:collapse; } table.borders_v tr > * { border:0 solid #dddddd; border-width:0 1px; } table.light { } table.light tr > * { border-width:1px 0; padding:0.8em; } table.light tr > th { border-width:1px 0 2px 0; } /* Preistabelle */ table.prices {} table.prices td.label { text-align:left; } table.prices td.value { text-align:right; } /** modale Elemente **/ .fullscreen { position:absolute; top:0; left:0; width:100%; height:100%; } .fullscreen_fixed { position:fixed; top:0; left:0; width:100%; height:100%; } .bg_dark-translucent { background-color:rgba(0,0,0,0.8); } .bg_light-translucent { background-color:rgba(255,255,255,0.8); } .modal_dark_relative, .modal_light_relative { z-index:2000; position:relative; } .modal_dark_relative::before,.modal_light_relative::before { content:""; position:fixed; top:0; left:0; width:100%; height:100%; z-index: -1; } .modal_dark_relative::before { background-color:rgba(0,0,0,0.8); } .modal_light_relative::before { background-color:rgba(255,255,255,0.8); } /** Teaser **/ .teaser { padding:0.8em 0.4em; } /** Benutzertexte **/ .db_htmltext img { max-width:100%; } /** Textgestaltung **/ .tp-container + .tp-container { margin-top:20px; } hr.tp-hr { margin:20px 0; } /* Text und Bild */ .tp-container img.tp-picture_left { float:left; margin-right:1.8em; } .tp-container img.tp-picture_left + div:after { display:block; content:""; clear:left; } .tp-container img.tp-picture_right { float:right; margin-left:1.8em; } .tp-container img.tp-picture_right + div:after { display:block; content:""; clear:right; } .tp-left { text-align:left; } .tp-center { text-align:center; } .tp-right { text-align:right; } .tp-block { text-align:justify; } .tp-border-right, .tp-border-left { border:0px solid #18515b; } .tp-border-left { border-left-width:0; border-top-width:1px; } .tp-border-right { border-right-width:0; border-bottom-width:1px; } /*3 irgendwas nebeneinander*/ .tp-container_3 > * { display:block; padding:8px 0; max-width:100%; margin-top:0 !important; } .tp-container_3 > *:first-child { padding-top:0; } .tp-container_3 > *:last-child { padding-bottom:0; } .tp-container_3 { padding:10px 0; } .tp-container_3:after { clear:both; content:""; display:block; } /*2 irgendwas nebneinander*/ .tp-container_2 > * { display:block; padding:0; max-width:100%; margin-top:0 !important; } .tp-container_2 > *:first-child { padding-bottom:8px; } .tp-container_2 > *:last-child { padding-top:8px; } .tp-container_2 { padding:10px 0; } .tp-container_2:after { clear:both; content:""; display:block; } /* Bilderklasse fuer Anwender */ .myImage { max-width:100%; height:auto; } /* AGB Formatierungen */ #agb p { margin:10px 0; } #agb #agbgliederung { padding-left:20px; text-indent:-20px; } #agb .caption { font-weight:bold; margin:10px 0; } .expand_text { display:none; background-color:#000000; } .expand_text .close_text { text-align:right; } .expand_text.open { display:block; margin-top:10px; } #agb_text + .hangingindent20 ~ #wdr_text + div:not(.hangingindent20) { margin-top:5px; } /* PayPal PPCP */ body.a_article div[data-pp-message]:not(.collapsed) { padding:10px 0; } /*** Plugins ***/ /* fancySelect*/ .fancySelect { display:flex; flex-flow:row wrap; padding:0.4em 0; } .fancyOption { padding:0.4em; cursor:pointer; border:1px solid #18515b; background-color:#000000; flex-grow:1; display:inline-block; text-align:center; } .fancyOption:not(:last-child) { margin-right:0.4em; } .fancyOption.selected { border-color:#3ecbe7; } /*** box-sizing ***/ .box-sizing-border-box { box-sizing:border-box; } .box-sizing-content-box { box-sizing:content-box; } /*** Abstaende ***/ /**margin**/ .m--0 { margin:0; } .m--inherit, .m--parent { margin:inherit; } .m--0-auto { margin:0 auto; } .m-t--0 { margin-top:0; } .m-r--0 { margin-right:0; } .m-b--0 { margin-bottom:0; } .m-l--0 { margin-left:0; } .m-t--auto { margin-top:auto; } .m-r--auto { margin-right:auto; } .m-b--auto { margin-bottom:auto; } .m-l--auto { margin-left:auto; } /*margin absolute*/ .m--b { margin:25px; } .m-tub--b { padding:0 25px 25px 25px; } .m-hat--b { padding:25px 25px 0 25px; } .m--m { margin:15px; } .m-tub--m { padding:0 15px 15px 15px; } .m-hat--m { padding:15px 15px 0 15px; } .m--s { margin:10px; } .m-tub--s { padding:0 10px 10px 10px; } .m-hat--s { padding:10px 10px 0 10px; } .m--xs { margin:5px; } .m-tub--xs { padding:0 5px 5px 5px; } .m-hat--xs { padding:5px 5px 0 5px; } .m-t--b { margin-top:25px; } .m-t--b---neg { margin-top:-25px; } .m-t--m { margin-top:15px; } .m-t--m---neg { margin-top:-15px; } .m-t--s { margin-top:10px; } .m-t--s---neg { margin-top:-10px; } .m-t--xs { margin-top:5px; } .m-t--xs---neg { margin-top:-5px; } .m-r--b { margin-right:25px; } .m-r--b---neg { margin-right:-25px; } .m-r--m { margin-right:15px; } .m-r--m---neg { margin-right:-15px; } .m-r--s { margin-right:10px; } .m-r--s---neg { margin-right:-10px; } .m-r--xs { margin-right:5px; } .m-r--xs---neg { margin-right:-5px; } .m-b--b { margin-bottom:25px; } .m-b--b---neg { margin-bottom:-25px; } .m-b--m { margin-bottom:15px; } .m-b--m---neg { margin-bottom:-15px; } .m-b--s { margin-bottom:10px; } .m-b--s---neg { margin-bottom:-10px; } .m-b--xs { margin-bottom:5px; } .m-b--xs---neg { margin-bottom:-5px; } .m-l--b { margin-left:25px; } .m-l--b---neg { margin-left:-25px; } .m-l--m { margin-left:15px; } .m-l--m---neg { margin-left:-15px; } .m-l--s { margin-left:10px; } .m-l--s---neg { margin-left:-10px; } .m-l--xs { margin-left:5px; } .m-l--xs---neg { margin-left:-5px; } /*margin relative*/ .m--b-r { margin:2em; } .m--m-r { margin:1.2em; } .m--s-r { margin:0.8em; } .m--xs-r { margin:0.4em; } .m-hor--s-r { margin:0 0.8em; } .m-ver--s-r { margin:0.8em 0; } .m-t--xb-r { margin-top:3em; } .m-t--xb-r---neg { margin-top:-3em; } .m-t--b-r { margin-top:2em; } .m-t--b-r---neg { margin-top:-2em; } .m-t--m-r { margin-top:1.2em; } .m-t--m-r---neg { margin-top:-1.2em; } .m-t--s-r { margin-top:0.8em; } .m-t--s-r---neg { margin-top:-0.8em; } .m-t--xs-r { margin-top:0.4em; } .m-t--xs-r---neg { margin-top:-0.4em; } .m-t--xxs-r { margin-top:0.2em; } .m-t--xxs-r---neg { margin-top:-0.2em; } .m-r--xb-r { margin-right:3em; } .m-r--xb-r---neg { margin-right:-3em; } .m-r--b-r { margin-right:2em; } .m-r--b-r---neg { margin-right:-2em; } .m-r--m-r { margin-right:1.2em; } .m-r--m-r---neg { margin-right:-1.2em; } .m-r--s-r { margin-right:0.8em; } .m-r--s-r---neg { margin-right:-0.8em; } .m-r--xs-r { margin-right:0.4em; } .m-r--xs-r---neg { margin-right:-0.4em; } .m-b--xb-r { margin-bottom:3em; } .m-b--xb-r---neg { margin-bottom:-3em; } .m-b--b-r { margin-bottom:2em; } .m-b--b-r---neg { margin-bottom:-2em; } .m-b--m-r { margin-bottom:1.2em; } .m-b--m-r---neg { margin-bottom:-1.2em; } .m-b--s-r { margin-bottom:0.8em; } .m-b--s-r---neg { margin-bottom:-0.8em; } .m-b--xs-r { margin-bottom:0.4em; } .m-b--xs-r---neg { margin-bottom:-0.4em; } .m-l--xb-r { margin-left:3em; } .m-l--xb-r---neg { margin-left:-3em; } .m-l--b-r { margin-left:2em; } .m-l--b-r---neg { margin-left:-2em; } .m-l--m-r { margin-left:1.2em; } .m-l--m-r---neg { margin-left:-1.2em; } .m-l--s-r { margin-left:0.8em; } .m-l--s-r---neg { margin-left:-0.8em; } .m-l--xs-r { margin-left:0.4em; } .m-l--xs-r---neg { margin-left:-0.4em; } /**padding**/ .p--0 { padding:0; } .p--inherit, .p--parent { padding:inherit; } .p--init { padding:initial; } /*padding absolute*/ .p--b { padding:25px; } .p-tub--b { padding:0 25px 25px 25px; } .p-hat--b { padding:25px 25px 0 25px; } .p--m { padding:15px; } .p-tub--m { padding:0 15px 15px 15px; } .p-hat--m { padding:15px 15px 0 15px; } .p--s { padding:10px; } .p-tub--s { padding:0 10px 10px 10px; } .p-hat--s { padding:10px 10px 0 10px; } .p--xs { padding:5px; } .p-tub--xs { padding:0 5px 5px 5px; } .p-hat--xs { padding:5px 5px 0 5px; } .p-t--b { padding-top:25px; } .p-t--m { padding-top:15px; } .p-t--s { padding-top:10px; } .p-t--xs { padding-top:5px; } .p-r--b { padding-right:25px; } .p-r--m { padding-right:15px; } .p-r--s { padding-right:10px; } .p-r--xs { padding-right:5px; } .p-b--b { padding-bottom:25px; } .p-b--m { padding-bottom:15px; } .p-b--s { padding-bottom:10px; } .p-b--xs { padding-bottom:5px; } .p-l--b { padding-left:25px; } .p-l--m { padding-left:15px; } .p-l--s { padding-left:10px; } .p-l--xs { padding-left:5px; } /*padding relative*/ .p--b-r { padding:2em; } .p--m-r { padding:1.2em; } .p--s-r { padding:0.8em; } .p--xs-r { padding:0.4em; } .p-t--b-r { padding-top:2em; } .p-t--m-r { padding-top:1.2em; } .p-t--s-r { padding-top:0.8em; } .p-t--xs-r { padding-top:0.4em; } .p-r--b-r { padding-right:2em; } .p-r--m-r { padding-right:1.2em; } .p-r--s-r { padding-right:0.8em; } .p-r--xs-r { padding-right:0.4em; } .p-b--b-r { padding-bottom:2em; } .p-b--m-r { padding-bottom:1.2em; } .p-b--s-r { padding-bottom:0.8em; } .p-b--xs-r { padding-bottom:0.4em; } .p-l--b-r { padding-left:2em; } .p-l--m-r { padding-left:1.2em; } .p-l--s-r { padding-left:0.8em; } .p-l--xs-r { padding-left:0.4em; } .p-t--0 { padding-top:0; } .p-r--0 { padding-right:0; } .p-b--0 { padding-bottom:0; } .p-l--0 { padding-left:0; } /*** Gutter ***/ .gutter--b { gap:25px; } .gutter--m { gap:15px; } .gutter--s { gap:10px; } .gutter--xs { gap:5px; } /*** z-index ***/ .z-index-1 { z-index: 1; } /*** Schriften ***/ /**Schriftgroesse**/ .mobile-header-icone_p { font-size:inherit; } .font--300, .font--biggest { font-size:3em; } .font--200, .font--bigger { font-size:2em; } .font--180 { font-size:1.8em; } .font--160, .font--big { font-size:1.6em; } .font--150 { font-size:1.5em; } .font--140 { font-size:1.4em; } .font--130 { font-size:1.3em; } .font--120, .font--medium { font-size:1.2em; } .font--110 { font-size:1.1em; } .font--100, .font--normal { font-size:1em; } .font--90 { font-size:0.9em; } .font--80, .font--small { font-size:0.8em; } .font--70, .font--smallest { font-size:0.7em; } .font--basic { font-size:1rem; } .font--300rem, .font--biggest-rem { font-size:3rem; } .font--200rem, .font--bigger-rem { font-size:2rem; } .font--180rem { font-size:1.8rem; } .f-size_brem, .font--160rem, .font--big-rem { font-size:1.6rem; } .font--150rem { font-size:1.5rem; } .font--140rem { font-size:1.4rem; } .font--120rem, .font--medium-rem { font-size:1.2rem; } .font--110rem { font-size:1.1rem; } .font--90rem { font-size:0.9rem; } .font--80rem, .font--small-rem { font-size:0.8rem; } .font--70rem, .font--smallest-rem { font-size:0.7rem; } .font--16px { font-size:16px; } .lineheight--90em { line-height:0.9em; } .lineheight--normal { line-height:normal; } /**Schriftstil**/ .style-parent { font-style:inherit; } .style-0 { font-weight:normal; font-style:normal; } .italic, .cursive, .kursive { font-style:italic; } .bold { font-weight:bold; } .weight_0 { font-weight:normal; } .no-deco { text-decoration:none; } .underline { text-decoration:underline; } .crossline { text-decoration:line-through; } .upper { text-transform:uppercase; } .simlink { cursor:pointer; } .simlink:hover { color:#3ecbe7; } .unlink { cursor:default; color:#3ecbe7; text-decoration:none; } .unlink:hover { color:inherit; } .cartpos .availability span { color:#ff0000; } .l-marker::before { font-family:"Font Awesome 5 Free"; font-weight:bold; content:"\f101"; margin-right:0.2em; vertical-align:middle; } /**Ausrichtung**/ .acenter { text-align:center; } .aleft { text-align:left; } .aright { text-align:right; } .vbase { vertical-align:baseline; } .vcenter { vertical-align:middle; } .vbottom { vertical-align:bottom; } .up { vertical-align:super; } .vtop { vertical-align:top; } .raquo { vertical-align:5%; } .nowrap { white-space:nowrap; } .wrap_normal, .wrap { white-space:normal; } .hyphens { overflow:hidden; word-wrap:break-word; overflow-wrap:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; } /**Schriftfarben**/ .f-color--parent { color:inherit; } .f-color--0, .f-color--basic { color:#3ecbe7; } .f-color--0-hover:hover,.f-color--basic-hover:hover { color:#3ecbe7; } .f-color--1 { color:#3ecbe7; } .f-color--1-hover:hover { color:#3ecbe7; } .f-color--2, .f-color--light { color:#3ecbe7; } .f-color--2-hover:hover, .f-color--light-hover:hover { color:#3ecbe7; } .f-color--3 { color:#3ecbe7; } .f-color--3-hover:hover { color:#3ecbe7; } .f-color--4, .f-color--lighter { color:#aaaaaa; } .f-color--4-hover:hover, .f-color--lighter-hover:hover { color:#aaaaaa; } .f-color--5, .f-color--lightest, .f-color--disabled { color:#dddddd; } .f-color--5-hover:hover, .f-color--lightest-hover:hover, .f-color--disabled:hover { color:#dddddd; } .f-color--warning, .changed { color:#ff0000; } .f-color--warning-hover:hover { color:#ff0000; } .f-color--highlight { color:#cd0a0a; } .f-color--highlight-hover:hover { color:#cd0a0a; } .f-color--notice { color:#008000; } .f-color--notice-hover:hover { color:#008000; } .f-color--stars { color:#ffd42c; } .f-color--stars-hover:hover { color:#ffd42c; } .f-color--onhigh { color:#3ecbe7; } .f-color--onhigh-hover:hover { color:#3ecbe7; } .f-color--high { color:#3ecbe7; } .f-color--high-hover:hover { color:#3ecbe7; } /*header*/ .f-color--header { color:#3ecbe7; } .f-color--header-hover:hover { color:#3ecbe7; } .f-color--header-hover-color { color:#3ecbe7; } .f-color--header-light { color:#aaaaaa; } .f-color--header-light-hover { color:#3ecbe7; } .f-color--header-light-hover-color { color:#3ecbe7; } /*footer*/ .f-color--footer { color:#3ecbe7; } .f-color--footer-hover:hover { color:#3ecbe7; } .f-color--footer-hover-color { color:#3ecbe7; } .f-color--footer-light { color:#aaaaaa; } .f-color--footer-light-hover { color:#3ecbe7; } .f-color--footer-light-hover-color { color:#3ecbe7; } .highlight { color:#3ecbe7; font-weight:bold; } .f-color--white { color:#fff; } .f-color--lightgrey { color:#aaa; } .rot { color:#d30000; } .gelb { color:#ffd42c; } .gruen { color:#03bf00; } /*** Rahmen ***/ .b--none { border:none; } .b--inherit, .b--parent { border:inherit; } /**Rahmenstaerke**/ .b--0 { border-width:0; } .b--1px { border-width:1px; } .b--2px { border-width:2px; } /*oben*/ .b-t--0 { border-top-width:0; } .b-t--1px { border-top-width:1px; } .b-t--2px { border-top-width:2px; } /*rechts*/ .b-r--0 { border-right-width:0; } .b-r--1px { border-right-width:1px; } .b-r--2px { border-right-width:2px; } /*unten*/ .b-b--0 { border-bottom-width:0; } .b-b--1px { border-bottom-width:1px; } .b-b--2px { border-bottom-width:2px; } /*links*/ .b-l--0 { border-left-width:0; } .b-l--1px { border-left-width:1px; } .b-l--2px { border-left-width:2px; } /**Rahmenart**/ .b-style--none { border-style:none; } .b-style--solid { border-style:solid; } .b-style--dashed { border-style:dashed; } .b-style--dotted { border-style:dotted; } /**Kombis**/ .border { border-width:1px; border-style:solid; border-color:#18515b; } .b--trans { border-width:1px; border-style:solid; border-color:transparent; } .b-t { border-top:1px solid #18515b; } .b-t--trans { border-top:1px solid transparent; } .b-b { border-bottom:1px solid #18515b; } .b-b--trans { border-bottom:1px solid transparent; } .b-l { border-left:1px solid #18515b; } .b-l--trans { border-left:1px solid transparent; } .b-r { border-right:1px solid #18515b; } .b-r--trans { border-right:1px solid transparent; } .b-h { border-width:1px 0; border-style:solid; border-color:#18515b; } .b-h--trans { border-width:1px 0; border-style:solid; border-color:transparent; } .b-v { border-width:0 1px; border-style:solid; border-color:#18515b; } .b-v--trans { border-width:0 1px; border-style:solid; border-color:transparent; } .b-tub { border-width:0 1px 1px 1px; border-style:solid; border-color:#18515b; } .b-tub--trans { border-width:0 1px 1px 1px; border-style:solid; border-color:transparent; } .b-hat { border-width:1px 1px 0 1px; border-style:solid; border-color:#18515b; } .b-hat--trans { border-width:1px 1px 0 1px; border-style:solid; border-color:transparent; } /** Ecken **/ .b--hard { border-radius:0; } .b--soft { border-radius:4px; } .b--softer { border-radius:10px; } /**Rahmenfarbe**/ .b-color--0 { border-color:#000000; } .b-color--1, .b_light { border-color:#000000; } .b-color--2 { border-color:#000000; } .b-color--3 { border-color:#000000; } .b-color--4, .b-color--basic { border-color:#18515b; } .b-color--5 { border-color:#18515b; } .b-color--6 { border-color:#3ecbe7; } .b-color--7, .b-color--dark { border-color:#3ecbe7; } .b-color--highlight { border-color:#cd0a0a; } .b-color--warning { border-color:#ff0000; } .b-color--f-color--0 { border-color:#3ecbe7; } .b-color--f-color--1 { border-color:#3ecbe7; } /**Schatten**/ .shadow { box-shadow:0px 0px 8px #3ecbe7; } .shadow-b-l { box-shadow:-4px 4px 8px #3ecbe7; } .shadow-b-r { box-shadow:4px 4px 8px #3ecbe7; } .shadow-t-l { box-shadow:-4px -4px 8px #3ecbe7; } .shadow-t-r { box-shadow:4px -4px 8px #3ecbe7; } .shadow-t { box-shadow:0px -8px 8px -8px #3ecbe7; } .shadow-b { box-shadow:0px 8px 8px -8px #3ecbe7; } .shadow-l { box-shadow:-8px 0px 8px -8px #3ecbe7; } .shadow-r { box-shadow:8px 0px 8px -8px #3ecbe7; } .shadow.small-shadow { box-shadow:0px 0px 4px #3ecbe7; } .shadow-b-l.small-shadow { box-shadow:-2px 2px 4px #3ecbe7; } .shadow-b-r.small-shadow { box-shadow:2px 2px 4px #3ecbe7; } .shadow-t-l.small-shadow { box-shadow:-2px -2px 4px #3ecbe7; } .shadow-t-r.small-shadow { box-shadow:2px -2px 4px #3ecbe7; } .shadow-t.small-shadow { box-shadow:0px -4px 4px -4px #3ecbe7; } .shadow-b.small-shadow { box-shadow:0px 4px 4px -4px #3ecbe7; } .shadow-l.small-shadow { box-shadow:-4px 0px 4px -4px #3ecbe7; } .shadow-r.small-shadow { box-shadow:4px 0px 4px -4px #3ecbe7; } /**Scrollbar**//**nur in Webkit-Browsern (Chrome, Edge, Safari)**/ .scrollbar-light::-webkit-scrollbar { width:5px; } .scrollbar-light::-webkit-scrollbar-button { display:none; } .scrollbar-light::-webkit-scrollbar-track { background-color:#18515b; } .scrollbar-light::-webkit-scrollbar-thumb { background-color:#3ecbe7; border-radius:4px; } /*** Farben ***/ /**Hintergrund**/ /*Standard-Farben*/ .bg-color_parent { background-color:inherit; } .bg-color_color1, .bg-color_light { background-color:#000000; } .bg-color_color2 { background-color:#000000; } .bg-color_color3, .bg-color_smooth { background-color:#000000; } .bg-color_color4 { background-color:#000000; } .bg-color_color5, .bg-color_strong { background-color:#18515b; } .bg-color_color6 { background-color:#18515b; } .bg-color_color7 { background-color:#3ecbe7; } .bg-color_color8, .bg-color_dark { background-color:#3ecbe7; } .bg-color_main, .bg-main { background-color:#000000; } /*High-Farben*/ .bg-high--full { background-color:#000000;; } .bg-high--full---hover { background-color:#18515b;; } .bg-high-color { background:#000000; } /*Verlaeufe*/ .bg-color_1-2-h { background:linear-gradient(to right, #000000 10%, #000000 65%); } /*Spezialfaelle*/ .bg-trans--dark { background-color:rgba(0,0,0,0.8); } .bg-trans--light { background-color:rgba(85,85,85,0.8); } /*Signalfarben*/ .bg-warning { background-color:#ff0000; } /*Transparenz*/ .bg-transparent { background:transparent; } /*** float ***/ .float-l { float:left; } .float-r { float:right; } .clear-both::after { clear:both; display:block; content:""; } .clear-left::after { clear:left; display:block; content:""; } .clear-right::after { clear:right; display:block; content:""; } .clearfix { clear:both; display:block; } /*** position ***/ .pos--inherit, .pos--parent { position:inherit; } .pos--a { position:absolute; } .Pos--a { position:absolute !important; } .pos--r { position:relative; } .Pos--r { position:relative !important; } .pos--f { position:fixed; } .top { top:0; } .Top { top:0 !important; } .left { left:0; } .Left { left:0 !important; } .right { right:0; } .Right { right:0 !important; } .bottom { bottom:0; } .Bottom { bottom:0 !important; } .top_s-r { top:0.8em; } .Top_s-r { top:0.8em !important; } .left_s-r { left:0.8em; } .Left_s-r { left:0.8em !important; } .right_s-r { right:0.8em; } .Right_s-r { right:0.8em !important; } .bottom_s-r { bottom:0.8em; } .Bottom_s-r { bottom:0.8em !important; } .fullRight { right:100%; } .FullRight { right:100% !important; } .fullLeft { left:100%; } .FullLeft { left:100% !important; } /* Neutralisation */ .top--auto { top:auto; } .Top--auto { top:auto !important; } .left--auto { left:auto; } .Left--auto { left:auto !important; } .right--auto { right:auto; } .Right--auto { right:auto !important; } .bottom--auto { bottom:auto; } .Bottom--auto { bottom:auto !important; } .vcenter-block { display:block; top:50%; transform:translateY(-50%) scale(1.01); transform-origin:0 0; /*transform:translateY(-50%); -ms-transform:translateY(-50%); zoom:1.01;*/ } .vcenter-block-cell { display:table-cell; vertical-align:middle; } .hcenter-block { display:block; left:50%; transform:translateX(-50%) scale(1.01); transform-origin:0 0; /*transform:translateX(-50%); -ms-transform:translateX(-50%); zoom:1.01;*/ } .center-block { display:block; top:50%; left:50%; transform:translate(-50%, -50%) scale(1.01); transform-origin:0 0; /*transform:translateY(-50%) translateX(-50%); -ms-transform:translateY(-50%) translateX(-50%); zoom:1.01;*/ } .hcenter-easy { margin-right:auto; margin-left:auto; } .center-children--horizontal { display:flex; display:-webkit-flexbox; display:-ms-flexbox; justify-content:center; -ms-flex-pack:center; } .center-children--horizontal > * { flex-basis:100%; } .center-children--vertical { display:flex; display:-webkit-flexbox; display:-ms-flexbox; align-items:center; -ms-flex-align:center; } .center-children--vertical > * { flex-basis:100%; } /*Hintergrund*/ .bg-repeat { background-repeat:repeat; } .bg-norepeat, .bg-single { background-repeat:no-repeat; } .bg-repeat_x { background-repeat:repeat-x; } .bg-repeat_y { background-repeat:repeat-y; } .bg-top { background-position:top; } .bg-bottom { background-position:bottom; } .bg-left { background-position:left; } .bg-right { background-position:right; } .bg-center { background-position:center; } .bg-fit, .bg-contain { background-size:contain; } .bg-grow, .bg-cover { background-size:cover; } /*die dritte Dimension*/ .nearest, .over9000 { z-index:9001; } .nearer { z-index:1000; } .near { z-index:100; } .far { z-index:1; } .farthest { z-index:-1; } /*** Groessen ***/ /**Breite**/ .w--auto { width:auto; } /*absolute*/ .w--50px { width:50px; } .w-max--50px { max-width:50px; } .w--65px { width:65px; } .w-max--65px { max-width:65px; } .w--75px { width:75px; } .w-max--75px { max-width:75px; } .w--100px { width:100px; } .w-max--100px { max-width:100px; } .w--150px { width:150px; } .w-max--150px { max-width:150px; } .w--200px { width:200px; } .w-max--200px { max-width:200px; } .w--250px { width:250px; } .w-max--250px { max-width:250px; } .w--320px { width:320px; } .w-max--320px { max-width:320px; } .w--350px { width:350px; } .w-max--350px { max-width:350px; } .w--400px { width:400px; } .w-max--400px { max-width:400px; } .w--min-mobile { min-width:320px; } .w-max--min-mobile { max-width:320px; } .w--min-13em { min-width:13em; } /*relative*/ .w--100 { width:100%; } .w-max--100 { max-width:100%; } .w--90 { width:90%; } .w--80 { width:80%; } .w--75 { width:75%; } .w--70 { width:70%; } .w--66 { width:66.66%; } .w--60 { width:60%; } .w--50 { width:50%; } .w--49 { width:49%; } .w--40 { width:40%; } .w--33 { width:33.33%; } .w--30 { width:30%; } .w--25 { width:25%; } .w--20 { width:20%; } .w--10 { width:10%; } .w--2em { width:2em; } .w--3em { width:3em; } .w--20em { width:20em; } .w-max--20em { max-width:20em; } .w--28em { width:28em } .w-max--28em { max-width:28em; } .w--68em { width:68em; } .w-max--68em { max-width:68em; } .w--100vw { width:100vw; } .w-max--100vw { max-width:100vw; } .w--100-3em { width:calc(100% - 3em); } .w-max--100-3em { max-width:calc(100% - 3em); } .w--50-3em { width:calc(50% - 3em); } /**Hoehe**/ .h_auto, .h--auto { height:auto; } /*absolute*/ .h--1px, .h-min { height:1px; } .h-max--1px { max-height:1px; } .h-min--1px { min-height:1px; } .h--50px { height:50px; } .h-max--50px { max-height:50px; } .h--65px { height:65px; } .h-max--65px { max-height:65px; } .h--75px { height:75px; } .h-max--75px { max-height:75px; } .h--100px { height:100px; } .h-max--100px { max-height:100px; } .h-min--100px { min-height:100px; } .h--150px { height:150px; } .h-max--150px { max-height:150px; } .h--200px { height:200px; } .h-max--200px { max-height:200px; } .h--250px { height:250px; } .h-max--250px { max-height:250px; } .h--320px { height:320px; } .h-max--320px { max-height:320px; } .h--350px { height:350px; } .h-max--350px { max-height:350px; } /*relative*/ .h--100 { height:100%; } .h--50 { height:50%; } .h--33 { height:33.33%; } .h--25 { height:25%; } .h-max--100 { max-height:100%; } .h--100vh { height:100vh; } .h-max--100vh { max-height:100vh; } .h--1em { height:1em; } .h--2em { height:2em; } .h--3em { height:3em; } .h--20em { height:20em; } .h-max--1em { max-height:1em; } .h-max--2em { max-height:2em; } .h-max--3em { max-height:3em; } /** Bilder **/ .with-img--w-max--100 img { max-width:100%; object-fit: contain; height: auto; } .object-cover, .with-img--w-max--100 .object-cover { object-fit: cover; width: 100%; height: 100%; } /*** Sichtbarkeit ***/ .hide, .hide_x, .hide_1, .not-empty:empty, .not-empty-next:empty, .not-empty-next + *, .hide-next + *, template { display:none; } .not-empty-next:empty + *:not(:empty) { display:initial; } .empty-next-hide:empty + *, .not-empty-hide-all-next:not(:empty) ~ * { display:none; } .show, .show_x, .show_1 { display:block; } .hide-first { display:none; } .show-first { display:block; } .hidden { visibility:hidden; } .visible { visibility:visible; } .hollow { opacitiy:0; } .full { opacity:1; } .Hide_x { display:none !important; } /*** display ***/ #mobileBreakpoint { display:block; } /* Basics */ .display_b, .block { display:block; } .display_ib, .inline-block { display:inline-block; } .display_i, .inline { display:inline; } .display_n, .none { display:none; } /*** Flexbox ***/ .flex { display:flex; display:-webkit-flexbox; display:-ms-flexbox; } @media (min-width:480px){ .flex--480 { display:flex; display:-webkit-flexbox; display:-ms-flexbox; } } .flex-wrap { flex-wrap:wrap; -ms-flex-wrap:wrap; } .flex-nowrap { flex-wrap:nowrap; -ms-flex-wrap:none; } .flex-wrap-reverse { flex-wrap:wrap-reverse; -ms-flex-wrap:wrap-reverse; } .flex-column { flex-direction:column; -ms-flex-direction:column; } .flex-grow_0 { flex-grow:0; } .flex-grow_1 { flex-grow:1; } .flex-grow_2 { flex-grow:2; } .flex-grow_3 { flex-grow:3; } .flex-grow_4 { flex-grow:4; } .flex-center_h { justify-content:center; -ms-flex-pack:center; } .flex-center_v { align-items:center; -ms-flex-align:center; } .flex-right { justify-content:right; } .flex-start { align-items:flex-start; } .flex-end { align-items:flex-end; -ms-flex-align:end; } .flex-baseline { align-items:baseline; -ms-flex-align:baseline; } .flex-sb { justify-content:space-between; } .flex-sa { justify-content:space-around; } .flex-se { justify-content:space-evenly; } .flex-stretch { align-items:stretch; } .flex-samesize { flex:1 1 0px; } /*children*/ .flex-bottom { align-self:flex-end; } /* Navigation */ .display-in-row { display:block; } .display-in-row > * { display:block; float:left; } .display-in-row::after { clear:left; content:""; display:block; } /* overflow */ .oflow_hidden, .noscroll { overflow:hidden; } .oflow_visible { overflow:visible; } .oflow_scrollX, .scrollX { overflow:scroll-x; } .oflow_scrollY, .scrollY { overflow:scroll-y; } .oflow_scroll, .scroll { overflow:scroll; } .oflow_auto { overflow:auto; } /* Druckversion */ #printversion a { text-decoration:none; } #printversion img { vertical-align:middle; margin-right:10px; } /*** Cursor ***/ .basic { cursor:default; } .pointer { cursor:pointer; } /*** Transitions ***/ .trans-short { transition:all 0.3s; } .trans_bg-color { transition:background-color 0.3s; } .trans-delay { transition-delay: 0.2s; } .shuffle-enter, .shuffle-leave-to { opacity: 0; transform: translateY(150px); } .shuffle-leave-active { position: absolute; } .shuffle-item { transition:all 1s; } .slide-fade-enter-active, .slide-fade-leave-active { transition: all .5s ease; } .slide-fade-enter, .slide-fade-leave-to { transform: translateX(100px); opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 3s; } .fade-enter, .fade-leave-to { opacity: 0; } .togglebox { box-sizing:border-box; overflow:hidden; transition:max-height .6s ease-out, padding .5s ease-out; height:auto; max-height:10000px; max-height: max-content; } .togglebox.collapsed { max-height:0; } /*********************************/ /************** MTS **************/ /*********************************/ #mts { position:fixed; top:0; left:0; z-index:9001; width:100%; height:100%; } #mts-background { position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, .6); } #mts-close { cursor:pointer; text-align:right; } #mts-close .fa { vertical-align:middle; } #mts-close-text { display:none; } @media (min-width:480px){ #mts-close-text { display:inline; } } #mts-input { position:relative; width:80%; font-size:1.4em; display:inline-block; } @media (min-width:480px){ #mts-input { margin-top:15px; } } #mts-input input { width:100%; padding:0.8em 0.8em 0.8em 4em; border:1px solid #18515b; border-radius:4px; } #mts-search-icon { position:absolute; left:10px; top:7px; cursor:pointer; border:none; padding:0; } #mts-search-icon::before { font-family:'Font Awesome 5 Free'; font-weight:bold; font-size:2em; content:"\f002"; color:#3ecbe7; } .mts-items-search-icon::before { font-family:'Font Awesome 5 Free'; font-weight:bold; font-size:1em; content:"\f002"; color:#aaaaaa; padding-right: 8px;} #mts-clear { position:absolute; right:10px; top:7px; cursor:pointer; } #mts-clear::before { font-family:'Font Awesome 5 Free'; font-weight:bold; font-size:2em; content:"\f00d"; color:#3ecbe7; } #mts-main { display: grid; grid-template-rows: auto 1fr; position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:1; border:1px solid #18515b; max-height:100%; max-width:1200px; width:100%; text-align:center; } #mts-suggestions { display: grid; grid-template-rows: auto min-content; overflow:hidden; } #mts-results { display:grid; overflow-y:auto; overflow-x:hidden; grid-template: "products" auto "suggests1" auto "suggests2" auto } #mts-1st-column { grid-area:suggests1; padding-top:10px; } #mts-2nd-column { grid-area:suggests2; padding-top:10px; } #mts-3rd-column { grid-area:products; text-align: left; } .mts-caption { border:0px solid #dddddd; border-width:0 0 1px 0; } .microphone_button { top:0; right:40px; color:#aaaaaa; } @media (min-width:880px){ #mts-results { display: flex; } #mts-1st-column { width:16.66%; padding-top:15px; } #mts-2nd-column { width:16.66%; padding-top:15px; } #mts-3rd-column { flex-grow:1; text-align: center; } .mts-caption { border-width:0; } #mts-1st-column, #mts-2nd-column, #mts-3rd-column { overflow-y:auto; overflow-x:hidden; } } .mts-item { display:flex; cursor:pointer; padding:3px; transition:background-color 0.2s; overflow:hidden; align-items:center; justify-content: space-between; } .mts-item:not(:last-child){ border:0px solid #dddddd; border-width:0 0 1px 0; } .mts-item:hover { background-color:#000000; } .mts-productdata { text-align:left; padding-left:15px; width: 100%; } .mts-item .image { height:60px; width:20%; display:flex; } .mts-item .image img { max-width:100%; max-height:100%; height:auto; margin:auto; } .mts-item .brand img { max-width:100%; max-height:2em; height:auto; } .mts-item .name { margin:5px 0; } .mts-item .name b { color:#3ecbe7; } .mts-item .number { margin:5px 0; font-size:.8em; color:#3ecbe7; } .mts-item .price { margin:5px 0; } .mts-item .eval { margin:5px 0; } #mts-spellcheck b { color:#3ecbe7; } #mts-brands b { color:#3ecbe7; } #mts-categories b { color:#3ecbe7; } @media (min-width:400px){ #mts-items .mts-content { display :grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:25px 15px; grid-gap:25px 15px; justify-items: center; } .mts-item { display:block; } .mts-item:not(:last-child){ border-width: 0; } .mts-item .image { height:120px; max-height:none; width:auto; } .mts-productdata { text-align:center; padding-left:0; } } .mts-brand img { max-height:2em; max-width:100%; width:auto; height:auto; } .mts-brand .flex { align-items: center; } #mts-gosearch { align-self:center; justify-self:center; } /* * Alternativ-CSS fuer IE bis 11 */ @media (-ms-high-contrast: active), (-ms-high-contrast: none) { /*CSS-Hack*/ /*---*/ #mts-main { height:100%; } #mts-results { display:flex; display:-ms-flexbox; max-height:100%; max-width:100%; } #mts-gosearch { height:10%; padding:15px; } #mts-1st-column { flex-basis:16.66%; } #mts-2nd-column { flex-basis:16.66%; } #mts-3rd-column { flex-shrink:2; } #mts-items .mts-content { display:flex; display:-ms-flexbox; -ms-flex-wrap:wrap; flex-wrap:wrap; } .mts-item { width:25%; } .mts-item img { width:auto; } .mts-brand .image { display: none; } /*---*/ } /* ----------------------------------------------------------------------------- Eigene Definitionen Teil m -------------------------------------------------------------------------- */ #errorDummyForUserInputm { display:none; } /*** Media Queries ***/ /* bei min-Groessen kleinste zuerst */ /**************************************************************************************************************************/ /* ************************ min 480px *********************************************************************************** */ /**************************************************************************************************************************/ @media (min-width:480px){ /*catblog 2-spaltig, catalog Bild links*/ /**Sichtbarkeit**/ .display_b-480 { display:block; } .display_ib-480 { display:inline-block; } .display_i-480 { display:inline; } .display_n-480 { display:none; } .display_f-480 { display:flex; } /*** Groesse ***/ .w--auto-480 { width:auto; } .w--100-480 { width:100%; } .w--80-480 { width:80%; } .w--75-480 { width:75%; } .w--60-480 { width:60%; } .w--50-480 { width:50%; } .w--40-480 { width:40%; } .w--33-480 { width:33.33%; } .w--30-480 { width:30%; } .w--25-480 { width:25%; } .w--20-480 { width:20%; } .w--50px-480 { width:50px; } .w--75px-480 { width:75px; } .w--100px-480 { width:100px; } .w--150px-480 { width:150px; } .w--200px-480 { width:200px; } .w--250px-480 { width:250px; } .w--350px-480 { width:350px; } .w--420px-480 { width:420px; } /*** Video/Bild ***/ .ratio_16_9 { width:438px; height:246px; } .ratio_4_3 { width:438px; height:328px; } /*** Abstaende ***/ /** margin **/ .m-t--0-480 { margin-top:0; } .m-l--0-480 { margin-left:0; } .m-b--0-480 { margin-bottom:0; } .m-b--m-480 { margin-bottom:15px; } /** padding **/ .p--0-480 { padding:0; } .p-r--s-r-480 { padding-right:0.8em; } .p-l--s-r-480 { padding-left:0.8em; } .p-l--m-480 { padding-left:15px; } /*** Rahmen ***/ .b-l-480 { border-left:1px solid #18515b; } .b-r-480 { border-right:1px solid #18515b; } /*** Position ***/ .pos_a-480 { position:absolute; } /** Floating **/ .float-l-480 { float:left; } .float-r-480 { float:right; } .float-n-480 { float:none; } /**Ausrichtung**/ .acenter-480 { text-align:center; } .aleft-480 { text-align:left; } .aright-480 { text-align:right; } .nowrap-480 { white-space:nowrap; } .wrap-480 { white-space:normal; } /*** spezielle Elemente ***/ .catalog.grid:not(.product) article .desc { width:100%; } .catalog.grid:not(.product) article .pic { width:100%; } .catalog.grid article .desc-left { width:60% } .catalog.grid article .desc-right { width:40%; } .catalog.design article .desc-right { margin-top:0; } .tiles.design { margin-right:-16px; } .tiles.design > * { padding-right:16px; } .tiles.grid > *:not(.nogrid) { width:50%; } .tiles.big.grid > *:not(.nogrid) { width:100%; } .default_tabs::after { clear:left; content:''; display:block; } .default_tab { float:left; width:50%; } .default_tab:first-child { border-left:none; } .tp-container_2 > * { max-width:50% !important; float:left; } .tp-container_3 > * { max-width:33.33% !important;; float:left; } .tp-container_2 > *:first-child { padding-bottom:0; padding-right:8px; } .tp-container_2 > *:last-child { padding-top:0; padding-left:8px; } .tp-container_3 > * { padding:0 5px;} .tp-container_3 > *:first-child { padding-left:0; padding-right:10px; } .tp-container_3 > *:last-child { padding-right:0; padding-left:10px; } .tp-border-right { border-right-width:1px; } .tp-border-left { border-left-width:1px; } } /**************************************************************************************************************************/ /* ************************ min 640px *********************************************************************************** */ /**************************************************************************************************************************/ @media (min-width:640px){ /*Detailseite 2-spaltig, catblog 3-spaltig*/ /*** Sichtbarkeit ***/ .display_b-640 { display:block; } .display_ib-640 { display:inline-block; } .display_i-640 { display:inline; } .display_n-640 { display:none; } /*Groesse*/ .w--auto-640 { width:auto; } .w--100-640 { width:100%; } .w--75-640 { width:75%; } .w--66-640 { width:66.66%; } .w--60-640 { width:60%; } .w--50-640 { width:50%; } .w--40-640 { width:40%; } .w--33-640 { width:33.33%; } .w--30-640 { width:30%; } .w--25-640 { width:25%; } .w--20-640 { width:20%; } .w--10-640 { width:10%; } /*** Video/Bild ***/ .ratio_16_9 { width:598px; height:336px; } .ratio_4_3 { width:598px; height:448px; } /*** Abstaende ***/ /** margin **/ .m-t--0-640 { margin-top:0; } .m-l--0-640 { margin-left:0; } .m-b--0-640 { margin-bottom:0; } .m-b--m-640 { margin-bottom:15px; } /** padding **/ .p-r--s-r-640 { padding-right:0.8em; } .p-l--s-r-640 { padding-left:0.8em; } .p-r--m-640 { padding-right:15px; } /*** Rahmen ***/ .b-l-640 { border-left:1px solid #18515b; } .b-r-640 { border-right:1px solid #18515b; } /**Ausrichtung**/ .acenter-640 { text-align:center; } .aleft-640 { text-align:left; } .aright-640 { text-align:right; } .nowrap-640 { white-space:nowrap; } .wrap-640 { white-space:normal; } /*** spezielle Elemente ***/ .catalog.grid:not(.product) article .desc { width:80%; } .catalog.grid:not(.product) article .pic { width:20%; } .catalog.grid.cart article .desc-left { width:50%; } .catalog.grid:not(.cart) article .desc-left { width:50%; } #Left:not(:empty) ~ #Right:not(:empty) .catalog.grid:not(.cart) article .desc-left { width:40%; } .catalog.grid.cart article .desc-right { width:50%; } .catalog.grid:not(.cart) article .desc-right { width:50%; text-align:right; } #Left:not(:empty) ~ #Right:not(:empty) .catalog.grid:not(.cart) article .desc-right { width:60%; } .tiles.grid > *:not(.nogrid) { width:33.33%; } .tiles.big.grid > *:not(.nogrid) { width:50%; } .subnavi.grid .pic { height:auto; } article.product > section { padding:0; margin-top:15px; } .product .picture { width:60%; padding-right:8px; } .product .details { width:40%; padding-left:8px; margin-top:0; } /** Hilfselement zum Scrollen in der Detailseite **/ #slideOverlay { display:none; } .default_tab { width:33.33%; } /*Warenkorb*/ #cartVUE { display:flex; flex-direction:column; } #cart_extensions { order:-1; border-bottom:1px solid #18515b; border-top:none; } } /**************************************************************************************************************************/ /* ************************ min 880px *********************************************************************************** */ /**************************************************************************************************************************/ @media (min-width:880px){ /*catblog 4-spaltig und Desktop*/ /** Hintergrundbild setzen */ body { } /** mobiler Umbruch **/ #mobileBreakpoint { display:none; } /**Sichtbarkeit**/ .display_b-880, .show_880 { display:block; } .display_ib-880, .inline-block_880 { display:inline-block; } .display_i-880, .inline_880 { display:inline; } .display_n-880, .none_880 { display:none; } /*Groesse*/ .w--auto-880 { width:auto; } .w--100-880 { width:100%; } .w--75-880 { width:75%; } .w--66-880 { width:66.66%; } .w--60-880 { width:60%; } .w--50-880 { width:50%; } .w--40-880 { width:40%; } .w--33-880 { width:33.33%; } .w--30-880 { width:30%; } .w--25-880 { width:25%; } .w--20-880 { width:20%; } .w--10-880 { width:10%; } /*** Abstaende ***/ /** margin **/ .m-t--0-880 { margin-top:0; } .m-l--0-880 { margin-left:0; } .m-b--0-880 { margin-bottom:0; } .m-b--m-880 { margin-bottom:15px; } /** padding **/ .p-r--s-r-880 { padding-right:0.8em; } .p-l--s-r-880 { padding-left:0.8em; } .p-r--m-880 { padding-right:15px; } /**Ausrichtung**/ .acenter-880 { text-align:center; } .aleft-880 { text-align:left; } .aright-880 { text-align:right; } /*Kacheln*/ /* #Left:empty #Right:empty #Left:not(:empty) #Right:not(:empty) #Left:empty ~ #Right:empty #Left:empty ~ #Right:not(:empty) #Left:not(:empty) ~ #Right:empty #Left:not(:empty) ~ #Right:not(:empty) */ .nowrap-880 { white-space:nowrap; } .wrap-880 { white-space:normal; } .tiles.grid > *:not(.nogrid) { width:25%; } .tiles.big.grid > *:not(.nogrid) { width:33.33%; } #Left:empty ~ #Middle .tiles.grid > *:not(.nogrid), #Right:empty ~ #Middle .tiles.grid > *:not(.nogrid) { width:25%; } #Left:empty ~ #Middle .tiles.big.grid > *:not(.nogrid), #Right:empty ~ #Middle .tiles.big.grid > *:not(.nogrid) { width:33.33%; } #Left:empty ~ #Right:empty ~ #Middle .tiles.grid > *:not(.nogrid) { width:20%; } #Left:empty ~ #Right:empty ~ #Middle .tiles.big.grid > *:not(.nogrid) { width:25%; } #Left:not(:empty) ~ #Right:not(:empty) ~ #Middle .tiles.grid > *:not(.nogrid) { width:33.33%; } #Left:not(:empty) ~ #Right:not(:empty) ~ #Middle .tiles.big.grid > *:not(.nogrid) { width:50%; } /* hover effect subnavi */ .tiles.hover > * > div { transition:box-shadow 0.3s; } .default_tab { width:auto; padding-right:1em; } .default_tab::after { display:none; } /*** Video/Bild ***/ .ratio_16_9 { width:640px; height:360px; } .ratio_4_3 { width:640px; height:480px; } /* #Main.row_3 */ #Left:not(:empty) ~ #Right:not(:empty) .ratio_16_9 { width:495px; height:278px; } #Left:not(:empty) ~ #Right:not(:empty) .ratio_4_3 { width:495px; height:371px; } /*Shop-Grid*/ #middle-left-right { flex-direction:row; -ms-flex-direction:row; width:100%; } #Middle { order:2; -ms-flex-order:2; } #Left { order:1; -ms-flex-order:1; } #Right { order:3; -ms-flex-order:3; } #Left:empty ~ #Right:empty ~ #Middle { padding:0 15px; flex-basis:100%; } #Left:empty ~ #Right:not(:empty) ~ #Middle { padding:0 5px 0 15px; min-width:80%; flex-basis:calc(100% - 250px); } #Left:not(:empty) ~ #Right:empty ~ #Middle { padding:0 15px 0 5px; min-width:80%; flex-basis:calc(100% - 250px); } #Left:not(:empty) ~ #Right:not(:empty) ~ #Middle { padding:0 5px; min-width:60%; flex-basis:calc(100% - 500px); } #Left:not(:empty) { padding:0 10px 0 15px; width:20%; max-width:250px; min-height:1px; } #Right:not(:empty) { padding:0 15px 0 10px; width:20%; max-width:250px; min-height:1px; } #shop { position:relative; } #Header { background-color:#000000;; } #Header.style2, #Header.style1 #header_content { width:100%; max-width:none; } #Main { padding-top:0; } #Footer.style2, #Footer.style1 #footer_content { width:100%; max-width:none; } /* Staffelpreise */ .pricescale .show_table { display:none; } .pricescale .pricescale_visible:hover ~ .pricescale_table, .pricescale_table:hover { display:block; } .pricescale .pricescale_table { white-space:nowrap; overflow:visible; z-index:100; position:absolute; top:5px; right:50%; transform:translateX(50%) scale(1.01); transform-origin:0 0; /*transform:translateX(50%); -ms-transform:translateX(50%); zoom:1.01;*/ } .pricescale .pricescale_table::before, .pricescale .pricescale_table::after { display:block; } /** Navigation-Grid **/ .desktop_nav { display:block; } /** Filter **/ #Middle .filterclassdata { display:flex; align-items:stretch; flex-wrap:wrap; margin-right:-15px; } #Middle .filtergroup { width:33.33%; padding-right:15px; } /** Markenauswahl **/ #markenauswahl { max-width:250px; } #markenauswahl select { padding:0.4em; } #breadcrumb > div { padding-left:15px; } #markenauswahl + #breadcrumb > div { padding-left:5px; } /** Head-Bereich **/ #header_content { height:120px; } #mobile_logo, #mobileNavigationBox, .mobile-menu-caption, #close_menu, #close_filter { display:none; } /* User-Menue */ .header_options .option { height:30px; } /* mobiles Menue */ #mobileSearchNavigation { height:0; } #mobileNavigation.slideleft { display:none; } .slideleft { position:static; width:auto; height:auto; box-shadow:none; border:none; z-index:initial; } /* Hochscroll-Button auf Desktops */ #toTopButton { display:none; } /* Produktvergleichs-Button auf Desktops */ .compare-button { bottom:5px; } /** spezielle Elemente **/ #Left:not(:empty) ~ #Right:not(:empty) .catalog.grid.cart article .desc-left { width:40%; } #Left:not(:empty) ~ #Right:empty .catalog.grid.cart article .desc-left, #Left:empty ~ #Right:not(:empty) .catalog.grid.cart article .desc-left { width:55%; } #Left:empty ~ #Right:empty .catalog.grid.cart article .desc-left { width:60%; } #Left:not(:empty) ~ #Right:not(:empty) .catalog.grid.cart article .desc-right { width:60%; } #Left:not(:empty) ~ #Right:empty .catalog.grid.cart article .desc-right, #Left:empty ~ #Right:not(:empty) .catalog.grid.cart article .desc-right { width:45%; } #Left:empty ~ #Right:empty .catalog.grid.cart article .desc-right { width:40%; } #Left:empty ~ #Right:empty .product .picture { width:60%; } #Left:empty ~ #Right:empty .product .details { width:40%; } #Left:not(:empty) ~ #Right:empty .product .picture, #Left:empty ~ #Right:not(:empty) .product .picture { width:50%; } #Left:not(:empty) ~ #Right:empty .product .details, #Left:empty ~ #Right:not(:empty) .product .details { width:50%; } #Left:not(:empty) ~ #Right:not(:empty) .product .picture { width:50%; } #Left:not(:empty) ~ #Right:not(:empty) .product .details { width:50%; } } @media (pointer: fine){ .tiles.hover > *:not(.disabled):hover > div { box-shadow:0 8px 16px #aaaaaa; } } /* * Alternativ-CSS fuer IE bis 11 */ @media (min-width:880px), (-ms-high-contrast: active), (-ms-high-contrast: none) { /*CSS-Hack*/ #Left:empty ~ #Right:empty ~ #Middle { width:100%; } #Left:empty ~ #Right:not(:empty) ~ #Middle { width:80%; } #Left:not(:empty) ~ #Right:empty ~ #Middle { width:80%; } #Left:not(:empty) ~ #Right:not(:empty) ~ #Middle { width:60%; } } /**************************************************************************************************************************/ /* ************************ min 1200px *********************************************************************************** */ /**************************************************************************************************************************/ @media (min-width:1200px){ #Left:not(:empty) ~ #Right:empty .product .picture, #Left:empty ~ #Right:not(:empty) .product .picture { width:60%; } #Left:not(:empty) ~ #Right:empty .product .details, #Left:empty ~ #Right:not(:empty) .product .details { width:40%; } #Left:not(:empty) ~ #Right:not(:empty) .product .picture { width:50%; } #Left:not(:empty) ~ #Right:not(:empty) .product .details { width:50%; } } /**/ @media (pointer:coarse){ #isTouch { display:block; } } /* ----------------------------------------------------------------------------- Erweiterungen durch Plugins --------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Korrektur der Formularelemente fuer iOS-Geraete --------------------------------------------------------------------------- */ @supports (-webkit-overflow-scrolling: touch) { select, textarea, input, /*label,*/ .button_default, .button_high { font-size: 16px; } .input-field > label { top: 16px; } input[type="radio"] { border-radius:1em; } input:checked{ background-color:#3ecbe7; } .button_high.big { padding:0.8em 1em; } } /* ----------------------------------------------------------------------------- Druckersupport --------------------------------------------------------------------------- */ @media print { /*** Allgemeines ***/ .no-print { display:none !important; } #Main { border:none; } .caption-box { border:none; padding:0; } #shop { padding:0 !important; } .button_high, .button_put2cart { color:#3ecbe7; border:1px solid; border-color: #000000 #000000 #18515b #18515b; } /* JS Plugins */ div[id^="tsbadge"] { visibility:hidden; } } /* ----------------------------------------------------------------------------- Eigene Definitionen Teil 2 -------------------------------------------------------------------------- */ #logo { position:absolute; top:5px; left:30px; width:335px; height:85px; } #logo a { display:block; width:340px; height:91px; } .ev-icon { background-image:url(../nav/icons_ffffff.png); } .v_menu a.level1 { padding:4px 2px 4px 25px; } .nivo-controlNav a { background-image:url(../nav/nivo-slider-bullets_3ecbe7.png); } .nivo-html-caption-text { color:#ffffff; font-size:16px; } .product_table { width:778px; cellpadding:20px; vertical-align:middle; } .product_rahmen { background-color:#eade92; border-color:#7cb632; border-style:solid; border-width:1px; } .product_headline { font-size:12pt; font-weight:bold; align:center; } .product_zeile { height:42px; margin-bottom: 20px; vertical-align:middle; font-size:12pt; font-weight:bold; } mt-m { margin-top:10px; } table.tsubnav td.tsubnav { width:50%; vertical-align:top; text-align:center; border-width:1px; border-style:solid; padding:10px 0; } #errorDummyForUserInput { display:none; }