html { height: 100%; height: 100%; }
body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: calibri; font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); color: #5d5d5d; }
a { color: #5d5d5d; text-decoration: none; }
a:hover { text-decoration: underline; } a:active { color: #5d5d5d; } a:visited { color: #5d5d5d; }
a .noHover:hover { text-decoration: none; }
input { border: 1px solid #b3b3b3; border-radius: 5px; font-family: calibri; font-style: italic; color: #5d5d5d; font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); }
select { border: 1px solid #b3b3b3; border-radius: 5px; font-family: calibri; font-style: italic; color: #5d5d5d; font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); }
option { font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); }
input:focus { border: 1px solid #99CC33; font-style: normal; color: #5d5d5d; }
[type=submit] { cursor: pointer; font-style: normal; color: #5d5d5d; }
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type=number] { -moz-appearance: textfield; }
textarea { font-family: calibri; font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); font-style: italic; color: #b3b3b3; padding: 0.2vw; }
textarea:focus { border: 1px solid #99CC33; font-style: normal; color: #5d5d5d; }
.inputLikeText { font-style: normal; color: #5d5d5d; font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); border: 0; background: transparent; }
.inputLikeText:focus { border: 0; }
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* FAST ISSUE ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.inputDiv { background: #E4F1C9; border: 1px solid #b3b3b3; border-radius: 5px; cursor: text; margin-bottom: 0.5vw; }
.inputDiv div { margin: 0 0.2vw; padding-top: 0.5vw; font-size: 75%; }
.inputDiv input { background: transparent; width: 95%; margin: 0 0.5vw; margin-bottom: 0.5vw; border: 0; }
.inputDivHover:hover { background: #f0f0f0; }
.inputDiv textarea { background: transparent; width: 95%; margin: 0 0.5vw; margin-bottom: 0.5vw; border: 0; }
.inputDivChoice { font-style: italic; height: 1.5vw; }
.inputDivMobile { background: #E4F1C9; border: 1px solid #b3b3b3; border-radius: 5px; cursor: text; margin-bottom: 1vw; }
.inputDivMobile div { margin: 0 0.5vw; padding-top: 1vw; font-size: 3vw; }
.inputDivMobile input { background: transparent; width: 95%; margin: 0 1vw; margin-bottom: 1vw; border: 0; font-size: 4vw; }
.inputDivHoverMobile:hover { background: #f0f0f0; }
.inputDivMobile textarea { background: transparent; width: 95%; margin: 0 1vw; margin-bottom: 1vw; border: 0; }
.inputDivChoiceMobile { margin: -0.1vw 0 0.5vw 0.5vw; font-style: italic; font-size: 3vw; height: 4vw }
/* /////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
table { border-collapse: collapse; }
thead { background: #f0f0f0; }
table td { margin: 0; padding: 0; }
.margin { margin: 0 0.5em; padding: 0.5em 0; }
.marginMobile { margin: 0 1.5vw; padding: 1.5vw 0; }
.textMargin { margin: 0.5vw; }
.border { height: 1px; border-top: 1px solid #5d5d5d; }
.dashedBorder { height: 1px; border-top: 1px dashed #5d5d5d; margin: 1vw 0; }
h1 { font-size: calc(18px + (28 - 18) * ((100vw - 320px) / (1600 - 320))); font-weight: 400; font-variant: small-caps; margin-bottom: 1.2em; color: #99CC33; }
.headline1 { font-size: 1.5vw; font-weight: 400; font-variant: small-caps; margin-bottom: 2vw; color: #99CC33; }
.h1 { font-size: calc(18px + (28 - 18) * ((100vw - 320px) / (1600 - 320))); font-weight: 400; font-variant: small-caps; margin: 0.5em 0; color: #99CC33; border-bottom: 1px solid #5d5d5d; }
.h1Mobile { font-size: 5vw; font-weight: 400; font-variant: small-caps; margin-bottom: 4vw; color: #99CC33; }
.headline2 { font-size: 1.2vw; font-weight: 400; font-variant: small-caps; margin-bottom: 1vw; color: #99CC33; }
.h2 { font-size: calc(16px + (26 - 16) * ((100vw - 320px) / (1600 - 320))); font-weight: 400; font-variant: small-caps; margin: 0.5em 0; color: #99CC33; }
.h2Mobile { font-size: 4vw; font-weight: 400; font-variant: small-caps; margin-bottom: 2vw; color: #99CC33; }
.h3 { font-size: calc(14px + (24 - 14) * ((100vw - 320px) / (1600 - 320))); font-variant: small-caps; margin-bottom: 0.5em; color: #5d5d5d; }
.h3Mobile { font-size: 4vw; font-variant: small-caps; margin-bottom: 1vw; color: #5d5d5d; }
.small-caps { margin: 0.8em 0 0.5em 0; font-variant: small-caps; }
.small { font-size: 0.8em; }
.x-small { font-size: 0.6em; }
.xx-small { font-size: 0.4em; }
.larger { font-size: 1.2em; }
.x-large { font-size: 1.4em; }
.btn { display: inline; cursor: pointer; padding: 0.5em; background: #f0f0f0; border: 1px solid #b3b3b3; margin-bottom: 1em; border-radius: 5px; }
.btn img { opacity: 0.6; height: 1.2em; float: left; margin-right: 0.5em; }
.btn:hover { border: 1px solid #a7a7a7; }
.btn:hover > img { opacity: 1; }
.clear { clear: both; }
.link { color: blue; cursor: pointer; }
.link:hover { text-decoration: underline; }
.top { vertical-align: top; } .middle { vertical-align: middle; } .bottom { vertical-align: bottom; }
.cell3 { width: 100%; }
.cell3Td { width: 33%; vertical-align: top; }
/* CHECKBOX ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.checkbox { display: block; position: relative; padding-left: 1.5em; margin-bottom: 0.3em; cursor: pointer; font-size: 1.2em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 1.3em; width: 1.3em; background-color: #eee; }
.checkbox:hover input ~ .checkmark { background-color: #ccc; }
.checkbox input:checked ~ .checkmark { background-color: #99CC33; }
.checkmark:after { content: ""; position: absolute; display: none; }
.checkbox input:checked ~ .checkmark:after { display: block; }
.checkbox .checkmark:after { left: 0.3em; top: 0.05em; width: 0.5em; height: 0.8em; border: solid white; border-width: 0 0.15em 0.15em 0; -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); }
.smallCheckbox .checkbox { margin-bottom: 0.2em; font-size: 0.9em; }
.smallCheckbox .checkmark { height: 0.9em; width: 0.9em; }
.smallCheckbox .checkbox .checkmark:after { margin-left: 0; margin-top: 0.05em; width: 0.2em; height: 0.5em; border-width: 0 0.15em 0.15em 0; }
/* HEAD ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
#cookie_banner { position: fixed; width: 25vw; top: 14vh; height: 84vh; left: 72vw; background: #fff; border: 1px solid #b3b3b3; border-radius: 5px; z-index: 9999; overflow: auto; }
.cookieBtn { padding: 0.5em; font-weight: 600; text-align: center; cursor: pointer; }
@media only screen and (max-width: 1700px) {
#cookie_banner { width: 35vw; top: 20vh; height: 78vh; left: 63vw; }
} @media only screen and (max-width: 1200px) {
#cookie_banner { width: 42vw; top: 20vh; height: 78vh; left: 56vw; }
} @media only screen and (max-width: 900px) {
#cookie_banner { width: 55vw; top: 15vh; height: 83vh; left: 43vw; }
} @media only screen and (max-width: 600px) {
#cookie_banner { width: 95vw; top: 5vh; height: 90vh; left: 2.5vw; }
}
/* HEADER ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
header { position: fixed; width: 100%; z-index: 9998; }
header table td { border: 0px solid #555; }
header input:focus { border: none; border-color: transparent; }
.button { cursor: pointer; padding: 0.5vw; background: #f0f0f0; border: 1px solid #b3b3b3; margin-bottom: 1vw; border-radius: 5px; }
.button table { margin: 0px auto; }
.button img { height: 2vw; display: block; cursor: pointer; opacity: 0.7 }
.smallButton { cursor: pointer; padding: 0.25vw; background: #f0f0f0; border: 1px solid #b3b3b3; margin-bottom: 1vw; border-radius: 5px; font-size: 0.8vw; }
.smallButton table { margin: 0px auto; }
.smallButton img { height: 1vw; display: block; cursor: pointer; opacity: 0.7 }
.mobileButton { cursor: pointer; background: #f0f0f0; border: 1px solid #b3b3b3; margin-bottom: 3vw; border-radius: 5px; font-size: 4vw; }
.mobileButton div { margin: 2vw; text-align: center; }
.mobileButtonAlt { cursor: pointer; background: #99CC33; border: 1px solid #b3b3b3; margin-bottom: 3vw; border-radius: 5px; font-size: 4vw; color: #fff; }
.mobileButtonAlt div { margin: 2vw; text-align: center; }
.horiSelection { width: 16vw; border-bottom: 1px solid #b3b3b3; cursor: pointer; }
.horiSelection div { background: #f0f0f0; border: 1px solid #b3b3b3; border-radius: 5px 5px 0 0; border-bottom: 0; padding: 0.4vw 0; font-variant: small-caps; }
.horiSelection img { width: 2vw; opacity: 0.6; display: block; }
.horiSelectionContent { background: #fff; border: 1px solid #b3b3b3; border-top: 0; border-radius: 0 0 5px 5px; }
.infoBox { background: #f0f0f0; border: 1px solid #b3b3b3; border-radius: 5px; font-size: 100%; }
.infoBoxImg { display: block; width: 2vw; margin: 0 2vw 0 0; }
.infoBox div div { font-size: 120%; font-variant: small-caps; }
.infoBoxImgMobile { display: block; width: 5vw; margin: 0 2vw 0 0; }
#darkBack { display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: #000; opacity: 0.6; z-index: 9999; }
#popupBox { display: none; position: fixed; width: 75vw; top: 5vh; left: 12.5vw; background: #fff; border: 1px solid #b3b3b3; border-radius: 5px; z-index: 9999; max-height: 90vh; overflow: auto; }
#popupBoxClose { position: fixed; width: 2vw; float: right; margin: 2vw 2vw 0 65vw; cursor: pointer; opacity: 0.6; }
#popupBoxClose:hover { opacity: 1 }
.textImgCenter25 { width: 25%; margin: 1em 37.5%; }
.textImgCenter50 { width: 50%; margin: 1em 25%; }
.textImgCenter75 { width: 75%; margin: 1em 12.5%; }
.textImgFloatLeft100 { float: left; margin: 1em; margin-left: 0; width: 30em; }
.textImgFloatRight100 { float: right; margin: 1em; margin-right: 0; width: 30em; }
.textImgFloatLeft { float: left; margin: 1em; margin-left: 0; width: 20em; }
.textImgFloatRight { float: right; margin: 1em; margin-right: 0; width: 20em; }
.textImgFloatLeft75 { float: left; margin: 1em; margin-left: 0; width: 15em; }
.textImgFloatRight75 { float: right; margin: 1em; margin-right: 0; width: 15em; }
.textImgFloatLeft50 { float: left; margin: 1em; margin-left: 0; width: 10em; }
.textImgFloatRight50 { float: right; margin: 1em; margin-right: 0; width: 10em; }
.textImgFloatLeft25 { float: left; margin: 1em; margin-left: 0; width: 5em; }
.textImgFloatRight25 { float: right; margin: 1em; margin-right: 0; width: 5em; }
.schwarzweiss { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(desaturate.svg#greyscale); filter: gray; -webkit-filter: grayscale(1); }
.flexWrap { width: 100%; display: flex; flex-wrap: wrap; }
.flexWrapDiv2 { width: 50%; display: flex; flex-wrap: wrap; }
.flexWrapDiv3 { width: 33%; display: flex; flex-wrap: wrap; }
.flexWrapDiv4 { width: 25%; display: flex; flex-wrap: wrap; }
.flexWrapDiv5 { width: 20%; display: flex; flex-wrap: wrap; }
.flexWrapDiv6 { width: 16.16%; margin-right: 0.608%; }
.flexWrapDiv6:nth-last-child(1) { margin-right: 0; }
.flexWrapDiv5050:nth-child(1) { width: 49%; margin-right: 2%; display: flex; flex-wrap: wrap; }
.flexWrapDiv5050:nth-child(2) { width: 49%; display: flex; flex-wrap: wrap; }
.flexWrapDiv206020 { width: 20%; display: flex; flex-wrap: wrap; }
.flexWrapDiv206020:nth-child(even) { width: 60%; display: flex; flex-wrap: wrap; }
.flexWrapDiv205030:nth-child(1) { width: 20%; display: flex; flex-wrap: wrap; }
.flexWrapDiv205030:nth-child(2) { width: 40%; display: flex; flex-wrap: wrap; }
.flexWrapDiv205030:nth-child(3) { width: 40%; display: flex; flex-wrap: wrap; }
.flexWrapDiv4060:nth-child(1) { width: 40%; display: flex; flex-wrap: wrap; }
.flexWrapDiv4060:nth-child(2) { width: 58%; margin-left: 2%; display: flex; flex-wrap: wrap; }
.flexWrapDiv6040:nth-child(1) { width: 58%; margin-right: 2%; display: flex; flex-wrap: wrap; }
.flexWrapDiv6040:nth-child(2) { width: 40%; display: flex; flex-wrap: wrap; }
.flexWrapDiv7030:nth-child(1) { width: 68%; margin-right: 2%; display: flex; flex-wrap: wrap; }
.flexWrapDiv7030:nth-child(2) { width: 30%; display: flex; flex-wrap: wrap; }
.flexWrapDiv8020:nth-child(1) { width: 78%; margin-right: 2%; display: flex; flex-wrap: wrap; }
.flexWrapDiv8020:nth-child(2) { width: 20%; display: flex; flex-wrap: wrap; }
.flexWrapDiv3070:nth-child(1) { width: 30%; margin-right: 2%; display: flex; flex-wrap: wrap; }
.flexWrapDiv3070:nth-child(2) { width: 68%; display: flex; flex-wrap: wrap; }
.flexWrapDiv45-6x9 { width: 9.16%; display: flex; flex-wrap: wrap; }
.flexWrapDiv45-6x9:nth-child(1) { width: 45%; display: flex; flex-wrap: wrap; }
.flexWrapDiv45-6x9 div { width: 100%; padding: 0.25em 0; border-bottom: 1px solid #b3b3b3; text-align: right; }
.wrapper { width: 80vw; margin: 0 10%; overflow: hidden; }
.flexWrapper { width: 81vw; margin: 0 9.5vw; overflow: hidden; }
@media only screen and (max-width: 1700px) {
.wrapper { width: 85vw; margin: 0 7.5vw; }
.flexWrapper { width: 86vw; margin: 0 7vw; overflow: hidden; }
}
@media only screen and (max-width: 1500px) {
.wrapper { width: 90vw; margin: 0 5vw; }
.flexWrapper { width: 91vw; margin: 0 4.5vw; overflow: hidden; }
}
@media only screen and (max-width: 1200px) {
.h1 { margin: 0.75em 0; }
.h2 { margin: 0.75em 0; }
.h3 { margin: 0.75em 0; }
.wrapper { width: 95vw; margin: 0 2.5vw; }
.flexWrapper { width: 96vw; margin: 0 2vw; overflow: hidden; }
.flexWrapDiv5 { width: 25%; display: flex; flex-wrap: wrap; }
}
@media only screen and (max-width: 1050px) {
#popupBox { width: 90vw; left: 5vw; }
.flexWrapDiv3 { width: 50%; }
.flexWrapDiv205030:nth-child(1) { width: 50%; }
.flexWrapDiv205030:nth-child(2) { width: 50%; }
.flexWrapDiv205030:nth-child(3) { width: 100%; }
.flexWrapDiv4 { width: 33%; }
.flexWrapDiv5 { width: 33%; }
.flexWrapDiv6 { width: 32.33%; margin-right: 1.505%; }
.flexWrapDiv6:nth-last-child(1) { margin-right: 0; }
}
@media only screen and (max-width: 600px) {
#popupBox { width: 95vw; left: 2.5vw; }
.h1 { margin: 1em 0; }
.h2 { margin: 1em 0; }
.h3 { margin: 1em 0; }
.flexWrapDiv2 { width: 100%; }
.flexWrapDiv2:nth-child(2) { margin-top: 1em; }
.flexWrapDiv3 { width: 100%; }
.flexWrapDiv4 { width: 49%; margin-right: 1%; }
.flexWrapDiv5 { width: 49%; margin-right: 1%; }
.flexWrapDiv5050:nth-child(1) { width: 100%; margin-right: 0; display: flex; flex-wrap: wrap; }
.flexWrapDiv5050:nth-child(2) { width: 100%; margin-top: 1em; display: flex; flex-wrap: wrap; }
.flexWrapDiv206020 { width: 49%; }
.flexWrapDiv206020:nth-child(2) { width: 100%; }
.flexWrapDiv206020:nth-child(1) { order: 1; margin-right: 2%; }
.flexWrapDiv206020:nth-child(3) { order: 2; }
.flexWrapDiv206020:nth-child(2) { order: 3; }
.flexWrapDiv4060:nth-child(1) { width: 100%; display: flex; flex-wrap: wrap; }
.flexWrapDiv4060:nth-child(2) { width: 100%; margin-top: 1em; display: flex; flex-wrap: wrap; margin-left: 0; }
.flexWrapDiv6040:nth-child(1) { width: 100%; margin-right: 0; display: flex; flex-wrap: wrap; }
.flexWrapDiv6040:nth-child(2) { width: 100%; margin-top: 1em; display: flex; flex-wrap: wrap; }
.flexWrapDiv8020:nth-child(1) { width: 100%; display: flex; flex-wrap: wrap; margin-right: 0; }
.flexWrapDiv8020:nth-child(2) { width: 100%; margin-top: 1em; display: flex; flex-wrap: wrap; }
.flexWrapDiv7030:nth-child(1) { width: 100%; display: flex; flex-wrap: wrap; margin-right: 0; }
.flexWrapDiv7030:nth-child(2) { width: 100%; margin-top: 1em; display: flex; flex-wrap: wrap; }
.flexWrapDiv3070:nth-child(1) { width: 100%; margin-right: 0%; display: flex; flex-wrap: wrap; }
.flexWrapDiv3070:nth-child(2) { width: 100%; margin-top: 1em; display: flex; flex-wrap: wrap; }
.textImgCenter25 { width: 95%; margin: 1em 2.5%; }
.textImgCenter50 { width: 95%; margin: 1em 2.5%; }
.textImgCenter75 { width: 95%; margin: 1em 2.5%; }
.textImgFloatLeft { float: none; width: 95%; margin: 1em 2.5%; }
.textImgFloatRight { float: none; width: 95%; margin: 1em 2.5%; }
.textImgFloatLeft75 { float: none; width: 95%; margin: 1em 2.5%; }
.textImgFloatRight75 { float: none; width: 95%; margin: 1em 2.5%; }
.textImgFloatLeft50 { float: none; width: 95%; margin: 1em 2.5%; }
.textImgFloatRight50 { float: none; width: 95%; margin: 1em 2.5%; }
.textImgFloatLeft25 { float: none; width: 95%; margin: 1em 2.5%; }
.textImgFloatRight25 { float: none; width: 95%; margin: 1em 2.5%; }
.onlyDesktop { display: none; }
}
.wrapperMobile { width: 95vw; margin: 0 2.5vw; overflow: hidden; }
/* PRODUKTBOX ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.product-box { width: 100%; margin: 0.5vw; text-align: center; border-radius: 0.5em; }
.product-box:hover { box-shadow: 0.1em 0.2em 0.5em rgba(0,0,0,0.5); }
.product-image { background-color: #f0f0f0; padding: 1em 0; border-radius: 0.5em 0.5em 0 0; }
.product-image img { width: 95%; margin: 2.5%; }
.product-info { color: #fff; background-color: #5d5d5d; padding: 0.5em; border-radius: 0 0 0.5em 0.5em; }
.product-info .product-box-bez { font-size: 1.2em; height: 4em; font-variant: small-caps; }
.product-info .product-box-desc { font-size: 0.9em; height: 5em; }
.btn-gruen { border-style: none; width: 100%; background-color: #99cc33; border-radius: 0.5em; padding: 1em; cursor: pointer; }
.btn-gruen:hover { color: #fff; }
@media only screen and (max-width: 600px) {
.product-info .product-box-bez { font-size: 1.05em; height: 5em; }
.product-info .product-box-desc { font-size: 0.7em; height: 6em; }
}
/* Header Desktop ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#language { }
#language img { height: 1em; float: right; margin-left: 0.25em; cursor: pointer; }
.headerDesktopTable { width: 80%; margin: 0 10%; }
.headerDesktopLogo { width: 9vw; margin: 1vw 0; cursor: pointer; }
.headerWrapperDesktop { height: 9.5vw; background: #fff; border-bottom: 1px solid #b3b3b3; box-shadow: 0 0.2vw 0.5vw #b3b3b3; }
#headerService { margin-top: 0.5vw; width: 98%; }
.headerServiceImgTd { width: 1.5vw; }
.headerServiceImgTd img { height: 1.5vw; display: block; opacity: 0.8; }
.headerServiceTableDescTd { padding: 0 0.5vw; color: #b3b3b3; font-size: 0.8vw; text-align: center; }
#headerDesktopSuche { position: absolute; width: 44%; margin-top: 0.5vw; border: 1px solid #b3b3b3; border-radius: 5px; }
#headerDesktopSuche table { width: 100%; }
#headerDesktopSuchlupe { width: 1.7vw; margin: 0.3vw 0.3vw 0 0.3vw; opacity: 0.3; }
#searchDiv { position: absolute; background: #fff; width: 50vw; border: 1px solid #b3b3b3; border-radius: 5px; box-shadow: 0 0 0.3vw #b3b3b3; z-index: 2; display: none; }
#searchRes div { padding: 0.2vw 0; cursor: pointer; }
#searchRes div:hover { background: #f0f0f0; }
#kategorien { display: none; position: absolute; width: 90%; left: 5%; border: 1px solid #99CC33; border-radius: 0 5px 5px 5px; margin-top: 2.3vw; background: #fff; z-index: 7; }
#kategorien ul { float: left; width: 19.9%; border-right: 1px dotted #b3b3b3; margin: 0; padding: 0; }
#kategorien ul li { margin: 0; padding: 0; list-style-type: none; margin: 0.5vw 1vw; width: 100%; cursor: pointer; display: block; }
#kategorien ul ul { float: none; width: 100%; margin: 0 1.2vw; border: 0; }
#kategorien ul ul li { font-size: 0.9vw; width: 100%; list-style-type: circle; cursor: pointer; display: block; }
.katVorschau { width: 50%; text-align: center; }
#headerbuttonBlog { color: #5d5d5d; }
#headerbuttonBlog { width: 100%; }
#headerbuttonBlog img { opacity: 0.6; float: right; height: 1.5vw; margin-right: 0.7vw; margin-left: 0.7vw; }
#headerbuttonBlog td:nth-of-type(1) { width: 30%; }
#headerbuttonBlog td:nth-of-type(2) { text-align: left; width: 70%; vertical-align: middle; }
#kundeninfo { display: none; position: absolute; width: 20%; border: 1px solid #b3b3b3; border-radius: 0 5px 5px 5px; margin-top: 2.3vw; background: #fff; }
#kundeninfo ul { float: left; width: 95%; margin: 0; padding: 0; }
#kundeninfo ul li { margin: 0; padding: 0; list-style-type: none; margin: 0.5vw 1vw; width: 100%; }
.menuTdFirst { width: 100%; height: 7.5vw; }
.menuTdFirst td { vertical-align: bottom; }
.menuTdFirst div { border-radius: 5px 5px 0 0; }
.menuTdFirst div div { margin: 0 0.5em; padding: 0.5em 0; color: #fff; text-align: center; }
.headerbutton { width: 100%; }
.headerbutton img { float: right; width: 1.5em; margin-right: 0.8em; }
.headerbutton table { width: 100%; }
.headerbutton td:nth-of-type(1) { width: 2em; }
.headerbutton td:nth-of-type(2) { text-align: left; vertical-align: middle; }
.bereich { position: absolute; text-align: right; width: 35em; top: 0.5em; font-size: 0.8em; }
.bereich span { cursor: pointer; }
.bereich span:hover { text-decoration: underline; }
.headerShortLinks { text-align: center; width: 10%; cursor: pointer; }
.headerShortLinks img { height: 2vw; opacity: 0.7; }
.headerShortLinks span { color: #b3b3b3; }
.headerShortLinks .logout { width: 1em; height: 1em; display: block; margin-left: 0.2em; }
.headerColDesktop { height: 9.5vw; }
/* Kleiner Header beim Scollen ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#headerDesktopScroll { height: 3vw; background: #fff; border-bottom: 1px solid #b3b3b3; display: none; box-shadow: 0 0.2vw 0.5vw #b3b3b3; }
#headerDesktopScrollTable { width: 80%; margin: 0 10%; }
#headerDesktopScrollTable td { vertical-align: middle; text-align: left; }
#headerDesktopScrollSuche { width: 95%; margin-left: 2.5%; border: 1px solid #b3b3b3; border-radius: 5px; background: #fffafa; }
#headerDesktopScrollSuche table { width: 100%; border-radius: 5px; }
#headerDesktopScrollSuchlupe { width: 1vw; margin: 0.3vw 0.3vw 0 0.3vw; opacity: 1 }
#headerDesktopScrollSuchInput { margin: 1% 2%; width: 90%; border: 0; background: transparent; }
.headerDesktopScrollLogo { width: 7vw; text-align: left; cursor: pointer; }
.headerDesktopScrollLogo img { display: block; height: 2.2vw; margin: 0.5vw 0; }
.scrollHeaderImg { width: 4vw; cursor: pointer; }
.scrollHeaderImg img { height: 2vw; opacity: 0.7; }
#wkMengeScrollHeader { position: absolute; width: 1.5vw; background: red; z-index: 9999; border-radius: 1vw; margin-top: -0.2vw; margin-left: 2.5vw; text-align: center; color: #fff; }
#kategorienScroll { display: none; position: absolute; width: 90%; left: 5%; border: 1px solid #99CC33; border-radius: 0 5px 5px 5px; margin-top: 0.3vw; background: #fff; z-index: 7; text-align: left; }
#kategorienScroll ul { float: left; width: 19.9%; border-right: 1px dotted #b3b3b3; margin: 0; padding: 0; }
#kategorienScroll ul li { margin: 0; padding: 0; list-style-type: none; margin: 0.5vw 1vw; width: 100%; cursor: pointer; }
#kategorienScroll ul ul { float: none; width: 100%; margin: 0 1.2vw; border: 0; }
#kategorienScroll ul ul li { font-size: 0.9vw; width: 100%; list-style-type: circle; cursor: pointer; }
#searchDivScroll { position: absolute; background: #fff; width: 50vw; border: 1px solid #b3b3b3; border-radius: 5px; box-shadow: 0 0 0.3vw #b3b3b3; z-index: 2; display: none; margin-left: 1.5vw; }
#searchResScoll div { padding: 0.2vw 0; cursor: pointer; }
#searchResScoll div:hover { background: #f0f0f0; }
#kundenInfoScroll img { cursor: pointer; }
#kundenInfoScrollDiv { display: none; position: absolute; width: 20vw; margin-left: -3vw; border: 1px solid #99CC33; border-radius: 5px; box-shadow: 0 0 5px #b3b3b3; background: #fff; }
#kundeninfoScrollDiv ul { float: left; width: 25%; height: 20vw; margin: 0; padding: 0; }
#kundeninfoScrollDiv ul li { margin: 0; padding: 0; list-style-type: none; margin: 0.5vw 1vw; width: 100%; }
/* Header Mobile ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#headerMobile { font-size: 4vw; }
.headerWrapperMobile { height: 16vw; background: #fff; border-bottom: 1px solid #b3b3b3; box-shadow: 0 0.2vw 0.5vw #b3b3b3; }
#headerMobile table { width: 100%; }
#headerMobile table td { text-align: center; }
.headerMobileLogo { width: 20%; }
.headerMobileLogo img { width: 80%; margin: 2vw 0; }
.headerMobileOption { width: 16%; }
.headerMobileOption img { width: 40%; opacity: 0.7; }
#mobileSearchDiv { background: #fff; padding: 2vw 0; border-bottom: 1px solid #b3b3b3; box-shadow: 0 0.2vw 0.5vw #b3b3b3; display: none; margin-top: -5px; }
#mobileSearchDiv div { margin: 0 4vw; padding: 3vw 0; text-align: center; }
#mobileSearchDiv table { width: 100%; }
#mobileSearchDiv table td:first-oft-type { width: 70%; }
#mobileSearchDiv input { width: 95%; padding: 1% 2.5%; font-size: 5vw; }
#mobileSearchDiv table div { background: #99CC33; font-size: 5vw; color: #fff; padding: 0.8vw 1vw; border-radius: 5px; border: 1px solid #b3b3b3; }
#mobileKategorien { background: #fff; border-bottom: 1px solid #b3b3b3; display: none; }
.wg1 { margin: 0; padding: 0; width: 100%; background: #444; }
.wg1 li { list-style-type: none; padding: 4vw 0; border-bottom: 1px solid #fff; }
.wg1 a { padding-left: 5vw; color: #fff; }
.wg2 { margin: 0; padding: 0; width: 100%; background: #666; }
.wg2 li { list-style-type: none; }
.wg2 a { padding-left: 10vw; color: #fff; }
.wg3 { margin: 0; padding: 0; width: 100%; background: #888; }
.wg3 li { list-style-type: none; }
.wg3 a { padding-left: 15vw; color: #fff; }
.wg4 { margin: 0; padding: 0; width: 100%; background: #aaa; }
.wg4 li { list-style-type: none; }
.wg4 a { padding-left: 20vw; color: #fff; }
.headerColMobile { height: 16vw; }
#menuTd { height: 1.5%; }
main { width: 100%; min-height: 80vh; }
/* Banner //////////////////////////////////////////////////////////////////////////////////////////////////////// */
#banner { width: 100%; margin: 0; border-bottom: 1px solid #606060; height: 24.7vw; }
.promoWgBulletWrapper { position: absolute; width: 20%; height: 2vw; margin-top: 19vw; left: 41%; }
.promoWgBullet { cursor: pointer; float: left; margin-right: 1%; width: 13%; height: 100%; background: #606060; border: 1px solid #fff; border-radius: 5px; }
.bannerImg { position: absolute; z-index: -1; width: 100%; }
.wgText { position: absolute; width: 30%; height: 19vw; vertical-align: middle; margin-left: 60%; margin-top: 1vw; font-weight: 200; }
.wgTextStillright { position: absolute; width: 35%; height: 19vw; vertical-align: middle; margin-left: 55%; margin-top: -22vw; font-weight: 200; }
.wgTextStillleft { position: absolute; width: 35%; height: 19vw; vertical-align: middle; margin-left: 10%; margin-top: -22vw; font-weight: 200; }
.wgTextDivMobile { text-align: center; margin-top: 0.8vw; width: 10vw; font-size: 1vw; font-weight: 400; cursor: pointer; background-color: #98C931; border-radius: 5px; padding: 0.25vw 0; }
.bannerH1 { color: #606060; font-size: 1.6vw; }
.bannerH2 { font-size: 1.2vw; font-weight: 400; }
.bannerH3 { font-weight: normal; font-size: 1.6vw; }
.bannerP { margin-top: 0.8vw; font-size: 1.2vw; font-weight: 400; }
.bannerLink { text-align: center; margin-top: 0.8vw; width: 12vw; font-size: 1.2vw; font-weight: 400; cursor: pointer; background-color: #98C931; border-radius: 5px; padding: 0.25vw 0; }
#banner .manufactureImg { float: left; height: 2.5em; margin: 0.25em 0.4em 0 0; }
#banner .tb-google-badge { position: absolute; margin: 18vw 0; }
/* Banner Mobil //////////////////////////////////////////////////////////////////////////////////////////////////////// */
#bannerMobile { width: 100%; margin: 0; border-bottom: 1px solid #606060; height: 50vw; }
#bannerMobile img{ object-fit: cover; }
.promoWgBulletWrapperMobile { position: absolute; width: 85vw; height: 4vw; margin-top: 43vw; left: 7.5vw; }
.promoWgBulletMobile { cursor: pointer; float: left; margin-right: 2vw; width: 11.5vw; height: 100%; background: #606060; border: 1px solid #fff; border-radius: 5px; }
.bannerImgMobile { position: absolute; z-index: -1; height: 50vw; width: 100vw; object-fit: cover; }
.wgTextMobile { position: absolute; width: 80vw; height: 30vw; vertical-align: middle; margin: 3vw 0 0 10vw; font-weight: 200; }
.wgTextMobileStill { position: absolute; width: 80vw; height: 30vw; vertical-align: middle; margin-top: -45vw; margin-left: 10vw; font-weight: 200; }
.bannerH1Mobile { color: #606060; font-size: 4vw; margin-bottom: 1vw; }
.bannerH2Mobile { font-weight: normal; font-size: 3vw; margin: 0; font-weight: bold; }
.bannerH3Mobile { font-weight: normal; font-size: 4vw; margin: 0; margin-top: 1vw; }
.bannerPMobile { margin: 0; margin-top: 1vw; font-size: 2.5vw; font-weight: bold; }
.bannerLinkMobile { text-align: center; margin-top: 0.8vw; width: 30vw; font-size: 2.5vw; font-weight: 400; cursor: pointer; background-color: #98C931; border-radius: 5px; padding: 0.25vw 0; }
/* Breadcrump Desktop //////////////////////////////////////////////////////////////////////////////////////////////////////// */
#breadcrump { background: #f0f0f0; }
#breadcrump .wrapper { padding: 1vw 0; }
/* AGRARBLOG //////////////////////////////////////////////////////////////////////////////////////////////////////// */
#agarBlogSearch { margin: -0.5vw 0; float: right; width: 20vw; border-radius: 5px; border: 1px solid #b3b3b3; background: #fff; }
#agarBlogSearch table { width: 100%; }
#agarBlogSearch input { border: 0; width: 95%; color: #b3b3b3; }
#agrarBlogSucheLupe { width: width: 1.5vw; }
#agrarBlogSucheLupe img { height: 1.4vw; margin: 0.2vw; opacity: 0.3; display: block; }
.agrarBlogSearchPopup { position: absolute; width: 30vw; margin-left: -5vw; }
#blogSearchPointWrapper { width: 30vw; background: #fff; border: 1px solid #5d5d5d; box-shadow: 0 0 0.3vw #5d5d5d; border-radius: 5px; }
.blogSearchPoint { cursor: pointer; padding: 0.2vw 0.5vw; }
.blogSearchPoint:hover { background: #f0f0f0; }
#agrarblog_startseite { margin-top: 1em; margin-bottom: 1em; }
#agrarblog_startseite .agrarblog_artikel { width: 100%; cursor: pointer; margin-bottom: 0.5vw; }
#agrarblog_startseite .agrarblog_artikel table { width: 100%; }
#agrarblog_startseite .agrarblog_artikel .preview { width: 40%; height: 11vw; vertical-align: top; }
#agrarblog_startseite .agrarblog_artikel .blogTopic { vertical-align: top; }
#agrarblog_startseite .agrarblog_artikel .blogTopic .h2 div { margin: 0 1vw 1vw 1vw; }
#agrarblog_startseite .agrarblog_artikel .blogTopic .blogText div { margin: 0 1vw 1vw 1vw; }
#agrarblog_startseite .agrarblogLink { margin-top: 1vw; }
#agrarblog_startseite .agrarblogLink a { color: blue; }
/* Startseite und Warengruppen Promo Desktop //////////////////////////////////////////////////////////////////////////////////////////////////////// */
#desktop_promo { margin-top: 1em; }
#desktop_promo #promo_table { width: 100%; }
#desktop_promo #promo_wg .h1 { width: 100%; margin: 0; }
#desktop_promo #promo_wg_headline { font-variant: small-caps; color: #99CC33; }
#desktop_promo #promo_wg_headline .margin { margin: 0; }
#desktop_promo .topKatDiv { margin-top: 0.9em; font-variant: small-caps; hyphens: auto; font-size: 0.9em; }
#desktop_promo .topKatDiv img { width: 2vw; display: block; margin-right: 0.5vw; }
#desktop_promo #promoTd img { width: 94%; margin: 0 3%; cursor: pointer; }
#desktop_promo #promo_right #npk-finder { color: #fff; }
#desktop_promo #promo_right #npk-finder img { width: 100%; }
#desktop_promo #promo_right #npk-finder .npk-finder-headline { font-variant: small-caps; margin: 0.25vw 0; }
#desktop_promo #promo_right #npk-finder #npk-finder-input { color: #5d5d5d; }
#desktop_promo #promo_right #npk-finder #npk-finder-input table { width: 90%; margin: 1.5vw 5% 1vw 5%; }
#desktop_promo #promo_right #npk-finder #npk-finder-input table td { background: #fff; width: 33.3%; text-align: center; }
#desktop_promo #promo_right #npk-finder #npk-finder-input thead td { background-color: #5d5d5d; color: #fff; }
#desktop_promo #promo_right #npk-finder #npk-finder-input span { font-size: 0.8vw; }
#desktop_promo #promo_right #npk-finder #npk-finder-input input { width: 95%; text-align: center; border-radius: 0; }
#desktop_promo #promo_right #npk-finder #npk-finder-input button { width: 40%; text-align: center; border-radius: 0; padding: 0.2vw 0; }
@media only screen and (max-width: 600px) {
#desktop_promo #promoTd img { width: 100%; margin: 0; margin-top: 5vw; cursor: pointer; }
#desktop_promo .topKatDiv img { width: 6vw; display: block; margin-right: 1.5vw; }
#desktop_promo #promo_right #npk-finder #npk-finder-input span { font-size: 2.5vw; }
}
/* Produktseite //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.maisTable td { font-size: 0.9em; }
.maisTable td:nth-child(1) { width: 7.5em; }
.sehrgutHoch { float: left; width: 1.2em; height: 0.5em; background: #008000; border-radius: 5px; margin-left: 0.2em; }
.gutHoch { float: left; width: 1.2em; height: 0.5em; background: #adff2f; border-radius: 5px; margin-left: 0.2em; }
.mittel { float: left; width: 1.2em; height: 0.5em; background: #ffff00; border-radius: 5px; margin-left: 0.2em; }
.npkTable { margin-top: 1em; }
.npkTable div { float: left; text-align: center; width: 3em; border: 1px solid #b3b3b3; }
.npkTable div div { border: 0; padding: 0.25em 0; }
.npkTableHead { background: #f0f0f0; }
.vari { width: 100%; margin-top: 1em; }
.vari .varis { width: 100%; background: #5d5d5d; color: #fff; border-radius: 5px; }
.vari .varis table { width: 100%; height: 4.7em; margin-top: 0.25em; }
.vari .varisImg { width: 3.5em; padding: 0.2em 0; }
.vari .varisImg img { width: 3em; margin: 0 0.2em; cursor: pointer; }
.vari .variVK { width: 7em; text-align: center; font-size: 1.2em; line-height: 0.6; }
.vari .wkBtn { width: 6em; }
.vari .wkBtn img { height: 3em; padding: 0.2em; cursor: pointer; }
.vari .wkBtn input { width: 2em; font-size: 1.2em; padding: 0.2em; text-align: center; }
.toManufacture { border: 1px solid #b0b0b0; float: left; width: 10em; height: 2.7em; margin-left: 0.25em; cursor: pointer; font-size: 0.8em; border-radius: 5px; background: #f0f0f0; }
.toManufacture div { margin-left: 0.2em; }
.toManufacture:hover { background: #fff; border-color: #5d5d5d; }
.toManufacture table { height: 2.7em; }
.share .shareImg { height: 2.3em; float: left; margin-left: 0.25em }
.toManufacture img { float: none; display: block; max-height: 2.3em; max-width: 2.3em; margin-left: 0.2em; margin-right: 0.2em; }
.stockDeliveryInfo { height: 2.4em; border: 1px solid #b3b3b3; border-radius: 5px; background: #32cd32; font-size: 0.9em; }
.stockDeliveryInfo div { margin: 0 0.5vw; padding: 0.5vw 0; }
#produktSeite { margin-top: 1em; }
#produktSeite .productImg { width: 100%; }
#produktSeite .productImg .flexWrap { }
#produktSeite .productImg img { width: 100%; }
#produktSeite .productImg .flexWrap img { width: 75%; border: 1px solid #5d5d5d; cursor: pointer; opacity: 0.6; margin-bottom: 0.25em; }
#produktSeite .productImg .flexWrap .flexWrapDiv4 { text-align: center; }
#produktSeite .productImg .flexWrap img:hover { opacity: 1; }
#produktSeite .desc { width: 95%; margin-left: 5%; }
#produktSeite .herstellerLogo { float: right; margin: 0 0 1em 1em; width: 8em; }
.datenblatt { margin: 2em 0 2em 2em; float: right; width: 8em; background: #f0f0f0; border: 1px solid #b3b3b3; border-radius: 5px; cursor: pointer; }
.datenblatt img { width: 3em; }
.datenblatt div { margin-top: 0.2em; }
#produktSeite #psm .zulassung img { width: 6em; margin-right: 1em; }
#produktSeite #psm .h3 { margin: 1em 0; }
#produktSeite .psm-info-garten { cursor: pointer; border: 1px solid transparent; }
#produktSeite .psm-info-garten:hover { border: 1px solid #b3b3b3; }
#produktSeite .psm-info-garten img { width: 90%; margin: 0 5%; }
#produktSeite .psm-kaeuferinfoblatt { cursor: pointer; border: 1px solid transparent; }
#produktSeite .psm-kaeuferinfoblatt img { border: 1px solid #b3b3b3; width: 50%; margin: 0 25%; }
#produktSeite .psm-kaeuferinfoblatt:hover -> img { border: 1px solid blue; }
#produktSeite .anwendungszeitraum { margin: 2em 0; }
#produktSeite .anwendungszeitraum table { width: 100%; margin: 0px auto; }
#produktSeite .anwendungszeitraum table td { width: 8%; }
#produktSeite .anwendungszeitraum table td div { border: 1px solid #b3b3b3; border-radius: 5px; }
#produktSeite .anwendungszeitraum table td div div { border: 0; padding: 1em 0; text-align: center; }
@media only screen and (max-width: 600px) {
#produktSeite .desc { width: 100%; margin: 0; margin-top: 1em; }
#produktSeite .herstellerLogo { width: 4em; }
#wirkprinzip .flexWrapDiv4060:nth-child(1) { order: 2 }
#wirkprinzip .flexWrapDiv4060:nth-child(2) { order: 1 }
}
#produktSeite .hersteller .textImgFloatLeft100 { cursor: pointer; text-align: center; margin: 0 2em 2em 0; border: 1px solid #b3b3b3; }
#produktSeite .hersteller .textImgFloatLeft100:hover { border: 1px solid #000; }
#produktSeite .hersteller .textImgFloatLeft100 img { width: 100%; }
#produktSeite .hersteller .textImgFloatLeft100 span { color: blue; }
#produktSeite .herstellerText { margin-top: 2em; }
#produktSeite #felcoIcons { margin-top: 2em; }
#produktSeite #felcoIcons .felcoIconDiv { float: left; width: 3.5em; text-align: center; hyphens: auto; }
#produktSeite #felcoIcons .felcoImg { height: 2.2em; }
#produktSeite #felcoIcons .felcoImg img { max-height: 2em; max-width: 2em; }
#produktSeite .felcoErsatzteile { margin-bottom: 2em; }
#produktSeite .felcoErsatzteilImg { display: block; width: 60%; margin: -4em 20%; }
#produktSeite #mesto .h3 { margin-top: 1em; }
/* Produktseite Desktop ///////////////////////////////////////////////////////////////////////////////////////////////// */
#productPage { margin-top: 2vw; }
#productPage .herstellerLogo { float: right; margin: 0 0 2vw 2vw; width: 10vw; }
#productPage .imgDesc { width: 100%; margin-bottom: 1vw; }
#productPage .imgDesc td { vertical-align: top; }
#productPage .productImg { width: 95%; }
#productPage .productImg .flexWrap { }
#productPage .productImg img { width: 95%; }
#productPage .productImg .flexWrap img { cursor: pointer; }
#productPage .variImgs img { border: 1px solid #5d5d5d; margin: 0.2vw; cursor: pointer; float: left; }
#productPage .vari { margin-top: 0.5vw; background: #f0f0f0; border: 1px solid #b3b3b3; box-shadow: 0 0 5px #b3b3b3; border-radius: 5px; }
#productPage .vari table { width: 100%; }
#productPage .variImg { width: 6vw; }
#productPage .variImg img { width: 80%; padding: 0.5vw 0; cursor: pointer; }
#productPage .coll { width: 1vw; }
#productPage .produktnr { width: 10vw; }
#productPage .variante { text-align: right; font-size: 1.4vw; }
#productPage .price { width: 10vw; line-height: 0.6; }
#productPage .price span { font-size: 2vw; }
#productPage .price span span { font-size: 1vw; }
#productPage .wkButtonTd { width: 10vw; }
#productPage .wkButtonTd div { border: 0; }
#productPage .wkButtonTd input { padding: 1vw 0; }
#productPage .promo { margin-top: 2vw; }
#productPage .promo .promoImgTd { text-align: center; width: 40%; }
#productPage .promo .promoImg { width: 80%; }
#productPage .share img { width: 1.5vw; }
#productPage .promo33 { float: left; width: 32%; margin-right: 2%; }
#productPage .promo33 table { width: 100%; }
#productPage .promo33 .h2 { cursor: pointer; }
#productPage .promo33:nth-child(3) { margin-right: 0; }
#productPage .beschreibung { margin-top: 2vw; }
#productPage #blogWg { margin-bottom: 2vw; }
#productPage #blogWg .blogArtikel { float: left; width: 48%; margin-right: 2%; cursor: pointer; }
#productPage #blogWg .blogArtikel:nth-child(odd) { margin-right: 0; }
#productPage #blogWg .blogArtikel table { width: 100%; height: 10vw; }
#productPage #blogWg .blogArtikel table td { vertical-align: top; }
#productPage #blogWg .blogArtikel table .preview { width: 15vw; height: 11vw; }
#productPage #blogWg .blogArtikel table .blogTopic { }
#productPage #blogWg .blogArtikel table .headline { font-size: 1.2vw; margin: 1vw; margin-top: 0.5vw; font-variant: small-caps; }
#productPage #blogWg .blogArtikel table .blogText { margin: 1vw; margin-top: 0; }
#productPage .hersteller { margin-top: 2vw; }
#productPage .herstellerText { margin-top: 2vw; }
#productPage .graeser { margin-top: 2vw; }
#productPage .mantelsaat { margin-top: 2vw; }
#productPage .terralife { margin-top: 2vw; }
#productPage .dynaSeed { margin-top: 2vw; }
#productPage .regionalempfehlung { margin-top: 2vw; }
#productPage .mykohizza { margin-top: 2vw; }
#productPage .npk { }
#productPage .npk table td { border: 1px solid #b3b3b3; }
#productPage .npkHead { background: #f0f0f0; }
#productPage .npkHead div { text-align: center; width: 3vw; padding: 0.5vw 0; }
#productPage .npkBody div { text-align: center; padding: 0.5vw 0; }
#productPage .anwendungszeitraum { margin-top: 2vw; }
#productPage .anwendungszeitraumWrap { border: 1px solid #b3b3b3; border-radius: 5px; }
#productPage .anwendungszeitraumBody { width: 4vw; padding: 1vw 0; text-align: center; }
#productPage .npkDiv { margin-top: 2vw; }
/* Produktseite Mobile ///////////////////////////////////////////////////////////////////////////////////////////////// */
#productPageMobile { margin-top: 4vw; }
#productPageMobile .herstellerLogo { float: right; margin: 0 0 4vw 4vw; width: 20vw; }
#productPageMobile .imgDesc { width: 100%; margin-bottom: 2vw; }
#productPageMobile .imgDesc td { vertical-align: top; }
#productPageMobile .productImg { width: 40%; }
#productPageMobile .productImg img { width: 95%; }
#productPageMobile .vari { margin-top: 1vw; background: #f0f0f0; border: 1px solid #b3b3b3; box-shadow: 0 0 5px #b3b3b3; border-radius: 5px; }
#productPageMobile .vari table { width: 100%; }
#productPageMobile .variImg { width: 12vw; }
#productPageMobile .variImg img { width: 80%; padding: 1vw 0; cursor: pointer; }
#productPageMobile .coll { width: 2vw; }
#productPageMobile .produktnr { font-size: 2vw; width: 20vw; }
#productPageMobile .variante { text-align: right; font-size: 3vw; }
#productPageMobile .price { width: 20vw; line-height: 0.6; }
#productPageMobile .price span { font-size: 4vw; }
#productPageMobile .price span span { font-size: 2vw; }
#productPageMobile .wkButtonTd { width: 20vw; }
#productPageMobile .wkMenge { width: 50%; }
#productPageMobile .wkButtonImg { width: 50%; }
#productPageMobile .wkButtonTd div { border: 0; }
#productPageMobile .wkButtonTd input { padding: 1vw 0; font-size: 4vw; }
#productPageMobile .beschreibung { margin-top: 4vw; }
#productPageMobile .hersteller { margin-top: 4vw; }
#productPageMobile .herstellerText { margin-top: 4vw; }
#productPageMobile .graeser { margin-top: 4vw; }
#productPageMobile .mantelsaat { margin-top: 4vw; }
#productPageMobile .terralife { margin-top: 4vw; }
#productPageMobile .dynaSeed { margin-top: 4vw; }
#productPageMobile .regionalempfehlung { margin-top: 4vw; }
#productPageMobile .mykohizza { margin-top: 4vw; }
#productPageMobile .npk {}
#productPageMobile .npkHead { background: #f0f0f0; }
#productPageMobile .npkHead div { text-align: center; width: 10vw; padding: 2vw 0; }
#productPageMobile .npkBody div { text-align: center; padding: 2vw 0; }
#productPageMobile .anwendungszeitraum { margin-top: 4vw; }
#productPageMobile .anwendungszeitraumWrap { border: 1px solid #b3b3b3; border-radius: 5px; }
#productPageMobile .anwendungszeitraumBody { width: 6vw; padding: 2vw 0; text-align: center; }
#productPageMobile .npkDiv { margin-top: 4vw; }
/* WK Button Desktop /////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.wkButtonTd { width: 16%; }
.wkButtonTd div { background: #f0f0f0; border: 1px solid #b3b3b3; border-radius: 5px; }
.wkMenge { width: 60%; }
.wkButtonTd table{ margin: 0.2vw; }
.wkButtonTd input { width: 95%; text-align: center; font-style: normal; padding: 0.2vw 0; color: #606060; font-size: 1.4vw; }
.wkButtonTd img { cursor: pointer; width: 95%; margin-left: 5%; }
/* WK Button Mobile /////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.wkButtonTdMobile { }
.wkButtonTdMobile div { background: #f0f0f0; border: 1px solid #b3b3b3; border-radius: 5px; }
.wkButtonTdMobile table{ width: 100%; margin: 0.4vw; }
.wkMengeMobile { width: 60%; }
.wkButtonTdMobile input { width: 95%; text-align: center; font-style: normal; padding: 0.2vw 0; color: #606060; font-size: 4.5vw; }
.wkButtonTdMobile img { cursor: pointer; width: 95%; margin-left: 5%; }
/* WG Promo Startseite Desktop /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.wgPromo { width: 100%; height: 20.5vw; margin-bottom: 1vw; }
.wgPromo td { border: 1px solid #b3b3b3; vertical-align: top; cursor: pointer; }
/* WG Promo Startseite Mobile /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.wgPromoMobile { width: 100%; height: 40vw; margin-bottom: 2vw; }
.wgPromoMobile td { border: 1px solid #b3b3b3; vertical-align: top; cursor: pointer; background-position: center center; }
/* FAQ ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
#faqs { width: 75%; margin-left: 10vw; }
#faqs .h2 { color: #5d5d5d; background-color:#99cc33; padding: 0.2em 1em }
#faqs .faq { /*! margin-bottom: 1.5em; */ }
details[open] summary {
animation: open 0.3s ease-in-out;
}
@keyframes open {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
details {
padding: 0 1em 0.5em;
}
details summary::-webkit-details-marker,
details summary::marker {
display: none;
content: "";
}
details[open] > summary::marker {
display: none;
content: "";
}
details summary {
width: 100%;
padding: 0.5rem 0;
border-top: 1px solid black;
position: relative;
cursor: pointer;
font-size: 1.25rem;
font-weight: 300;
list-style: none;
}
details summary::after {
content: "+";
position: absolute;
font-size: 2.5rem;
line-height: 0;
margin-top: 0.75rem;
right: 0.5em;
transform-origin: center;
transition: 200ms linear;
}
details[open] summary::after {
transform: rotate(45deg);
font-size: 3rem;
}
details summary {
outline: 0;
}
details p {
font-size: 1.1rem;
margin: 0 0 1rem;
padding-top: 1rem;
border: 1em white solid;
}
/* FOOTER ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
footer {
width: 100%;
color: #f0f0f0;
background-color: #5d5d5d;
margin-top: 1em;
text-shadow: 0 1px 1px #000000;
}
footer .footerHersteller img { border: 0; height: 1.5vw; }
footer .footerHersteller a, footer .facebook {
filter: grayscale(1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
footer .footerHersteller a:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
}
footer p {
font-size: 1em;
}
footer h3 {
font-weight: 400;
}
footer a {
color: #f0f0f0;
}
footer a:visited {
color: #fff;
}
footer a:hover {
color:#9c3;
}
.section-a {
background-color: #5d5d5d;
padding: 1em;
width: 80vw;
margin: 0 auto;
}
.section-a .box a {
color: #f0f0f0;
text-shadow: 0 1px 1px #000000;
}
.section-a .box {
border-left: 0.2em solid #9c3;
padding-left: 0.8em;
margin-right: 0.5em;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.section-a .icon {
float: left;
opacity: 0.8;
padding-right: 1em;
width: 1.5vw;
min-width: 30px;
}
.section-a .facebook:hover{
filter:invert(1);
}
.item-a {
width: 25%;
}
.item-a img {
max-width: 35%;
}
.item-a .img-eu {
min-width: 60%;
}
.item-a .zahlart img {
max-width: 15%;
}
.widget_container_overlay {
margin: 0 auto 0 auto,
}
.marken {
padding-right: 5em;
}
footer .widget_container_text_only {
width: 70%;
}
footer .widget_container_box {
padding-left: 20%;
}
.trustami_textOnly_box {
color: #f0f0f0;
font-size: smaller;
}
.tb-google-badge {
margin-bottom: 1em;
}
.tb-trees-badge {
width: 60%;
text-shadow: none;
}
.section-b {
color: #f0f0f0;
background-color: #5d5d5d;
border-top: 1px solid #ffffff;
}
.container-b {
padding: 0 20px;
margin: 0 auto;
}
.general {
display: flex;
justify-content: space-around;
}
footer nav ul li {
padding: 0;
display: inline;
}
footer nav ul li a {
margin: 0 5px 0 5px;
}
footer nav ul li:not(:last-child):after {
content: ' ||';
font-weight:bold;
}
@media only screen and (max-width: 700px) {
footer .footerHersteller img {
height: 3.5vw;
}
footer .section-a {
width: 90vw;
}
footer .item-a {
width: 49%;
}
footer .item-a .zahlart img {
max-width: 20%;
}
footer .tb-trees-badge {
max-width: 100%;
}
footer .tb-tree-widget__text {
font-size: 8px;
}
footer .widget_container_text_only {
width: 100%;
}
footer .tb-tree-widget__amount {
font-size: 16px;
}
}
/* ListProducts ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
#filter { display: none; }
#orderDiv { position: absolute; width: 15em; display: none; margin-top: 0.5em; margin-left: -0.5em; }
#orderDiv div { cursor: pointer; background: #f0f0f0; border: 1px solid #b3b3b3; }
#orderDiv div div { border: 0; }
#orderDiv div:hover { background: #a7a7a7; color: #fff; }
#uWgs { margin-bottom: 1em; }
#uWgs .margin { width: 100%; margin: 0.25vw; cursor: pointer; border: 1px solid #b3b3b3; border-radius: 5px; background: #f0f0f0; }
#uWgs .uWg { margin: 0.25em 0; padding: 0.60em 0; }
#uWgs .uWg img { float: left; height: 2.5em; margin: 0 0.5em; margin-top: -0.6em; }
.filterPoint { margin-bottom: 0.5em; }
.filterPointName { font-weight: 600; margin-bottom: 1em; }
.filterPoint label { display: block; }
#blogWg { }
#blogWg .blogArtikel { margin: 0 0.5em; padding: 0.5em 0; }
#blogWg .blogArtikel:nth-child(odd) { margin-right: 0; }
#blogWg .blogArtikel table { width: 100%; height: 10em; }
#blogWg .blogArtikel table td { vertical-align: top; }
#blogWg .blogArtikel table .preview { width: 15em; height: 11em; }
#blogWg .blogArtikel table .blogTopic { }
#blogWg .blogArtikel table .headline { font-size: 1.2em; margin: 1em; margin-top: 0.5em; font-variant: small-caps; }
#blogWg .blogArtikel table .blogText { margin: 1em; margin-top: 0; }
#listProducts { }
#listProducts .flexWrap { padding: 1em 0; border-bottom: 1px solid #b3b3b3; }
#listProducts .flexWrapDiv205030:nth-child(4) { width: 100%; }
#listProducts .flexWrapDiv205030:nth-child(5) { width: 100%; }
@media only screen and (max-width: 1050px) {
#listProducts .flexWrapDiv205030:nth-child(1) { order: 1; }
#listProducts .flexWrapDiv205030:nth-child(2) { order: 2; }
#listProducts .flexWrapDiv205030:nth-child(4) { order: 3; }
#listProducts .flexWrapDiv205030:nth-child(5) { order: 4; }
#listProducts .flexWrapDiv205030:nth-child(3) { order: 5; }
}
#listProducts .productImage { width: 100%; }
#listProducts .productImage img { width: 95%; margin-right: 5%; }
#listProducts .shortDescription { width: 100%; font-size: 0.9em; margin: 0 0.5em; }
#listProducts .shortDescription ul { margin: 0.5em 1.5em; padding: 0; }
#listProducts .shortDescription .manufactureImg { float: left; height: 1.2em; margin: 0.25em 0.4em 0 0; }
#listProducts .h2 { display: inline; padding: 0; font-size: 1.2em; }
#listProducts .flexWrap .flexWrapDiv4 table { width: 100%; border: 0; }
#listProducts .flexWrap .flexWrap { border: 0; }
#listProducts .pagination { }
#listProducts .page { float: left; width: 2em; padding: 0.5em 0; margin: 0.5em; text-align: center; background: #f0f0f0; border: 1px solid #b3b3b3; cursor: pointer; }
/* ////////////////////////////////////////////////// Kontakt /////////////////////////////////////////////////////////////////////////////////// */
.kontaktInputText { width: 60vw; border: 1px solid #888; border-radius: 5px; padding: 0.3vw; color: #888; font-style: italic; margin-bottom: 0.5vw; }
.kontaktTextarea { width: 60vw; border: 1px solid #888; border-radius: 5px; padding: 0.3vw; color: #888; font-style: italic; margin-bottom: 0.5vw; }
#kontakt_send { width: 60vw; background: #98C931; border: 1px solid rgb(96,96,96); box-shadow: 0 0 0.2vw rgb(167,168,163); border-radius: 5px; padding: 0.3vw; color: #fff; cursor: pointer; opacity: 0.5; }
/* /////////////////////////// Kundenbereich ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
#kundenbereich { width: 100%; }
#kundenbereich td { vertical-align: top; }
#kundenbereich .menue { width: 15vw; }
#kundenbereich .menue div { cursor: pointer; border: 1px solid #f0f0f0; }
#kundenbereich .menue .menuHoverDiv:hover { background: #f0f0f0; }
#kundenbereich .menue div div { margin: 0 0.7vw; padding: 0.7vw 0; border: 0; }
#kundenbereich .content { border: 1px solid #b3b3b3; border-radius: 5px; box-shadow: 0 0 0.5vw #b3b3b3; }
#kundenbereich .floatButtons { float: right; width: 25%; margin-top: 1vw; }
#kundenbereich .floatButtons div { cursor: pointer; margin-bottom: 0.5vw; }
#kundenbereich .floatButtons div div { text-align: center; color: #fff; }
#kundenbereich .customerOrder {}
#kundenbereich .customerOrder table { border-bottom: 1px solid #b3b3b3; margin-bottom: 2vw; }
#kundenbereich .customerOrder td { padding: 0.5vw 0.3vw; }
#kundenbereich .customerOrder .produktImg { width: 5vw; }
#kundenbereich .customerOrder .produktImg img { width: 100%; }
#kundenbereich .customerOrder .produktBez { width: 20vw; }
#kundenbereich .customerOrder .produktMenge { width: 4vw; text-align: center; }
#kundenbereich .customerOrder .produktPreis { width: 6vw; text-align: right; }
#kundenbereich .customerOrder .produktSumme { width: 6vw; text-align: right; }
#kundenbereich .customerOrder .produktSteuer { width: 6vw; text-align: right; }
/* /////////////////////////// Kundenbereich Mobile ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
#kundenbereichMobile .menue div { text-align: center; padding: 3vw; background: #f0f0f0; border: 1px solid #b3b3b3; font-size: 5vw; }
/* /////////////////////////// Einkaufswagen ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
#cart { margin: 1em 0; }
#cart .flexWrap { border-bottom: 1px dashed #a7a7a7 }
#cart .flexWrapDivCart .margin { width: 98%; margin: 0.5em 2% 0.5em 0; padding: 0.3em 0; }
#cart .flexWrapDivCart:nth-child(1) { width: 60%; display: flex; flex-wrap: wrap; }
#cart .flexWrapDivCart:nth-child(1) table { width: 100%; }
#cart .flexWrapDivCart:nth-child(1) table td { vertical-align: top; }
#cart .flexWrapDivCart:nth-child(2) { width: 25%; display: flex; flex-wrap: wrap; text-align: center; }
#cart .flexWrapDivCart:nth-child(2) table { margin: 0px auto; }
#cart .flexWrapDivCart:nth-child(3) { width: 15%; display: flex; flex-wrap: wrap; }
#cart .flexWrapDivCart:nth-child(3) .margin { width: 100%; margin-right: 0; text-align: right; }
#cart .flexWrapDivCart:nth-child(3) .btn { float: right; }
#cart .cartPrImg { width: 40%; }
#cart .cartPrImg img { width: 95%; }
#cart .cartPrDesc { width: 100%; }
#cart .cartPrAmount td { padding: 0 0.15em; }
#cart .cartPrAmount input { padding: 0.15em; font-size: 1.5em; width: 2.5em; text-align: center; }
#cart .cartPrAmountChange { width: 2em; font-size: 2em; }
#cart .cartPrAmountChange div { cursor: pointer; margin: 0.15em 0; background: #f0f0f0; text-align: center; border-radius: 5px; border: 1px solid #a7a7a7; }
#cart .cartPrAmountChange div:hover { font-weight: bold; border: 1px solid #a7a7a7; }
#cart .cartPrUnitPrice { font-size: 1.1em; margin-top: 0.5em; text-align: center; }
#cart .cartPrUnitPrice span { font-size: 0.8em; }
#cart .cartPrPrice { font-weight: bold; margin-bottom: 1em; font-size: 1.2em; }
#cart .cartPrPrice span { font-weight: normal; font-size: 0.8em; }
#cart .cartAmounts { float: right; width: 49.4%; margin: 1em 0; border: 1px dashed #a7a7a7; background: #f0f0f0; font-size: 1.2em; font-variant: small-caps; }
#cart .rabatt input { padding: 0.1em; font-size: 1.1em; width: 2em; text-align: center; }
#cart .fullAmount { font-weight: bold; }
#cart .numberTd { text-align: right; }
#cart .button { margin-top: 1em; font-size: 1.2em; font-variant: small-caps; text-align: center; background: #99CC33; color: #fff; }
#cart .button:hover { border: 1px solid #a7a7a7; }
#cart .wkVersenden td { padding: 0.15em; }
@media only screen and (max-width: 700px) {
#cart .flexWrapDivCart .margin { width: 100%; margin: 1em 0; padding: 0; }
#cart .flexWrapDivCart:nth-child(1) { width: 100%; display: flex; flex-wrap: wrap; }
#cart .flexWrapDivCart:nth-child(1) table { width: 100%; }
#cart .flexWrapDivCart:nth-child(1) table td { vertical-align: top; }
#cart .flexWrapDivCart:nth-child(2) { width: 100%; display: flex; flex-wrap: wrap; }
#cart .flexWrapDivCart:nth-child(3) { width: 100%; display: flex; flex-wrap: wrap; }
#cart .flexWrapDivCart:nth-child(3) .margin { width: 100%; margin: 0; text-align: center; }
#cart .cartPrImg { width: 35%; float: left; }
#cart .cartPrDesc { width: 65%; float: left; }
#cart .cartAmounts { float: none; margin-top: 0.5em; width: 100%; }
#cart .flexWrapDivCart:nth-child(3) .btn { float: left; }
}
/* /////////////////////////// Checkout ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
#compOrder p { margin: 0.5em 0; }
#compOrder .compOrderLogo { text-align: center; cursor: pointer; }
#compOrder .compOrderLogo img { width: 10em; margin: 0.5em; }
#compOrder .compOrderLoginHeadline { background: #a7a7a7; color: #fff; margin-top: 1vw; font-size: 1.3em; font-variant: small-caps; border: 1px solid #a7a7a7; }
#compOrder .compOrderStep { border: 1px solid #606060; }
#compOrder input { border: 0; border-radius: 0; border-bottom: 1px solid #606060; width: 100%; font-size: 1.2em; }
#compOrder select { border: 0; border-radius: 0; border-bottom: 1px solid #606060; width: 100%; font-size: 1.2em; }
#compOrder input:focus { background-color: #fff; }
#compOrder .textBold { font-weight: bold; margin: 0.5em 0; }
#compOrder .label { font-size: 1em; }
#compOrder .linkDiv span { color: blue; font-style: italic; cursor: pointer; font-size: 1em; }
#compOrder .loginBox { margin: 0.5em 0; }
#compOrder .e-mail-adresse_label { margin-top: 0.5em; }
#compOrder .passwort_label { margin-top: 0.5em; }
#compOrder input[type=submit] { text-align: center; margin: 0.5em 0; padding: 0.35em; background: #98C931; color: #606060; width: 35vw; cursor: pointer; border: 1px solid #98C931; font-variant: small-caps; }
#compOrder input[type=submit]:hover { border: 1px solid #606060; }
#compOrder .blackButton { text-align: center; margin: 0.5em 0; padding: 0.35em; background: #606060; color: #fff; width: 35vw; cursor: pointer; font-variant: small-caps; }
#compOrder .blackButton:hover { background: #a7a7a7; }
#compOrder .greenButton { text-align: center; margin: 0.5em 0; padding: 0.35em; background: #98C931; color: #606060; width: 35vw; cursor: pointer; border: 1px solid #98C931; font-variant: small-caps; }
#compOrder .greenButton:hover { border: 1px solid #606060; }
#compOrder .e-mail-adresse { width: 35vw; }
#compOrder .passwort { width: 35vw; }
#compOrder .Firma { width: 35vw; }
#compOrder .Vorname { float: left; margin-right: 1em; width: 17vw; }
#compOrder .Nachname { float: left; width: 17vw; }
#compOrder .Str { float: left; margin-right: 1vw; width: 27vw; }
#compOrder .Hsn { float: left; width: 7vw; }
#compOrder .Adresszusatz { width: 35vw; }
#compOrder .PLZ { float: left; margin-right: 1vw; width: 7vw; }
#compOrder .Ort { float: left; width: 27vw; }
#compOrder .Land { width: 35vw; }
#compOrder .Email { width: 35vw; }
#compOrder .Tel { width: 35vw; }
#compOrder .VAT { width: 35vw; }
#compOrder #Rechnungsadresse { display: none; margin-bottom: 2em; }
#compOrder .regPasswort { width: 35vw; }
#compOrder .regPasswort2 { width: 35vw; }
#compOrder #pswHinweis { color: red; }
#compOrder input[type=checkbox] { margin: 0; margin-right: 0.5em; padding: 0.25em; font-size: 1em; }
#compOrder .versandZahlart { float: left; width: 12em; }
#compOrder .versandZahlart td { padding: 0.25em; }
#compOrder .versandZahlartLogo { width: 8em; }
#compOrder .versandZahlartLogo div { border-radius: 5px; border: 1px solid #a7a7a7; text-align: center; padding: 0.4em;}
#compOrder .versandZahlartLogo div img { max-width: 5em; max-height: 2em; display: block; margin: 0px auto; }
#compOrder .versandZahlartText { float: left; padding: 0.9em 0; }
#compOrder .zahlarten img { display: block; height: 1.5em; margin-left: 0.25em; border: 1px solid #b3b3b3; border-radius: 5px; }
#compOrder #compOrderAbschluss { margin-bottom: 1em; }
#compOrder #compOrderAbschluss .flexWrap { border-bottom: 1px dashed #a7a7a7 }
#compOrder #compOrderAbschluss .flexWrapDivCart .margin { width: 98%; margin: 0.5em 2% 0.5em 0; padding: 0.3em 0; }
#compOrder #compOrderAbschluss .flexWrapDivCart:nth-child(1) { width: 60%; display: flex; flex-wrap: wrap; }
#compOrder #compOrderAbschluss .flexWrapDivCart:nth-child(1) table { width: 100%; }
#compOrder #compOrderAbschluss .flexWrapDivCart:nth-child(1) table td { vertical-align: top; }
#compOrder #compOrderAbschluss .flexWrapDivCart:nth-child(2) { width: 25%; display: flex; flex-wrap: wrap; text-align: center; }
#compOrder #compOrderAbschluss .flexWrapDivCart:nth-child(2) table { margin: 0px auto; }
#compOrder #compOrderAbschluss .flexWrapDivCart:nth-child(3) { width: 15%; display: flex; flex-wrap: wrap; }
#compOrder #compOrderAbschluss .flexWrapDivCart:nth-child(3) .margin { width: 100%; margin-right: 0; text-align: right; }
#compOrder #compOrderAbschluss .flexWrapDivCart:nth-child(3) .btn { float: right; }
#compOrder #compOrderAbschluss .cartPrImg { width: 40%; }
#compOrder #compOrderAbschluss .cartPrImg img { width: 95%; }
#compOrder #compOrderAbschluss .cartPrDesc { width: 100%; }
#compOrder #compOrderAbschluss .cartPrUnitPrice { font-size: 1.1em; text-align: center; }
#compOrder #compOrderAbschluss .cartPrUnitPrice span { font-size: 0.8em; }
#compOrder #compOrderAbschluss .cartPrPrice { font-weight: bold; font-size: 1.2em; }
#compOrder #compOrderAbschluss .cartPrPrice span { font-weight: normal; font-size: 0.8em; }
#compOrder #compOrderAbschluss .rights { border: 1px dashed #a7a7a7; background: #f0f0f0; margin-bottom: 1em; font-size: 1.2em; font-variant: small-caps; }
#compOrder #compOrderAbschluss .cartAmounts { float: right; width: 35em; margin: 1em 0; border: 1px dashed #a7a7a7; background: #f0f0f0; font-size: 1.2em; font-variant: small-caps; }
#compOrder #compOrderAbschluss .fullAmount { font-weight: bold; }
#compOrder #compOrderAbschluss .numberTd { text-align: right; }
@media only screen and (max-width: 700px) {
#compOrder #compOrderAbschluss .flexWrapDivCart .margin { width: 100%; margin: 1em 0; padding: 0; }
#compOrder #compOrderAbschluss .flexWrapDivCart:nth-child(1) { width: 100%; display: flex; flex-wrap: wrap; }
#compOrder #compOrderAbschluss .flexWrapDivCart:nth-child(1) table { width: 100%; }
#compOrder #compOrderAbschluss .flexWrapDivCart:nth-child(1) table td { vertical-align: top; }
#compOrder #compOrderAbschluss .flexWrapDivCart:nth-child(2) { width: 100%; display: flex; flex-wrap: wrap; }
#compOrder #compOrderAbschluss .flexWrapDivCart:nth-child(3) { width: 100%; display: flex; flex-wrap: wrap; }
#compOrder #compOrderAbschluss .flexWrapDivCart:nth-child(3) .margin { width: 100%; margin: 0; text-align: center; }
#compOrder #compOrderAbschluss .cartPrImg { width: 35%; float: left; }
#compOrder #compOrderAbschluss .cartPrDesc { width: 65%; float: left; }
#compOrder #compOrderAbschluss .cartAmounts { float: none; margin-top: 0.5em; width: 100%; }
#compOrder #compOrderAbschluss .flexWrapDivCart:nth-child(3) .btn { float: left; }
#compOrder input[type=submit] { text-align: center; margin: 0.5em 0; padding: 0.35em; background: #98C931; color: #606060; width: 85vw; cursor: pointer; border: 1px solid #98C931; font-variant: small-caps; }
#compOrder .blackButton { text-align: center; margin: 0.5em 0; padding: 0.35em; background: #606060; color: #fff; width: 85vw; cursor: pointer; font-variant: small-caps; }
#compOrder .blackButton:hover { background: #a7a7a7; }
#compOrder .e-mail-adresse { width: 85vw; }
#compOrder .passwort { width: 85vw; }
#compOrder .Firma { width: 85vw; }
#compOrder .Vorname { float: left; margin-right: 5em; width: 85vw; }
#compOrder .Nachname { float: left; width: 85vw; }
#compOrder .Str { float: left; margin-right: 5vw; width: 65vw; }
#compOrder .Hsn { float: left; width: 15vw; }
#compOrder .Adresszusatz { width: 85vw; }
#compOrder .PLZ { float: left; margin-right: 5vw; width: 20vw; }
#compOrder .Ort { float: left; width: 60vw; }
#compOrder .Land { width: 85vw; }
#compOrder .Email { width: 85vw; }
#compOrder .Tel { width: 85vw; }
#compOrder .VAT { width: 85vw; }
#compOrder .regPasswort { width: 85vw; }
#compOrder .regPasswort2 { width: 85vw; }
#compOrder .versandart { float: left; width: 90vw; }
#compOrder .versandartText { float: left; width: 90vw; padding: 0.9em 0; }
}
/* /////////////////////////// Kundenkonto ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
#customer { margin-top: 1em; }
#customer p { margin: 0.5em 0; }
#customer input { border: 0; border-radius: 0; border-bottom: 1px solid #606060; width: 100%; font-size: 1.2em; }
#customer select { border: 0; border-radius: 0; border-bottom: 1px solid #606060; width: 100%; font-size: 1.2em; }
#customer input:focus { background-color: #fff; }
#customer .textBold { font-weight: bold; margin: 0.5em 0; }
#customer .label { font-size: 1em; }
#customer .linkDiv span { color: blue; font-style: italic; cursor: pointer; font-size: 1em; }
#customer .loginBox { margin: 0.5em 0; }
#customer .e-mail-adresse_label { margin-top: 0.5em; }
#customer .passwort_label { margin-top: 0.5em; }
#customer input[type=submit] { text-align: center; margin: 0.5em 0; padding: 0.35em; background: #98C931; color: #606060; width: 35vw; cursor: pointer; border: 1px solid #98C931; font-variant: small-caps; }
#customer input[type=submit]:hover { border: 1px solid #606060; }
#customer .blackButton { text-align: center; margin: 0.5em 0; padding: 0.35em; background: #606060; color: #fff; width: 35vw; cursor: pointer; font-variant: small-caps; }
#customer .blackButton:hover { background: #a7a7a7; }
#customer .greenButton { text-align: center; margin: 0.5em 0; padding: 0.35em; background: #98C931; color: #606060; width: 35vw; cursor: pointer; border: 1px solid #98C931; font-variant: small-caps; }
#customer .greenButton:hover { border: 1px solid #606060; }
#customer .e-mail-adresse { width: 35vw; }
#customer .passwort { width: 35vw; }
#customer #regData { margin-top: 2em; display: none; }
#customer .Firma { width: 35vw; }
#customer .Vorname { float: left; margin-right: 1em; width: 17vw; }
#customer .Nachname { float: left; width: 17vw; }
#customer .Str { float: left; margin-right: 1vw; width: 27vw; }
#customer .Hsn { float: left; width: 7vw; }
#customer .Adresszusatz { width: 35vw; }
#customer .PLZ { float: left; margin-right: 1vw; width: 7vw; }
#customer .Ort { float: left; width: 27vw; }
#customer .Land { width: 35vw; }
#customer .Email { width: 35vw; }
#customer .Tel { width: 35vw; }
#customer .VAT { width: 35vw; }
#customer #Rechnungsadresse { display: none; margin-bottom: 2em; }
#customer .regPasswort { width: 35vw; }
#customer .regPasswort2 { width: 35vw; }
#customer #pswHinweis { color: red; }
#customer input[type=checkbox] { margin: 0; margin-right: 0.5em; padding: 0.25em; font-size: 1em; }
#customer .kontoHead { background: #a7a7a7; color: #fff; margin-top: 1vw; font-size: 1.3em; font-variant: small-caps; border: 1px solid #a7a7a7; cursor: pointer; }
#customer .kontoHead:hover { background: #f0f0f0; color: #b3b3b3; }
#customer .kontoContent { display: none; }
#customer #bestellungen { margin-bottom: 1em; }
#customer #bestellungen .bestellung { margin-bottom: 1em; border-bottom: 1px solid #b3b3b3; }
#customer #bestellungen .flexWrap { border-bottom: 1px dashed #a7a7a7 }
#customer #bestellungen .flexWrapDivCart .margin { width: 98%; margin: 0.5em 2% 0.5em 0; padding: 0.3em 0; }
#customer #bestellungen .flexWrapDivCart:nth-child(1) { width: 60%; display: flex; flex-wrap: wrap; }
#customer #bestellungen .flexWrapDivCart:nth-child(1) table { width: 100%; }
#customer #bestellungen .flexWrapDivCart:nth-child(1) table td { vertical-align: top; }
#customer #bestellungen .flexWrapDivCart:nth-child(2) { width: 25%; display: flex; flex-wrap: wrap; text-align: center; }
#customer #bestellungen .flexWrapDivCart:nth-child(2) table { margin: 0px auto; }
#customer #bestellungen .flexWrapDivCart:nth-child(3) { width: 15%; display: flex; flex-wrap: wrap; }
#customer #bestellungen .flexWrapDivCart:nth-child(3) .margin { width: 100%; margin-right: 0; text-align: right; }
#customer #bestellungen .flexWrapDivCart:nth-child(3) .btn { float: right; }
#customer #bestellungen .cartPrImg { width: 40%; }
#customer #bestellungen .cartPrImg img { width: 95%; }
#customer #bestellungen .cartPrDesc { width: 100%; }
#customer #bestellungen .cartPrUnitPrice { font-size: 1.1em; text-align: center; }
#customer #bestellungen .cartPrUnitPrice span { font-size: 0.8em; }
#customer #bestellungen .cartPrPrice { font-weight: bold; font-size: 1.2em; }
#customer #bestellungen .cartPrPrice span { font-weight: normal; font-size: 0.8em; }
#customer #bestellungen .cartAmounts { float: right; width: 35em; margin: 1em 0; border: 1px dashed #a7a7a7; background: #f0f0f0; font-size: 1.2em; font-variant: small-caps; }
#customer #bestellungen .fullAmount { font-weight: bold; }
#customer #bestellungen .numberTd { text-align: right; }
#customer .customerOptions { width: 35vw; }
#customer .customerOptions div { margin: 1em 0; cursor: pointer; border: 1px solid red; }
#customer .customerOptions div:hover { border: 1px solid #a7a7a7; }
#customer .customerOptions table { margin: 0.5em 0; }
#customer .customerOptions td { padding: 0 0.25em; }
#customer .customerOptions img { height: 1em; -webkit-filter: invert(1); filter: invert(1);}
@media only screen and (max-width: 700px) {
#customer #bestellungen .flexWrapDivCart .margin { width: 100%; margin: 1em 0; padding: 0; }
#customer #bestellungen .flexWrapDivCart:nth-child(1) { width: 100%; display: flex; flex-wrap: wrap; }
#customer #bestellungen .flexWrapDivCart:nth-child(1) table { width: 100%; }
#customer #bestellungen .flexWrapDivCart:nth-child(1) table td { vertical-align: top; }
#customer #bestellungen .flexWrapDivCart:nth-child(2) { width: 100%; display: flex; flex-wrap: wrap; }
#customer #bestellungen .flexWrapDivCart:nth-child(3) { width: 100%; display: flex; flex-wrap: wrap; }
#customer #bestellungen .flexWrapDivCart:nth-child(3) .margin { width: 100%; margin: 0; text-align: center; }
#customer #bestellungen .cartPrImg { width: 35%; float: left; }
#customer #bestellungen .cartPrDesc { width: 65%; float: left; }
#customer #bestellungen .cartAmounts { float: none; margin-top: 0.5em; width: 100%; }
#customer #bestellungen .flexWrapDivCart:nth-child(3) .btn { float: left; }
#customer input[type=submit] { text-align: center; margin: 0.5em 0; padding: 0.35em; background: #98C931; color: #606060; width: 85vw; cursor: pointer; border: 1px solid #98C931; font-variant: small-caps; }
#customer .blackButton { text-align: center; margin: 0.5em 0; padding: 0.35em; background: #606060; color: #fff; width: 85vw; cursor: pointer; font-variant: small-caps; }
#customer .blackButton:hover { background: #a7a7a7; }
#customer .e-mail-adresse { width: 85vw; }
#customer .passwort { width: 85vw; }
#customer .Firma { width: 85vw; }
#customer .Vorname { float: left; margin-right: 5em; width: 85vw; }
#customer .Nachname { float: left; width: 85vw; }
#customer .Str { float: left; margin-right: 5vw; width: 65vw; }
#customer .Hsn { float: left; width: 15vw; }
#customer .Adresszusatz { width: 85vw; }
#customer .PLZ { float: left; margin-right: 5vw; width: 20vw; }
#customer .Ort { float: left; width: 60vw; }
#customer .Land { width: 85vw; }
#customer .Email { width: 85vw; }
#customer .Tel { width: 85vw; }
#customer .VAT { width: 85vw; }
#customer .regPasswort { width: 85vw; }
#customer .regPasswort2 { width: 85vw; }
#customer .customerOptions { width: 85vw; }
}
.paymentOpt { width: 12vw; float: left; border: 1px solid #b3b3b3; border-radius: 5px; margin-right: 1vw; cursor: pointer; }
.paymentOpt:hover { background: #faf0e6 }
.paymentOpt img { display: block; margin: 0.2vw 0.5vw; height: 1.5vw; }
#paypalOpt { width: 22vw; }
#klarnaOpt { width: 34vw; }
.paymentDiv { margin-top: 2vw; }
.paymentDiv .button { width: 8vw; margin-top: 2vw; }
/* /////////////////////////// Checkout Mobile ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.paymentOptMobile { border: 1px solid #b3b3b3; border-radius: 5px; padding: 1vw 0; margin: 1.5vw 0 }
.paymentOptMobile img { display: block; margin: 0.5vw 1.5vw; height: 7vw; }
.paymentDivMobile { border: 1px solid #f5deb3; margin-top: 2vw; }
.paymentDivMobile .button { width: 30vw; font-size: 4vw; margin-top: 4vw; }
.paymentDivMobile .button img { height: 4vw; }
/* /////////////////////////// Bewertung.php ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.rez { float: left; margin: 1.5em 0 1.5em 1em; width: 10em; border: 1px solid #b3b3b3; border-radius: 5px; background: #f0f0f0; box-shadow: 0 0 1em #b3b3b3; cursor: pointer; margin-right: 2em; }
.rez:hover { border: 1px solid #a7a7a7; box-shadow: 0 0 1em #a7a7a7; }
.rez div { margin: 0 1.5em; padding: 1.2em 0; text-align: center; }
.rez img { max-width: 90%; max-height: 1.2em; margin-left: 5%; }
/* /////////////////////////// Herstellerseiten HerstellerInfo ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
#herstellerInfo { margin-top: 1em; }
#herstellerInfo .flexWrapDiv2 { cursor: pointer; }
#herstellerInfo .h3 { font-size: 1.2em; }
#herstellerInfo img { max-width: 95%; max-height: 18em; margin-right: 5%; }
#reNaturaKatalog .katalogPage { width: 95%; margin-left: 2.5%; }
#reNaturaKatalog .textImgCenter25 { text-align: center; background: #fff; border: 1px solid #b3b3b3; box-shadow: 0 0 0.5em #b3b3b3; }
#reNaturaKatalog .textImgCenter25 img { width: 95%; margin: 2.5%; }
/* /////////////////////////// Overflow Bestellvorschäge ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.bestellverschlaege { width: 100%; }
.bestellverschlaege td { padding: 0.25em }
.bestellverschlaege td div { margin: 0 0.5em 0 0 }
/* /////////////////////////// Kontaktformular ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
#kontakt {}
#kontakt .sendComplete { border: 1px solid #b3b3b3; background: #f0f0f0; padding: 0.3em; margin: 2em 0; border-radius: 5px; }
#kontakt .Name { width: 50vw; margin-top: 2em; }
#kontakt .Email { width: 50vw; }
#kontakt .Telefonnummer { width: 50vw; }
#kontakt .Bestellnr { width: 50vw; }
#kontakt .PLZ { width: 50vw; }
#kontakt .Grund { width: 50vw; }
#kontakt .Nachricht { width: 50vw; }
#kontakt p { margin: 0.5em 0; }
#kontakt input { border: 0; border-radius: 0; border-bottom: 1px solid #606060; width: 100%; font-size: 1.2em; }
#kontakt input[type=checkbox] { width: inherit; }
#kontakt textarea { border: 1px solid #606060; border-radius: 0; width: 100%; font-size: 1.2em; }
#kontakt select { border: 0; border-radius: 0; border-bottom: 1px solid #606060; width: 100%; font-size: 1.2em; }
#kontakt input:focus { background-color: #fff; }
#kontakt input[type=submit] { text-align: center; margin: 0.5em 0; padding: 0.35em; background: #98C931; color: #606060; width: 35vw; cursor: pointer; border: 1px solid #98C931; font-variant: small-caps; }
#kontakt input[type=submit]:hover { border: 1px solid #606060; }
@media only screen and (max-width: 700px) {
}