@charset "UTF-8"; /***********************************************/ /* hbSshopBoot.css */ /******************************************************/ /* Webfaden-Styles sShop Layout 2019 : B E G I N N /* /* Hinweis: sc arbeitet im Bereich eines halben Bildschirmes (Bildschirm: 1920x1200 => Abstimmung auf 1200x1200 ) */ /******************************************************/ /* Webfaden-Styles sShop Layout 2019 : B E G I N N /* */ /* klee: 30.08.2022 -- fonts.googleapis.com -- lokal bei sc gehostet */ /*@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i&display=swap') ; */ /* roboto-300 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-300italic - latin */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 300; src: url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-300italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-300italic.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-regular - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-500 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */ src: local(''), url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-500italic - latin */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 500; src: url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-500italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-500italic.woff') format('woff'), /* Modern Browsers */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-700 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-700italic - latin */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 700; src: url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/hbdb/scShared/css/etc/fontsG/roboto-v30-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */ } body { font-family: 'Roboto', Arial, sans-serif; font-size: 12px; font-weight: 300; color: #212121; width: 100%; overflow-x: hidden; } a { color: #FE9100; text-decoration: none; /*WH: 17.06.2020 ergaenzt um cursor:pointer*/ cursor: pointer; } a:focus, a:hover { /* klee -- Orginal Webfaden: color: #9B2C00;text-decoration: underline; */ color: #C57100; /* text-decoration: underline; */ text-decoration: none; font-style: bold; } img { max-width: 100%; } /* WH: 25.10.2021 - Spinner waehrend Laden des Shops*/ /* Startseite, Laden des Shops: Style fuer das Loader-Img, den sich drehenden Kreis*/ .hbLoaderImgStartStyle { border: solid 5px; /*WH : heigth = 1500px, bei 100% deckt es unten nicht alles zu*/ height: 1500px; /*WH Abstand zu oben nur wenige px, damit die Links im Menue deaktiviert sind*/ /*top: 5px;*/ /* klee: 14.04.2021 - showLoaderImg in top=0px + left=0px gesetzt */ top: 0px; left: 0px; /*position: absolute;*/ /* WH: 01.03.2019 - Neues VTMP-Layout: Style Erweiterungen*/ /* position fixed, damit der ganze Browser-Viewport ueberdeckt wird*/ position: fixed; width: 100%; z-index: 99999; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity = 50); opacity: 0.3; background-color: white; color: #FE9100; text-align: center; padding: 100px; /* font-size setzen, damit der Spinner im Div groesser wird*/ font-size: 35px; } /* klee: 26.03.2020 - vtmp: Korrekturen neues Layout: Grid überarbeitet Auswirkungen auf Markenlogo */ .hbGridImgMarkenlogo { max-width: 100%; margin: 0px; margin-top: 0px; } .hbGridImgNew { max-width: 100%; margin: 0px; margin-top: 1px; width: 40px; height: 13px" } .hbGridVorlage { max-width: 100%; margin: 0px; margin-top: 2px; } /*struktur, grid*/ .page-wrap-out { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .page-wrap-in { -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; /*width: calc(100% - 300px);*/ width: calc(100% - 253px); transition: all 0.5s; } .page-wrap-out.sbcollapsed .page-wrap-in { width: 100%; } .suchbaum-wrap { -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; /*width: 300px;*/ width: 253px; transition: all 0.5s; } .page-wrap-out.sbcollapsed .suchbaum-wrap { width: 0; } @media ( min-width :1520px) { .container { width: 1170px; } .col-lg-12 { width: 100% } .col-lg-11 { width: 91.66666667% } .col-lg-10 { width: 83.33333333% } .col-lg-9 { width: 75% } .col-lg-8 { width: 66.66666667% } .col-lg-7 { width: 58.33333333% } .col-lg-6 { width: 50% } .col-lg-5 { width: 41.66666667% } .col-lg-4 { width: 33.33333333% } .col-lg-3 { width: 25% } .col-lg-2 { width: 16.66666667% } .col-lg-1 { width: 8.33333333% } .col-lg-pull-12 { right: 100% } .col-lg-pull-11 { right: 91.66666667% } .col-lg-pull-10 { right: 83.33333333% } .col-lg-pull-9 { right: 75% } .col-lg-pull-8 { right: 66.66666667% } .col-lg-pull-7 { right: 58.33333333% } .col-lg-pull-6 { right: 50% } .col-lg-pull-5 { right: 41.66666667% } .col-lg-pull-4 { right: 33.33333333% } .col-lg-pull-3 { right: 25% } .col-lg-pull-2 { right: 16.66666667% } .col-lg-pull-1 { right: 8.33333333% } .col-lg-pull-0 { right: auto } .col-lg-push-12 { left: 100% } .col-lg-push-11 { left: 91.66666667% } .col-lg-push-10 { left: 83.33333333% } .col-lg-push-9 { left: 75% } .col-lg-push-8 { left: 66.66666667% } .col-lg-push-7 { left: 58.33333333% } .col-lg-push-6 { left: 50% } .col-lg-push-5 { left: 41.66666667% } .col-lg-push-4 { left: 33.33333333% } .col-lg-push-3 { left: 25% } .col-lg-push-2 { left: 16.66666667% } .col-lg-push-1 { left: 8.33333333% } .col-lg-push-0 { left: auto } .col-lg-offset-12 { margin-left: 100% } .col-lg-offset-11 { margin-left: 91.66666667% } .col-lg-offset-10 { margin-left: 83.33333333% } .col-lg-offset-9 { margin-left: 75% } .col-lg-offset-8 { margin-left: 66.66666667% } .col-lg-offset-7 { margin-left: 58.33333333% } .col-lg-offset-6 { margin-left: 50% } .col-lg-offset-5 { margin-left: 41.66666667% } .col-lg-offset-4 { margin-left: 33.33333333% } .col-lg-offset-3 { margin-left: 25% } .col-lg-offset-2 { margin-left: 16.66666667% } .col-lg-offset-1 { margin-left: 8.33333333% } .col-lg-offset-0 { margin-left: 0 } } @media ( min-width :1200px) and (max-width:1519px) { .container { width: 900px; } .col-md-12 { width: 100% } .col-md-11 { width: 91.66666667% } .col-md-10 { width: 83.33333333% } .col-md-9 { width: 75% } .col-md-8 { width: 66.66666667% } .col-md-7 { width: 58.33333333% } .col-md-6 { width: 50% } .col-md-5 { width: 41.66666667% } .col-md-4 { width: 33.33333333% } .col-md-3 { width: 25% } .col-md-2 { width: 16.66666667% } .col-md-1 { width: 8.33333333% } .col-md-pull-12 { right: 100% } .col-md-pull-11 { right: 91.66666667% } .col-md-pull-10 { right: 83.33333333% } .col-md-pull-9 { right: 75% } .col-md-pull-8 { right: 66.66666667% } .col-md-pull-7 { right: 58.33333333% } .col-md-pull-6 { right: 50% } .col-md-pull-5 { right: 41.66666667% } .col-md-pull-4 { right: 33.33333333% } .col-md-pull-3 { right: 25% } .col-md-pull-2 { right: 16.66666667% } .col-md-pull-1 { right: 8.33333333% } .col-md-pull-0 { right: auto } .col-md-push-12 { left: 100% } .col-md-push-11 { left: 91.66666667% } .col-md-push-10 { left: 83.33333333% } .col-md-push-9 { left: 75% } .col-md-push-8 { left: 66.66666667% } .col-md-push-7 { left: 58.33333333% } .col-md-push-6 { left: 50% } .col-md-push-5 { left: 41.66666667% } .col-md-push-4 { left: 33.33333333% } .col-md-push-3 { left: 25% } .col-md-push-2 { left: 16.66666667% } .col-md-push-1 { left: 8.33333333% } .col-md-push-0 { left: auto } .col-md-offset-12 { margin-left: 100% } .col-md-offset-11 { margin-left: 91.66666667% } .col-md-offset-10 { margin-left: 83.33333333% } .col-md-offset-9 { margin-left: 75% } .col-md-offset-8 { margin-left: 66.66666667% } .col-md-offset-7 { margin-left: 58.33333333% } .col-md-offset-6 { margin-left: 50% } .col-md-offset-5 { margin-left: 41.66666667% } .col-md-offset-4 { margin-left: 33.33333333% } .col-md-offset-3 { margin-left: 25% } .col-md-offset-2 { margin-left: 16.66666667% } .col-md-offset-1 { margin-left: 8.33333333% } .col-md-offset-0 { margin-left: 0 } } @media ( min-width :1100px) and (max-width:1199px) { .container { width: 712px; } .suchbaum-wrap { width: 280px; } .page-wrap-in { width: calc(100% - 280px); } .col-sm-12 { width: 100% } .col-sm-11 { width: 91.66666667% } .col-sm-10 { width: 83.33333333% } .col-sm-9 { width: 75% } .col-sm-8 { width: 66.66666667% } .col-sm-7 { width: 58.33333333% } .col-sm-6 { width: 50% } .col-sm-5 { width: 41.66666667% } .col-sm-4 { width: 33.33333333% } .col-sm-3 { width: 25% } .col-sm-2 { width: 16.66666667% } .col-sm-1 { width: 8.33333333% } .col-sm-pull-12 { right: 100% } .col-sm-pull-11 { right: 91.66666667% } .col-sm-pull-10 { right: 83.33333333% } .col-sm-pull-9 { right: 75% } .col-sm-pull-8 { right: 66.66666667% } .col-sm-pull-7 { right: 58.33333333% } .col-sm-pull-6 { right: 50% } .col-sm-pull-5 { right: 41.66666667% } .col-sm-pull-4 { right: 33.33333333% } .col-sm-pull-3 { right: 25% } .col-sm-pull-2 { right: 16.66666667% } .col-sm-pull-1 { right: 8.33333333% } .col-sm-pull-0 { right: auto } .col-sm-push-12 { left: 100% } .col-sm-push-11 { left: 91.66666667% } .col-sm-push-10 { left: 83.33333333% } .col-sm-push-9 { left: 75% } .col-sm-push-8 { left: 66.66666667% } .col-sm-push-7 { left: 58.33333333% } .col-sm-push-6 { left: 50% } .col-sm-push-5 { left: 41.66666667% } .col-sm-push-4 { left: 33.33333333% } .col-sm-push-3 { left: 25% } .col-sm-push-2 { left: 16.66666667% } .col-sm-push-1 { left: 8.33333333% } .col-sm-push-0 { left: auto } .col-sm-offset-12 { margin-left: 100% } .col-sm-offset-11 { margin-left: 91.66666667% } .col-sm-offset-10 { margin-left: 83.33333333% } .col-sm-offset-9 { margin-left: 75% } .col-sm-offset-8 { margin-left: 66.66666667% } .col-sm-offset-7 { margin-left: 58.33333333% } .col-sm-offset-6 { margin-left: 50% } .col-sm-offset-5 { margin-left: 41.66666667% } .col-sm-offset-4 { margin-left: 33.33333333% } .col-sm-offset-3 { margin-left: 25% } .col-sm-offset-2 { margin-left: 16.66666667% } .col-sm-offset-1 { margin-left: 8.33333333% } .col-sm-offset-0 { margin-left: 0 } } @media ( max-width :1100px) { .page-wrap-in { width: 100%; } .suchbaum-wrap { display: none; } } /*Header*/ header.navbar { margin-bottom: 0; border: 0px solid transparent; position: -webkit-sticky; position: sticky !important; top: 0; z-index: 10; } .home header.navbar { position: relative; } /* WH: 04.09.2020 - sShop: Button Suchbaum vom rechten Rand in Menueleiste*/ ul.navbar-btns { float: right; /* Abstand zum rechts stehenden Warenkorbsymbol */ margin-right: 40px; } ul.navbar-btns .btn { border: 0px; } .hbNavbarButton { margin-right: 2px; margin-top: 5px; /* Abstand zum links stehenden Buttons*/ margin-left: 10px; /*width: 55px; */ } .hbNavbarButton.focus, .hbNavbarButton:focus, .hbNavbarButton.hover, .hbNavbarButton:hover, .hbNavbarButton.active, .hbNavbarButton:active { /* kein dunkler Hintergrund fuer die Buttons, fkt nicht bei active, keine Ahnung, warum nicht*/ background-color: unset !important; } /* WH: 12.04.2023 - Layoutaenderung 'Aehnliche Suche'*/ .textAehnlicheSuche { color: black; } .hbSearchTextRechtschreibVorschlag a.headline { padding: 0px; font-weight: normal; } /* WH: 17.08.2023 - Passwortfeld mit Auge zur Anzeige des PW im Klartext */ #hbFormLogin .hb-pwd-toggle { /* das Div mit dem Icon nach oben ins Input-Feld schieben*/ margin-top: -31px !important; margin-left: 70%; /* position absolute, damit das Auge immer sichtbar bleibt, auch bei Klick in Feld*/ position: absolute !important; z-index: 3 !important; padding-top: 5px; } #passwortAendernHbDiv .hb-pwd-toggle { /* das Div mit dem Icon nach links ins Input-Feld schieben*/ margin-left: 80% !important; margin-top: -27px !important; /* position absolute, damit das Auge immer sichtbar bleibt, auch bei Klick in Feld*/ position: absolute !important; z-index: 3 !important; padding-top: 5px; } /* Passworteingabe fuer Neukunden in sShops*/ #hbKundenstammForm .hb-pwd-toggle { /* das Div mit dem Icon nach links ins Input-Feld schieben*/ margin-left: 85% !important; margin-top: -27px !important; /* position absolute, damit das Auge immer sichtbar bleibt, auch bei Klick in Feld*/ position: absolute !important; z-index: 3 !important; padding-top: 5px; } .hb-pwd-eyes { /* font groesser*/ font-size: 16px !important; color: #fe9100 ; } /*#headerBtnSuchbaum wird ausgeblendet durch media-query, wenn kein Platz mehr ist, um Suchbaum gescheit anzeigen zu lassen*/ #headerBtnSuchbaum { } .hbGlyphiconSuchbaum { /* klee: mit font-size kann man Icon-Grösse unabhängig von fa-2x steuern */ font-size: 16px !important; width: 20px; } /*top-1*/ .top-1-wrap { background-color: #FE9100; } .top-1-wrap { background-color: #FE9100; } .top-1-wrap .nav>li>a { position: relative; display: block; padding: 5px 15px; color: #fff; background-color: transparent; } .top-1-wrap .nav>li:hover>a, .top-1-wrap .nav .active>a, .top-1-wrap .nav .open>a, .top-1-wrap .nav .open>a:focus, .top-1-wrap .nav .open>a:hover { background-color: transparent; border-color: transparent; color: #9B2C00; } @media ( max-width : 767px) { .top-1-wrap .nav>li { float: left; } .top-1-wrap .navbar-right { float: right !important; margin: 0 -15px 0 auto; } .top-1-wrap .navbar-nav.navbar-right .open .dropdown-menu { position: absolute; right: 0; left: auto; float: left; min-width: 160px; padding: 5px 0; margin: 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 0 0 4px 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); } .top-1-wrap .navbar-nav .dropdown-menu form { padding: 0 25px; } } /*top-2*/ .top-2-wrap { -webkit-transition: all 0.5s; transition: all 0.5s; background: #fff; } @media ( max-width :767px) { .top-2-wrap { border-bottom: 30px solid #fe9100; } } /* Original Webfaden @media ( min-width :767px) { */ @media ( min-width :767px) { .top-2-wrap .row.row-flex { display: -ms-flexbox; display: flex; -ms-flex-wrap: none; flex-wrap: nowrap; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; } .top-2-wrap .brand-wrap { order: 1; } .top-2-wrap .search-wrap { order: 2; } .top-2-wrap .custom-bg-wrap { order: 3; } } /* Klee: aus blenden bei Handy */ @media ( max-width : 499px) { .top-2-wrap .custom-bg-wrap { display: none; } } .top-2-wrap .brand-wrap a { display: block; } .top-2-wrap .brand-wrap img { max-width: 150px; margin: 0 auto; } .top-2-wrap .brand-wrap img+img { margin-top: 5px; } @media ( max-width :767px) { .top-2-wrap .row.row-flex { margin-bottom: 12px; } .top-2-wrap .brand-wrap img { max-width: 100%; margin: 0 auto; } .top-2-wrap .custom-bg-wrap img { max-width: calc(100% - 15px); margin-right: 15px; display: inline-block } } .top-2-wrap .navbar-brand { height: auto; float: none; padding: 10px 0 15px; } .top-2-wrap .navbar-form, .top-2-wrap .navbar-form .form-group, .top-2-wrap .navbar-form .input-group { width: 100% } .top-2-wrap .navbar-form { margin-bottom: 8px; padding: 0; } @media ( max-width :767px) { .top-2-wrap .navbar-form { padding-left: 15px; } } .top-2-wrap .navbar-form .input-group .input-group-addon .btn { border: 0; background: transparent !important; } .input-group-addon { background-color: #f5f5f5; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); } .top-2-wrap .custom-bg-wrap { text-align: right; } @media ( min-width :768px) { .top-2-wrap .custom-bg-wrap img { margin-right: -15px } } .top-2-wrap .container, .top-2-wrap .container-fluid { position: relative; } .top-2-wrap #warenkorb-btn { position: absolute; right: 15px; bottom: -37px; width: 44px; height: 44px; background: #fff; border: 3px double #fe9100; border-radius: 22px; text-align: center; } .top-2-wrap .btn-warenkorb { padding: 0; border: none; background-color: transparent; color: #fe9100; font-size: 30px; line-height: 38px; } .top-2-wrap .btn-warenkorb:hover { color: #C57100; } .navbar-toggle { border-color: #d7d7d7; margin-right: 0; margin-top: 3px; } .navbar-toggle.collapsed .icon-bar { background-color: #FE9100; } /* führt im neuen Eclipse 2021 zu einer Fehleranzeige: .navbar-toggle:not (.collapsed ) .icon-bar,.navbar-toggle:hover .icon-bar*/ .navbar-toggle:not .collapsed .icon-bar, .navbar-toggle:hover .icon-bar { background-color: #fe9100; } /*top-3*/ .top-3-wrap { background-color: #FE9100; } .top-3-wrap { background-color: #FE9100; } .top-3-wrap .nav { margin-left: -15px; } .top-3-wrap .nav>li>a { position: relative; display: block; padding: 5px 15px; font-size: 16px; color: #fff; font-weight: 400; background-color: transparent; } .top-3-wrap .nav>li:hover>a, .top-3-wrap .nav .active>a, .top-3-wrap .nav .open>a, .top-3-wrap .nav .open>a:focus, .top-3-wrap .nav .open>a:hover { background-color: transparent; border-color: transparent; color: #9B2C00; } @media ( max-width : 767px) { .top-3-wrap .nav ul.dropdown-menu { background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; } .top-3-wrap.navbar-collapse { border-top: 1px solid #FE9100; box-shadow: none; } } /*breadcrumb*/ .breadcrumb-wrap { margin-top: 20px; } /*col-left*/ .nav_box a { color: inherit; } /* klee: Ergänzung Link */ .nav_box a:focus, a:hover { color: #C57100; } nav_box a { color: inherit; } .nav_box ul { padding-left: 1.1em; } .fa-ul, .nav_box .fa-ul { list-style-type: none; margin-left: 0; padding-left: 1.6em; } .fa-li { left: -1.5em; position: absolute; text-align: center; width: 1.1em; line-height: inherit; color: #fe9100; } /*main*/ main { padding-top: 30px; padding-bottom: 30px; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 600; line-height: 1.1; color: inherit; color: #FE9100; } h1 { font-size: 20px; margin-top: 0; } h1+h2 { margin-top: 0; margin-bottom: 16px; color: #fe9100; } h1+h2>small { color: #fe9100; } .h2, h2 { font-size: 18px } .h3, h3 { font-size: 16px } .h4, h4 { font-size: 15px } .h5, h5 { font-size: 14px } .h6, h6 { font-size: 12px } /*Sortiment Kapitel*/ .row.equal { display: flex; flex-wrap: wrap; } .equal>div[class*='col-'] { display: flex; flex-direction: column; } .kap-wrap { margin-bottom: 15px; } .kap-titel { text-align: center; font-weight: bold; font-size: 18px; line-height: 22px; padding: 0 15%; } .kap-titel img { max-width: 75px; float: left; padding-bottom: 10px; padding-right: 10px; } .kap-titel:after { content: ""; clear: both; display: block; width: 120%; height: 1px; background-color: #d7d7d7; margin: 7px -10% 15px; } .kap-liste { columns: 2; } .kap-liste a { color: inherit; } /* klee: Ergänzung Link */ .kap-liste a:focus, a:hover { color: #C57100; } #gessort div[class*='col-'] h2 { text-align: left; } #gessort div[class*='col-'] h2:after { content: ""; display: block; width: 100%; height: 1px; background-color: #d7d7d7; margin: 7px auto 15px; } #gessort div[class*='col-'] .wb_Image img { display: block; margin: 0 auto 10px; } .clear { clear: both; } /*Filter*/ #resetFilter { margin-bottom: 15px; } .filterOffen { margin-bottom: 20px; background-color: #fff; border: 1px solid #e3e3e3; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); } .filterTitel { padding: 5px 10px; color: #FE9100; font-weight: 600; border-top-left-radius: 3px; border-top-right-radius: 3px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-width: 0 0 1px 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); } .filter { padding-left: 5px; padding-right: 2px; padding-top: 5px; padding-bottom: 5px; } .filter a { color: inherit; display: inline-block; font-size: 90%; max-width: calc(100% - 20px) } .filterOffen input[type="checkbox"] { margin-top: 2px; vertical-align: top; } .filterSort { margin-bottom: 10px; } .filterSortOpt { display: inline-block; white-space: nowrap; } .moreFilter { margin-top: 5px; color: #666; cursor: pointer; } .moreFilter:hover { color: #fe9100; text-decoration: underline; } /*Pagination*/ .row-flex.sucherg { display: -ms-flexbox; display: flex; -ms-flex-wrap: none; flex-wrap: nowrap; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; margin-right: 0px; margin-left: 0px; margin-bottom: 15px; } .ui-grid-pager-container { height: 25px; } .ui-grid-pager-control, .artikelProSeite { padding: 0; display: flex; flex-flow: row nowrap; align-items: center; margin-right: 10px; margin-left: 10px; } div.ergebnisLimit, div.ergebnisLimitChecked { margin-right: 2px; width: 30px; height: 25px; line-height: 175%; border: 1px solid #C57100; border-radius: 4px; text-align: center; vertical-align: middle; cursor: pointer; font-weight: bolder; color: white; background-color: #fe9100; } div.ergebnisLimitChecked { border: 1px solid #C53800; background-color: #FE4800; } .blaettern-wrap { padding: 5px 0 0; border-style: solid; border-color: #f5f5f5; border-width: 1px 0; } .pagination { margin: 0; } /*Produkte*/ .ui-grid-row.ui-grid-row-selected>[ui-grid-row]>.ui-grid-cell { background-color: #FFBC6333; } /*shopshop*/ .color-shopshop { color: #FE9100; } .bg-shopshop { background-color: #FE9100; } /*Button*/ .btn-primary, .btn-suchbaum { color: #fff; background-color: #FE9100; border-color: #C57100; } .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-suchbaum:hover, .btn-suchbaum:active, .btn-suchbaum:focus { color: #fff; background-color: #C57100; border-color: #9B5900; } .btn-warning { color: #fff; background-color: #FEBE00; border-color: #C59400; } .btn-warning:hover, .btn-warning:active, .btn-warning:focus { color: #fff; background-color: #C59400; border-color: #9B7400; } .btn.btn-block { display: block; } /* WH: 11.11.2021 - Stylesheets: Styles fuer Outline-Buttons ergaenzt */ .btn-outline { color: inherit; background-color: transparent; transition: all .5s; } .btn-primary.btn-outline { color: #C57100; } .btn-success.btn-outline { color: #5cb85c; } .btn-info.btn-outline { color: #5bc0de; } .btn-warning.btn-outline { color: #C59400; } .btn-danger.btn-outline { color: #d9534f; } .btn-primary.btn-outline:hover, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, .btn-danger.btn-outline:hover { color: #fff; } .btn-primary.btn-outline:focus, .btn-success.btn-outline:focus, .btn-info.btn-outline:focus, .btn-warning.btn-outline:focus, .btn-danger.btn-outline:focus { color: #fff; } .input-group-addon:hover { cursor: pointer; background-color: #fe9100; } /*Form*/ .form-control:focus { border-color: #C59400; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(187, 141, 1, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(187, 141, 1, .6); } /*panel*/ .panel-shopshop { border-color: #e3e3e3 } .headline, .panel-shopshop>.panel-heading { padding: 5px 10px; color: #fe9100; font-weight: 600; background-color: #f5f5f5; border: 1px solid #e3e3e3; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); } .headline { margin-bottom: 10px; border-radius: 3px 3px 0 0; border-width: 0 0 1px 0; } #filterMenu .headline, main>.container-fluid>.row>.col-md-9.col-xs-12>.headline { border-width: 1px 1px 1px 1px; } .panel-shopshop>.panel-heading+.panel-collapse>.panel-body { border-top-color: #e3e3e3 } .panel-shopshop>.panel-heading .badge { color: #fe9100; background-color: #fff; font-weight: 600; } .panel-shopshop>.panel-footer+.panel-collapse>.panel-body { border-bottom-color: #e3e3e3 } /* Specify styling for tooltip contents */ .tooltip.in { opacity: .9; filter: alpha(opacity = 90) } /* Alle Tooltips in der Farbe ändern */ .tooltip .tooltip-inner { color: #212121; background-color: #fff; border: 1px solid #FE9100; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); opacity: 1; } /* klee: 08.04.2021 - Alle Tooltips undurchsichtig machen */ .tooltip.in { opacity: 1; filter: alpha(opacity = 100); } .tooltip.top .tooltip-arrow { border-top: 5px solid #FE9100; } .tooltip.left .tooltip-arrow { border-left: 5px solid #FE9100; } .tooltip.bottom .tooltip-arrow { border-bottom: 5px solid #FE9100; } .tooltip.right .tooltip-arrow { border-right: 5px solid #FE9100; } /*Footer*/ footer { /*font-size: 90%*/ font-size: 105%; } footer .jumbotron { padding-top: 30px; padding-bottom: 30px; margin-bottom: 0; } footer .footer-1 { background-color: #dedede; padding-top: 20px; padding-bottom: 20px; color: #444; border-color: #ddd; border-style: solid; border-width: 1px 0; } footer a { color: #fff; } footer .footer-2 { background-color: #FE9100; padding-top: 10px; padding-bottom: 10px; color: #fff; line-height: 20px; } /*cookies*/ #cookies-wrap { position: fixed; bottom: 0; left: 0; width: 100%; margin-bottom: 0; z-index: 990; } button.close { border: 1px solid #666; border-radius: 50%; padding: 2px; width: 26px; height: 26px; line-height: 20px; font-size: 18px; } /*aside*/ aside button.btn-suchbaum, aside button.btn-kontakt { position: fixed; width: 150px; right: -58px; z-index: 991; transform: rotate(-90deg); } aside button.btn-suchbaum { top: calc(50% - 85px); } aside button.btn-kontakt { top: calc(50% + 85px); } .suchbaum-wrap-in { position: fixed; top: 0px; right: 0; z-index: 989; height: 100vh; opacity: 1; transition: all 0.5s; } .suchbaum-wrap-in.sbcollapsed { /* right: -300px;*/ right: -253px; opacity: 0; } .suchbaum-wrap-in .tundra { /*width: 300px;*/ width: 253px; /*padding: 0px 5px 20px 15px;*/ padding-top: 0px; padding-right: 5px; padding-bottom: 20px; padding-left: 7px; border-left: 1px solid #d7d7d7; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); margin-left: 15px; height: 100vh; overflow-y: auto; background-color: #fff; position: relative; } @media ( min-width :1100px) and (max-width:1199px) { .container { width: 712px; } .suchbaum-wrap, .suchbaum-wrap-in .tundra { width: 280px; } .page-wrap-in { width: calc(100% - 280px); } } @media ( max-width :1100px) { .page-wrap-in { width: 100%; } .suchbaum-wrap { display: none; } aside button.btn-suchbaum { display: none } /*WH: 04.09.2020 - sShop: Button Suchbaum vom rechten Rand in Menueleiste*/ #headerBtnSuchbaum { display: none; } } .suchbaum-wrap-in .tundra .suchbaum-header { position: -webkit-sticky; position: sticky; background-color: #fff; padding-top: 20px; top: 0; z-index: 10; } .suchbaum-wrap-in .tundra .dijitTreeLabel { /* korrespondiert mit hbSuchbaumClickHinweis */ /* % von der im body definierten font-size - korrespondiert mit hbSuchbaumClickHinweis */ font-size: 95% } /* Webfaden-Styles sShop Layout 2019 : E N D E /* /******************************************************/ /***********************************************/ /* BREADCRUMBS: B E G I N N */ /* klee aus VTMP-css übernommen und angepasst */ /*breadcrumb*/ .breadcrumb-wrap { margin-top: 10px; } .hbBreadcrumb { padding-top: 4px; padding-bottom: 4px; margin-bottom: 10px; list-style: none; background-color: #f5f5f5; border-radius: 4px; /* font-size: 120%; */ font-size: 14px; } /* BREADCRUMBS: E N D E /* /***********************************************/ /***********************************************/ /* SUCHBAUM: B E G I N N */ /* Styles fuer den Suchbaum */ /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */ /* Zusätzlich überschriebene Styles von DOJO siehe auch in SuchbaumFrameset2019.php: dijitTreeIcon ... */ /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */ .hbSuchbaumClickHinweis { /* font-size: 12px; */ /* % korrespondiert mit .suchbaum-wrap-in .tundra .dijitTreeLabel */ font-size: 95%; color: rgb(33, 33, 33); background: transparent; background-color: white; text-align: left; padding-top: 2px; text-align: center; } .hbSuchbaumSelected { /* font-size korrespondiert mit .suchbaum-wrap-in .tundra .dijitTreeLabel */ /* font-size: 12px; */ font-family: inherit; background: transparent; color: white;; background-color: #fe9100 !important; font-weight: normal; vertical-align: middle; font-weight: normal; } .hbSuchbaumKategorieHauptgruppe { font-family: inherit; /* font-size korrespondiert mit .suchbaum-wrap-in .tundra .dijitTreeLabel */ /* font-size: 12px; */ background: transparent; background-color: white; color: rgb(33, 33, 33); margin-left: -0px !important; } .hbSuchbaumUntergruppe { font-family: inherit; /* font-size korrespondiert mit .suchbaum-wrap-in .tundra .dijitTreeLabel */ /* font-size: 12px; */ background: transparent; color: rgb(33, 33, 33); background-color: white; vertical-align: middle; } .hbSuchbaum-panel-default { margin-left: 5px; } /* WH: 15.05.2020 - Bestellvorlage: Anpassungen fuer sShop */ /* in Bestellvorlagen dijitTreeLabel mit groesserem Abstand nach rechts und links, damit es links nicht abgeschnitten wird*/ #BorderContainerVorlagebaum .dijitTreeLabel { margin: 0px 12px; } /* Ausblenden des Suchbaumes @media screen and (max-width: 770px) { div .suchbaumResponsive { display: none; } } */ /* /* SUCHBAUM: E N D E /***********************************************/ /***********************************************/ /* Detailansicht : B E G I N N */ #artDetail .hb-btn-best-vor { /* color: red; */ margin-top: 0px; } /* WH Stylen Telefonsymbol aus font-awesome*/ .hbPhoneSymbol { margin-left: 10px; vertical-align: top; color: #ff0000; } #artDetail .hbPhoneSymbol:hover { color: #C57100; } /* /* Style für Bilder-Slideshow in der /* Artikeldetailsseite /* AUTHOR:FG /* mri: 28.7.2016 - Bildergalerie Artikeldetailseite Style Änderung */ div.slideShowDiv { outline: 0; width: 220px; height: 220px; max-width: 220px; max-height: 220px; background-color: white; z-index: 999; border: 1px solid grey; position: fixed; display: table; top: 150px; left: 345px; } @media screen and (max-width: 770px) { div .slideShowDiv { outline: 0; width: 220px; height: 220px; max-width: 220px; max-height: 220px; background-color: white; z-index: 9999; border: 1px solid grey; position: fixed; display: table; top: 150px; left: 32px; } } #artDetail .detailcaptions { color: #333333; font-size: 12px; font-weight: bold; line-height: 100%; /*padding-left: 5px;*/ } /* favicons bei Faktor 2x auf 1.75 runterscalieren*/ #artDetail .fa-2x { /* font-size: 1.75em; */ font-size: 1.60em; } /* klee: 22.07.2019 - Katalog in Detailansicht bei Handy-View ausblenden */ @media screen and (max-width: 770px) { div.hbKatalogOffHandy { display: none; } } /* klee: 22.07.2019 - Katalog in Detailansicht bei Handy-View ausblenden */ @media screen and (max-width: 770px) { .detailsOffHandy { display: none !important; } } /* klee: 22.07.2019 - Katalog in Detailansicht bei Handy-View ausblenden */ /*@media screen and (max-width: 1280px) { */ @media screen and (max-width: 1280px) { .headerKatalogOff { display: none !important; } } .hbShoppingCartSymbolSearch { margin-left: 15px; color: #fe9100; } .hbShoppingCartSymbolSearch:hover { color: #C57100; } .hbDetailKatalogBox { padding: 0px; /* min-height, damit Footer nicht nach oben springt bei Blaettern*/ min-height: 200px; } /* klee: 26.07.2019 - Detailansicht: Vorschaubilder responsive */ .hbMiniPicBig { cursor: pointer; max-width: 140px; max-height: 140px } @media screen and (min-width: 770px) and (max-width: 1152px) { .hbMiniPicBig { max-width: 50%; max-height: 50% } } #artDetail .hbLinkKonfig { text-decoration: none; font-size: 11px; font-family: inherit; color: #fe9100; line-height: 100%; font-weight: bold; } #artDetail a.hbLinkKonfig:link { color: #fe9100; } #artDetail a.hbLinkKonfig:visited { color: #fe9100; } #artDetail a.hbLinkKonfig:hover { color: #C57100; } #artDetail .hbInputMengeCell { margin-top: 2px; } /* ohne #artDetail */ .hbShoppingCartSymbolDetail { color: #ffffff !important; font-family: inherit; font-weight: bold; /*margin: 1px;*/ } .hbShoppingCartSymbolDetail:hover { color: #C57100; } #artDetail .hbBilderGalerie { margin-top: 10px; padding-right: 5px; padding-left: 5px; } #artDetail .hbSpalteLinksTop { margin-top: 10px; padding-right: 0px; } #artDetail .hbTrennerTop { border-top: 1px solid #fe9100; padding-top: 5px; padding-bottom: 5px; } /* wird für Rückmeldungen im Header benutzt */ .hbTrennerBottom { border-bottom: 1px solid #fe9100; padding: 5px; } #artDetail .hbBtnLinkAlternativProdukt { color: #ffffff !important; /*HB_COLOR_BUTTON_OK*/ background-color: #fe9100; font-weight: bold; width: 120px; margin: 1px; } #artDetail .standardtext { /* grau: color: #999999; */ color: #666666; font-size: 12px; font-weight: normal; line-height: 100%; } #artDetail .standardtextBig { /* grau: color: #999999; */ color: #000000; font-size: 13px; font-weight: bold; line-height: 100%; } #artDetail .standardtextHellgrau { /* grau: color: #999999; */ color: #999999; font-size: 12px; font-weight: normal; line-height: 100%; } #artDetail .hbPreisTabRow { padding-top: 3px; padding-bottom: 3px; /*padding-left: 5px;*/ } #artDetail .hbLieferterminTabRow { padding-top: 5px; padding-bottom: 5px; /*padding-left: 5px;*/ } #artDetail .hbGrundPreisHeadline { /*padding-left: 5px */ font-size: 10px; } @media screen and (max-width: 770px) { #artDetail .hbBtnLinkMehrInfo { display: none; } } #artDetail .detailNoArticle { color: #333333; font-size: 12px; font-weight: bold; line-height: 100%; background: transparent; padding-left: 30%; padding-top: 5%; padding-bottom: 5%; } #artDetail .detailtitle { color: #333333; font-size: 12px; font-weight: bold; line-height: 100%; background: transparent; } #artDetail .detailtext { color: #585858; font-size: 12px; line-height: 120%; text-align: justify; background: transparent; } /* // WH: 08.11.2021 - ArtikelDetail: Layout /* Detailansicht 2021 : B E G I N N */ /* min-height, damit Footer nicht nach oben springt bei Blaettern*/ #artDetail .art-detail { margin-bottom: 0px; min-height: 500px; } #artDetail fieldset { margin-bottom: 10px; padding-bottom: 5px; padding-top: 5px; padding-left: 10px; padding-right: 10px; } #artDetail fieldset legend { font-size: 15px; display: inline-block; /* WH: 18.10.2022 - ArtikelDetail: Layout-Verbesserungen*/ /* damit der linke Blaetterpfeil nicht direkt unter dem legend-Text steht*/ margin-left: 3%; } /* wenn mehrere Artikelbilder vorhanden sind*/ /* #artDetail .hbSlide { height: 200px; }*/ /* wenn nur ein Artikelbild vorhanden ist*/ /*#artDetail .hbSlideOne { height: 200px; }*/ /* Abstand Logos zu Bilder-Carousel*/ #artikelLogoHbDiv { margin-bottom: 13px; } #artikelLogoHbDiv .tmsIcon { margin: 1px; } /* Schriftzug unter dem Bild statt im Bild*/ #artDetail .hb-carousel-caption { position: inherit; color: black; text-shadow: none; padding-bottom: 0px; } #artDetail #hbMiniPicDiv { text-align: center; display: table-cell; vertical-align: middle; border: 1px solid grey; height: 40px; width: 40px; margin-top: 5px; margin-right: 2.5px; margin-left: 2.5px } /* roter Rahmen um kleines Bild, was gerade im Carousel angezeigt wird*/ #artDetail #hbMiniPicDiv.bildActive { border-color: red; } #artDetail .hbMiniPic { margin: auto; padding: 0; max-width: 40px; max-height: 40px; } /* Fieldset Preis padding links und rechts verringern, damit Preise in sShop besser Platz haben*/ #fsArtikelPreis { padding-left: 10px; padding-right: 10px; } #mengeInsertDiv { /*margin-top: 10px;*/ margin: 5px; padding: 5px; /*background-color: #f5f5f5;*/ } #mengeInsertDiv .form-group { margin-bottom: 0px; } /* Mengenfeld breiter machen*/ #mengeInsertDiv .menge { max-width: unset; } /* das Input-Feld wie in normalem Bootstrap*/ #mengeInputField .form-control { height: 34px; } #tableWeitereInfo.table { margin-bottom: 0px; border-collapse: collapse; } #tableWeitereInfo tr td.detailcaptions { width: 40%; } /* ijm Table weitereInfo bei den Zellen der ersten Zeile die obere Linie weglassen*/ #tableWeitereInfo>tbody>tr:first-child>td { border-top: 0px; } /* Gefahrgutinfo: Rahmen weg und padding weg, weil im Fieldset*/ #artDetail #fsGefahrgut #gefahrgutDiv { border: 0px; padding: 0px } /* Div mit Link Versandkosten*/ #hinweisVersandkostenDiv hr { height: 1px; margin-bottom: 5px; } /*Blaetterpfeile Suchlisting oben dichter ranruecken*/ #artDetail #artikelRowPaging { margin-top: -15px; } /*Blaetterpfeile Suchlisting nicht ganz so gross*/ #artDetail #artikelRowPaging .fa-3x { font-size: 2.5em; } /* /* Detailansicht 2021: E N D E /* /* Detailansicht: E N D E /***********************************************/ /***********************************************/ /* TMS / Markenwelten: B E G I N N */ /* klee: die festen width (aus z.B. /home/soft/data/tms/shared/styles/8600.css etc.) überschreiben #tmsMenuLinks .nav_box { width: 100%; } korrespondiert mit id="tmsMenuLinks" und bedeutet, das alle Styles .nav_box-Klassen mit width: 100%; überschrieben werden */ /* klee: body:not(.home) .hbTmsContainer { funktioniert wg. ng-class an dieser Stelle nicht => 2 Styles: hbTmsContainerHome hbTmsContainerNotHome */ .hbTmsContainerHome { padding-bottom: 30px; } .hbTmsContainerNotHome { padding-top: 0px; padding-bottom: 30px; } /* WH: 16.09.2022 - Markenwelten: Styleaenderungen auf Wunsch sc*/ .hbTmsMarkenlogo { /*max-height: 80px; max-width: 80px; */ height: 80px; padding-top: 15px; } /* TM Header : B E G I N N */ /* klee: 31.01.2020 - vtmp-Grundlayout Webfaden: Neue Einbettung Markenwelten */ .hbTmsHeaderContainer { padding-top: 0px; margin-left: 0px; margin-right: 0px; width: 100%; } #tmsHeader { margin-bottom: 15px; font-family: 'Roboto', Arial, sans-serif !important; } #tmsHeader .h1 { font-size: 12px; line-height: 28px; color: #fff; font-weight: bold; text-align: center; margin: 0; padding: 0; } #tmsHeader .marken_box { padding-top: 10px; padding-bottom: 10px; } .row-flex { -ms-display: flex; display: flex; -ms-flex-align: center; align-items: center; } .tmHeaderContent>* { display: inline-block; } .tmHeaderContent>* { display: inline-block; } .tmHeaderContent .navbar-form { padding: 0; margin: 0 0 0 15px; /*margin: 0 0 0 0px; */ } /* klee: Suchfelder sonst immer rot => .tmHeaderContent button eingeführt .tmHeaderContent a.btn { color: #CC3333; }*/ .tmHeaderContent button { /*color: #CC3333 !important;*/ font-family: 'Roboto', Arial, sans-serif !important; font-weight: normal !important; font-size: 14px !important; } .tmHeaderContent .btn-default.focus, .tmHeaderContent .btn-default:focus { color: inherit; /* klee: falls geklickter Button nicht in grau erscheinen soll => background-color: #FFFFFF; */ } /* klee: aus Infogründen bitte erhalten: .tmHeaderContent .btn-default.hover, .tmHeaderContent .btn-default:hover { color: inherit; } */ /* klee: Input-Feld analog zu tmHeaderContent button stylen */ .tmHeaderContent input { font-family: 'Roboto', Arial, sans-serif; font-weight: normal !important; font-size: 14px !important; } .tmFormSearch { margin: 0px !important; } /* klee: aus Infogründen bitte erhalten Placeholder und Input auf Markenwelt-Farbe setzen: dazu ausblenden */ #tmsBanner hr { display: none; } #tmsBanner .ft_banner { margin-left: 0px !important; margin-right: 0px !important; width: 33.3% !important; float: left; margin-top: -7px; /*max-height: 125px; max-width: 430px;*/ } /* @media ( max-width : 770) { #tmsBanner .ft_banner { margin-top: 30px; } } */ #tmsBanner .ft_showcase { margin-left: 0px !important; margin-right: 0px !important; width: 33.3% !important; float: right; /*margin-top: -19px;*/ margin-top: -7px; max-height: 125px; max-width: 180px; } /* @media ( max-width : 360px) { #tmsBanner .ft_showcase { margin-top: 30px; } } */ #tmsBanner .ft_images { border: solid 1px #ccc; width: 90%; margin-left: 0px; margin-right: 0px; } .ft_box { text-align: center; padding-left: 0px; padding-right: 0px; } .ft_banner { margin-left: 0px !important; margin-right: 0px !important; width: 33% } .ft_showcase { margin-left: 0px !important; margin-right: 0px !important; } /* /* Styles für Banner TMS: E N D E /***********************************************/ /***********************************************/ /* Styles für Banner Gesamtkatalog: B E G I N N */ /* banner Gesamtkatalog */ /* .ft_images_gesamtKatalog { margin: 0px; width: 33.0%; border-color: rgb(204, 204, 204); border-style: solid; border-width: 1px; } .ft_box_gesamtKatalog { text-align: center; margin-top: -14px; margin-bottom: 0px; } */ /* /* Styles für Banner Gesamtkatalog: E N D E /***********************************************/ /***********************************************/ /* TMS / Markenwelten-Übersicht: B E G I N N */ .hbMarkeLogoHeading { font-size: large; color: #fe9100; } .hbMarkeLogoPanel { border: #FFFFFF !important; margin-right: 15px; margin-left: 15px; } .hbMarkeLogoPanelBody { padding-top: 10px; padding-bottom: 10px; padding-left: 0px !important; padding-right: 0px !important; text-align: center; } .hbMarkeLogoNavbarForm { margin-top: 2px; } .hbMarkeLogoSearchButton { border-bottom-right-radius: 3px !important; border-top-right-radius: 3px !important; /* height: 34px; */ height: 23px; width: 14%; background-color: rgb(238, 238, 238) !important; border-color: rgb(204, 204, 204) !important; color: #212121; } .hbMarkeLogoContainer { width: 90px; height: 80px; margin: 0; } .hbMarkeLogoImage { margin: 5px; } /* klee: 10.10.2022 -- Umstellung Markenwelten im webShop auf Marken */ .hbMarkeLogoImageUebersicht { margin: 0px !important; } .brands-wrap.d-flex { margin-left: -7px; margin-right: -8px; } .justify-content-center { -ms-flex-pack: center !important; justify-content: center !important; } .flex-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .d-flex { display: -ms-flexbox !important; display: flex !important; } .brand-item-out-wrap { width: 95px; height: 99px; padding: 0px 8px 37px 7px; } .brand-logo-wrap { position: relative; display: flex; justify-content: center; align-content: center; align-items: center; margin: 0; font-size: 10px; } .brand-logo-wrap.brand-logo-wrap span.d-block { border: 1px solid #d2d2d2; padding: 3px; width: 80px; height: 70px; margin: 0; text-align: center; } .brand-logo-wrap.brand-logo-wrap img.brand-logo { max-width: 100%; max-height: 100%; margin-left: auto; margin-right: auto; position: relative; top: 50%; transform: translateY(-50%); transition: all .2s ease-in-out; } .d-block { display: block !important; } brand-logo-wrap.brand-logo-wrap span.d-block { text-align: center; } .brand-logo-wrap.brand-logo-wrap img.brand-logo { max-width: 100%; max-height: 100%; margin-left: auto; margin-right: auto; position: relative; top: 50%; transform: translateY(-50%); transition: all .2s ease-in-out; } .marken-shop-hover { position: absolute; display: flex; justify-content: center; align-content: center; align-items: center; background: transparent; white-space: nowrap; opacity: 1; width: 100%; height: 20px; bottom: -20px; left: 0%; font-size: 12px; line-height: 16px; color: #212121; text-align: center; transition: all .2s ease-in-out; } /* TMS / Markenwelten-Übersicht: E N D E */ /***********************************************/ /***********************************************/ /* Warenkorb: B E G I N N */ #warenkorbHbCompDiv { /* WH: 26.11.2019 - Neuen Warenkorb Styles anpassen fuer Vtmp Schriftgroesse auf 12px wie bei soft-carrier, damit Warenkorb gut aussieht*/ font-size: 12px; /*WH: color wie bei sc*/ color: #666666; } /* Default-Values fuer table border collapse und spacing */ /* klee: gibt mit Detail-Kataloganzeige Probleme: verurasacht weisser Strich in Header */ table { border-collapse: separate; border-spacing: 2px; } /* WH: 12.11.2019 - Layout-Aenderungen nach Wuenschen von sc Table ohne sichtbare Zwischenabstaende bei Zeilen und Spalten */ .table-wk-hb { border-collapse: collapse; border-spacing: 0px; } .formtext.formhinweis { margin: 7px 100px 15px; font-style: italic; } hr.light { height: 1px; margin-top: 10px; margin-bottom: 10px; clear: both; color: #e3e3e3; background-color: #f5f5f5; border: none; } .service-info, .order-list { margin-bottom: 20px; } .service-info .panel-heading, .service-info .panel-heading button { font-size: 110%; text-transform: none; color: rgb(102, 102, 102); } .service-info .btn-toggle { padding: 0; width: 100%; background: transparent; text-align: left; } .service-info .btn-toggle, .service-info .btn-toggle:hover, .service-info .btn-toggle:focus, .service-info .btn-toggle:active { -webkit-box-shadow: none; box-shadow: none } .service-info .btn-toggle i { float: right; line-height: 26px; } /*.service-info form:last-child .form-group:last-child { margin-bottom: 0; } */ /*: WH: form-group:last-child entfernt,damit Schnellerfassung Component Abstand zwischen select-box und input-feld*/ .service-info form:last-child { margin-bottom: 0; } /* WH: 12.11.2019 - Layout-Aenderungen nach Wuenschen von sc Panel-Heading in der Hoehe schmaler, neue css-Anweisung fuer panel-heading innerhalb von service-info*/ .service-info .panel-heading { /*padding: 10px 15px; */ padding: 5px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 3px; border-top-left-radius: 3px; } label { font-weight: bold; } input.form-control.menge { max-width: 50px; /*WH: text-align ergaenzt*/ text-align: right; } input.form-control.button-plus { width: calc(100% - 35px); margin-right: 5px; display: inline-block; } input.form-control.button-plus+button { display: inline-block; } /*bootswatch-Eigenschaften überschreiben*/ .service-info select, .order-list select, .service-info select.form-control, .order-list select.form-control { -webkit-appearance: menulist; -moz-appearance: menulist; appearance: menulist; background-color: #ffffff; background-image: none; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; color: #555; height: 24px; line-height: 1.42857; padding: 4px; font-size: inherit; } /*bootswatch-Eigenschaften ueberschreiben*/ .service-info textarea, .service-info textarea.form-control, .service-info input.form-control, .service-info input[type=text], .service-info input[type=password], .service-info input[type=email], .service-info input[type=number], .service-info [type=text].form-control, .service-info [type=password].form-control, .service-info [type=email].form-control, .service-info [type=tel].form-control, .service-info [contenteditable].form-control, .order-list textarea, .order-list textarea.form-control, .order-list input.form-control, .order-list input[type=text], .order-list input[type=password], .order-list input[type=email], .order-list input[type=number], .order-list [type=text].form-control, .order-list [type=password].form-control, .order-list [type=email].form-control, .order-list [type=tel].form-control, .order-list [contenteditable].form-control { /* WH: damit das Kreuzchen der Direktive hb-clear-text-and-reset-fkt erscheint und nicht durch background:none ueberschrieben wird */ /* background-image: none; */ border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; color: #555; height: 24px; line-height: 1.42857; padding: 4px; font-size: inherit; } /*bootswatch-Eigenschaften ueberschreiben*/ .service-info select:focus, .order-list select:focus, .service-info select.form-control:focus, .order-list select.form-control:focus, .service-info textarea:focus, .service-info textarea.form-control:focus, .service-info input.form-control:focus, .service-info input[type=text]:focus, .service-info input[type=password]:focus, .service-info input[type=email]:focus, .service-info input[type=number]:focus, .service-info [type=text].form-control:focus, .service-info [type=password].form-control:focus, .service-info [type=email].form-control:focus, .service-info [type=tel].form-control:focus, .service-info [contenteditable].form-control:focus, .order-list textarea:focus, .order-list textarea.form-control:focus, .order-list input.form-control:focus, .order-list input[type=text]:focus, .order-list input[type=password]:focus, .order-list input[type=email]:focus, .order-list input[type=number]:focus, .order-list [type=text].form-control:focus, .order-list [type=password].form-control:focus, .order-list [type=email].form-control:focus, .order-list [type=tel].form-control:focus, .order-list [contenteditable].form-control:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); } .menge-group label, .menge-group input, .menge-group button { display: inline-block; } .menge-group button.btn-link:hover, .menge-group button.btn-link:active, .menge-group button.btn-link:focus { background-color: transparent; } /*WH: Mengenfeld Schnellerfassung*/ .menge-group .menge-schnell { width: 35%; } /*WH: bootstrap padding ueberschreiben*/ .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { padding: 5px; } .table-order-list { max-width: 100% } .table.table-order-list>thead:first-child>tr:first-child>th { border-top: 1px solid #dddddd; /* WH: 12.11.2019 - Layout-Aenderungen nach Wuenschen von sc Kopfzeile der Tabelle so hoch wie Fusszeile, deswegen eigenes Padding geaendert*/ /*padding: 11px 8px;*/ padding: 8px 8px; background-color: #f5f5f5; } .table-order-list tbody td:nth-child(4) { text-align: center; } .table-order-list tbody td:nth-child(4) input { display: inline-block; } .table-order-list tbody td:nth-child(3) { text-align: right; } /* WH: 5. Spalte (Rest) Text zentrieren*/ .table-order-list tbody td:nth-child(5) { text-align: center; } .table-order-list td:nth-child(2)>div { /*margin-bottom:10px;*/ margin-bottom: 0px; } .table-order-list td:nth-child(2) button.btn-artopt-toggle { padding: 0; font-weight: bold; background: transparent; text-align: left; } .table-order-list td:nth-child(2) button.btn-artopt-toggle:hover, .table-order-list td:nth-child(2) button.btn-artopt-toggle:focus, .table-order-list td:nth-child(2) button.btn-artopt-toggle:active { -webkit-box-shadow: none; box-shadow: none } .table-order-list td:nth-child(2) .art-opt-body { margin: 5px 0; padding: 5px; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; } .table-order-list td:nth-child(2) .art-funct select { max-width: 170px; display: inline-block; } .table.table-order-list>tfoot>tr:first-child>th, .table.table-order-list>tfoot>tr:first-child>td { border-top-width: 2px; background-color: #f5f5f5; } /*WH: Div Aktionsbuttons mit fester Breite*/ .art-funct { width: 95px; white-space: nowrap; } /* WH: Mengenfeld kleiner im WK*/ .table-order-list input.form-control.menge { max-width: 100px; text-align: right; } /*WH: Preis netto mit Sternchen nach dem Preis, das fuehrt aber zu Umbruch zwischen Text und Sternchen in Tabellen-Header*/ .preis_netto:after { content: '*'; color: #007EBC; } /* WH: 12.11.2019 - Layout-Aenderungen nach Wuenschen von sc */ .preis_netto_sternchen { color: #007EBC; } #sternchenLegende { /*WH: kein Abstand zu Table Positionen im WK*/ /*margin-top: 30px;*/ } /*WH: Anchor, die als buttons gestyled sind mit weisser Schrift*/ a.btn { color: #ffffff; } @media ( max-width : 770px) { .table-order-list th, .table-order-list td { display: block; } /* WH: Spaltenkoepfe ausblenden*/ /* nth-child(1): Spalte Bestellnr*/ .table-order-list thead th:nth-child(1), .table-order-list thead td:nth-child(1), /* nth-child(2): Spalte Artikel*/ /* nth-child(3): Spalte Gewicht*/ .table-order-list thead th:nth-child(3), .table-order-list thead td:nth-child(3), /* nth-child(3): */ .table-order-list thead th:nth-child(3), .table-order-list thead td:nth-child(3), /* nth-child(4): Spalte Lieferbar*/ .table-order-list thead th:nth-child(4), .table-order-list thead td:nth-child(4), /* nth-child(5): Spalte Rest*/ .table-order-list thead th:nth-child(5), .table-order-list thead td:nth-child(5), /* nth-child(6): ActionButtons */ .table-order-list thead th:nth-child(6), .table-order-list thead td:nth-child(6), /* nth-child(7): Spalte Preis zzgl Mwst*/ .table-order-list thead th:nth-child(7), .table-order-list thead td:nth-child(7), /* nth-child(8): Spalte Menge*/ .table-order-list thead th:nth-child(8), .table-order-list thead td:nth-child(8), /* nth-child(9): Spalte Summe*/ .table-order-list thead th:nth-child(9), .table-order-list thead td:nth-child(9) { display: none; } .table-order-list tbody th:nth-child(3), .table-order-list tbody td:nth-child(3), .table-order-list tbody th:nth-child(4), .table-order-list tbody td:nth-child(4), .table-order-list tbody th:nth-child(5), .table-order-list tbody td:nth-child(5), .table-order-list tbody th:nth-child(7), .table-order-list tbody td:nth-child(7), .table-order-list tbody th:nth-child(8), .table-order-list tbody td:nth-child(8), .table-order-list tbody th:nth-child(9), .table-order-list tbody td:nth-child(9) { float: left; width: 33.0%; /*width:15.0%;*/ } .table-order-list tbody td:nth-child(3), .table-order-list tbody td:nth-child(4), .table-order-list tbody td:nth-child(5) { text-align: left; } .table-order-list tbody td:nth-child(6) .art-funct, .table-order-list tbody td:nth-child(8) input { display: inline-block; } .table-order-list tbody td:nth-child(6), .table-order-list tbody td:nth-child(8) { text-align: right; } .table-order-list tbody td:nth-child(7), .table-order-list tbody td:nth-child(8), .table-order-list tbody td:nth-child(9) { background-color: rgba(91, 192, 222, 0.2); } .table-order-list tbody td:nth-child(1)::before { content: "Bestellnr.: "; font-weight: bold; } .table-order-list tbody td:nth-child(3)::before { content: "Gewicht: "; font-weight: bold; } .table-order-list tbody td:nth-child(4)::before { content: "Leferbar: "; font-weight: bold; } .table-order-list tbody td:nth-child(5)::before { content: "Rest: "; font-weight: bold; } .table-order-list tfoot th, .table-order-list tfoot td { float: left; width: 66.5%; } .table-order-list tfoot th:last-child, .table-order-list tfoot td:last-child { width: 33.0%; } } .no-wrap { white-space: nowrap; } .clear { clear: both; } .hbListtextNotiz { text-decoration: none; font-family: inherit; font-size: 12px; /*color: #000000;*/ /*WH: Notiz immer in gruener schrift*/ color: #007700 !important; line-height: 125%; font-weight: bold; } a.hbListtextNotiz:link { color: #007700; } a.hbListtextNotiz:visited { color: #007700; } a.hbListtextNotiz:hover { color: #C57100; } /* Wunschliefertermin im Warenkorb*/ /*Schriftfarbe fuer Datumsauswahl disabled: ganz schwaches Grau*/ #wltHbDiv .text-muted { color: #b1afaf; } #kontaktLadrHbDiv .text-muted { color: #b1afaf; } /* Warenkorb: E N D E */ /***********************************************/ /***********************************************/ /* Schnellerfassung: B E G I N N * Styles uebergreifend fuer die Bereiche Warenkorb und Bestellvorlage */ /*WH: ub-dropdown Schnellerfassung Button in Hoehe schmaler*/ .schnell-select-button { padding: 0px !important; } /* Schnellerfassung: E N D E */ /***********************************************/ /*********************************/ /* Lieferanschriften: B E G I N N */ /*WH: Grid fuer Lieferanschriften */ .gridLieferanschriften { width: 100%; /*height: 100%;*/ /*WH Height veraendern, damit buendiger Abschluss mit Eingabemaske Lieferanschriften*/ height: 256px; } /* WH: 05.06.2020 - sShop und vtmp: Style-Anpassung Lieferanschrift*/ /* Div um das Grid mit den Lieferanschriften, Hoehe setzen, damit buendiger Abschluss mit dem nebenstehenden Formular*/ .divUmGridLieferanschriften { height: 258px; } /* WH Selected Row mit Rahmen oben und unten*/ #gridLieferanschriftenHb .ui-grid-row.ui-grid-row-selected { border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #000000; border-top-style: solid; border-top-width: thin; border-top-color: #000000; } /* WH: 24.01.2023 - Lieferanschriften: Standard-Lieferanschrift */ /* Farbe fuer den Btn Standard-Lieferanschrift*/ .btnStandardLiefer { color: #ffffff !important; font-family: inherit; /*background-color: #8f3a84; brombeer*/ background-color: #fe9100; font-weight: bold; margin: 1px; } .hbCellClassLieferRechnung { color: black; } .hbCellClassLieferStandard { color: #fe9100; } /* Lieferanschriften: E N D E */ /***********************************************/ /*********************************/ /* Frachtkosten: B E G I N N */ /*WH: Grid fuer Versand-Frachtkostenauswahl*/ .gridFrachtkosten { width: 90%; height: 100px; } /* WH Selected Row mit Rahmen oben und unten*/ #gridfrachtkostenHb .ui-grid-row.ui-grid-row-selected { border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #000000; border-top-style: solid; border-top-width: thin; border-top-color: #000000; } /* WH: selected Table row im responsive table*/ .frachtkosten-row-selected { background-color: rgb(217, 237, 247) !important; } /* Frachtkosten: E N D E */ /***********************************************/ /*********************************/ /* WH: 10.12.2019 - Redesign Formular Auswahl Lieferanschrift und Frachtkosten im Bestellprozess*/ /* Auswahl Lieferanschrift und Frachtkosten im Bestellprozess : B E G I N N */ #ladrBestellungHbDiv { /* WH: 26.11.2019 - Neuen Warenkorb Styles anpassen fuer Vtmp Schriftgroesse auf 12px wie bei soft-carrier, damit Warenkorb gut aussieht*/ font-size: 12px; /*WH: color wie bei sc*/ /* WH: 13.04.2021 - Layout-Verbesserung : keine Extra-Color, sondern die normale*/ /*color: #666666;*/ } #ladrBestellungHbDiv .panel-heading, #ladrBestellungHbDiv .panel-heading button { font-size: 110%; text-transform: none; color: rgb(102, 102, 102); } #ladrBestellungHbDiv .panel-default { margin-bottom: 15px; } #ladrBestellungHbDiv .panel-heading { /*padding: 10px 15px; */ padding: 5px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 3px; border-top-left-radius: 3px; } #ladrBestellungHbDiv .btn-toggle { padding: 0; width: 100%; background: transparent; text-align: left; } #ladrBestellungHbDiv .btn-toggle-frachtkosten { width: 100%; } #ladrBestellungHbDiv .btn-toggle-erg-direktlieferung { width: 100%; } #ladrBestellungHbDiv fieldset { margin-bottom: 0px; } /* die Legend im Fieldset kleiner machen*/ #ladrBestellungHbDiv legend { font-size: 14px; } #ladrBestellungHbDiv .panel-body { padding: 5px; } #ladrBestellungHbDiv .btn-toggle, #ladrBestellungHbDiv .btn-toggle:hover, #ladrBestellungHbDiv .btn-toggle:focus, #ladrBestellungHbDiv .btn-toggle:active { -webkit-box-shadow: none; box-shadow: none } #ladrBestellungHbDiv .btn-toggle i { /*Abstand zum links stehenden Text*/ margin-left: 5px; line-height: 26px; float: right; } /* Div im PanelHeading zum Andruck der gewaehlten Lieferanschrift*/ #gewLieferadrHbDiv { padding: 5px; float: right; width: 50%; } /* Text muted bei disabled Elementen, ein ganz schwaches Grau, weil sonst schlecht unterscheidbar von der normal dunkelgrauen Schrift*/ #ladrBestellungHbDiv .text-muted { color: #b1afaf; } /* WH min height setzen, fuer buendigen Abschluss der beiden Cols mit Frachtkosten und Handling bei abweichender Lieferanschrift*/ .rowBestellLieferanschrift { min-width: 400px; } /* damit die Panels fuer Frachtkosten und fuer Abw. Lieferanschrift gleich hoch sind*/ .panelFrachtHbDivAufgeklappt { min-height: 375px; } .panelAbLieferanschrHbDivAufgeklappt { min-height: 375px; } @media screen and (max-width: 770px) { #ladrBestellungHbDiv .btn-toggle { /* bei kleinem Display Button ueber ganze Breite, damit er klickbar ist*/ width: 100%; } } /* Auswahl Lieferanschrift und Frachtkosten im Bestellprozess: E N D E */ /***********************************************/ /***********************************************/ /* Style fuer Artikelhinweise /* AUTHOR:Webfaden /* WH: 10.10.2019 - Webfaden-Styles fuer Warenkorb-Artikelhinweise integriert /***********************************************/ /***********************************************/ /* Artikelhinweise: B E G I N N */ #artikelhinweiseHbCompDiv { /*WH: font-size wie bei sc*/ font-size: 12px; /*WH: color wie bei sc*/ color: #666666; } /*Modal Header*/ h3.modal-title { color: #fe9100; font-weight: normal; } /*table*/ .table.table-wk-hinweise-list>thead:first-child>tr:first-child>th { border-top: 1px solid #ddd; padding: 11px 8px; background-color: #f5f5f5; } .table.table-wk-hinweise-list td:nth-child(4), .table.table-wk-hinweise-list td:nth-child(8) { text-align: center } .table.table-wk-hinweise-list td:nth-child(6), .table.table-wk-hinweise-list td:nth-child(7) { text-align: right } @media screen and (max-width:1100px) { .table.table-wk-hinweise-list>thead:first-child>tr:first-child>th { display: none; } .table.table-wk-hinweise-list td { display: inline-block; } .table.table-wk-hinweise-list td:before { content: ""; font-weight: bold; } .table.table-wk-hinweise-list td:nth-child(1) { width: 100%; border-color: #fe9100; } .table.table-wk-hinweise-list td:nth-child(1):before { content: "Best.-Nr.: "; } .table.table-wk-hinweise-list td:nth-child(2) { width: 100%; border: 0; } .table.table-wk-hinweise-list td:nth-child(2):before { content: "Artikel: "; } .table.table-wk-hinweise-list td:nth-child(3) { width: 100%; } .table.table-wk-hinweise-list td:nth-child(3) span.fa { display: none; } .table.table-wk-hinweise-list td:nth-child(4) { width: 32.5%; text-align: left; } .table.table-wk-hinweise-list td:nth-child(4):before { content: "VPE: "; } .table.table-wk-hinweise-list td:nth-child(5) { width: 66%; text-align: left; } .table.table-wk-hinweise-list td:nth-child(5):before { content: "Lieferbar: "; } .table.table-wk-hinweise-list td:nth-child(6) { width: 32.5%; text-align: right; padding-right: calc(32.5% - 80px); position: relative; } .table.table-wk-hinweise-list td:nth-child(6):before { content: "ab Stück: "; position: absolute; top: 5px; left: 5px; } .table.table-wk-hinweise-list td:nth-child(7) { width: 32.5%; text-align: right; padding-right: calc(32.5% - 100px); position: relative; } .table.table-wk-hinweise-list td:nth-child(7):before { content: "Preis*: "; position: absolute; top: 5px; left: 5px; } .table.table-wk-hinweise-list td:nth-child(8) { width: 32.5%; text-align: left; } .table.table-wk-hinweise-list td:nth-child(8):before { content: "Menge: "; } .table.table-wk-hinweise-list td:nth-child(9) { width: 100%; background-color: rgba(0, 0, 0, 0.10); } .table.table-wk-hinweise-list td:nth-child(9)>* { display: inline-block; margin: 0 10px 0 0; width: auto; } .table.table-wk-hinweise-list td:nth-child(9)>.radio.reaktion-wrap { position: relative; bottom: -5px; margin-bottom: 5px; } .table.table-wk-hinweise-list td:nth-child(9):before { content: "Aktion pro Artikel: "; margin-right: 20px; } } .radio.reaktion-wrap { margin-top: -2px; text-align: center; } .radio.reaktion-wrap label span.fa { width: 25px; } .reaktion-wrap input[type="radio"] { margin-top: 7px; } input.form-control.menge { max-width: 180px; text-align: right; } .table.table-wk-hinweise-list td:nth-child(9) select { min-width: 170px; } .table.table-wk-hinweise-list td:nth-child(9) select.form-control.blue { color: #fe9100; } .table.table-wk-hinweise-list td:nth-child(9) select.form-control.red { color: #e51c23; } /*Color*/ .lightblue { color: #66afe9; } .blue { color: #007fbc; } .green { color: #4caf50; } .yellow { color: #f0ad4e; } .red { color: #e51c23; } /*WH: Styles von hiblue fuer die textliche Auszeichnung von Artikelhinweisn*/ .artikelhinweisHeadline { font-weight: bold; color: #cc0000 } .artikelhinweisText { /*Hier noch kein eigenes Styling*/ } .artikelhinweisTextHervorhebung { font-weight: bold; } .artikelhinweisMengeFeld { margin-right: 7%; margin-bottom: 12%; } /* /* Artikelhinweise: E N D E /***********************************************/ /***********************************************/ /* WARTUNGS-HINWEIS: B E G I N N */ /* klee: 09.03.2016 -- */ /* Stichwortsuche: Verbesserung der LOG-Auswertung nicht gefundener Artikel: */ /* Längenbegrenzung + Terme die Nummern beinhalten */ /* Style für jquery-overlay */ .hbJqueryOverlay { background: #FFFFFF; width: 80%; margin-top: 100px; padding: 10px; border: 1px solid red; } .hbJqueryOverlayCloseButton { border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: white; line-height: 120%; text-decoration: none; vertical-align: middle; horizontal-align: right; background-color: #f89c04; cursor: pointer !important; cursor: hand; } /*Overlay um Formulare als deaktiv zu markieren*/ .hb-overlay { /* position:absolute; */ top: 0; /* left:10%;*/ background: grey; color: white; opacity: 0.5; /* width:90%;*/ width: 100%; height: 100%; } /* /* WARTUNGS-HINWEIS: E N D E /***********************************************/ /***********************************************/ /* Style Tooltips: B E G I N N /* klee 11.04.2019 */ /* WH: 30.01.2017 - Markenshop-Logo als Link in die Markenwelt*/ /* WH Tooltips speziell fuer die Markenwelt an beliebigen Elementen*/ /* Tooltip container */ .tooltipMarkenwelt { position: relative; display: inline-block; /*border-bottom: 1px dotted black;*/ /* If you want dots under the hoverable text */ } /* Tooltip text */ .tooltipMarkenwelt .tooltiptextMarkenwelt { visibility: hidden; font-size: 11px; width: 150px; /*background-color: black; */ color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* Position the tooltip text - see examples below! */ position: absolute; z-index: 1; /* Margin-left setzen, damit Tooltip sich nicht unter den rechten Rand im Grid schiebt*/ margin-left: -40px; } /* Tooltip text Markenwelt vorhanden */ .tooltipMarkenwelt .tooltiptextMarkenweltExists { /*Farbe wie die Navigationsbuttons*/ /*background-color: #fe9100; */ } /* Tooltip text keine Markenwelt vorhanden */ .tooltipMarkenwelt .tooltiptextMarkenweltNot { /*Farbe wie die Navigationsbuttons*/ /*background-color: #fe9100;*/ /*WH: opacity durchscheinend*/ opacity: 0.4; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltipMarkenwelt:hover .tooltiptextMarkenwelt { visibility: visible; } /* WH ENDE Tooltips Markenwelt*/ /* WH: Tooltip fuer Lieferfaehigkeit*/ /* Tooltip container */ .tooltipLieferfaehig { position: relative; display: inline-block; /*border-bottom: 1px dotted black;*/ /* If you want dots under the hoverable text */ } /* Tooltip text */ .tooltipLieferfaehig .tooltiptextLieferfaehig { font-family: inherit; visibility: hidden; font-size: 11px; width: 120px; /*background-color: black;*/ /*Farbe wie die Navigationsbuttons*/ background-color: #fe9100; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* Position the tooltip text - see examples below! */ position: absolute; z-index: 1; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltipLieferfaehig:hover .tooltiptextLieferfaehig { visibility: visible; } /* WH: ENDE Tooltip fuer Lieferfaehigkeit*/ /* WH: Tooltip fuer Infoservice Artikel*/ /* Tooltip container */ .tooltipInfSrvArt { position: relative; display: inline-block; /*border-bottom: 1px dotted black;*/ /* If you want dots under the hoverable text */ } /* Tooltip text */ .tooltipInfSrvArt .tooltiptextInfSrvArt { font-family: inherit; visibility: hidden; font-size: 11px; /*width: 120px; */ width: 200px; /*background-color: black;*/ /*Farbe wie die Navigationsbuttons*/ background-color: #fe9100; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* Position the tooltip text - see examples below! */ position: absolute; z-index: 1; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltipInfSrvArt:hover .tooltiptextInfSrvArt { visibility: visible; } /*Margin-left, damit sich der Tooltip nicht am rechten Rand unter das Grid schiebt*/ .tooltiptextInfSrvArt.left { margin-left: -60px; } /* WH: ENDE Tooltip fuer Infoservice Artikel*/ /* WH: 03.05.2023 - Suchergebnislisting Bilder vergroessern bei Mouseover*/ /* Popover statt Tooltip*/ .hbPopover { max-width: unset; } /* BEGINN Tooltip fuer Grid Artikelbeschreibung */ /* klee: 24.03.2020 - vtmp: Korrekturen neues Layout: Grid - Tooltip überarbeitet: Tooltip fuer Grid*/ /* Tooltip container */ .tooltipGridArtikel { position: relative; display: inline-block; } /* Tooltip text Hinweis-1: white-space: pre-wrap; dient dazu im Tooltip eine Zeilenumbruch mit \n zu bekommen Hinweis-2: width: 120px; gibt an wo der Pfeil erscheinen soll nicht die Tooltip-Breite Hinweis-2: Tooltip-Breite max-width */ .tooltipGridArtikel .tooltipTextGridArtikel { visibility: hidden; font-size: 11px; color: #fff; text-align: center; padding: 0px 0; border-radius: 6px; position: absolute; z-index: 1; white-space: pre-wrap; } .tooltipGridArtikel:hover .tooltipTextGridArtikel { visibility: visible; } #uiGridStyleResponsive .tooltip-inner { max-width: 400px !important; } /* ENDE Tooltip fuer Grid Artikelbeschreibung */ /* /* Style Tooltips: E N D E /* /***********************************************/ /***********************************************/ /* Filter + Suche in Suchlisting : B E G I N N */ .hb-hr { height: 2px; margin-top: 0px; margin-bottom: 9px; clear: both; background-color: #f5f5f5; border: none; /* WH: 04.07.2019 - css-Klasse hb-hr erweitert width auf 100%, weil sonst durch hr aus Stylesheet https://www.softcarrier.de/tms/shared/styles/2700.css ueberschrieben in Markenwelten*/ width: 100%; } div.keineTreffer { font-family: inherit; font-size: 12px; font-weight: bold; padding-top: 5%; padding-left: 20%; line-height: 125%; text-decoration: none; color: #fe9100; float: left; cursor: pointer; } div.keineTreffer:hover { color: #C57100; } /* width-%-Angabe korrespondiert mit col-sm-search-filter-hb <--> col-sm-search-result-hb */ .col-sm-search-filter-hb { width: 25%; padding-left: 15px; padding-right: 5px; } /* width-%-Angabe korrespondiert mit col-sm-search-filter-hb <--> col-sm-search-result-hb */ .col-sm-search-result-hb { width: 75%; padding-right: 15px; } @media screen and (max-width: 770px) { /* WH: 18.03.2019 - Suchseite responsive: Ausblenden von Filtern*/ div .filterResponsive { display: none; } .filterResponsiveDiv { margin-left: 18px; } .col-sm-search-filter-hb { width: 0%; padding-left: 0px; } .col-sm-search-result-hb { width: 100%; padding-right: 0px; padding-left: 0px; } } /* klee: 18.03.2020 - vtmp: Korrekturen neues Layout */ .hbfilterHeadline { float: left; } /* Use a media query to add a breakpoint at 770px: */ /* WH 06.03.2019 - Neues VTMP-Layout: bei responsive: Font kleiner fuer alle Elemente */ /* The width is 100%, when the viewport is 770px or smaller */ /* font-size: small !important; */ /*@media screen and (max-width: 770px) { * { font-size: 11px; } }*/ div.filterSort { vertical-align: middle; } /* klee: 18.03.2020 - vtmp: Korrekturen neues Layout */ .hbfilterSortInput { vertical-align: middle; margin-top: -2px !important; } div.sucheAufSuche { font-family: inherit; font-size: 11px; font-weight: bold; line-height: 125%; text-decoration: none; color: #212121; float: none; cursor: pointer; margin-top: 4px; margin-bottom: 5px; } /*WH: float geaendert, damit Suchfeld in eigener Zeile erscheint float: none;*/ div.input-group.sucheAufSuche { float: left; } div.sucheAufSuche:hover { color: #C57100; } .hbSearchSuchbegriffAufSuche { font-style: normal; font-weight: normal; font-size: 11px; } @media screen and (max-width: 990px) { .hbSearchSuchbegriffAufSuche { font-size: 10px; } } /* klee: 18.03.2020 - vtmp: Korrekturen neues Layout */ .hbFilterInput { vertical-align: middle; } /* WH: 28.02.2019 - css-Class hbFilterLink */ .hbFilterLink { color: #212121; cursor: pointer; font-size: 11px !important; font-family: inherit; font-weight: normal; } a.hbFilterLink:hover { color: #C57100; text-decoration: none; font-size: 11px !important; font-weight: normal; } /* Korrespondiert mit @media für hbuiSearchDetailTextLink in ui-grid-vtmp.css */ @media screen and (max-width: 1199px) { .hbFilterLink { font-size: 10px !important; } a.hbFilterLink:hover { font-size: 10px !important; } } div.filterResponsive div.filter { margin-left: 2px; margin-bottom: 4px; width: 100%; /* siehe auch max-height div.filterResponsive div.filterOffen*/ max-height: 220px; overflow-x: hidden; font-size: 11px; white-space: nowrap; text-align: left; } div.filterResponsive div.filterContainer, td.filter { width: 100%; font-size: 11px; } div.filterResponsive div.filterOffen { width: 100%; /* max-height sollte um ca. 30px > sein als max-height div.filterResponsive div.filter */ max-height: 250px; border: solid 1px; border-color: rgba(204, 204, 204, 0.9) !important; border-color: #ccc; margin: 5px auto; /* runde Ecken*/ border-radius: 4px; } div.filterResponsive div.filterZu { width: 100%; border: 1px solid #ccc; background-color: #f5f5f5; cursor: pointer; color: #fe9100; font-weight: bold; padding-left: 5px; padding-right: 5px; margin: 5px auto; } div.filterResponsive div.filterTitel { padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 3px; /* muss um 1px groesser sein als padding-bottom */ margin-bottom: 3px; font-weight: bold; color: #FFFFFF; width: 100%; background-color: #fe9100; } div.filterResponsive div.filterMenu { position: relative; margin-top: 0px; float: left; width: 100%; min-height: 50px; margin-right: 10px; clear: both; } div.filterResponsive div.moreFilter { color: #fe9100; text-decoration: underline; cursor: pointer !important; text-align: center; } div.filterResponsive div.moreFilter:hover { color: #fe9100; } .hbAbverkaufsartikel { color: #00b300; font-weight: bold; margin-right: 5px; } /* WH: 13.04.2024 - Optimierung Darstellung Filter in Suche*/ .filterBtnDiv { padding: 1px; } .hbBtnFilter { text-align: left; } .hbBtnFilter.btn-xs{ font-size: 11px; } /* WH: 11.05.2023 - Optimierung Darstellung Filter: Layout-Aenderungen*/ /* zur besseren Kennzeichnung des geklickten Buttons*/ .btn-primary.hbBtnFilter.active { background-color: #C57100; } #sucheFilterHbDiv .panel-heading { color: #C57100; } #sucheFilterHbDiv fieldset { margin-bottom: 0px; padding-top: 10px; } #sucheFilterHbDiv fieldset .legend { margin-bottom: 0px; } /* Cursor als Move-Symbol, um anzuzeigen, dass der Modal-Content draggable (verschiebbar) ist*/ .hb-modal-draggable { cursor: move; } /* WH: 22.05.2023 - Filter-Modal resizable */ /* Handles fuer das Resize*/ /* Pfeil nach links*/ #hbSucheFilterModalWindow .hb-resizable-w { left: 4px; top: 10px; } /* Pfeil rechts*/ #hbSucheFilterModalWindow .hb-resizable-e { right: 14px; top: 10px; } #hbSucheFilterModalWindow .ui-resizable-handle { position: absolute; width: 12px; height: 12px; /*background: rgb(255, 0, 106); */ /*border-width: 1.5px; border-style: solid; border-color: rgb(255, 255, 255); border-image: initial; border-radius: 999px; */ } #hbSucheFilterModalWindow .resizable-wrapper { width: 8px; height: 16px; } /* Bsp fuer Positionierung der Handles left, right, top left, etc*/ /* .l { left: -4px; top: calc(50% - 10px); font-family: "FontAwesome"; content: "\f177"; font-weight: 900; } .r { right: -4px; top: calc(50% - 10px); } .tl { left: -6px; top: -6px; } .tr { right: -6px; top: -6px; } .bl { left: -6px; bottom: -6px; } .br { right: -6px; bottom: -6px; } */ /* Font Awesome Icon Haekchen*/ .hbFilterTextChecked::before{ font-family: "FontAwesome"; content: "\f00c"; font-weight: 900; } /* Abstand der angedruckten gewaehltenFilter linker Rand*/ .hbFilterChecked { padding: 2px; } /* Alle Tooltips in der Farbe ändern fuer die Tooltips an den dunkelblauen Buttons */ .filterBtnDiv .tooltip .tooltip-inner { color: black; background-color: white; border-radius: 5px; } /* linker Seite mit Filter-Buttons schmaler*/ .col-sm-search-filter-hb-2023 { width:16%; /* damit die Buttons beim Verkleinern des PopUps immer sichtbar bleiben*/ min-width: 120px; } /*Rechte Seite mit Suchergebnis-Grid breitet*/ .col-sm-search-result-hb-2023{ width:83%; } /*Rechte Seite mit Filter-Checkboxen*/ .col-sm-filter-liste-hb-2023{ /*width:83%;*/ padding-left: 0px; padding-right: 0px; } /* linke Seite Filter Buttons im Popup*/ .col-sm-search-filter-btn-popup { /* damit die Buttons beim Verkleinern des PopUps immer sichtbar bleiben*/ min-width: 120px; } ul.filter-liste { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; padding-left: 0em; list-style-type: none; } /* Checkbox margin-top auf 0px, damit alle filter-liste columns oben buendig abschliessen*/ ul.filter-liste li > .checkbox { margin-top: 0px; margin-bottom: 3px; } /* WH: 15.05.2023 - Optimierung Darstellung Filter: Layout-Aenderungen */ /* fuer Layout im Modal-Window*/ .hbFilterModalClass { font-size: 11px; } /* Modal Dialog an rechten Rand*/ .hbFilterModalClass .modal-dialog{ float: right; margin-right: 7px; /* position fixed und left gesetzt, damit beim Resize der Dialog stehenbleibt*/ position: fixed; left: 49%; } /* ausgegrauten Hintergrund heller machen, damit man unterliegendes Listing besser sieht*/ .hbFilterModalBackdropClass{ opacity: .2 !important; } /* WH: 19.12.2024 - Css-Styles fuer Bild Gross in Suche */ @media screen and (min-width: 1280px) { .sucheBildGross { max-width: 550px; max-height: 550px; } } @media screen and (min-width: 970px) and (max-width: 1280px) { .sucheBildGross { max-width: 400px; max-height: 400px; } } /* Warum hier nicht 750 funktioniert versteht klee nicht */ @media screen and (min-width: 770px) and (max-width: 970px) { .sucheBildGross { max-width: 300px; max-height: 300px; } } @media screen and (max-width: 770px) { .sucheBildGross { max-width: 200px; max-height: 200px; } } /* /* Filter + Suche in Suchlisting : E N D E /***********************************************/ /* ***********************************************/ /* Style fürs Blättern: B E G I N N /* klee 11.04.2019 */ .hbColBlaetternPaginationBox { margin-bottom: -2px; } /* klee: 16.04.2020 - Suchlisting Anzeige von 6 Artikeln pro Seite */ .hbColBlaetternPaginationBoxRowUnten { margin-top: 3px; } .blaetternArtikelProSeiteBox { float: left; margin-left: 10%; } .blaetternPaginationBox { float: right; margin-left: 5%; } /* klee: 18.03.2020 - vtmp: Korrekturen neues Layout */ .blaetternPaginationUl { margin: 0px; } /* klee: 18.03.2020 - vtmp: Korrekturen neues Layout */ .blaetternPaginationToggle { float: right; margin-top: -2px; } /* klee: 04.05.2020 - Neues Layout + Angular-Umbau für sShop (Phase-2): CSS-HB analog zu VTMP eingearbeitet */ /* Pagination-Farben: Blätterboxen */ .pagination-xs>li>a, .pagination>li>span { background-color: white !important; color: #fe9100 !important; } /* Pagination-Farben: aktive Box */ .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { background-color: #fe9100 !important; color: white !important; border-color: #fe9100 !important; } /* WH: 15.03.2019 - Suchseite Blaettern in bootstrap-Layout*/ /*neue Klasse pagination-xs analog zu pagination-sm in bootstrap.css*/ .pagination-xs>li>a, .pagination-xs>li>span { padding: 1px 5px; font-size: 11px; line-height: 1.5; /* WH: 23.04.2020 - Suche: Blaettern-Leiste mit festen Breiten*/ width: 25px; } .pagination-xs>li:first-child>a, .pagination-xs>li:first-child>span { border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .pagination-xs>li:last-child>a, .pagination-xs>li:last-child>span { border-bottom-right-radius: 3px; border-top-right-radius: 3px; } /* WH: 23.04.2020 - Suche: Blaettern-Leiste mit festen Breiten*/ .hb-pagination-count { float: right; padding: 4px; font-size: 11px; color: #fe9100; margin-top: -2px; } /* Blätter-Mechnismus */ button.ergebnisLimit { float: left; margin-right: 2px; /* line-height: 175%; */ font-size: 11px; border: 1px solid black; text-align: center; vertical-align: middle; font-weight: bolder; color: white !important; background-color: #fe9100; } button.ergebnisLimit:hover { background-color: #C57100; color: white; } button.ergebnisLimitChecked { float: left; margin-right: 2px; /* line-height: 175%; */ font-size: 11px; text-align: center; vertical-align: middle; border: 1px solid black; font-weight: bolder; color: white !important; background-color: #fe9100; } button.ergebnisLimitChecked:hover { background-color: #C57100; color: white; } /* /* Style fürs Blättern: E N D E /* /***********************************************/ /* ***********************************************/ /* Style fürs Buttons: B E G I N N /* */ .btn.disabled, .btn[disabled], fieldset[disabled] .btn { /* WH: bootstrap-style fuer disabled buttons ueberschreiben, statt opacity .65*/ opacity: .40; } /*WH: LastwagenSymbol in Suchliste fuer Verfuegbarkeitsauskunft*/ .hbTruckSymbolVerfuegbar { color: #fe9100; } /* WH Stylen Warenkorbsymbol aus font-awesome */ .hbShoppingCartSymbolWk { margin-left: 0px; color: #fe9100; } .hbShoppingCartSymbolWk:hover { color: #C57100; } /* Button mit der OK-Farbe fuer den Hintergrund*/ .hbBtnStandardOk { color: #ffffff !important; font-family: inherit; /*HB_COLOR_BUTTON_OK*/ background-color: #fe9100; font-weight: bold; margin: 1px; } /* Button mit der Critical-Farbe fuer den Hintergrund*/ .hbBtnStandardCritical { color: #ffffff !important; font-family: inherit; background-color: #CC0000; /*background-color: #9B2C00; */ font-weight: bold; margin: 1px; } /* Button mit der OK-Refresh-Farbe fuer den Hintergrund*/ .hbBtnStandardOkRefresh { color: #ffffff !important; font-family: inherit; /*HB_COLOR_BUTTON_OK_REFRESH : hell-orange */ background-color: #fe9100; font-weight: bold; margin: 1px; } /* Button mit der Insert-Farbe fuer den Hintergrund*/ .hbBtnStandardInsert { color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; /*HB_COLOR_BUTTON_INSERT */ background-color: #999999; font-weight: bold; margin: 1px; } /* Button mit der HB_COLOR_BUTTON_COPY fuer den Hintergrund*/ .hbBtnStandardCopy { color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; /* HB_COLOR_BUTTON_COPY : helles Pink */ background-color: #D08FCC; font-weight: bold; margin: 1px; } /* Style fürs Buttons: E N D E /* /***********************************************/ /***********************************************/ /* EINGABEFORMULARE: B E G I N N */ /* Vorlage von webfaden mit Rahmen mit runden Ecken*/ .form_margin_bottom { margin-bottom: 30px; } fieldset { margin-bottom: 30px; padding: 20px; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; } legend { /* display: inline-block; */ /* WH: 04.12.2019 - Styleaenderung wegen IE11 und Edge fkt auch fuer FF und Chrome*/ display: flex; width: auto; border: none; padding: 0 10px; margin-bottom: 5px; color: #fe9100; } /* Hier Bsp fuer die Erkennung der MicrosoftBrowser IE und Edge */ /*WH: 04.12.2019 - Styleaenderung wegen IE11 IE11 erkennung */ /* damit legend Text links oben innerhalb des Rahmens von fieldset erscheint*/ /*@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { legend { display:flex; } } */ /* Edge Erkennung */ /* damit legend Text links oben innerhalb des Rahmens von fieldset erscheint*/ /*@supports (-ms-ime-align:auto) { legend { display:flex; } } */ .form-horizontal .form-inline .form-group { margin-right: 0; margin-left: 0; } .control-label { color: #999; } .control-label.pflicht-feld { color: #212121; } .control-label.pflicht-feld.newsletter { text-align: left; } .control-label.pflicht-feld::after { content: " * "; } .pflicht-checkbox-label { color: #212121; } .pflicht-checkbox::before{ content: " * "; } .form-control#lkz, .form-control#plz, .form-control#ort { display: inline-block; } .form-control#lkz { width: 50px; } .form-control#lkz+span { display: inline-block; width: 10px; text-align: center; } .form-control#plz { width: 70px; margin-right: 10px; } .form-control#ort { width: calc(100% - 150px); } i.input-comment { display: block; margin-top: 5px; font-size: 95%; color: #777; } .alert.alert-info.pp-windows { position: absolute; background-color: #ffffff; width: 80%; height: 80vh; top: 10vh; left: 10%; overflow-y: auto; padding: 20px; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); z-index: 99999; } .alert.alert-info.pp-windows button { float: right; } .clear { float: none; clear: both; } /* WH: 30.03.2021 alert-shop-default mit den StandardFarben fuer den Shop als Rahmen und als Schrift */ /* als Ergaenzung zu bootstrap class alert */ .alert-shop-default { background-color: #f5f5f5; border-color: #fe9100; } /* /* EINGABEFORMULARE: E N D E /***********************************************/ /***********************************************/ /* Bestellvorlagen : B E G I N N */ #bestellvorlageHbDiv { /*font-size: 10px; */ } .vorlageBezeichnung-wrap { margin-top: 5px; margin-bottom: 5px; } /* WH: 10.01.2020 - Table-Definitionen entfernen, falls nicht mehr gebraucht*/ /*table*/ .table.table-bv>thead:first-child>tr:first-child>th { border-top: 1px solid #ddd; padding: 11px 8px; background-color: #f5f5f5; } /*W: Padding minimiert wegen Platzersparnis*/ .table.table-bv td { padding: 2px; } .table.table-bv td span.bv-name { display: inline-block; width: calc(100% - 250px); min-width: 220px; /* WH: font-weight entfernt fuer Platzersparnis */ /*font-weight: bold;*/ } .table.table-bv td span.bv-action { display: inline-block; /* WH: width entfernt, damit Zeile nicht umbricht im Table*/ /*width:240px; */ width: 240px; white-space: nowrap; } /* Hervorhebung Artikel bereits in Bestellvorlage enthalten*/ .artikel-in-bv-enthalten { color: #00389A; /* WH: font-weight entfernt fuer Platzersparnis */ /*font-weight: bold;*/ } /*WH: fuer das Listing der Bestellvorlagen in Warenkorb oder Detailansicht zum Uebernehmen eines Artikels*/ ul.bv-liste { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; padding-left: 0em; list-style-type: none; } /*WH: Checkbox Div innerhalb der Liste soll keinen Abstand nach oben haben, weil sonst die Listenelemente versetzt erscheinen zu den anderen Spalten*/ ul.bv-liste li .checkbox { margin-top: 0px; } #bestellvorlageHbDiv .panel { margin-bottom: 10px; } /*WH: fuer die Bestellvorlagen-Verwaltung : alles im Div mit id = #bestellvorlageHbDiv */ #bestellvorlageHbDiv .panel-heading, .service-info .panel-heading button { font-size: 110%; text-transform: none; color: rgb(102, 102, 102); } #bestellvorlageHbDiv .btn-toggle { padding: 0; width: 100%; background: transparent; text-align: left; } #bestellvorlageHbDiv .btn-toggle, #bestellvorlageHbDiv .btn-toggle:hover, #bestellvorlageHbDiv .btn-toggle:focus, #bestellvorlageHbDiv .btn-toggle:active { -webkit-box-shadow: none; box-shadow: none } #bestellvorlageHbDiv .btn-toggle i { line-height: 26px; } #vorlageVerwaltungDiv { /* margin-top setzen, um Abstand zwischen Ueberschrift Bestellvorlagen und Panel zu verringern*/ margin-top: -20px; } /*WH: Abstand der Elemente im Panel-Heading nach oben*/ #bestellvorlageHbDiv .margin-top-heading { /*margin-top: 25px; */ } /* WH: Panel-Heading in der Hoehe schmaler, neue css-Anweisung fuer panel-heading innerhalb von #bestellvorlageHbDiv*/ #bestellvorlageHbDiv .panel-heading { padding-top: 5px; padding-bottom: 2px; padding-left: 15px; padding-right: 15px; border-bottom: 1px solid transparent; border-top-right-radius: 3px; border-top-left-radius: 3px; } /*WH: Dropdown Liste Button in Hoehe schmaler*/ #bestellvorlageHbDiv .btn-block { padding: 2px; } /*WH: Aufklapppfeil eigenen Klasse damit buendig */ #bestellvorlageHbDiv .toggleVorlageVerwaltung { float: right; margin-top: -20px; padding-right: 15px; } /*WH: Einpassen Schnellerfassung in Bestellvorlage*/ #bestellvorlageHbDiv .hb-art-schnell-row .form-control { height: 23px; padding: 0px; } #bestellvorlageHbDiv .hb-art-schnell-row { width: 85%; } #bestellvorlageHbDiv .hb-art-schnell-select { padding-right: 0px; } #bestellvorlageHbDiv .hb-art-schnell-select .form-group { margin-bottom: 0px; } #bestellvorlageHbDiv .hb-art-schnell-input { padding-right: 0px; } #bestellvorlageHbDiv .hb-art-schnell-input .form-group { margin-bottom: 0px; } #bestellvorlageHbDiv .hb-padding { padding-right: 0px; } /*WH: Positionieren des Buttons rechts neben Input-Feld der Schnellerfassung Component*/ #bestellvorlageHbDiv .hb-col-btn-artikel-schnell { margin-left: -120px; } #bestellvorlageHbDiv .hb-btn-artikel-schnell { /*margin-top: 20px; */ } #bestellvorlageHbDiv .hb-btn-artikel-schnell .btn { /*margin-top: 12px;*/ } /* WH: Innerhalb des Suchlistings die bestellvorlage notiz mit 11px*/ #bestellvorlageHbDiv .hbListtextNotiz { font-size: 11px; } /*Bestellvorlage: Div mit Listing nicht mehr lieferbarer Artikel*/ #bestellvorlageArtNichtLieferbarDiv .panel-heading { padding-top: 0px; padding-bottom: 0px; } #bestellvorlageArtNichtLieferbarDiv .hb-panel-border { border-style: solid; border-width: thin; border-color: red; } #bestellvorlageArtNichtLieferbarDiv .hb-ueberschrift { font-weight: bold; } #bestellvorlageArtNichtLieferbarDiv .btn-toggle i { line-height: 26px; float: right; } /* Text muted bei disabled Elementen, ein ganz schwaches Grau, weil sonst schlecht unterscheidbar von der normal dunkelgrauen Schrift*/ #bestellvorlageArtNichtLieferbarDiv .text-muted { color: #b1afaf; } /* Kreuzchen zum Schliessen des Edit-Bereichs bei Neuanlegen/Aendern Bestellvorlage am rechten oberen Rand des Fieldsets*/ #bestellvorlageHbDiv fieldset .hbCloseIcon { float: right; margin-left: -10px; margin-top: 8px; } @media ( min-width : 1519px) { ul .bv-liste { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } } @media ( max-width : 1100px) { ul .bv-liste { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } } @media ( max-width : 499px) { ul .bv-liste { -ms-word-break: break-all; word-break: break-all; word-break: break-word; } } /* WH : damit es im Bereich Bestellvorlage im Verwaltungs-Panel keinen unnoetigen Umbruch gibt, ueberschreibt die allgemeine Regel */ @media ( min-width :992px) and (max-width:1199px) { #bestellvorlageHbDiv .col-md-6 { width: 50%; } } /* /* Bestellvorlagen: E N D E /***********************************************/ /***********************************************/ /* Parameter Autosuggest Typeahead mit ui-grid: B E G I N N */ /*WH: Styles fuer Typeahead custom popup Template*/ .hb-typeahead-custom-popup-wrapper { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; background-color: #f9f9f9; } .hb-typeahead-custom-popup-wrapper>.message { padding: 10px 20px; border-bottom: 1px solid #dddddd; color: #868686; } .hb-typeahead-custom-popup-wrapper>.dropdown-menu { position: static; float: none; display: block; min-width: 160px; background-color: transparent; border: none; border-radius: 0; box-shadow: none; } /* Klasse fuer das Grid innerhalb des Templates fuer Autosuggest von Artikelnr*/ .hb-typeahead-custom-popup-wrapper>.gridAutosuggest { width: 100%; height: 200px; } /* Parameter Autosuggest Typeahead mit ui-grid: ENDE */ /***********************************************/ /***********************************************/ /* Kundenstamm: B E G I N N */ #kundenstammHb .detailtitle { /*color: #212121; font-size: 12px; font-weight: bold; */ line-height: 100%; background: transparent; } /* WH: 23.10.2020 - Kundenstammdaten Styles */ /* div fuer lkz mit float setzen, damit plz und Ort rechts daneben rutschen*/ #hbKundenstammForm .hb-lkz { float: left; width: 10%; } /* das Input-Feld fuer den Ort bis zum Ende des umgebenden Divs*/ #hbKundenstammForm .form-control#ort { width: calc(100% - 137px); } /* Panel mit Rand, analog zu panel-shopshop*/ #hbKundenstammForm .panel-kdstamm { border-color: #e3e3e3 } /* Datenschutzererklaerung Inhalt positionieren*/ #hbKundenstammContainer .datenschutzBox .datenschutzContentBox { width: 150%; /* WH: 06.07.2022 - Datenschutzerklaerung Layout anpassen */ background-color: #f5f5f5; } @media screen and (max-width: 1520px) { #hbKundenstammContainer .datenschutzBox .datenschutzContentBox { top: -750px; } } @media screen and (max-width: 1200px) { #hbKundenstammContainer .datenschutzBox .datenschutzContentBox { top: -800px; } } @media screen and (max-width: 991px) { #hbKundenstammContainer .datenschutzBox .datenschutzContentBox { top: -1250px; } } @media screen and (max-width: 770px) { #hbKundenstammContainer .datenschutzBox .datenschutzContentBox { top: -1450px; } } @media screen and (max-width: 499px) { #hbKundenstammContainer .datenschutzBox .datenschutzContentBox { top: -1650px; } } /* Padding im Div fuer den Button Speichern, damit der mittig zur Datenschutzbox ist*/ #hbKundenstammContainer .hb-kd-speichern { padding-top: 20px; } /* Anpassungen wegen Steuernr Schweiz*/ #hbKundenstammContainer .input-group { width: 100% } #hbKundenstammContainer .input-group .input-group-addon { padding: 0px; font-size: 12px; } /* Hervorheben der Login-Email*/ #hbKundenstammContainer .login-email { color: #fe9100; } #hbKundenstammContainer .input-comment.login-email { color: #fe9100; font-weight: bold; } /* WH: 31.01.2023 - Standard-Lieferanschrift in Kundendaten*/ #hbKundenstammContainer .standardLieferText { color: #666666; } #hbKundenstammContainer .colStandardLieferText { margin-top: 4px; } /* /* Kundenstamm: E N D E /***********************************************/ /***********************************************/ /* Newsletter : B E G I N N */ #newsletterAbonnierenConfirmHbDiv .datenschutzBox { margin-left: -10px; } #newsletterAbonnierenInputForm .datenschutzBox .datenschutzContentBox { /* die Width resetten, damit der Inhalt der Datenschutzerklärung ueber die ganze Breite reicht ansonsten hat man eine blaue Box, ueber die der Text rechts rausragt*/ width: unset; } /* /* Newsletter: E N D E /***********************************************/ /***********************************************/ /* Datenschutz : B E G I N N */ /* WH: 26.06.2020 - Direktive Datenschutz bestaetigen responsiv gemacht*/ /* Popup beim Einloggen in Shop, falls aktuelle Datenschutzerklaerung noch nicht bestaetigt*/ #datenschutzShopDiv h1 { font-size: 20px; } #datenschutzHbDiv input { display: block; width: 13px; float: left; } #datenschutzHbDiv label { /*display: block;*/ width: calc(100% - 20px); /*float: right; */ } #datenschutzHbDiv fieldset { /* klee: 25.03.2022 -- Neukunde werden -- Styles korrigiert #datenschutzHbDiv fieldset */ /* padding: 10px; */ padding: 20px; } #datenschutzHbDiv input[type="checkbox"] { /* damit auf gleicher Hoehe wie nebenstehender Text*/ margin: 0px; } /* klee 13.12.2018 - in datenschutzHbDiv class="well" gegen class="datenschutzBox" ausgetauscht */ .datenschutzBox { background-color: #f5f5f5; } .datenschutzBox .jumbotron { padding-top: 0px; padding-bottom: 0px; padding-left: 15px; margin-bottom: 0px; margin-left: 1px; margin-right: 1px; color: inherit; background-image: url(/cms/vtmpde/de/img/bg_titel.jpg); background-size: 100% 100%; } /* Datenschutzerklarung im Popup siehe */ .datenschutzBox .jumbotron p { color: #fff; font-size: 18px; font-weight: bold; padding-top: 8px; padding-bottom: 8px; margin-bottom: 1px; } /* Datenschutzerklarung im Popup siehe */ /* klee 13.12.2018 - in datenschutzHbDiv class="well" gegen class="datenschutzBox" ausgetauscht */ .datenschutzBox { background-color: #f5f5f5; } .datenschutzBox .container { width: 100%; } /* Datenschutzerklarung im Popup siehe */ /* Ausblenden Logo in Datenschutzerklärung */ .datenschutzBox .vtmp_logo { width: 0px; padding-left: 0px; padding-right: 0px; margin: 0px; } /* Datenschutzerklarung im Popup siehe */ .datenschutzBox .jumbotron p { color: #fff; font-size: 18px; font-weight: bold; padding-top: 8px; padding-bottom: 8px; margin-bottom: 1px; } .datenschutzBox .datenschutzContentBox { position: absolute; top: 10px; left: 10px; z-index: 99999; margin-top: 0%; width: 98%; } .datenschutzBox .datenschutzContent { padding-top: 20px; } /* /* Datenschutz: E N D E /***********************************************/ /***********************************************/ /* ETC: B E G I N N */ /* WH: 04.02.2019 - Direktive hbClearText*/ .hb-clearable.x { background: #fff url(/hbdb/scShared/img/shared/kleines-x.png) no-repeat right -10px center; /* rotes Kreuzchen*/ /*background: #fff url(/hbdb/scShared/img/sharedSc/del.gif) no-repeat right -10px center; */ background-size: 16px 16px; background-position: right 5px center; /* WH: Abstand des rechts stehenden Kreuzchens zum Eingabestring*/ padding-right: 30px; } .hb-clearable.onX { cursor: pointer; } /* klee fuer DSGVO Abfrage */ @media ( min-width : 992px) { .modal-hb-lg { width: 1300px; } } /*WH: Modal Breite 100% Verwendung im Modal - size: 'hb-width-100-prozent'*/ .modal-hb-width-100-prozent { width: 100%; } .modal-hb-width-90-prozent { width: 90%; } .modal-hb-width-75-prozent { width: 75%; } /* WH: 01.08.2019 - neue Klasse hbDisplayNoneLogOut Ausblenden von Bereichen im ausgeloggten Zustand */ .hbDisplayNoneLogout { display: none; } /*Ausblenden beliebiger Bereiche*/ .hbDisplayNone { display: none; } /* um einen Text unsichtbar zu machen, aber den Raum lassen, den er einnimmt*/ .hbUnsichtbar { color: transparent !important; } /* WH: roter Rand um einen Button, um ihn besonders hervorzuheben z.B. im Zusammenspiel mit ng-class, important, weil sonst durch andere Button-Styles ueberschrieben*/ .hb-btn-border-red { border: 2px solid red !important; } /*WH: fuer nicht korrekte Input-Felder: Text rot, Rahmen rot*/ input.ng-invalid { color: red; border-color: red; } /*WH: fuer Fehlermeldungen im Formular*/ .hb-text-error { color: red !important; font-size: 12px; } /* Telefonhörer direkt neben die Flaggen */ .hbPhoneSymbolNavBar { padding: 5px; margin-right: 10px; background-color: transparent; border: 0px; } /* WH: Klasse, um Element z.B. span, tr, als Clickbar zu kennzeichnen*/ .hb-clickable { cursor: pointer; } /* klee: brand version Footer tuning */ .ft_version { color: white; font-size: 8px; } /* klee: Size für das new_icon im menue_links_2019.html */ .new_icon { width: 40px; height: 13px; margin: 0px; } /*WH: Modal Breite 100% Verwendung im Modal - size: 'hb-width-100-prozent'*/ .modal-hb-width-100-prozent { width: 100%; } .modal-hb-width-90-prozent { width: 90%; } .modal-hb-width-75-prozent { width: 75%; } .modal-hb-width-60-prozent { width: 60%; } .modal-hb-width-50-prozent { width: 50%; } .modal-hb-width-30-prozent { width: 30%; } textarea.ng-invalid { border-color: red; background-color: pink; } .warning { /* color: #fe9100; */ color: #a94442; font-size: 12px; font-weight: bold; } .hint { color: #fe9100; font-size: 12px; line-height: 100%; font-weight: bold; } .hintLarge { font-family: inherit; color: #fe9100; font-size: 12px; line-height: 100%; font-weight: bold; } .headline { color: #fe9100; font-size: 12px; font-weight: bold; background: transparent; /*klee 25.08.06: da unter MS-IE das Ä nicht lesbar war */ line-height: 108%; } /* klee: 15.11.2018 für Linke Close Kreuz Alert-Box z.B. Cookies-Hinweis */ .closeLeft { float: left; } .responsiveTable { width: 100%; } /* klee: 23.01.2020 - Selbstregistrierung: responsiveTable eingeführt */ #selbstRegHb .responsiveTable { width: 90%; } /* WH: 01.08.2019 - neue Klasse hbDisplayNoneLogOut Ausblenden von Bereichen im ausgeloggten Zustand */ .hbDisplayNoneLogout { display: none; } /*WH: Hintergrund und Rand fuer eine Leiste von nebeneinanderstehenden Buttons */ .hb-button-leiste { background-color: #f5f5f5; border-color: #dddddd; display: block; } .hbHeaderIdentifiziert { font-size: 12px; margin-top: 2px; } /* Für sShop, falls kein Kundenlogog vorhanden => Anzeige site als Schriftzug */ .hbLogoSchrift { /* color: #fe9100; */ color: #f39015; /* klee: wg liefert-es-Schriftzug alpng von Webfaden */ font-size: 34px; line-height: 100%; font-weight: bold; font-style: italic; } .detailcaptions { font-size: 12px; font-weight: bold; } .formInputText { font-size: 12px; height: 23px; /* display:inline-block; padding:15px 10px; line-height:140%; font-size: 30px; padding-top: 10px; padding-bottom: 10px; */ } .formtext { font-size: 12px; } .hbHomeBasisFont { font-size: 14px; } /* alle Input-Felder schmaler machen in der Hoehe */ .form-control { background-color: #ffffff; background-image: none; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; color: #555; display: block; /*font-size: 14px;*/ font-size: 12px; /* height: 20px;*/ height: 23px; line-height: 1.42857; /* padding: 6px 12px; */ padding: 2px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%; } /* alle Input-Felder Original-Bootstrap-Params */ .form-control-home { display: block; width: 100%; height: 34px; padding: 6px 12px; padding-right: 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; /* min-width: 180px; */ min-width: 80px; } /* Styles fuer buttons an einer input-group, z.b. die Lupe am Suchfeld, in der das input-Feld die class form-control hat statt die Groessenangaben von Bootstrap wie btn-sm, btn-xs etc*/ .btn-hb-form-control { border-radius: 3px; font-size: 12px; line-height: 1.5; padding: 0px 10px 0px; /*height auf 23px, damit es in der Hoehe buendig abschliesst mit dem Input-Feld*/ height: 23px; } .dropdown-menu { min-width: 240px; /* font-size: 14px; */ } /* Nur auf Seiten ohne breadcrumbs */ .hbMainHome { padding-top: 30px; padding-bottom: 30px; } .hbFooterPreisspruch { } /* Klee: aus blenden bei Handy */ @media ( max-width : 499px) { .hbAngemeldetAls { display: none !important; } } .hbLangsamesInternet { margin-bottom: 8px; padding-left: 0px; color: red; font-weight: bold; } .hbAnzahlArtWk { font-size: 15px; } /* /* ETC: E N D E /***********************************************/ /***********************************************/ /* sShop-Kunden-Dokumente: B E G I N N */ #kundenDokument .detailtitle { color: #333333; font-size: 12px; font-weight: 400; line-height: 100%; background: transparent; } #kundenDokument .detailtext { color: #585858; font-size: 12px; line-height: 120%; background: transparent; } #kundenDokument b { color: #333333; font-size: 12px; font-weight: 400; line-height: 100%; background: transparent; } #kundenDokument strong { color: #333333; font-size: 12px; font-weight: 400; line-height: 100%; background: transparent; } #kundenDokument p { color: #585858; font-size: 12px; line-height: 120%; background: transparent; } #kundenDokument .pdflink { color: #fe9100; line-height: 100%; font-weight: bold; } #kundenDokument a.pdflink:link { color: #fe9100 } #kundenDokument a.pdflink:visited { color: #fe9100 } #kundenDokument a.pdflink:hover { color: #C57100; } #kundenDokument.hbContainerPrint { padding-right: 15px; padding-left: 15px; margin-right: 0px; margin-left: 0px; } /* /* sShop-Kunden-Dokumente: E N D E /***********************************************/ /***********************************************/ /* sShop-Retoure: B E G I N N */ .hbRetourePrintButtonTop_TEST { margin-bottom: 22px; } /* Zeilen-Abstand innerhalb der Form Achtung die Klasse form-horizontal bewirkt, dass die Label bündig zu dem Input-Feld steht, das überschreiben wir, da wir die Label mittig haben wollen. */ #hbRetourePrintTable .form-horizontal .control-label { padding-top: 0px; } /* /* sShop-Retoure: E N D E /***********************************************/ /***********************************************/ /***********************************************/ /* Bestellübersicht: B E G I N N */ /* WH: Panel-Def innerhalb Bestelluebersicht*/ #hbBestelluebersichtDiv .panel { border-color: #e3e3e3 } #hbBestelluebersichtDiv .headline, .panel>.panel-heading { padding: 5px 10px; color: #fe9100; font-weight: 600; background-color: #f5f5f5; border: 1px solid #e3e3e3; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); } /* Bestellübersicht*/ /*Bestellübesicht Headline*/ .row.order-overview-headline { display: flex; flex-wrap: wrap; } .order-overview-headline .panel { height: calc(100% - 20px); display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; } .order-overview-headline .panel .panel-body { padding: 5px; -ms-flex: 1 1 auto; flex: 1 1 auto; } .order-overview-headline .panel .table { margin-bottom: 0; } .order-overview-headline .panel .table+div { margin-top: 10px; } .order-overview-headline .panel .table tr>td { padding: 3px 5px; } .order-overview-headline .panel .table tr:first-child>td { border: 0; } .order-overview-legal .checkbox { margin-left: 50%; } @media ( max-width :991px) { .order-overview-legal .checkbox { margin-left: 33%; } } @media ( max-width :767px) { .order-overview-legal .checkbox { margin-left: 0%; } } .order-overview-legal input[type="checkbox"] { margin-top: 2px; } /*Formatierung Ergänzung */ .align-right { text-align: right; } .align-center { text-align: center; } .navbar-toggle .icon-bar { background-color: #9B2C00 } /*responsive Ergänzung*/ @media ( max-width :575px) { .col-xs-6 { float: none; width: 100%; } } /***********************************************/ /*AF - 06.07.2020 : E N D E */ /*WH: Buttons Bestellen und Abbrechen*/ #hbBestelluebersichtDiv .hb-btn-bestell { font-weight: bold; } #sperrgutModalDiv p { font-size: 14px; } #sperrgutModalDiv ul { font-size: 14px; } #sperrgutModalDiv .hb-btn-bestell { font-weight: bold; } /* WH: innerhalb der Bestelluebersicht die Klasse datenschutzContentBox fuer Widerrufsrecht und AGbs mit abgeaenderten Werten, damit Div ueber ganzes Browserfenster geht*/ #hbBestelluebersichtDiv .datenschutzBox { background-color: unset; } #hbBestelluebersichtDiv .datenschutzBox .datenschutzContentBox { /*position: absolute;*/ top: -850px; /*left: 10px; z-index: 99999; margin-top: 0%;*/ width: 100%; } /* /* Bestellübersicht: E N D E /***********************************************/ /***********************************************/ /* Auftragsinfo: B E G I N N */ /* WH: Panel-Def innerhalb Bestelluebersicht*/ #hbAuftragsinfoDiv .panel { border-color: #e3e3e3 } #hbAuftragsinfoDiv .headline, .panel>.panel-heading { padding: 5px 10px; /* klee 13.04.2021 -- color: FF5D00; */ color: #fe9100; font-weight: 600; background-color: #f5f5f5; border: 1px solid #e3e3e3; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); } /* Panels fuer EKR-Tool*/ #hbAuftragsinfoDiv .panel-info.panel-sc { border-color: #bce8f1 } #hbAuftragsinfoDiv .panel-info.panel-sc>.panel-heading { background-color: #d9edf7; border: 1px solid #bce8f1; } /* Auftragsinfo Headline */ #hbAuftragsinfoDiv .row.order-overview-headline { display: flex; flex-wrap: wrap; } #hbAuftragsinfoDiv .row.order-overview-headline-add { display: flex; flex-wrap: wrap; justify-content: end; } #hbAuftragsinfoDiv .order-overview-headline .panel { height: calc(100% - 20px); display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; } #hbAuftragsinfoDiv .order-overview-headline .panel .panel-body { padding: 5px; -ms-flex: 1 1 auto; flex: 1 1 auto; } #hbAuftragsinfoDiv .order-overview-headline .panel .table { margin-bottom: 0; } #hbAuftragsinfoDiv .order-overview-headline .panel .table+div { margin-top: 10px; } #hbAuftragsinfoDiv .order-overview-headline .panel .table tr>td { padding: 3px 5px; } #hbAuftragsinfoDiv .order-overview-headline .panel .table tr:first-child>td { border: 0; } #hbAuftragsinfoDiv .detailcaptions-add, .formtext-add { background-color: #d9edf7; } #hbAuftragsinfoDiv .order-overview-submit { margin-bottom: 30px; } /*Formatierung Ergänzung */ #hbAuftragsinfoDiv .align-right { text-align: right; } #hbAuftragsinfoDiv .align-center { text-align: center; } #auftragsInfoPaketTrackDiv .panel-body { padding: 0px; } #auftragsInfoPaketTrackDiv .table { margin-bottom: 0px; border: none; /* um den Strich oben am Table wegzukriegen*/ border-collapse: collapse; } #auftragsInfoPaketTrackDiv .hbGridTrackingCellButtonDiv { padding-top: 0px; } .gridAuftragsinfo { width: 100%; /*height: 100%; */ height: 200px; } .gridTracking { width: 100%; /*height: 100%; */ height: 130px; } .hbAufInfoPadding { /* um den Button am Suchfeld rechts buendig mit dem Grid abzuschliessen*/ padding-right: 25px; } /*responsive Ergänzung*/ @media ( max-width :575px) { .col-xs-6 { float: none; width: 100%; } } /* klee: 24.02.2021 - Auftragsübersicht für vtmp */ .hbAufInfoSucheHr { margin-bottom: 10px; margin-top: 10px; } /* klee: 09.03.2021 - Auftragsübersicht Lupe */ .hbAufInfoSucheBtnLupe { width: 75px; } /* klee: 09.03.2021 - Auftragsübersicht Lupe */ .hbAufInfoSucheInput { margin-top: 1px; } /*Hintergrundfarbe fuer Kennzeichnung offene Positionen im Listing*/ .hbOffenPos { background-color: #FAF0E0 !important; } /* Grid im PopUP*/ .gridAufOffenePos { width: 100%; height: 550px; } /* margin-bottom vom fieldset verringern, damit es keinen grossen weissen Rand am Modal gibt*/ #aufOffenePosHbDiv fieldset{ margin-bottom: 3px; } /*WH: 08.12.2020 Suchfelder-Bereich als Table Layout*/ .table-aufinfo-suche { /* margin-bottom verringern*/ margin-bottom: 5px; } .table-aufinfo-suche > tbody > tr > td { /* keine sichtbaren Border*/ border-top: none; /*Elemente vertikal zentrieren*/ vertical-align: middle; } /* Tabellenspalte mit Label Suche nach*/ .table-aufinfo-suche-1 tbody td:nth-child(1) { width: 17%; } /* Tabellenspalte mit Selectbox*/ .table-aufinfo-suche-1 tbody td:nth-child(2) { width: 25%; } /* 26.06.2024 - Retoure/Reklamation: Auftragsinfo erweitern um Suche nach Rechnungsnr und Lieferschein*/ /* Spalte Suchfeld fuer Auftragsnummer, etc, auf top, damit unter den Button offene Positione noch ein Button passt*/ .table-aufinfo-suche-2 tbody td:nth-child(1) { vertical-align: top; } /* /* Auftragsinfo: E N D E /***********************************************/ /***********************************************/ /* Newsletter Startseite : B E G I N N */ #hbNewsEinstiegDiv .frontpage-panel-heading { text-align: center; } /* Blaetterleiste und PageCount mittig andrucken*/ #hbNewsEinstiegDiv .blaetternPaginationBox { display: flex; flex-direction: row; justify-content: center; align-items: center; float: unset; } /* Kreuzchen zum Schliessen*/ #hbNewsEinstiegDiv .hbNewsClose { float: right; /*margin-top: -35px;*/ } /* Inhaltsseite zentrieren */ #hbNewsEinstiegDiv #newsContent { display: inline-block; } /* WH: 14.02.2024 - Integration BPW (Produktinfo) als JPG: Bild 'responsive' machen */ #hbNewsEinstiegDiv #bpwContent { display: inline-block; } #hbNewsEinstiegDiv .bpwImg { width: 100%; } /* /* Newsletter Startseite : E N D E /***********************************************/ /***********************************************/ /* Angebot der Woche in eigener Component : B E G I N N */ /*fuer Hervorhebungen fuer Fragen von hiblue*/ .hb-frage-color { color: fuchsia; } /* WH: 14.06.2023 - Angebot der Woche hervorheben*/ #aDWHbDiv { padding-left: 30px; padding-right: 30px; margin-top: 10px; } #aDWHbDiv .adWFieldsetHeader { padding-top: 0px; padding-left: 10px; padding-right: 10px; padding-bottom: 0px; margin-bottom: 10px; border-color: rgb(0, 174, 239); } #aDWHbDiv .table-adw { max-width: 100%; } #aDWHbDiv .td-adw { text-align: center; } /* Spalten des Tables untereinanderschieben bei kleinem Bildschirm*/ @media ( max-width : 770px) { .table-adw td { display: block; } /* Bilder uebereinanderschieben*/ .table-adw tbody tr:nth-child(1) td:nth-child(1), .table-adw tbody tr:nth-child(1) td:nth-child(2), .table-adw tbody tr:nth-child(1) td:nth-child(3), .table-adw tbody tr:nth-child(1) td:nth-child(4), .table-adw tbody tr:nth-child(1) td:nth-child(5), .table-adw tbody tr:nth-child(1) td:nth-child(6), .table-adw tbody tr:nth-child(1) td:nth-child(7) { float: left; width: 33.0%; } /* Zeile mit Text ausblenden*/ .table-adw tbody tr:nth-child(2) { display: none; } } /* /* Angebot der Woche in eigener Component : E N D E /***********************************************/ /***********************************************/ /* CMS-Seiten im Webshop: B E G I N N */ /* Styles fuer die Transformation der der HTML-Seiten bei Integration in den Shop */ /* Styles fuer das Oeffnen der Seite in eigenem Browser-Fenster*/ #hbCmsDiv .hb-cms-fieldset-in-browser { margin-left: 10px; margin-right: 10px; } /* Hintergrundfarbe fuer Ueberschrift */ #hbCmsDiv .hb-header-cms-in-browser { text-align: center; margin-top: 10px; } /* Impressum des sShops*/ .impColorCritical { color: #cc0000 } /* /* CMS-Seiten im Webshop: E N D E /***********************************************/ /***********************************************/ /* Infoservice Artikel : B E G I N N */ /* Fieldset ohne Margin-bottom, weil sonst unten weisser Rand im Modal*/ #infSrvArtHbDiv * fieldset { margin-bottom: 0px; } /* Button in text-danger Farbe*/ .btn-inf-srv-art { background-color: #a94442; color: white; border-color: #a94442; } .btn-inf-srv-art.btn-outline { color: #a94442; background-color: transparent; } /* Infoservice in ArtikelDetail in rotem Alert mit Abstand*/ .inv-srv-art-in-art-detail { margin-top: 1%; } /* Infoservice in ArtikelDetail in blauem Alert : soll einzeilig sein*/ .text-inf-srv-alert-info { width: 60%; /* margin-right: -30px; */ text-align: right; } .inf-srv-art-in-art-detail-alert-info { float: right; margin-top: -20px; /* margin-left: 20%; */ margin-right: 35%; } /* Infoservice in ArtikelDetail in rotem Alert : soll einzeilig sein*/ .text-inf-srv-alert-danger { float: left; margin-top: 4px } .inf-srv-art-in-art-detail-alert-danger { /*float: right; margin-right: 47%;*/ float: left; margin-left: 2px; } /* Infoservice Artikel : E N D E */ /***********************************************/ /***********************************************/ /* ALTE PHP-Webshop: B E G I N N */ /* klee: vermutlich nach Umstellung auf NG obsolet */ .pdflink { color: #fe9100; line-height: 100%; font-weight: bold; font-size: 12px; } a.pdflink:link { color: #fe9100; } a.pdflink:visited { color: #fe9100; } a.pdflink:hover { color: #C57100; } #auftragsinfo .headline { font-size: 16px; } #auftragsinfo .hbDruckicon { margin-bottom: -6px; } .stueckbtn { color: #ffffff; line-height: 100%; font-weight: bold; font-size: 11px; } a.stueckbtn:link { color: #ffffff } a.stueckbtn:visited { color: #ffffff } a.stueckbtn:hover { color: #000000 } /* /* ALTE PHP-Webshop: E N D E /***********************************************/ /***********************************************/ /* Kumuliertes Hinzuefuegen von Artikeln: B E G I N N */ /* Formular mit Hinweis und Moeglichkeit Korrektur der Menge*/ /* Height auf 30, damit plus und minus-Symbole buendig abschliessen */ #artKumHbDiv .kum-form-control { height: 30px; } #artKumHbDiv input[type=number] { text-align: right; padding-right: 5px; } /* Ausblenden der Pfeile rechts zum Runter-und Hochzaehlen*/ /* Chrome, Safari, Edge, Opera */ #artKumHbDiv input::-webkit-outer-spin-button, #artKumHbDiv input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ #artKumHbDiv input[type=number] { -moz-appearance: textfield; } #artKumHbDiv fieldset { margin-bottom: 0px; } #artKumHbDiv .detailcaptions.text-center{ color: #333333; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 100%; margin-bottom: 20px; } /* /* Kumuliertes Hinzuefuegen von Artikeln: E N D E /***********************************************/ /***********************************************/ /* Vertreter-Eingabe : B E G I N N */ #vertreterHbForm .form-group { margin-bottom: 0px; } /* Vertreter-Eingabe : E N D E */ /***********************************************/ /***********************************************/ /* Icons : B E G I N N */ /* klee: 08.10.2024 -- Integration flag-icons-main im Verzeichnis tools (SVG zur Generierung von kostenlosen Flaggen) */ .fi-ch { /* background: #fff url(/hbdb/scShared/img/shared/flag_ch_4x3.svg) no-repeat center;*/ background: #fff no-repeat center; /* background-image: url(../flags/4x3/ch.svg); */ background-image: url(/hbdb/scShared/img/shared/flag_ch_4x3.svg); /* background-size: 25px 25px; */ } .fi-dropdown-menue-hb { width: 25px } /* Icons: E N D E */ /***********************************************/