@keyframes rotate_a1 { 0% { top: 47%; transform: rotate(45deg); } 50% { top: 47%; transform: none; } 100% { top: 37%; transform: none; } } @keyframes rotate_a2 { 0% { top: 47%; transform: rotate(-45deg); } 50% { top: 47%; transform: none; } 100% { top: 57%; transform: none; } } @keyframes rotate_b1 { 0% { top: 37%; transform: none; } 50% { top: 47%; transform: none; } 100% { top: 47%; transform: rotate(45deg); } } @keyframes rotate_b2 { 0% { top: 57%; transform: none; } 50% { top: 47%; transform: none; } 100% { top: 47%; transform: rotate(-45deg); } } @keyframes blinkbeat { 0% { filter: opacity(1); } 10% { filter: opacity(0); } 40% { filter: opacity(1); } } @font-face { font-family: 'Anuphan'; src: url('../../fonts/Anuphan-Regular.woff2') format('woff2'), local("?"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Anuphan'; src: url('../../fonts/Anuphan-Bold.woff2') format('woff2'), local("?"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'BarlowCondensed'; src: url('../../fonts/BarlowCondensed-Regular.woff2') format('woff2'), local("?"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'BarlowCondensed'; src: url('../../fonts/BarlowCondensed-Bold.woff2') format('woff2'), local("?"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'PlusJakartaSans'; src: url('../../fonts/PlusJakartaSans-Regular.woff2') format('woff2'), local("?"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'PlusJakartaSans'; src: url('../../fonts/PlusJakartaSans-Bold.woff2') format('woff2'), local("?"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'RobotoCondensed'; src: url('../../fonts/RobotoCondensed-Regular.woff2') format('woff2'), local("?"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'RobotoCondensed'; src: url('../../fonts/RobotoCondensed-Bold.woff2') format('woff2'), local("?"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Rubik'; src: url('../../fonts/Rubik-Regular.woff2') format('woff2'), local("?"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Rubik'; src: url('../../fonts/Rubik-Bold.woff2') format('woff2'), local("?"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Urbanist'; src: url('../../fonts/Urbanist-Regular.woff2') format('woff2'), local("?"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Urbanist'; src: url('../../fonts/Urbanist-Bold.woff2') format('woff2'), local("?"); font-weight: 700; font-style: normal; font-display: swap; } html { box-sizing: border-box } *, *:before, *:after { box-sizing: inherit } body { padding: 100px 0px 0px 0px; background: #ffffff; margin: 0px; color: #000000; font-size: 18px; line-height: 31px; font-weight: var(--schriftstaerke_normal); font-family: var(--schriftart) } h1 { margin: 0px; font-size: 42px; line-height: 70px; font-weight: var(--schriftstaerke_normal) } h2 { margin: 0px; font-size: 34px; line-height: 54px; font-weight: var(--schriftstaerke_normal) } h3 { margin: 0px; font-size: 28px; line-height: 42px; font-weight: var(--schriftstaerke_normal) } h4 { margin: 0px; font-size: 22px; line-height: 37px; font-weight: var(--schriftstaerke_normal) } ul { padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px; list-style-type: square } ol { padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px } img { border: none } b { font-weight: var(--schriftstaerke_fett) } i { display: block; font-size: 16px; line-height: 24px } a { color: var(--akzentfarbe1); text-decoration: none } table { float: left; width: calc(100% + 40px); padding: 10px; border-style: none; border-spacing: 0px; margin: -20px } table tr td { position: relative; width: 50%; padding: 10px; text-align: left; vertical-align: top } select, textarea, input[type=date], input[type=time], input[type=number], input[type=password], input[type=text] { float: left; width: 100%; padding: 16px; background: #ffffff; border: solid 2px var(--grundfarbe_hell); border-radius: 5px; color: #000000; font-size: 18px; line-height: 31px; font-weight: var(--schriftstaerke_normal); font-family: var(--schriftart); transition: 0.4s ease-in-out; -webkit-appearance: none } select:focus, textarea:focus, input[type=date]:focus, input[type=time]:focus, input[type=number]:focus, input[type=password]:focus, input[type=text]:focus, select:not([value=""]), textarea:not(:placeholder-shown), input[type=date]:not(:placeholder-shown), input[type=time]:not(:placeholder-shown), input[type=number]:not(:placeholder-shown), input[type=password]:not(:placeholder-shown), input[type=text]:not(:placeholder-shown) { border-color: var(--grundfarbe_mittel); outline: none } select.error, textarea.error, input[type=date].error, input[type=time].error, input[type=number].error, input[type=password].error, input[type=text].error { border-color: #ff0000 } select + label, textarea + label, input[type=date] + label, input[type=time] + label, input[type=number] + label, input[type=password] + label, input[type=text] + label { display: block; position: absolute; left: 20px; top: 20px; padding: 8px; background: #ffffff; pointer-events: none; transition: 0.4s ease-in-out } select:focus + label, textarea:focus + label, input[type=date]:focus + label, input[type=time]:focus + label, input[type=number]:focus + label, input[type=password]:focus + label, input[type=text]:focus + label, select:not([value=""]) + label, textarea:not(:placeholder-shown) + label, input[type=date]:not(:placeholder-shown) + label, input[type=time]:not(:placeholder-shown) + label, input[type=number]:not(:placeholder-shown) + label, input[type=password]:not(:placeholder-shown) + label, input[type=text]:not(:placeholder-shown) + label { top: 0px; padding: 5px 8px 5px 8px; color: var(--grundfarbe_mittel); font-size: 16px; line-height: 16px } select:not([multiple]) { background-image: url(../../images/layout/select.svg); background-repeat: no-repeat; background-position: right center; background-size: contain } textarea { height: 200px; overflow: auto; resize: none } :-ms-input-placeholder { color: #000000 } :-moz-placeholder { color: #000000; opacity: 1 } ::-moz-placeholder { color: #000000; opacity: 1 } ::-webkit-input-placeholder { color: #000000 } .texterror { color: #ff0000 } button, input[type=submit] { float: left; width: 100%; height: 60px; padding: 0px; background: var(--grundfarbe_hell); border: none; border-radius: 5px; color: #000000; font-size: 18px; line-height: 18px; font-weight: var(--schriftstaerke_fett); font-family: var(--schriftart); text-transform: uppercase; letter-spacing: 0.1em; text-indent: 0.1em; cursor: pointer; transition: 0.4s ease-in-out } a.buttonlink { display: block; float: left; width: 100%; padding: 23px; background: var(--grundfarbe_hell); border-radius: 5px; color: #000000; line-height: 14px; font-weight: var(--schriftstaerke_fett); text-transform: uppercase; letter-spacing: 0.1em; text-indent: 0.1em; text-align: center; transition: 0.4s ease-in-out } button:hover, input[type=submit]:hover, a.buttonlink:hover { background: var(--grundfarbe_mittel) } div.fileupload { position: relative; float: left; width: 100%; background: var(--grundfarbe_hell); border-radius: 5px; transition: 0.4s ease-in-out } div.fileupload:hover { background: var(--grundfarbe_mittel) } div.fileupload:before { display: block; position: absolute; left: 0%; top: 0%; width: 60px; height: 60px; background: url(../../images/layout/browse.svg) no-repeat center; background-size: 50%; content: '' } div.fileupload input[type=file] { float: left; width: 100%; height: 60px; filter: opacity(0); cursor: pointer } div.fileupload label { display: block; position: absolute; left: 0%; top: 0%; width: 100%; padding: 12px 30px 12px 60px; font-size: 18px; line-height: 23px; pointer-events: none } div.fileupload label h4 { font-size: 22px; line-height: 22px } ul.filelist { float: left; width: 100%; padding: 0px; margin: 0px; list-style-type: none } ul.filelist li { display: block; float: left; width: 100%; padding: 10px 0px 0px 0px } ul.filelist li h4 { float: left; width: 100%; padding: 0px 0px 5px 0px; font-size: 18px; line-height: 31px } ul.filelist li span { display: block; float: left; width: 100%; height: 10px; background: var(--grundfarbe_hell); border-radius: 5px; overflow: hidden } ul.filelist li span b { display: block; float: left; width: 0%; height: 100%; background: var(--grundfarbe_dunkel) } ul.filelist li.error span b { display: none } ul.filelist li div { float: left; width: 100%; padding: 5px 0px 0px 0px; font-size: 16px; line-height: 24px } div.fancybox-slide .fancybox-image-wrap { background: #ffffff } div.preloader { position: fixed; z-index: 3000; left: 0%; top: 0%; width: 100%; height: 100%; background: var(--grundfarbe_hell) } div.preloader:before { display: block; position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; background: url(../../images/layout/preloader.svg) no-repeat center; background-size: 80%; content: ''; transform: translate(-50%,-50%) } a.show_cookiemanager { width: 60px; height: 60px; padding: 6px; background: none; overflow: visible } a.show_cookiemanager svg path { fill: #000000 } a.show_cookiemanager:before { display: block; position: absolute; z-index: -1; left: 0%; top: 0%; width: 100%; height: 100%; background: var(--grundfarbe_hell); border-radius: 5px; transition: 0.4s ease-in-out; content: '' } a.show_cookiemanager:hover:before { background: var(--grundfarbe_mittel) } a.show_cookiemanager:after { display: block; position: absolute; z-index: -2; left: 0px; top: 0px; width: 60px; padding: 23px 0px 23px 0px; background: var(--grundfarbe_hell); border-radius: 5px; overflow: hidden; color: #000000; line-height: 14px; font-weight: var(--schriftstaerke_fett); white-space: nowrap; text-align: right; content: 'Cookie-Einstellungen'; transition: 0.4s ease-in-out } a.show_cookiemanager:hover:after { width: auto; padding: 23px 30px 23px 60px; background: var(--grundfarbe_mittel) } #wkinfo { position: fixed; z-index: 100000; top: 0%; left: 0%; width: 100%; height: 100%; background: #000000cc } #wkinfo .box { position: absolute; left: 50%; top: 50%; width: 640px; padding: 70px; background: #ffffff; transform: translate(-50%,-50%) } #wkinfo .box span { display: block; position: absolute; right: 20px; top: 20px; width: 50px; height: 50px; background: var(--grundfarbe_mittel) url(../../images/layout/close.svg) no-repeat center; background-size: 50%; border-radius: 50%; cursor: pointer; transition: 0.4s ease-in-out } #wkinfo .box span:hover { background-color: #000000 } #wkinfo .box div { float: left; width: calc(100% - 20px); padding: 40px; background: var(--grundfarbe_hell); margin: 10px } #wkinfo .box a { display: block; float: left; padding: 23px 30px 23px 30px; background: var(--grundfarbe_mittel); margin: 10px; color: #ffffff; line-height: 14px; font-weight: var(--schriftstaerke_fett); text-transform: uppercase; letter-spacing: 0.1em; text-indent: 0.1em; transition: 0.4s ease-in-out } #wkinfo .box a.checkout { float: right; background: var(--akzentfarbe1) } #wkinfo .box a:hover { background: #000000 } ul.panel { display: flex; flex-flow: row wrap; position: fixed; z-index: 2000; right: 0px; bottom: 0px; width: 100px; padding: 10px; margin: 0px; list-style-type: none } ul.panel li { display: block; float: left; margin: 10px } ul.panel li a { display: block; position: relative; float: left; width: 60px; height: 60px; background-color: var(--grundfarbe_hell); background-repeat: no-repeat; background-position: center; background-size: 50%; border-radius: 5px; transition: 0.4s ease-in-out } ul.panel li a:hover { background-color: var(--grundfarbe_mittel) } ul.panel li a.contact { background-image: url(../../images/layout/contact.svg) } ul.panel li a.newsletter { background-image: url(../../images/layout/newsletter.svg) } ul.panel li a.blog { background-image: url(../../images/layout/blog.svg) } ul.panel li a.up { background-image: url(../../images/layout/up.svg) } ul.panel li a:before { display: block; position: absolute; z-index: -1; right: 0px; top: 0px; width: 60px; padding: 23px 0px 23px 0px; background: var(--grundfarbe_hell); border-radius: 5px; overflow: hidden; color: #000000; line-height: 14px; font-weight: var(--schriftstaerke_fett); white-space: nowrap; transition: 0.4s ease-in-out } ul.panel li a:hover:before { width: auto; padding: 23px 60px 23px 30px; background: var(--grundfarbe_mittel) } ul.panel li a.contact:before { content: 'Servicekontakt' } ul.panel li a.newsletter:before { content: 'Newsletter' } ul.panel li a.blog:before { content: 'Wir über uns' } ul.panel li a.up:before { content: 'nach oben' } header { position: fixed; z-index: 2000; left: 0px; top: 0px; width: 100%; padding: 10px calc(50% - 950px) 10px calc(50% - 950px); background: #ffffff; box-shadow: 0px 0px 5px #00000033 } header .logo { display: block; position: absolute; left: 40%; top: 10px; width: 20% } header .logo img { display: block; float: left; width: 100%; height: 80px; object-fit: contain } header .logo span { display: block; float: left; width: 100%; padding: 10px 0px 10px 0px; color: #000000; font-size: 15px; line-height: 15px; font-weight: var(--schriftstaerke_fett); text-transform: uppercase; text-align: center } header .cart, header .account { display: block; float: right; margin: 10px } header .cart b { display: block; float: right; width: 60px; height: 60px; background: url(../../images/layout/cart.svg) no-repeat center; background-size: 50%; border-radius: 5px; transition: 0.4s ease-in-out } header .account b { display: block; float: right; width: 60px; height: 60px; background: url(../../images/layout/account.svg) no-repeat center; background-size: 50%; border-radius: 5px; transition: 0.4s ease-in-out } header .cart:hover b, header .account:hover b { background-color: var(--grundfarbe_mittel) } header .cart span, header .account span { display: block; float: right; padding: 23px; color: #000000; line-height: 14px; font-weight: var(--schriftstaerke_fett); text-transform: uppercase } header .cart span:before { content: 'Warenkorb (' } header .cart span:after { content: ')' } header .switch { float: left; margin: 10px; cursor: pointer } header .switch b { display: block; position: relative; float: left; width: 60px; height: 60px; border-radius: 5px; transition: 0.4s ease-in-out } header .switch:hover b { background: var(--grundfarbe_mittel) } header .switch b:before { display: block; position: absolute; left: 30%; width: 40%; height: 6%; background: #000000; content: ''; animation: rotate_a1 0.4s forwards } header .switch.active b:before { animation: rotate_b1 0.4s forwards } header .switch b:after { display: block; position: absolute; left: 30%; width: 25%; height: 6%; background: #000000; content: ''; animation: rotate_a2 0.4s forwards } header .switch.active b:after { width: 40%; animation: rotate_b2 0.4s forwards } header .switch span { display: block; float: left; padding: 23px; color: #000000; line-height: 14px; font-weight: var(--schriftstaerke_fett); text-transform: uppercase } header form { position: relative; float: left; width: calc(20% - 30px); margin: 15px } header form input[type=text] { padding: 11px } header form input[type=image] { display: block; position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; background: var(--grundfarbe_hell); padding: 7.5px; border-radius: 2px; transition: 0.4s ease-in-out } header form input[type=image]:hover { background: var(--grundfarbe_mittel) } nav { position: fixed; z-index: 1000; left: 0%; top: -100%; width: 100%; height: 100%; overflow-y: auto; background: var(--grundfarbe_mittel); transition: 0.4s ease-in-out } nav.active { top: 0% } nav ul { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 20px calc(50% - 940px) 120px calc(50% - 940px); margin: 0px; list-style-type: none; transform: translateY(-80px); filter: opacity(0); transition: 0.4s ease-in-out } nav ul:first-child { padding: 120px calc(50% - 940px) 20px calc(50% - 940px); background: var(--grundfarbe_hell) } nav ul.active { transform: none; filter: none } nav ul li { display: block; position: relative; float: left; width: calc(25% - 20px); padding: 0px 40px 0px 40px; margin: 10px } nav ul li a { display: block; float: left; width: 100%; padding: 13px 0px 13px 0px; color: #ffffff; line-height: 14px; font-weight: var(--schriftstaerke_fett) } nav ul:first-child li a { color: #000000 } nav ul li span { display: block; position: absolute; left: 0px; top: 0px; width: 40px; height: 40px; background: url(../../images/layout/plus.svg) no-repeat center; background-size: 50%; cursor: pointer; transition: 0.4s ease-in-out } nav ul li span.active { background-image: url(../../images/layout/minus.svg); transform: rotate(360deg) } nav ul li ul { display: none; width: calc(100% + 20px); padding: 10px; margin: 0px -10px 0px -10px; transform: none; filter: none; transition: none } nav ul li ul li { width: 100%; padding: 0px; margin: 0px; transform: none; filter: none } nav ul li ul li a { padding: 9px 0px 9px 0px; font-size: 16px; line-height: 16px; font-weight: var(--schriftstaerke_normal) } section.features { position: relative; float: left; width: 100%; padding: 0px calc(50% - 960px) 0px calc(50% - 960px); background: var(--grundfarbe_hell) } section.features ul { display: flex; flex-flow: row wrap; justify-content: center; float: left; width: 100%; padding: 5px; margin: 0px; list-style-type: none } section.features ul li { display: block; float: left; margin: 5px 15px 5px 15px } section.features ul li a { display: block; float: left; padding: 3px 10px 3px 30px; background-repeat: no-repeat; background-position: left center; background-size: contain; color: #000000; line-height: 14px; font-weight: var(--schriftstaerke_fett) } section.features ul li.pin a { background-image: url(../../images/layout/pin.svg) } section.features ul li.check a { background-image: url(../../images/layout/check.svg) } section.features ul li.truck a { background-image: url(../../images/layout/truck.svg) } section.features ul li.receipt a { background-image: url(../../images/layout/receipt.svg) } section.features ul li.phone a { background-image: url(../../images/layout/phone.svg) } section.themes { position: relative; float: left; width: 100%; height: 600px; padding: 0px calc(50% - 960px) 0px calc(50% - 960px); overflow: hidden; background: linear-gradient(-20deg, var(--akzentfarbe1), var(--akzentfarbe2)) } section.themes .bx-pager { position: absolute; z-index: 100; left: 0%; bottom: 0%; padding: 30px; margin: 0px; list-style-type: none } section.themes .bx-pager .bx-pager-item { display: block; float: left; margin: 10px } section.themes .bx-pager .bx-pager-item a { display: block; float: left; width: 20px; height: 20px; background: #ffffff40; border-radius: 10px; color: transparent; font-size: 0px; line-height: 0px; transition: 0.4s ease-in-out } section.themes .bx-pager .bx-pager-item a:hover { background: #ffffffff } section.themes .bx-pager .bx-pager-item a.active { width: 60px } section.themes .bx-wrapper, section.themes .bx-wrapper .bx-viewport, section.themes .bx-wrapper .bx-viewport .slider, section.themes .bx-wrapper .bx-viewport .slider .theme { position: relative; float: left; width: 100%; height: 100% } section.themes .bx-wrapper .bx-viewport .slider .theme div { position: absolute; z-index: 2; left: 0%; width: 960px; padding: 30px; transform: translateY(-50%) } section.themes .bx-wrapper .bx-viewport .slider .theme div h4 { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; font-size: 22px; line-height: 22px; transition: 1.2s ease-in-out } section.themes .bx-wrapper .bx-viewport .slider .theme div h2 { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; font-size: 72px; line-height: 72px; font-weight: var(--schriftstaerke_fett); transition: 0.8s ease-in-out } section.themes .bx-wrapper .bx-viewport .slider .theme div a { display: block; float: left; padding: 23px 30px 23px 30px; border-radius: 5px; outline: solid 2px #ffffff40; margin: 30px 10px 10px 10px; color: #ffffff; line-height: 14px; font-weight: var(--schriftstaerke_fett); text-transform: uppercase; letter-spacing: 0.1em; text-indent: 0.1em; transition: 0.4s ease-in-out } section.themes .bx-wrapper .bx-viewport .slider .theme div a:hover { background: #ffffff40 } section.themes .bx-wrapper .bx-viewport .slider .theme div.hidden h4, section.themes .bx-wrapper .bx-viewport .slider .theme div.hidden h2, section.themes .bx-wrapper .bx-viewport .slider .theme div.hidden a { transform: translateX(20%) scaleX(1.2); filter: opacity(0) blur(20px) } section.themes .bx-wrapper .bx-viewport .slider .theme div.active h4, section.themes .bx-wrapper .bx-viewport .slider .theme div.active h2, section.themes .bx-wrapper .bx-viewport .slider .theme div.active a { transform: none; filter: none } section.themes .bx-wrapper .bx-viewport .slider .theme picture { display: block; position: absolute; z-index: 1; left: 0%; width: 100%; height: 400%; transform: translateY(-50%) } section.themes .bx-wrapper .bx-viewport .slider .theme picture img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: contain } section.category { position: relative; float: left; width: 100%; height: 400px; overflow: hidden; background: linear-gradient(-20deg, var(--akzentfarbe1), var(--akzentfarbe2)) } section.category .cat_short { position: absolute; z-index: 2; left: calc(50% - 600px); width: 960px; padding: 30px; transform: translateY(-50%) } section.category .cat_short .cat_short_headline { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; font-size: 60px; font-weight: var(--schriftstaerke_fett) } section.category .cat_short .cat_short_text { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff } section.category .cat_short .cat_short_link { display: block; float: left; padding: 23px 30px 23px 30px; border-radius: 5px; outline: solid 2px #ffffff40; margin: 30px 10px 10px 10px; color: #ffffff; line-height: 14px; font-weight: var(--schriftstaerke_fett); text-transform: uppercase; letter-spacing: 0.1em; text-indent: 0.1em; transition: 0.4s ease-in-out } section.category .cat_short .cat_short_link:hover { background: #ffffff40 } section.category picture { display: block; position: absolute; z-index: 1; left: 50%; width: 50%; height: 100%; transform: translateY(-50%) } section.category picture img { display: block; float: left; width: 100%; height: 100%; object-fit: contain } section.stripe { float: left; width: 100%; padding: 5px calc(50% - 565px) 5px calc(50% - 565px); overflow: hidden; background: var(--akzentfarbe2) } section.stripe h4 { float: left; margin: 5px; color: #ffffff; font-size: 18px; line-height: 31px; font-weight: var(--schriftstaerke_fett); text-transform: uppercase; white-space: nowrap; transform: translateY(-80px); filter: opacity(0); transition: 0.4s ease-in-out } section.stripe h4.active { transform: none; filter: none } section.stripe span { float: left; margin: 5px; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.stripe span.active { transform: none; filter: none } section.stripe span ul { float: left; padding: 0px; margin: 0px; list-style-type: none } section.stripe span ul li { display: block; float: left; color: #ffffff; white-space: nowrap } section.content { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 40px calc(50% - 600px) 40px calc(50% - 600px); overflow: hidden; background: #ffffff } section.content.dark { padding: 0px calc(50% - 600px) 0px calc(50% - 600px); background: var(--grundfarbe_hell) } section.content .column { float: left; padding: 20px } section.content .column.full { width: 100% } section.content .column.ultrawide { width: 75% } section.content .column.wide { width: 66.6666% } section.content .column.medium { width: 50% } section.content .column.slim { width: 33.3333% } section.content .column.ultraslim { width: 25% } section.content .column hr { float: left; width: calc(100% - 40px); height: 2px; background: var(--grundfarbe_dunkel); border: none; margin: 20px; transform: translateX(50%); filter: opacity(0); transition: 0.4s ease-out } section.content .column hr.active { transform: none; filter: none } section.content .column picture { display: block; position: relative; float: left; width: calc(100% - 40px); overflow: hidden; padding: 0% 0% calc(75% - 30px) 0%; border-radius: 10px; overflow: hidden; margin: 20px; transform: translateX(50%); filter: opacity(0); transition: 0.4s ease-out } section.content .column picture.active { transform: none; filter: none } section.content .column picture img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover } section.content .column .entry { float: left; width: calc(100% - 40px); margin: 20px; transform: translateX(-50%); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .entry.active { transform: none; filter: none } section.content .column .entry h1, section.content .column .entry h2 { color: var(--akzentfarbe1); font-weight: var(--schriftstaerke_fett) } section.content .column .entry#typewriter h2 { color: var(--akzentfarbe2); font-size: 42px; line-height: 42px } section.content .column .entry#typewriter h4 { font-size: 18px; line-height: 31px; font-weight: var(--schriftstaerke_fett) } section.content .column .entry#notfound h2 { color: #ffffff; font-size: 34px; line-height: 41px } section.content .column .entry#notfound h4 { color: var(--akzentfarbe2); font-size: 22px; line-height: 29px; font-weight: var(--schriftstaerke_fett) } section.content .column .entry table tr td input[type=image] { display: block; position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; background: var(--grundfarbe_hell); padding: 10px; border-radius: 2px; transition: 0.4s ease-in-out } section.content .column .entry table tr td input[type=image]:hover { background: var(--grundfarbe_mittel) } section.content .column .cta { float: left; width: 100%; padding: 10px; margin: 0px; list-style-type: none; transform: translateX(-50%); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .cta.active { transform: none; filter: none } section.content .column .cta li { display: block; float: left; margin: 10px } section.content .column.slim .cta li { float: right } section.content .column .cta li a { display: block; float: left; padding: 23px 30px 23px 30px; border-radius: 5px; outline: solid 2px var(--akzentfarbe1); color: var(--akzentfarbe1); line-height: 14px; font-weight: var(--schriftstaerke_fett); text-transform: uppercase; letter-spacing: 0.1em; text-indent: 0.1em; transition: 0.4s ease-in-out } section.content .column .cta li a:hover { background: var(--akzentfarbe1); color: #ffffff } section.content .column .osm { float: left; width: calc(100% - 40px); padding: 0% 0% calc(100% - 40px) 0%; margin: 20px; font-size: 16px; line-height: 24px; white-space: nowrap; transform: translateX(50%); filter: opacity(0) grayscale(0.8); transition: 0.4s ease-in-out } section.content .column .osm.active { transform: none; filter: opacity(1) grayscale(0.8) } section.content .column .osm h4 { font-size: 18px; line-height: 31px } section.content .column .desc { float: left; width: 100%; padding: 10px; transform: translateX(-50%); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .desc.active { transform: none; filter: none } section.content .column .desc h3 { position: relative; float: left; width: calc(100% - 20px); padding: 13px 10px 13px 40px; background: var(--grundfarbe_hell); border-radius: 5px; margin: 10px; font-size: 18px; line-height: 18px; font-weight: var(--schriftstaerke_fett); cursor: pointer; transition: 0.4s ease-in-out } section.content .column .desc h3:hover { background-color: var(--grundfarbe_mittel) } section.content .column .desc h3:before { position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; background: url(../../images/layout/plus.svg) no-repeat center; background-size: contain; content: ''; transition: 0.4s ease-in-out } section.content .column .desc h3.active:before { background-image: url(../../images/layout/minus.svg); transform: rotate(360deg) } section.content .column .desc h3:after { content: ' einblenden' } section.content .column .desc h3.active:after { content: ' ausblenden' } section.content .column .desc div { display: none; float: left; width: calc(100% - 20px); margin: 10px; font-size: 16px; line-height: 24px } section.content .column .downloads { float: left; width: 100%; padding: 10px; transform: translateX(-50%); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .downloads.active { transform: none; filter: none } section.content .column .downloads a { display: block; float: left; padding: 13px 10px 13px 40px; background: var(--grundfarbe_hell) url(../../images/layout/acrobat.svg) no-repeat 10px center; background-size: 20px; border-radius: 5px; margin: 10px; color: #000000; line-height: 14px; font-weight: var(--schriftstaerke_fett); transition: 0.4s ease-in-out } section.content .column .downloads a:hover { background-color: var(--grundfarbe_mittel) } section.content .kundenkonto { float: left; width: calc(100% - 80px); padding: 80px; border-radius: 10px; box-shadow: 0px 0px 5px #00000033; margin: 40px; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .kundenkonto.active { transform: none; filter: none } section.content .kundenkonto h2 { float: left; width: 100%; margin: 0px 0px 80px 0px; color: var(--akzentfarbe1); font-size: 42px; font-weight: var(--schriftstaerke_fett) } section.content .kundenkonto table { width: 100%; padding: 0px; margin: 0px } section.content .kundenkonto table tr td { padding: 10px 0px 10px 0px !important } section.content .kundenkonto table tr td:first-child { width: 25% } section.content .kundenkonto table tr td b { white-space: nowrap; font-size: 28px } section.content .kundenkonto table tr td select, section.content .kundenkonto table tr td textarea, section.content .kundenkonto table tr td input[type=password], section.content .kundenkonto table tr td input[type=text] { margin: 0px !important } section.content .kundenkonto table tr td input.adress_strasse { width: 75% } section.content .kundenkonto table tr td input.adress_strassenr { width: calc(25% - 20px); margin: 0px 0px 0px 20px !important } section.content .kundenkonto table tr td input.adress_plz { width: 25% } section.content .kundenkonto table tr td input.adress_ort { width: calc(75% - 20px); margin: 0px 0px 0px 20px !important } section.content .kundenkonto table tr td button, section.content .kundenkonto table tr td input[type=submit], section.content .kundenkonto table tr td a.buttonlink { margin: 0px !important } section.content .kundenkonto .tabellenkopf img { background: var(--akzentfarbe1) } section.content .kundenkonto .tabellenkopf_over img { background: var(--akzentfarbe2) } section.content .kundenkonto .pass_show { display: block; float: left; margin: 0px !important; font-size: 16px !important } section.content .kundenkonto .kundenkonto_funktionen { float: left; width: 100%; padding: 0px 0px 40px 0px; border-bottom: solid 2px var(--grundfarbe_hell); margin: 0px 0px 40px 0px } section.content .kundenkonto .kundenkonto_funktionen div { float: left } section.content .kundenkonto .kundenkonto_funktionen div:first-child { float: right } section.content .kundenkonto .kundenkonto_funktionen div:last-child { display: none } section.content .kundenkonto .kundenkonto_funktionen div a { display: block; float: left; padding: 23px 40px 23px 40px; background: var(--grundfarbe_hell); border-radius: 5px; color: #000000; line-height: 14px; font-weight: var(--schriftstaerke_fett); text-transform: uppercase; letter-spacing: 0.1em; text-indent: 0.1em; transition: 0.4s ease-in-out } section.content .kundenkonto .kundenkonto_funktionen div a:hover { background: var(--grundfarbe_mittel) } section.content .kundenkonto .kundenkonto_funktionen div form { float: left } section.content .kundenkonto .kundenkonto_funktionen div form button { padding: 23px 40px 23px 40px } section.content .path { float: left; width: calc(100% - 80px); margin: 40px; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .path.active { transform: none; filter: none } section.content .orderprocess { float: left; width: calc(100% - 80px); padding: 80px; border-radius: 10px; box-shadow: 0px 0px 5px #00000033; margin: 40px; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .orderprocess.active { transform: none; filter: none } section.content .orderprocess table { width: 100%; padding: 0px; margin: 0px } section.content .orderprocess table tr td select, section.content .orderprocess table tr td textarea, section.content .orderprocess table tr td input[type=password], section.content .orderprocess table tr td input[type=text] { margin: 0px !important } section.content .orderprocess table tr td input[name=customer_strasse], section.content .orderprocess table tr td input[name=customer_l_strasse] { width: 75% } section.content .orderprocess table tr td input[name=customer_strassenr], section.content .orderprocess table tr td input[name=customer_l_strassenr] { width: calc(25% - 20px); margin: 0px 0px 0px 20px !important } section.content .orderprocess table tr td input[name=customer_plz], section.content .orderprocess table tr td input[name=customer_l_plz] { width: 25% } section.content .orderprocess table tr td input[name=customer_ort], section.content .orderprocess table tr td input[name=customer_l_ort] { width: calc(75% - 20px); margin: 0px 0px 0px 20px !important } section.content .orderprocess table tr td button, section.content .orderprocess table tr td input[type=submit], section.content .orderprocess table tr td a.buttonlink { margin: 0px !important } section.content .orderprocess table tr td img { max-width: 90% } section.content .orderprocess .schrittfeld_done, section.content .orderprocess .schrittfeld_aktiv, section.content .orderprocess .schrittfeld_inaktiv { width: 25% !important; padding: 0px !important } section.content .orderprocess .schrittfeld { float: left; width: 100% } section.content .orderprocess .schrittfeld a { display: block; float: left; width: 100% } section.content .orderprocess .schrittfeld_done .schrittfeld a { padding: 20px 0px 0px 0px; border-top: solid 2px var(--grundfarbe_mittel); color: var(--grundfarbe_mittel) !important; font-size: 22px; line-height: 22px; font-weight: var(--schriftstaerke_fett); text-transform: uppercase } section.content .orderprocess .schrittfeld_aktiv .schrittfeld a { padding: 20px 0px 0px 0px; border-top: solid 2px var(--akzentfarbe1); color: var(--akzentfarbe1); font-size: 22px; line-height: 22px; font-weight: var(--schriftstaerke_fett); text-transform: uppercase } section.content .orderprocess .schrittfeld_inaktiv .schrittfeld { padding: 20px 0px 0px 0px; border-top: solid 2px var(--grundfarbe_hell); color: var(--grundfarbe_hell); font-size: 22px; line-height: 22px; font-weight: var(--schriftstaerke_fett); text-transform: uppercase } section.content .orderprocess .schrittbutton { float: right; width: 240px !important; height: 80px !important; font-size: 22px; line-height: 22px; letter-spacing: 0em; text-indent: 0em } section.content .orderprocess .schrittfeld span, section.content .orderprocess .schrittbutton span { display: block; font-size: 16px; line-height: 16px } section.content .orderprocess .status { padding: 0px; background: var(--grundfarbe_hell); border-top: solid 20px #ffffff; border-bottom: solid 20px #ffffff } section.content .orderprocess .status0 { width: 0%; height: 20px; background: var(--grundfarbe_mittel) } section.content .orderprocess .status25 { width: 25%; height: 20px; background: var(--grundfarbe_mittel) } section.content .orderprocess .status50 { width: 50%; height: 20px; background: var(--grundfarbe_mittel) } section.content .orderprocess .status75 { width: 75%; height: 20px; background: var(--grundfarbe_mittel) } section.content .orderprocess .status100 { width: 100%; height: 20px; background: var(--grundfarbe_mittel) } section.content .orderprocess .tabellenkopf { width: auto; padding: 10px 0px 10px 0px; border-bottom: solid 1px var(--grundfarbe_hell); font-size: 28px; line-height: 42px; font-weight: var(--schriftstaerke_fett) } section.content .orderprocess .tabellenheader { width: auto; padding: 10px 0px 10px 0px; border-bottom: solid 1px var(--grundfarbe_hell) } section.content .orderprocess .tabellenzeile, section.content .orderprocess .tabelleninhalt { width: auto; padding: 10px 0px 10px 0px } section.content .orderprocess .tabelleninhalt_gesamtpreis { width: auto; padding: 10px 0px 10px 0px; font-size: 22px } section.content .orderprocess .tabellenfuss { width: auto; padding: 10px 0px 10px 0px; border-top: solid 1px var(--grundfarbe_hell) } section.content .orderprocess .tabellenfuss_gesamtpreis { width: auto; padding: 10px 0px 10px 0px; border-top: solid 1px var(--grundfarbe_hell); font-size: 22px } section.content .orderprocess .pic { width: 4% } section.content .orderprocess .pic img { width: 100%; padding: 0% 0% 100% 0%; object-fit: contain } section.content .orderprocess .name { width: 32% } section.content .orderprocess .einzel { width: 18%; text-align: right } section.content .orderprocess .netto { width: 18%; text-align: right } section.content .orderprocess .mwst { display: none } section.content .orderprocess .gesamt { width: 18%; text-align: right } section.content .orderprocess .loeschen { width: 10%; text-align: right } section.content .orderprocess .buttonfarbe { float: right; height: 40px; padding: 4px; background: var(--grundfarbe_hell); border-radius: 5px; transition: 0.4s ease-in-out } section.content .orderprocess .buttonfarbe:hover { background: var(--grundfarbe_mittel) } section.content .orderprocess .pass_show { display: block; float: left; margin: 0px !important; font-size: 16px !important } section.content .orderprocess .voucher { float: left; width: 100%; padding: 40px 0px 40px 0px; border-top: solid 2px var(--grundfarbe_hell); border-bottom: solid 2px var(--grundfarbe_hell); margin: 40px 0px 40px 0px } section.content .orderprocess .voucher b { font-size: 28px; line-height: 42px } section.content .orderprocess .voucher input[type=text] { width: calc(75% - 20px); padding: 11px; margin: 20px 20px 0px 0px !important } section.content .orderprocess .voucher button { width: 25% !important; padding: 18px !important; margin: 20px 0px 0px 0px !important; font-size: 16px; line-height: 16px } section.content .orderprocess .detail_article_selector { float: left; width: 180px; margin: 0px 20px 20px 0px } section.content .orderprocess .basket_multiadress_check ul { padding: 0px; margin: 0px } section.cats { position: relative; float: left; width: 100%; padding: 10px calc(50% - 710px) 10px calc(50% - 710px); overflow: hidden; background: #ffffff; margin: -20px 0px -20px 0px } section.cats a { display: block; position: relative; float: left; width: calc(16.6666% - 20px); padding: 0% 0% calc(16.6666% - 20px) 0%; overflow: hidden; box-shadow: 0px 0px 5px #00000033; margin: 10px; transform: scale(0); filter: opacity(0); transition: 0.4s ease-out } section.cats a.active { transform: none; filter: none } section.cats a:hover { box-shadow: 0px 5px 5px #00000033 } section.cats a picture { display: block; position: absolute; z-index: 1; left: 0%; top: 0%; width: 100%; height: 75%; transition: 0.4s ease-in-out } section.cats a:hover picture { transform: scale(1.05) } section.cats a picture img { display: block; float: left; width: 100%; height: 100%; object-fit: contain } section.cats a div { position: absolute; z-index: 2; left: 0%; bottom: 0%; width: 100%; padding: 20px } section.cats a div h3 { color: #000000; font-size: 18px; line-height: 23px; font-weight: var(--schriftstaerke_fett) } section.cats a div:after { display: block; color: var(--akzentfarbe1); font-size: 16px; line-height: 24px; content: 'alle anzeigen' } section.articles { display: flex; flex-flow: row wrap; position: relative; float: left; width: 100%; padding: 10px calc(50% - 710px) 10px calc(50% - 710px); overflow: hidden; background: #ffffff; margin: -20px 0px -20px 0px } section.articles a { display: block; float: left; width: calc(25% - 20px); overflow: hidden; box-shadow: 0px 0px 5px #00000033; margin: 10px; transform: scale(0); filter: opacity(0); transition: 0.4s ease-out } section.articles a.active { transform: none; filter: none } section.articles a:hover { box-shadow: 0px 5px 5px #00000033 } section.articles a picture { display: block; position: relative; float: left; width: 100%; padding: 0% 0% 66.6666% 0%; transition: 0.4s ease-in-out } section.articles a:hover picture { transform: scale(1.05) } section.articles a picture img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: contain } section.articles a div { float: left; width: 100%; padding: 20px } section.articles a div h3 { color: #000000; font-size: 22px; line-height: 29px; font-weight: var(--schriftstaerke_fett) } section.articles a div h4 { color: #000000; font-size: 18px; line-height: 31px } section.articles a div ul { margin: 10px 0px 0px 0px; font-size: 16px; line-height: 24px } form.article_detail { position: relative; float: left; width: 100%; padding: 0% calc(50% - 580px) 0% calc(50% - 580px); background: #ffffff; margin: -40px 0px -40px 0px } form.article_detail .column { padding: 10px; box-shadow: 0px 0px 5px #00000033 } form.article_detail .column.slim { float: left; width: calc(50% - 215px); margin: 20px } form.article_detail .column.wide { float: left; width: calc(100% - 390px); margin: 20px } form.article_detail .column.sticky { position: absolute; left: calc(50% + 250px); top: 20px; width: 310px } form.article_detail .column.sticky.stopped { position: fixed; top: 140px } form.article_detail .column.sticky.started { position: absolute; top: auto; bottom: 20px } form.article_detail .column hr { float: left; width: calc(100% - 20px); height: 2px; background: var(--grundfarbe_hell); border: none; margin: 10px } form.article_detail .column .thumbs { position: relative; float: left; width: 120px; height: 630px; padding: 15px 0px 15px 0px } form.article_detail .column .thumbs .bx-prev { display: block; position: absolute; left: calc(50% - 20px); top: 10px; width: 40px; height: 40px; background: var(--grundfarbe_hell) url(../../images/layout/up.svg) no-repeat center; background-size: 33.3333%; border-radius: 5px; transition: 0.4s ease-in-out } form.article_detail .column .thumbs .bx-next { display: block; position: absolute; left: calc(50% - 20px); bottom: 10px; width: 40px; height: 40px; background: var(--grundfarbe_hell) url(../../images/layout/down.svg) no-repeat center; background-size: 33.3333%; border-radius: 5px; transition: 0.4s ease-in-out } form.article_detail .column .thumbs .bx-prev:hover, form.article_detail .column .thumbs .bx-next:hover { background-color: var(--grundfarbe_mittel) } form.article_detail .column .thumbs .bx-prev.disabled, form.article_detail .column .thumbs .bx-next.disabled { display: none } form.article_detail .column .thumbs ul { float: left; width: 100%; padding: 0px; margin: 0px; list-style-type: none } form.article_detail .column .thumbs ul li { display: block; float: left; width: 120px; height: 120px; padding: 10px } form.article_detail .column .thumbs ul li a { display: block; position: relative; float: left; width: 100%; padding: 0% 0% 100% 0%; background: var(--grundfarbe_hell); border-radius: 5px; transition: 0.4s ease-in-out } form.article_detail .column .thumbs ul li a:hover, form.article_detail .column .thumbs ul li a.active { background: var(--grundfarbe_mittel) } form.article_detail .column .thumbs ul li a img { display: block; position: absolute; z-index: 1; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: contain } form.article_detail .column .pics { position: relative; float: left; width: 630px; height: 630px } form.article_detail .column .pics .bx-prev { display: block; position: absolute; left: calc(50% - 20px); top: 10px; width: 40px; height: 40px; background: var(--grundfarbe_hell) url(../../images/layout/up.svg) no-repeat center; background-size: 33.3333%; border-radius: 5px; transition: 0.4s ease-in-out } form.article_detail .column .pics .bx-next { display: block; position: absolute; left: calc(50% - 20px); bottom: 10px; width: 40px; height: 40px; background: var(--grundfarbe_hell) url(../../images/layout/down.svg) no-repeat center; background-size: 33.3333%; border-radius: 5px; transition: 0.4s ease-in-out } form.article_detail .column .pics .bx-prev:hover, form.article_detail .column .pics .bx-next:hover { background-color: var(--grundfarbe_mittel) } form.article_detail .column .pics .bx-prev.disabled, form.article_detail .column .pics .bx-next.disabled { display: none } form.article_detail .column .pics ul { float: left; width: 100%; padding: 0px; margin: 0px; list-style-type: none } form.article_detail .column .pics ul li { display: block; float: left; width: 630px; height: 630px; padding: 10px } form.article_detail .column .pics ul li a { display: block; position: relative; float: left; width: 100%; padding: 0% 0% 100% 0% } form.article_detail .column .pics ul li a:before { display: block; position: absolute; z-index: 2; right: 0%; bottom: 0%; width: 40px; height: 40px; background: var(--grundfarbe_hell) url(../../images/layout/zoom.svg) no-repeat center; background-size: 50%; border-radius: 5px; content: ''; transition: 0.4s ease-in-out } form.article_detail .column .pics ul li a:hover:before { background-color: var(--grundfarbe_mittel) } form.article_detail .column .pics ul li a img { display: block; position: absolute; z-index: 1; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: contain } form.article_detail .column .entry { float: left; width: calc(100% - 20px); margin: 10px } form.article_detail .column .entry h2 { font-size: 22px; line-height: 37px } form.article_detail .column .entry h3 { font-size: 22px; line-height: 37px; font-weight: var(--schriftstaerke_fett); text-transform: uppercase } form.article_detail .column .entry table tr td { width: auto } form.article_detail .column .entry table tr td.amount { white-space: nowrap; text-align: right } form.article_detail .column .entry table tr td u { display: block; font-size: 16px; line-height: 24px; text-decoration: none } form.article_detail .column .entry .acrobat { width: 100%; height: 60px; padding: 23px 20px 23px 60px; background-image: url(../../images/layout/acrobat.svg); background-repeat: no-repeat; background-position: 20px center; background-size: 20px; font-size: 18px; line-height: 18px; text-align: left } form.article_detail .column .entry .request { width: 100%; height: 60px; padding: 23px 20px 23px 60px; background-color: var(--akzentfarbe2); background-image: url(../../images/layout/icon_contact.svg); background-repeat: no-repeat; background-position: 20px center; background-size: 20px; color: #ffffff; font-size: 18px; line-height: 18px; text-align: left; animation: blinkbeat 1s linear infinite } form.article_detail .column .entry .request:hover { background-color: var(--akzentfarbe1) } form.article_detail .column .entry .cart { width: 100%; height: 60px; padding: 23px 20px 23px 60px; background-image: url(../../images/layout/cart.svg); background-repeat: no-repeat; background-position: 20px center; background-size: 20px; font-size: 18px; line-height: 18px; text-align: left } form.article_detail .column .entry #configento-form, form.article_detail .column .entry #configento-form #configurator1 { float: left; width: 100% } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups { float: left; width: calc(100% + 20px); background: none !important; border: none !important; margin: 10px -10px 10px -10px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups ul { float: left; width: 100%; padding: 0px; margin: 0px; list-style-type: none } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups ul li { display: block; float: left; margin: 10px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups ul li a { display: block; float: left; padding: 23px 30px 23px 30px; background: var(--grundfarbe_hell); border-radius: 5px; color: #000000; line-height: 14px; transition: 0.4s ease-in-out } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups ul a:hover { background: var(--grundfarbe_mittel) } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-nav { display: flex; flex-flow: row wrap; padding: 5px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups.groupLayout-accordion .r-tabs-nav { display: none } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-nav li { flex-grow: 1; background: none !important; margin: 5px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-nav li a { width: 100%; padding: 23px 0px 23px 0px !important; text-transform: none !important; text-align: center } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-nav li.r-tabs-state-active a { background: var(--grundfarbe_mittel) } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-accordion-title { float: left; width: calc(100% - 20px); margin: 10px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups.groupLayout-tabs .r-tabs-accordion-title { display: none } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-accordion-title a { display: block; float: left; width: 100%; padding: 23px; background: var(--grundfarbe_hell); border-radius: 5px; color: #000000; line-height: 14px; transition: 0.4s ease-in-out } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-accordion-title a:hover, form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-accordion-title.r-tabs-state-active a { background: var(--grundfarbe_mittel) } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-panel { float: left; width: 100%; padding: 0px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options { display: flex; flex-flow: row wrap; float: left; width: 100% } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento { flex-grow: 1; position: relative; float: left; width: 50%; padding: 10px; border: none !important; margin: 0px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionheader { position: absolute; z-index: 1; left: 20px; top: 0px; padding: 5px 8px 5px 8px; background: #ffffff; color: var(--grundfarbe_mittel); font-size: 16px; line-height: 16px; pointer-events: none } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionheader .optionlabel .label { text-transform: none } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionheader .optionlabel .infotext2 { display: none } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionheader .infotext { display: none } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain img { max-width: 100% } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .element { width: 100% } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .collapse span { height: 60px !important; background: #ffffff url(../../images/layout/select.svg) no-repeat right center !important; background-size: contain !important; border: solid 2px var(--grundfarbe_mittel) !important; border-radius: 5px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .collapse span a { padding: 8px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .collapse span a .thumbnail { width: 40px; height: 40px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .collapse span a .thumbnail img { object-fit: scale-down } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .collapse span a .subject { line-height: 30px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .radiobuttons-wrapper, form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .checkbox-wrapper, form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .multiquantity-wrapper { float: left; width: 100%; margin: 20px 0px 0px 0px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .multiquantity-wrapper .multiquantity { float: left; width: 100%; padding: 30px 0px 30px 0px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .multiquantity-wrapper .multiquantity .qty { float: left; width: 90px; max-width: 90px; margin: -15px 15px -15px 0px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .footer { float: left; width: 100%; height: auto !important; padding: 5px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .footer button { width: calc(50% - 10px) !important; background: var(--grundfarbe_mittel); margin: 5px !important; color: #ffffff } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .footer button:hover { background: var(--akzentfarbe1) } form.article_detail .column .entry #configento-form #configento-price { display: none } form.article_detail .column fieldset { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 0px; border: none; margin: 0px } form.article_detail .column fieldset field { flex-grow: 1; position: relative; float: left; width: 50%; padding: 10px 50px 10px 10px } form.article_detail .column fieldset field .download { display: block; float: left; width: 100%; height: 60px; padding: 12px 30px 12px 60px; background: var(--grundfarbe_hell) url(../../images/layout/acrobat.svg) no-repeat 15px center; background-size: auto 50%; border-radius: 5px; color: #000000; font-size: 18px; line-height: 23px; transition: 0.4s ease-in-out } form.article_detail .column fieldset field .download:hover { background-color: var(--grundfarbe_mittel) } form.article_detail .column fieldset field .download h4 { font-size: 22px; line-height: 22px } form.article_detail .column fieldset legend { position: absolute; z-index: 100; right: 15px; top: 30px; width: 20px; height: 20px; outline: solid 2px var(--grundfarbe_hell); border-radius: 50%; cursor: help } form.article_detail .column fieldset legend:before { display: block; position: absolute; right: 50%; bottom: 50%; color: var(--grundfarbe_hell); line-height: 14px; font-weight: var(--schriftstaerke_fett); content: '?'; transform: translate(50%,50%) } form.article_detail .column fieldset legend div { display: none; position: absolute; right: 50%; bottom: 50px; width: 220px; padding: 20px; background: var(--grundfarbe_mittel); border-radius: 5px; color: #ffffff; font-size: 16px; line-height: 24px; transform: translateX(50%) } form.article_detail .column fieldset legend div:before { display: block; position: absolute; z-index: -1; right: 50%; bottom: -6px; width: 12px; height: 12px; background: var(--grundfarbe_mittel); transform: translateX(50%) rotate(45deg); content: '' } section.choice { position: relative; float: left; width: 100%; overflow: hidden; padding: 40px calc(50% - 600px) 40px calc(50% - 600px); overflow: hidden } section.choice div { float: left; width: 100%; padding: 40px 40px 80px 40px; color: #ffffff; text-align: center; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.choice div.active { transform: none; filter: none } section.choice div h2 { font-size: 60px; line-height: 96px; font-weight: var(--schriftstaerke_fett) } section.choice ul { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 20px 20px 60px 20px; margin: 0px; list-style-type: none } section.choice ul li { display: block; float: left; width: calc(33.3333% - 40px); margin: 20px; filter: opacity(0); transition: 0.4s ease-in-out } section.choice ul li.active { transform: none !important; filter: none } section.choice ul li a { display: block; position: relative; float: left; width: 100%; height: 100%; padding: 50px 30px 150px 30px; background: var(--grundfarbe_hell) } section.choice ul li a i { display: block; float: left; width: calc(100% - 140px); padding: 0% 0% calc(100% - 140px) 0%; background-color: var(--akzentfarbe2); background-repeat: no-repeat; background-position: center; background-size: 50%; border-radius: 50%; margin: 10px 70px 10px 70px } section.choice ul li a i.safe { background-image: url(../../images/layout/icon_safe.svg) } section.choice ul li a i.clock { background-image: url(../../images/layout/icon_clock.svg) } section.choice ul li a i.green { background-image: url(../../images/layout/icon_green.svg) } section.choice ul li a h4 { float: left; width: calc(100% - 20px); margin: 10px; color: var(--akzentfarbe2); line-height: 24px; text-align: center } section.choice ul li a span { display: block; float: left; width: calc(100% - 20px); margin: 10px; color: var(--akzentfarbe2); font-size: 42px; line-height: 56px; font-weight: var(--schriftstaerke_fett); text-align: center } section.choice ul li a b { display: block; position: absolute; left: 50%; bottom: 60px; padding: 23px 30px 23px 30px; border-radius: 5px; outline: solid 2px var(--akzentfarbe2); color: var(--akzentfarbe2); line-height: 14px; text-transform: uppercase; letter-spacing: 0.1em; text-indent: 0.1em; white-space: nowrap; transform: translateX(-50%); transition: 0.4s ease-in-out } section.choice ul li:hover a b { background: var(--akzentfarbe2); color: var(--grundfarbe_hell) } section.choice ul li:nth-child(1) { transform: translateX(50%) } section.choice ul li:nth-child(1) a { border-radius: 10px 0px 0px 10px } section.choice ul li:nth-child(2) { width: calc(33.3333% + 40px); margin: -20px; transform: scale(0) } section.choice ul li:nth-child(2) a { padding: 90px 70px 190px 70px; background: #ffffff; border-radius: 10px } section.choice ul li:nth-child(2) a b { bottom: 100px } section.choice ul li:nth-child(2) a:hover b { color: #ffffff } section.choice ul li:nth-child(3) { transform: translateX(-50%) } section.choice ul li:nth-child(3) a { border-radius: 0px 10px 10px 0px } section.choice img { display: block; position: fixed; z-index: -1; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) } section.promo { position: relative; float: left; width: 100%; padding: 0px 0px 100px 0px; overflow: hidden; background: #ffffff } section.promo .bx-pager { display: flex; flex-flow: row wrap; justify-content: center; position: absolute; z-index: 100; left: 0%; bottom: 0%; width: 100%; padding: 30px; margin: 0px; list-style-type: none; transform: scale(0); filter: opacity(0); transition: 0.4s ease-in-out } section.promo .bx-pager.active { transform: scale(1); filter: none } section.promo .bx-pager .bx-pager-item { display: block; float: left; margin: 10px } section.promo .bx-pager .bx-pager-item a { display: block; float: left; width: 20px; height: 20px; background: var(--grundfarbe_hell); border-radius: 10px; color: transparent; font-size: 0px; line-height: 0px; transition: 0.4s ease-in-out } section.promo .bx-pager .bx-pager-item a:hover { background: var(--grundfarbe_mittel) } section.promo .bx-pager .bx-pager-item a.active { width: 60px } section.promo .bx-prev { display: block; position: absolute; z-index: 200; left: 20px; bottom: 20px; width: 60px; height: 60px; background: var(--grundfarbe_hell) url(../../images/layout/left.svg) no-repeat center; background-size: auto 50%; border-radius: 5px; color: transparent; font-size: 0px; line-height: 0px; transform: translateX(200%); filter: opacity(0); transition: 0.4s ease-in-out } section.promo .bx-next { display: block; position: absolute; z-index: 200; right: 20px; bottom: 20px; width: 60px; height: 60px; background: var(--grundfarbe_hell) url(../../images/layout/right.svg) no-repeat center; background-size: auto 50%; border-radius: 5px; color: transparent; font-size: 0px; line-height: 0px; transform: translateX(-200%); filter: opacity(0); transition: 0.4s ease-in-out } section.promo .bx-prev.active, section.promo .bx-next.active { transform: none; filter: none } section.promo .bx-prev:hover, section.promo .bx-next:hover { background-color: var(--grundfarbe_mittel) } section.promo .slider { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 0%; margin: 0% calc(50% - 560px) 0% calc(50% - 560px); list-style-type: none; background: var(--grundfarbe_hell) } section.promo .slider a { display: block; float: left; width: 560px !important; padding: 60px; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.promo .slider a.active { transform: none; filter: none } section.promo .slider a:hover { background: #ffffff } section.promo .slider a picture { display: block; position: relative; float: left; width: calc(100% - 20px); padding: 0% 0% calc(75% - 15px) 0%; margin: 10px } section.promo .slider a picture img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover; transition: 0.4s ease-in-out } section.promo .slider a:hover picture img { transform: scale(1.1) } section.promo .slider a div { float: left; width: calc(100% - 20px); margin: 10px; text-align: center } section.promo .slider a div h3 { color: #000000; line-height: 30px; font-weight: var(--schriftstaerke_fett) } section.promo .slider a div h4 { color: #000000 } section.promo .slider a div ul { margin: 20px 0px 0px 0px; list-style-type: none } section.sitemap { float: left; width: 100%; padding: 40px calc(50% - 600px) 40px calc(50% - 600px); overflow: hidden; background: var(--grundfarbe_mittel) } section.sitemap.dark { background: var(--grundfarbe_dunkel) } section.sitemap ul { float: left; width: calc(100% - 40px); padding: 10px; margin: 20px; list-style-type: none; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.sitemap ul.active { transform: none; filter: none } section.sitemap ul li { display: block; float: left; width: calc(25% - 20px); margin: 10px } section.sitemap ul li.wide { width: calc(100% - 20px) } section.sitemap ul li h3 { float: left; width: 100%; padding: 10px 0px 10px 0px; color: #ffffff; font-size: 34px; line-height: 34px; font-weight: var(--schriftstaerke_fett) } section.sitemap ul li a { display: block; float: left; width: 100%; padding: 8px 0px 8px 0px; color: #ffffff; line-height: 14px; font-weight: var(--schriftstaerke_fett) } section.sitemap ul li span { display: block; float: left; width: 100%; padding: 10px 0px 10px 0px; color: #ffffff } section.company { display: flex; flex-flow: row wrap; float: left; width: 100% } section.company ul { float: left; width: 50%; padding: 70px calc(50% - 570px) 70px 70px; background: var(--grundfarbe_hell); margin: 0px; overflow: hidden; list-style-type: none } section.company ul:first-child { padding: 70px 70px 70px calc(50% - 570px); background: #ffffff } section.company ul li { display: block; float: left; width: calc(50% - 20px); margin: 10px; transform: translateX(-80px); filter: opacity(0); transition: 0.4s ease-in-out } section.company ul:first-child li { width: calc(100% - 20px); transform: translateX(80px) } section.company ul.active li { transform: none; filter: none } section.company ul li a { display: block; float: left; width: 100%; padding: 8px 0px 8px 30px; background-repeat: no-repeat; background-position: left center; background-size: 18px; color: #000000; line-height: 14px; font-weight: var(--schriftstaerke_fett) } section.company ul li.logo a { padding: 0px } section.company ul li.logo a img { display: block; float: left; width: 100%; height: 60px; object-fit: contain; object-position: left center } section.company ul li.logo a span { display: block; float: left; width: 100%; padding: 8px 0px 0px 0px; font-size: 16px; line-height: 16px; text-transform: uppercase } section.company ul li.phone a { padding: 3px 0px 3px 30px; background-image: url(../../images/layout/phone.svg); font-size: 28px; line-height: 28px } section.company ul li.mail a { padding: 6px 0px 6px 30px; background-image: url(../../images/layout/mail.svg); font-size: 22px; line-height: 22px } section.company ul li.pin a { background-image: url(../../images/layout/pin.svg) } section.company ul li.home a { background-image: url(../../images/layout/home.svg) } section.company ul li.cart a { background-image: url(../../images/layout/cart.svg) } section.company ul li.account a { background-image: url(../../images/layout/account.svg) } section.company ul li.contact a { background-image: url(../../images/layout/contact.svg) } section.company ul li.reseller a { background-image: url(../../images/layout/reseller.svg) } section.company ul li.newsletter a { background-image: url(../../images/layout/newsletter.svg) } section.company ul li.blog a { background-image: url(../../images/layout/blog.svg) } section.company ul li.facebook a { background-image: url(../../images/layout/facebook.svg) } section.company ul li.instagram a { background-image: url(../../images/layout/instagram.svg) } section.company ul li.settings a { background-image: url(../../images/layout/settings.svg) } footer { float: left; width: 100%; padding: 40px calc(50% - 600px) 120px calc(50% - 600px); overflow: hidden; background: var(--grundfarbe_dunkel) } footer ul { float: left; width: calc(50% - 40px); padding: 10px; margin: 20px; list-style-type: none; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } footer ul.active { transform: none; filter: none } footer ul li { display: block; float: left; width: calc(25% - 20px); margin: 10px } footer ul li:first-child { width: calc(100% - 20px) } footer ul li h3 { color: var(--grundfarbe_mittel); font-weight: var(--schriftstaerke_fett) } footer ul li a { display: block; float: left; width: 100%; height: 60px; padding: 23px 10px 23px 10px; background-color: var(--grundfarbe_mittel); background-repeat: no-repeat; background-position: center; background-size: 50%; border-radius: 5px; color: #ffffff; line-height: 14px; font-weight: var(--schriftstaerke_fett); text-align: center; transition: 0.4s ease-in-out } footer ul li a:hover { transform: scale(1.1) } footer ul li a.paypal { background-image: url(../../images/layout/payment_paypal.svg) } footer ul li a.dhl { background-image: url(../../images/layout/logistics_dhl.svg) } footer ul li a.ups { background-image: url(../../images/layout/logistics_ups.svg) } footer hr { float: left; width: calc(100% - 80px); height: 2px; background: var(--grundfarbe_mittel); border: none; margin: 40px; transform: scaleX(0); filter: opacity(0); transition: 0.4s ease-in-out } footer hr.active { transform: none; filter: none } footer div { float: left; width: calc(100% - 40px); padding: 20px; margin: 20px; color: var(--grundfarbe_mittel); transform: translateY(-80px); filter: opacity(0); transition: 0.4s ease-in-out } footer div.active { transform: none; filter: none } footer div a { color: var(--grundfarbe_mittel) } /* Hilfsklassen für die Formatierung im SCMS */ hr.desc_bar { width: 100%; height: 1px; background: var(--grundfarbe_dunkel); border: none; margin: 20px 0px 20px 0px } h4.desc_headline { clear: both; font-size: 18px; line-height: 31px; font-weight: var(--schriftstaerke_fett) } span.desc_pic { display: block; position: relative; width: calc(50% - 10px); overflow: hidden; padding: 0% 0% calc(50% - 10px) 0%; border-radius: 10px; overflow: hidden } span.desc_pic.right { float: right; margin: 0px 0px 20px 20px } span.desc_pic.left { float: left; margin: 0px 20px 20px 0px } span.desc_pic img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover } table.desc_four_cols { float: none } table.desc_four_cols tr td { width: 25%; font-size: 16px; line-height: 24px } ul.desc_list { width: calc(100% + 20px); padding: 0px; border-top: solid 1px var(--grundfarbe_hell); margin: 0px -10px 0px -10px; list-style-type: none; counter-reset: number } ul.desc_list li { display: block; position: relative; width: 100%; padding: 13px 10px 13px 50px; border-bottom: solid 1px var(--grundfarbe_hell); font-size: 16px; line-height: 19px } ul.desc_list li:before { display: block; position: absolute; left: 20px; top: 15px; width: 10px; padding: 0px 0px 10px 0px; background: var(--grundfarbe_dunkel); border-radius: 50%; content: '' } ul.desc_list.ordered li:before { left: 10px; top: 5px; width: 30px; padding: 9px 0px 9px 0px; background: var(--grundfarbe_hell); line-height: 12px; font-weight: var(--schriftstaerke_fett); text-align: center; counter-increment: number; content: ''counter(number)'' } ul.desc_cta { width: calc(100% + 40px); padding: 10px; margin: -20px; list-style-type: none } ul.desc_cta li { display: inline-block; margin: 10px } ul.desc_cta li a { display: block; padding: 14px 20px 14px 20px; border-radius: 5px; font-size: 16px; line-height: 16px; font-weight: var(--schriftstaerke_fett); text-transform: uppercase; letter-spacing: 0.1em; text-indent: 0.1em; transition: 0.4s ease-in-out } ul.desc_cta.akzentfarbe1 li a { outline: solid 2px var(--akzentfarbe1); color: var(--akzentfarbe1) } ul.desc_cta.akzentfarbe1 li a:hover { background: var(--akzentfarbe1) } ul.desc_cta.akzentfarbe2 li a { outline: solid 2px var(--akzentfarbe2); color: var(--akzentfarbe2) } ul.desc_cta.akzentfarbe2 li a:hover { background: var(--akzentfarbe2) } ul.desc_cta li a:hover { color: #ffffff } ul.desc_faq_questions { width: calc(100% + 20px); padding: 0px; border-top: solid 1px var(--grundfarbe_hell); margin: 0px -10px 0px -10px; list-style-type: none; counter-reset: number } ul.desc_faq_questions li { display: block; width: 100%; border-bottom: solid 1px var(--grundfarbe_hell) } ul.desc_faq_questions li a { display: block; position: relative; width: 100%; padding: 13px 10px 13px 50px; color: #000000; font-size: 16px; line-height: 19px; text-transform: uppercase } ul.desc_faq_questions li a:before { display: block; position: absolute; left: 10px; top: 5px; width: 30px; padding: 9px 0px 9px 0px; background: var(--grundfarbe_hell); border-radius: 5px; line-height: 12px; font-weight: var(--schriftstaerke_fett); text-align: center; counter-increment: number; content: ''counter(number)'' } ul.desc_faq_answers { width: calc(100% + 20px); padding: 0px; margin: 0px -10px 0px -10px; list-style-type: none } ul.desc_faq_answers li { display: block; position: relative; width: 100%; padding: 20px 10px 60px 10px; border-bottom: solid 1px var(--grundfarbe_hell); font-size: 16px; line-height: 24px } ul.desc_faq_answers li a.desc_faq_top { display: block; position: absolute; z-index: 1; left: 10px; bottom: 10px; width: 30px; height: 30px; background: var(--grundfarbe_hell) url(../../images/layout/up.svg) no-repeat center; background-size: 33.3333%; border-radius: 5px } ul.desc_faq_answers li h5 { margin: 0px; font-size: 16px; line-height: 24px; font-weight: var(--schriftstaerke_normal); text-transform: uppercase } /* Klassen für die Breiten im Configento */ .configento.option { width: 100% !important } /* standard */ .configento.option.w-75 { width: 75% !important } .configento.option.w-50 { width: 50% !important } .configento.option.w-33 { width: 33.3333% !important } .configento.option.w-25 { width: 25% !important } @media only screen and (min-width: 720px) and (max-width: 1439px) { body { padding: 50px 0px 0px 0px; font-size: 16px; line-height: 25px } h1 { font-size: 30px; line-height: 45px } h2 { font-size: 24px; line-height: 40px } h3 { font-size: 20px; line-height: 34px } h4 { font-size: 18px; line-height: 27px } ul, ol { padding: 0px 0px 0px 5px; margin: 0px 0px 0px 5px } i { font-size: 15px; line-height: 26px } table { width: calc(100% + 20px); padding: 5px; margin: -10px } table tr td { display: block; float: left; width: 100%; padding: 5px } select, textarea, input[type=date], input[type=time], input[type=number], input[type=password], input[type=text] { padding: 12px; border-width: 1px; border-radius: 2.5px; font-size: 16px; line-height: 25px } select + label, textarea + label, input[type=date] + label, input[type=time] + label, input[type=number] + label, input[type=password] + label, input[type=text] + label { left: 10px; top: 10px } select:focus + label, textarea:focus + label, input[type=date]:focus + label, input[type=time]:focus + label, input[type=number]:focus + label, input[type=password]:focus + label, input[type=text]:focus + label, select:not([value=""]) + label, textarea:not(:placeholder-shown) + label, input[type=date]:not(:placeholder-shown) + label, input[type=time]:not(:placeholder-shown) + label, input[type=number]:not(:placeholder-shown) + label, input[type=password]:not(:placeholder-shown) + label, input[type=text]:not(:placeholder-shown) + label { padding: 2px 8px 2px 8px; font-size: 15px; line-height: 15px } textarea { height: 240px } button, input[type=submit] { height: 40px; border-radius: 2.5px; font-size: 16px; line-height: 16px } a.buttonlink { padding: 15.5px; border-radius: 2.5px; line-height: 9px } div.fileupload { border-radius: 2.5px } div.fileupload:before { width: 40px; height: 40px } div.fileupload input[type=file] { height: 40px } div.fileupload label { padding: 11px 10px 11px 40px; font-size: 15px; line-height: 19px } div.fileupload label h4 { font-size: 16px; line-height: 16px } ul.filelist li { padding: 5px 0px 0px 0px } ul.filelist li h4 { padding: 0px 0px 2.5px 0px; font-size: 16px; line-height: 25px } ul.filelist li span { height: 5px; border-radius: 2.5px } ul.filelist li div { padding: 2.5px 0px 0px 0px; font-size: 15px; line-height: 26px } div.preloader:before { width: 80px; height: 80px } a.show_cookiemanager { left: 10px; bottom: 10px; width: 30px; height: 30px; padding: 3px; border-radius: 2.5px } a.show_cookiemanager:before { border-radius: 2.5px } a.show_cookiemanager:after { width: 30px; padding: 10.5px 0px 10.5px 0px; border-radius: 2.5px; line-height: 9px } a.show_cookiemanager:hover:after { padding: 10.5px 15px 10.5px 30px } #wkinfo .box { width: 400px; padding: 45px } #wkinfo .box span { right: 15px; top: 15px; width: 30px; height: 30px } #wkinfo .box div { width: calc(100% - 10px); padding: 20px; margin: 5px } #wkinfo .box a { padding: 10.5px 15px 10.5px 15px; margin: 5px; line-height: 9px } ul.panel { width: 50px; padding: 5px } ul.panel li { margin: 5px } ul.panel li a { width: 30px; height: 30px; border-radius: 2.5px } ul.panel li a:before { width: 30px; padding: 10.5px 0px 10.5px 0px; line-height: 9px } ul.panel li a:hover:before { padding: 10.5px 30px 10.5px 15px } header { padding: 5px calc(50% - 475px) 5px calc(50% - 475px) } header .logo { top: 5px } header .logo img { height: 40px } header .logo span { padding: 2px 0px 2px 0px; font-size: 13px; line-height: 13px } header .cart, header .account { margin: 5px } header .cart b, header .account b { width: 30px; height: 30px; border-radius: 2.5px } header .cart span, header .account span { padding: 11.5px; font-size: 15px; line-height: 15px } header .switch { margin: 5px } header .switch b { width: 30px; height: 30px; border-radius: 2.5px } header .switch span { padding: 11.5px; font-size: 15px; line-height: 15px } header form { width: calc(20% - 15px); margin: 7.5px } header form input[type=text] { padding: 5.5px; font-size: 15px; line-height: 26px } header form input[type=image] { right: 5px; top: 5px; width: 15px; height: 15px; padding: 3.75px; border-radius: 1px } nav ul { padding: 10px calc(50% - 470px) 60px calc(50% - 470px) } nav ul:first-child { padding: 60px calc(50% - 470px) 10px calc(50% - 470px) } nav ul li { width: calc(25% - 10px); padding: 0px 20px 0px 20px; margin: 5px } nav ul li a { padding: 5.5px 0px 5.5px 0px; line-height: 9px } nav ul li span { width: 20px; height: 20px } nav ul li ul { width: calc(100% + 10px); padding: 5px; margin: 0px -5px 0px -5px } nav ul li ul li a { padding: 4px 0px 4px 0px; font-size: 15px; line-height: 15px } section.features { padding: 0px calc(50% - 480px) 0px calc(50% - 480px) } section.features ul { padding: 7.5px 2.5px 7.5px 2.5px } section.features ul li { margin: 2.5px 7.5px 2.5px 7.5px } section.features ul li a { padding: 1.5px 5px 1.5px 18px; font-size: 15px; line-height: 15px } section.themes { height: 300px; padding: 0px calc(50% - 480px) 0px calc(50% - 480px) } section.themes .bx-pager { padding: 15px } section.themes .bx-pager .bx-pager-item { margin: 5px } section.themes .bx-pager .bx-pager-item a { width: 10px; height: 10px; border-radius: 5px } section.themes .bx-pager .bx-pager-item a.active { width: 30px } section.themes .bx-wrapper .bx-viewport .slider .theme div { width: 480px; padding: 15px } section.themes .bx-wrapper .bx-viewport .slider .theme div h4 { width: calc(100% - 10px); margin: 5px; font-size: 16px; line-height: 16px } section.themes .bx-wrapper .bx-viewport .slider .theme div h2 { width: calc(100% - 10px); margin: 5px; font-size: 40px; line-height: 40px } section.themes .bx-wrapper .bx-viewport .slider .theme div a { padding: 10.5px 15px 10.5px 15px; border-radius: 2.5px; outline-width: 1px; margin: 15px 5px 5px 5px; line-height: 9px } section.themes .bx-wrapper .bx-viewport .slider .theme div.hidden h4, section.themes .bx-wrapper .bx-viewport .slider .theme div.hidden h2, section.themes .bx-wrapper .bx-viewport .slider .theme div.hidden a { filter: opacity(0) blur(10px) } section.category { height: 200px } section.category .cat_short { left: calc(50% - 290px); width: 480px; padding: 15px } section.category .cat_short .cat_short_headline { width: calc(100% - 10px); margin: 5px; font-size: 40px } section.category .cat_short .cat_short_text { width: calc(100% - 10px); margin: 5px } section.category .cat_short .cat_short_link { padding: 10.5px 15px 10.5px 15px; border-radius: 2.5px; outline-width: 1px; margin: 15px 5px 5px 5px; line-height: 9px } section.stripe { padding: 7.5px calc(50% - 272.5px) 7.5px calc(50% - 272.5px) } section.stripe h4 { margin: 2.5px; font-size: 16px; line-height: 25px } section.stripe span { margin: 2.5px } section.content { padding: 20px calc(50% - 290px) 20px calc(50% - 290px) } section.content.dark { padding: 0px calc(50% - 290px) 0px calc(50% - 290px) } section.content .column { padding: 10px } section.content .column hr { width: calc(100% - 20px); height: 1px; margin: 10px } section.content .column picture { width: calc(100% - 20px); padding: 0% 0% calc(75% - 15px) 0%; border-radius: 5px; margin: 10px } section.content .column .entry { width: calc(100% - 20px); margin: 10px } section.content .column .entry#typewriter h2 { font-size: 24px; line-height: 24px } section.content .column .entry#typewriter h4 { font-size: 15px; line-height: 26px } section.content .column .entry#notfound h2 { font-size: 20px; line-height: 26px } section.content .column .entry#notfound h4 { font-size: 16px; line-height: 21px } section.content .column .entry table tr td input[type=image] { right: 10px; top: 10px; width: 30px; height: 30px; padding: 7.5px; border-radius: 1px } section.content .column .cta { padding: 5px } section.content .column .cta li { margin: 5px } section.content .column .cta li a { padding: 10.5px 15px 10.5px 15px; border-radius: 2.5px; outline-width: 1px; line-height: 9px } section.content .column .osm { width: calc(100% - 20px); padding: 0% 0% calc(100% - 20px) 0%; margin: 10px; font-size: 15px; line-height: 26px } section.content .column .osm h4 { font-size: 16px; line-height: 25px } section.content .column .desc { padding: 5px } section.content .column .desc h3 { width: calc(100% - 10px); padding: 6.5px 5px 6.5px 20px; border-radius: 2.5px; margin: 5px; font-size: 15px; line-height: 15px } section.content .column .desc h3:before { left: 5px; top: 5px; width: 10px; height: 10px } section.content .column .desc div { width: calc(100% - 10px); margin: 5px; font-size: 15px; line-height: 26px } section.content .column .downloads { padding: 5px } section.content .column .downloads a { padding: 6.5px 5px 6.5px 20px; background-position: 5px center; background-size: 10px; border-radius: 2.5px; margin: 5px; font-size: 15px; line-height: 15px } section.content .kundenkonto { width: calc(100% - 40px); padding: 40px; border-radius: 5px; margin: 20px } section.content .kundenkonto h2 { margin: 0px 0px 40px 0px; font-size: 24px; line-height: 32px } section.content .kundenkonto table tr td { padding: 5px 0px 5px 0px !important } section.content .kundenkonto table tr td:first-child { width: 100% } section.content .kundenkonto table tr td b { white-space: normal; font-size: 20px } section.content .kundenkonto .tabellenkopf, section.content .kundenkonto .tabellenkopf_over { display: none } section.content .kundenkonto .pass_show { font-size: 16px !important } section.content .kundenkonto .kundenkonto_funktionen { padding: 0px 0px 20px 0px; border-width: 1px; margin: 0px 0px 20px 0px } section.content .kundenkonto .kundenkonto_funktionen div a { padding: 11.5px 20px 11.5px 20px; border-radius: 2.5px; font-size: 15px; line-height: 15px } section.content .kundenkonto .kundenkonto_funktionen div form button { height: 30px; padding: 11.5px 20px 11.5px 20px; font-size: 15px; line-height: 15px } section.content .path { width: calc(100% - 40px); margin: 20px } section.content .orderprocess { width: calc(100% - 40px); padding: 40px; border-radius: 5px; margin: 20px } section.content .orderprocess table tr td { display: table-cell; float: none; width: auto; padding: 5px 0px 5px 0px !important } section.content .orderprocess table tr td input[name=customer_strassenr], section.content .orderprocess table tr td input[name=customer_l_strassenr] { width: calc(25% - 10px); margin: 0px 0px 0px 10px !important } section.content .orderprocess table tr td input[name=customer_ort], section.content .orderprocess table tr td input[name=customer_l_ort] { width: calc(75% - 10px); margin: 0px 0px 0px 10px !important } section.content .orderprocess .schrittfeld_done .schrittfeld a, section.content .orderprocess .schrittfeld_aktiv .schrittfeld a, section.content .orderprocess .schrittfeld_inaktiv .schrittfeld { padding: 10px 0px 0px 0px; border-width: 1px; font-size: 16px; line-height: 16px } section.content .orderprocess .schrittbutton { width: 120px !important; height: 40px !important; font-size: 16px; line-height: 16px } section.content .orderprocess .schrittfeld span, section.content .orderprocess .schrittbutton span { font-size: 15px; line-height: 15px } section.content .orderprocess .status { padding: 0px !important; border-width: 10px } section.content .orderprocess .status0, section.content .orderprocess .status25, section.content .orderprocess .status50, section.content .orderprocess .status75, section.content .orderprocess .status100 { height: 10px } section.content .orderprocess .tabellenkopf { padding: 5px 0px 5px 0px; font-size: 20px; line-height: 34px } section.content .orderprocess .tabellenheader, section.content .orderprocess .tabellenzeile, section.content .orderprocess .tabelleninhalt, section.content .orderprocess .tabellenfuss { padding: 5px 0px 5px 0px } section.content .orderprocess .tabelleninhalt_gesamtpreis, section.content .orderprocess .tabellenfuss_gesamtpreis { padding: 5px 0px 5px 0px; font-size: 18px } section.content .orderprocess .buttonfarbe { height: 30px; padding: 3px; border-radius: 2.5px } section.content .orderprocess .pass_show { font-size: 15px !important } section.content .orderprocess .voucher { padding: 20px 0px 20px 0px; border-width: 1px; margin: 20px 0px 20px 0px } section.content .orderprocess .voucher b { font-size: 20px; line-height: 34px } section.content .orderprocess .voucher input[type=text] { width: calc(75% - 10px); padding: 7px; margin: 10px 10px 0px 0px !important } section.content .orderprocess .voucher button { padding: 11.5px !important; margin: 10px 0px 0px 0px !important; font-size: 15px; line-height: 15px } section.content .orderprocess .detail_article_selector { width: 120px; margin: 0px 10px 10px 0px } section.cats { padding: 5px calc(50% - 355px) 5px calc(50% - 355px); margin: -10px 0px -10px 0px } section.cats a { width: calc(16.6666% - 10px); padding: 0% 0% calc(20% - 10px) 0%; margin: 5px } section.cats a div { padding: 10px } section.cats a div h3 { font-size: 16px; line-height: 21px } section.cats a div:after { font-size: 15px; line-height: 26px } section.articles { padding: 5px calc(50% - 355px) 5px calc(50% - 355px); margin: -10px 0px -10px 0px } section.articles a { width: calc(25% - 10px); margin: 5px } section.articles a div { padding: 10px } section.articles a div h3 { font-size: 18px; line-height: 21px } section.articles a div h4 { font-size: 16px; line-height: 25px } section.articles a div ul { margin: 5px 0px 0px 0px; font-size: 15px; line-height: 26px } form.article_detail { padding: 0% calc(50% - 275px) 0% calc(50% - 275px); margin: -20px 0px -20px 0px } form.article_detail .column { padding: 5px } form.article_detail .column.slim { width: calc(50% - 90px); margin: 5px } form.article_detail .column.wide { width: calc(100% - 170px); margin: 5px } form.article_detail .column.sticky { left: calc(50% + 120px); top: 5px; width: 150px } form.article_detail .column.sticky.stopped { top: 60px } form.article_detail .column.sticky.started { top: auto; bottom: 5px } form.article_detail .column hr { width: calc(100% - 10px); height: 1px; margin: 5px } form.article_detail .column .thumbs { width: 60px; height: 310px; padding: 5px 0px 5px 0px } form.article_detail .column .thumbs .bx-prev { left: calc(50% - 10px); top: 5px; width: 20px; height: 20px; border-radius: 2.5px } form.article_detail .column .thumbs .bx-next { left: calc(50% - 10px); bottom: 5px; width: 20px; height: 20px; border-radius: 2.5px } form.article_detail .column .thumbs ul li { width: 60px; height: 60px; padding: 5px } form.article_detail .column .thumbs ul li a { border-radius: 2.5px } form.article_detail .column .pics { width: 310px; height: 310px } form.article_detail .column .pics .bx-prev { left: calc(50% - 10px); top: 5px; width: 20px; height: 20px; border-radius: 2.5px } form.article_detail .column .pics .bx-next { left: calc(50% - 10px); bottom: 5px; width: 20px; height: 20px; border-radius: 2.5px } form.article_detail .column .pics ul li { width: 310px; height: 310px; padding: 5px } form.article_detail .column .pics ul li a:before { width: 20px; height: 20px; border-radius: 2.5px } form.article_detail .column .entry { width: calc(100% - 10px); margin: 5px; font-size: 15px; line-height: 26px } form.article_detail .column .entry h2 { font-size: 15px; line-height: 26px } form.article_detail .column .entry h3, form.article_detail .column .entry h4 { font-size: 16px; line-height: 25px } form.article_detail .column .entry table tr td { display: table-cell; float: none; width: auto } form.article_detail .column .entry table tr td u { font-size: 15px; line-height: 26px } form.article_detail .column .entry .acrobat, form.article_detail .column .entry .request, form.article_detail .column .entry .cart { height: 30px; padding: 11.5px 10px 11.5px 30px; background-position: 10px center; background-size: 10px; font-size: 15px; line-height: 15px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups { width: calc(100% + 10px); margin: 5px -5px 5px -5px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups ul li { margin: 5px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups ul li a { padding: 10.5px 15px 10.5px 15px; border-radius: 2.5px; line-height: 9px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-nav { padding: 2.5px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-nav li { margin: 2.5px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-nav li a { padding: 10.5px 0px 10.5px 0px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-accordion-title { width: calc(100% - 10px); margin: 5px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-accordion-title a { padding: 10.5px; border-radius: 2.5px; line-height: 9px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento { padding: 5px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionheader { left: 10px; padding: 2px 8px 2px 8px; font-size: 15px; line-height: 15px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .collapse span { height: 40px !important; border-width: 1px !important; border-radius: 2.5px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .collapse span a { padding: 4px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .collapse span a .thumbnail { width: 30px; height: 30px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .collapse span a .subject { line-height: 18px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .radiobuttons-wrapper, form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .checkbox-wrapper, form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .multiquantity-wrapper { margin: 10px 0px 0px 0px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .multiquantity-wrapper .multiquantity { padding: 20px 0px 20px 0px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .multiquantity-wrapper .multiquantity .qty { width: 60px; max-width: 60px; margin: -10px 10px -10px 0px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .footer { padding: 2.5px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .footer button { width: calc(50% - 5px) !important; margin: 2.5px !important } form.article_detail .column fieldset field { width: 50%; padding: 5px 25px 5px 5px } form.article_detail .column fieldset field .download { height: 40px; padding: 11px 10px 11px 40px; background-position: 10px center; border-radius: 2.5px; font-size: 15px; line-height: 19px } form.article_detail .column fieldset field .download h4 { font-size: 16px; line-height: 16px } form.article_detail .column fieldset legend { right: 0px; top: 15px; outline-width: 1px } form.article_detail .column fieldset legend:before { line-height: 9px } form.article_detail .column fieldset legend div { bottom: 40px; width: 140px; padding: 10px; border-radius: 2.5px; font-size: 15px; line-height: 26px } form.article_detail .column fieldset legend div:before { bottom: -4px; width: 8px; height: 8px } section.choice { padding: 20px calc(50% - 290px) 20px calc(50% - 290px) } section.choice div { padding: 20px 20px 40px 20px } section.choice div h2 { font-size: 40px; line-height: 67px } section.choice ul { padding: 10px 10px 30px 10px } section.choice ul li { width: calc(33.3333% - 20px); margin: 10px } section.choice ul li a { padding: 25px 15px 75px 15px } section.choice ul li a i { width: calc(100% - 70px); padding: 0% 0% calc(100% - 70px) 0%; margin: 5px 35px 5px 35px } section.choice ul li a h4 { width: calc(100% - 10px); margin: 5px; font-size: 16px; line-height: 21px } section.choice ul li a span { width: calc(100% - 10px); margin: 5px; font-size: 24px; line-height: 32px } section.choice ul li a b { bottom: 30px; padding: 11.5px 15px 11.5px 15px; border-radius: 2.5px; outline-width: 1px; font-size: 15px; line-height: 15px } section.choice ul li:nth-child(1) a { border-radius: 5px 0px 0px 5px } section.choice ul li:nth-child(2) { width: calc(33.3333% + 20px); margin: -10px } section.choice ul li:nth-child(2) a { padding: 45px 35px 95px 35px; border-radius: 5px } section.choice ul li:nth-child(2) a b { bottom: 50px } section.choice ul li:nth-child(3) a { border-radius: 0px 5px 5px 0px } section.promo { padding: 0px 0px 50px 0px } section.promo .bx-pager { padding: 15px } section.promo .bx-pager .bx-pager-item { margin: 5px } section.promo .bx-pager .bx-pager-item a { width: 10px; height: 10px; border-radius: 5px } section.promo .bx-pager .bx-pager-item a.active { width: 30px } section.promo .bx-prev { left: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 2.5px } section.promo .bx-next { right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 2.5px } section.promo .slider { margin: 0% calc(50% - 270px) 0% calc(50% - 270px) } section.promo .slider a { width: 270px !important; padding: 30px } section.promo .slider a picture { width: calc(100% - 10px); padding: 0% 0% calc(75% - 7.5px) 0%; margin: 5px } section.promo .slider a div { width: calc(100% - 10px); margin: 5px } section.promo .slider a div h3 { font-size: 18px; line-height: 21px } section.promo .slider a div h4 { font-size: 16px; line-height: 25px } section.promo .slider a div ul { margin: 10px 0px 0px 0px; font-size: 15px; line-height: 26px } section.sitemap { padding: 20px calc(50% - 290px) 20px calc(50% - 290px) } section.sitemap ul { width: calc(100% - 20px); padding: 5px; margin: 10px } section.sitemap ul li { width: calc(25% - 10px); margin: 5px } section.sitemap ul li.wide { width: calc(100% - 10px) } section.sitemap ul li h3 { padding: 8px 0px 8px 0px; font-size: 20px; line-height: 20px } section.sitemap ul li a { padding: 6.5px 0px 6.5px 0px; font-size: 15px; line-height: 15px } section.sitemap ul li span { padding: 5px 0px 5px 0px; font-size: 15px; line-height: 26px } section.company ul { padding: 35px calc(50% - 275px) 35px 35px } section.company ul:first-child { padding: 35px 35px 35px calc(50% - 275px) } section.company ul li { width: calc(50% - 10px); margin: 5px } section.company ul:first-child li { width: calc(100% - 10px) } section.company ul li a { padding: 4px 0px 4px 15px; background-size: 9px; font-size: 15px; line-height: 15px } section.company ul li.logo a img { height: 30px } section.company ul li.logo a span { padding: 4px 0px 0px 0px; font-size: 13px; line-height: 13px } section.company ul li.phone a { padding: 1.5px 0px 1.5px 15px; font-size: 18px; line-height: 18px } section.company ul li.mail a { padding: 3px 0px 3px 15px; font-size: 16px; line-height: 16px } footer { padding: 20px calc(50% - 290px) 60px calc(50% - 290px) } footer ul { width: calc(50% - 20px); padding: 5px; margin: 10px } footer ul li { width: calc(25% - 10px); margin: 5px } footer ul li:first-child { width: calc(100% - 10px) } footer ul li a { height: 30px; padding: 11.5px 5px 11.5px 5px; border-radius: 2.5px; font-size: 15px; line-height: 15px } footer hr { width: calc(100% - 40px); height: 1px; margin: 20px } footer div { width: calc(100% - 20px); padding: 10px; margin: 10px; font-size: 15px; line-height: 26px } footer div h4 { font-size: 16px; line-height: 25px } /* Hilfsklassen für die Formatierung im SCMS */ hr.desc_bar { height: 0.5px; margin: 10px 0px 10px 0px } h4.desc_headline { font-size: 16px; line-height: 25px } span.desc_pic { width: calc(50% - 5px); padding: 0% 0% calc(50% - 5px) 0%; border-radius: 5px } span.desc_pic.right { margin: 0px 0px 10px 10px } span.desc_pic.left { margin: 0px 10px 10px 0px } table.desc_four_cols tr td { font-size: 15px; line-height: 26px } ul.desc_list { width: calc(100% + 10px); border-width: 0.5px; margin: 0px -5px 0px -5px } ul.desc_list li { padding: 5.5px 5px 5.5px 25px; border-width: 0.5px; font-size: 15px; line-height: 19px } ul.desc_list li:before { left: 10px; top: 7.5px; width: 5px; padding: 0px 0px 5px 0px } ul.desc_list.ordered li:before { left: 5px; top: 2.5px; width: 15px; padding: 4px 0px 4px 0px; line-height: 7px } ul.desc_cta { width: calc(100% + 20px); padding: 5px; margin: -10px } ul.desc_cta li { margin: 5px } ul.desc_cta li a { padding: 6.5px 10px 6.5px 10px; border-radius: 2.5px; outline-width: 1px !important; font-size: 15px; line-height: 15px } ul.desc_faq_questions { width: calc(100% + 10px); border-width: 0.5px; margin: 0px -5px 0px -5px } ul.desc_faq_questions li { border-width: 0.5px } ul.desc_faq_questions li a { padding: 5.5px 5px 5.5px 25px; font-size: 15px; line-height: 19px } ul.desc_faq_questions li a:before { left: 5px; top: 2.5px; width: 15px; padding: 4px 0px 4px 0px; border-radius: 2.5px; line-height: 7px } ul.desc_faq_answers { width: calc(100% + 10px); margin: 0px -5px 0px -5px } ul.desc_faq_answers li { padding: 10px 5px 30px 5px; border-width: 0.5px; font-size: 15px; line-height: 26px } ul.desc_faq_answers li a.desc_faq_top { left: 5px; bottom: 5px; width: 15px; height: 15px; border-radius: 2.5px } ul.desc_faq_answers li h5 { font-size: 15px; line-height: 26px } } @media only screen and (max-width: 719px) { body { font-size: 16px; line-height: 25px } h1 { font-size: 30px; line-height: 45px } h2 { font-size: 24px; line-height: 40px } h3 { font-size: 20px; line-height: 34px } h4 { font-size: 18px; line-height: 27px } ul, ol { padding: 0px 0px 0px 5px; margin: 0px 0px 0px 5px } i { font-size: 15px; line-height: 26px } table { width: calc(100% + 20px); padding: 5px; margin: -10px } table tr td { display: block; float: left; width: 100%; padding: 5px } select, textarea, input[type=date], input[type=time], input[type=number], input[type=password], input[type=text] { padding: 12px; border-width: 1px; border-radius: 2.5px; font-size: 16px; line-height: 25px } select + label, textarea + label, input[type=date] + label, input[type=time] + label, input[type=number] + label, input[type=password] + label, input[type=text] + label { left: 10px; top: 10px } select:focus + label, textarea:focus + label, input[type=date]:focus + label, input[type=time]:focus + label, input[type=number]:focus + label, input[type=password]:focus + label, input[type=text]:focus + label, select:not([value=""]) + label, textarea:not(:placeholder-shown) + label, input[type=date]:not(:placeholder-shown) + label, input[type=time]:not(:placeholder-shown) + label, input[type=number]:not(:placeholder-shown) + label, input[type=password]:not(:placeholder-shown) + label, input[type=text]:not(:placeholder-shown) + label { padding: 2px 8px 2px 8px; font-size: 15px; line-height: 15px } textarea { height: 240px } button, input[type=submit] { height: 40px; border-radius: 2.5px; font-size: 16px; line-height: 16px } a.buttonlink { padding: 15.5px; border-radius: 2.5px; line-height: 9px } div.fileupload { border-radius: 2.5px } div.fileupload:before { width: 40px; height: 40px } div.fileupload input[type=file] { height: 40px } div.fileupload label { padding: 8px 10px 8px 40px; font-size: 16px; line-height: 21px } div.fileupload label h4 { font-size: 18px; line-height: 18px } ul.filelist li { padding: 5px 0px 0px 0px } ul.filelist li h4 { padding: 0px 0px 2.5px 0px; font-size: 16px; line-height: 25px } ul.filelist li span { height: 5px; border-radius: 2.5px } ul.filelist li div { padding: 2.5px 0px 0px 0px; font-size: 15px; line-height: 26px } div.preloader:before { width: 80px; height: 80px } a.show_cookiemanager { left: 10px; bottom: 10px; width: 30px; height: 30px; padding: 3px; border-radius: 2.5px } a.show_cookiemanager:after { display: none } #wkinfo .box { width: 320px; padding: 35px } #wkinfo .box span { right: 10px; top: 10px; width: 30px; height: 30px } #wkinfo .box div { width: calc(100% - 10px); padding: 20px; margin: 5px } #wkinfo .box a { padding: 10.5px 15px 10.5px 15px; margin: 5px; line-height: 9px } ul.panel { justify-content: flex-end; width: 100%; height: 50px; padding: 5px; background: #ffffff; box-shadow: 0px 0px 5px #00000033 } ul.panel li { margin: 5px } ul.panel li a { width: 30px; height: 30px; border-radius: 2.5px } ul.panel li a:before { display: none } header { padding: 5px calc(50% - 235px) 5px calc(50% - 235px) } header .logo { left: 30%; top: 5px; width: 40% } header .logo img { height: 40px } header .logo span { padding: 2px 0px 2px 0px; font-size: 13px; line-height: 13px } header .cart, header .account, header .switch { margin: 5px } header .cart b, header .account b, header .switch b { width: 30px; height: 30px; border-radius: 2.5px } header .cart span { width: 15px; padding: 4px; background: var(--akzentfarbe2); border-radius: 50%; outline: solid 1px #ffffff; margin: 0px -15px 0px 0px; color: #ffffff; font-size: 15px; line-height: 15px; text-align: center } header .cart span:before, header .cart span:after, header .account span, header .switch span { display: none } header form { width: calc(100% - 10px); margin: 5px } header form input[type=text] { padding: 12px } header form input[type=image] { right: 5px; top: 5px; width: 30px; height: 30px; padding: 7.5px; border-radius: 1px } nav ul { padding: 15px calc(50% - 235px) 65px calc(50% - 235px) } nav ul:first-child { padding: 115px calc(50% - 235px) 15px calc(50% - 235px) } nav ul li { width: calc(100% - 10px); padding: 0px 30px 0px 30px; margin: 0px 5px 0px 5px } nav ul li a { padding: 9px 0px 9px 0px; font-size: 18px; line-height: 18px } nav ul li span { width: 30px; height: 30px } nav ul li ul { width: calc(100% + 10px); padding: 5px; margin: 0px -5px 0px -5px } nav ul li ul li a { padding: 5.5px 0px 5.5px 0px; font-size: 16px; line-height: 16px } section.features { padding: 0px calc(50% - 240px) 0px calc(50% - 240px) } section.features ul { padding: 7.5px 2.5px 7.5px 2.5px } section.features ul li { margin: 2.5px } section.features ul li.check { display: none } section.features ul li a { padding: 1.5px 5px 1.5px 15px; font-size: 15px; line-height: 15px; font-weight: var(--schriftstaerke_normal) } section.themes { height: 300px; padding: 0px calc(50% - 240px) 0px calc(50% - 240px) } section.themes .bx-pager { padding: 15px } section.themes .bx-pager .bx-pager-item { margin: 5px } section.themes .bx-pager .bx-pager-item a { width: 10px; height: 10px; border-radius: 5px } section.themes .bx-pager .bx-pager-item a.active { width: 30px } section.themes .bx-wrapper .bx-viewport .slider .theme div { width: 320px; padding: 15px } section.themes .bx-wrapper .bx-viewport .slider .theme div h4 { width: calc(100% - 10px); margin: 5px; font-size: 16px; line-height: 16px } section.themes .bx-wrapper .bx-viewport .slider .theme div h2 { width: calc(100% - 10px); margin: 5px; font-size: 30px; line-height: 30px } section.themes .bx-wrapper .bx-viewport .slider .theme div a { padding: 10.5px 15px 10.5px 15px; border-radius: 2.5px; outline-width: 1px; margin: 15px 5px 5px 5px; line-height: 9px } section.themes .bx-wrapper .bx-viewport .slider .theme div.hidden h4, section.themes .bx-wrapper .bx-viewport .slider .theme div.hidden h2, section.themes .bx-wrapper .bx-viewport .slider .theme div.hidden a { filter: opacity(0) blur(10px) } section.themes .bx-wrapper .bx-viewport .slider .theme picture { left: -50%; width: 200% } section.category { height: 200px } section.category .cat_short { left: calc(50% - 160px); width: 320px; padding: 15px } section.category .cat_short .cat_short_headline { width: calc(100% - 10px); margin: 5px; font-size: 30px; line-height: 30px } section.category .cat_short .cat_short_text { width: calc(100% - 10px); margin: 5px; font-size: 16px; line-height: 25px } section.category .cat_short .cat_short_link { padding: 10.5px 15px 10.5px 15px; border-radius: 2.5px; outline-width: 1px; margin: 15px 5px 5px 5px; line-height: 9px } section.stripe { padding: 10px calc(50% - 140px) 10px calc(50% - 140px) } section.stripe h4 { width: 100%; margin: 0px; font-size: 16px; line-height: 25px; white-space: normal } section.stripe span { width: 100%; margin: 0px } section.stripe span ul { width: 100% } section.stripe span ul li { width: 100%; white-space: normal } section.content { padding: 10px calc(50% - 160px) 10px calc(50% - 160px) } section.content.dark { padding: 0px calc(50% - 160px) 0px calc(50% - 160px) } section.content .column { padding: 10px } section.content .column.full, section.content .column.ultrawide, section.content .column.wide, section.content .column.medium, section.content .column.slim, section.content .column.ultraslim { width: 100% } section.content .column hr { width: calc(100% - 20px); height: 1px; margin: 10px } section.content .column picture { width: calc(100% - 20px); padding: 0% 0% calc(75% - 15px) 0%; border-radius: 5px; margin: 10px } section.content .column .entry { width: calc(100% - 20px); margin: 10px } section.content .column .entry#typewriter h2 { font-size: 24px; line-height: 24px } section.content .column .entry#typewriter h4 { font-size: 15px; line-height: 26px } section.content .column .entry#notfound h2 { font-size: 20px; line-height: 26px } section.content .column .entry#notfound h4 { font-size: 16px; line-height: 21px } section.content .column .entry table tr td input[type=image] { right: 10px; top: 10px; width: 30px; height: 30px; padding: 7.5px; border-radius: 1px } section.content .column .cta { padding: 5px } section.content .column .cta li { float: left !important; margin: 5px } section.content .column .cta li a { padding: 10.5px 15px 10.5px 15px; border-radius: 2.5px; outline-width: 1px; line-height: 9px } section.content .column .osm { width: calc(100% - 20px); padding: 0% 0% calc(100% - 20px) 0%; margin: 10px; font-size: 15px; line-height: 26px } section.content .column .osm h4 { font-size: 16px; line-height: 25px } section.content .column .desc { padding: 5px } section.content .column .desc h3 { width: calc(100% - 10px); padding: 6.5px 5px 6.5px 20px; border-radius: 2.5px; margin: 5px; font-size: 15px; line-height: 15px } section.content .column .desc h3:before { left: 5px; top: 5px; width: 10px; height: 10px } section.content .column .desc div { width: calc(100% - 10px); margin: 5px; font-size: 15px; line-height: 26px } section.content .column .downloads { padding: 5px } section.content .column .downloads a { padding: 6.5px 5px 6.5px 20px; background-position: 5px center; background-size: 10px; border-radius: 2.5px; margin: 5px; font-size: 15px; line-height: 15px } section.content .kundenkonto { width: calc(100% - 40px); padding: 0px; box-shadow: none; margin: 20px } section.content .kundenkonto h2 { margin: 0px 0px 20px 0px; font-size: 24px; line-height: 32px } section.content .kundenkonto table tr td { padding: 5px 0px 5px 0px !important } section.content .kundenkonto table tr td:first-child { width: 100% } section.content .kundenkonto table tr td b { white-space: normal; font-size: 20px } section.content .kundenkonto .tabellenkopf, section.content .kundenkonto .tabellenkopf_over { display: none } section.content .kundenkonto .pass_show { font-size: 16px !important } section.content .kundenkonto .kundenkonto_funktionen { padding: 0px 0px 20px 0px; border-width: 1px; margin: 0px 0px 20px 0px } section.content .kundenkonto .kundenkonto_funktionen div a { padding: 11.5px 20px 11.5px 20px; border-radius: 2.5px; font-size: 15px; line-height: 15px } section.content .kundenkonto .kundenkonto_funktionen div form button { height: 30px; padding: 11.5px 20px 11.5px 20px; font-size: 15px; line-height: 15px } section.content .path { width: calc(100% - 40px); margin: 20px } section.content .orderprocess { width: calc(100% - 40px); padding: 0px; box-shadow: none; margin: 20px } section.content .orderprocess table tr td { padding: 5px 0px 5px 0px !important } section.content .orderprocess table tr td input[name=customer_strassenr], section.content .orderprocess table tr td input[name=customer_l_strassenr] { width: calc(25% - 10px); margin: 0px 0px 0px 10px !important } section.content .orderprocess table tr td input[name=customer_ort], section.content .orderprocess table tr td input[name=customer_l_ort] { width: calc(75% - 10px); margin: 0px 0px 0px 10px !important } section.content .orderprocess .schrittfeld_done .schrittfeld a, section.content .orderprocess .schrittfeld_aktiv .schrittfeld a, section.content .orderprocess .schrittfeld_inaktiv .schrittfeld { padding: 10px 0px 0px 0px; border-width: 1px; font-size: 15px; line-height: 15px } section.content .orderprocess .schrittfeld span { font-size: 16px; line-height: 16px } section.content .orderprocess .schrittbutton { width: 120px !important; height: 40px !important; font-size: 16px; line-height: 16px } section.content .orderprocess .schrittbutton span { font-size: 15px; line-height: 15px } section.content .orderprocess .status { padding: 0px !important; border-width: 10px } section.content .orderprocess .status0, section.content .orderprocess .status25, section.content .orderprocess .status50, section.content .orderprocess .status75, section.content .orderprocess .status100 { height: 10px } section.content .orderprocess .tabellenkopf { width: 100%; padding: 5px 0px 5px 0px; font-size: 20px; line-height: 34px } section.content .orderprocess .tabellenheader { display: none } section.content .orderprocess .tabellenzeile, section.content .orderprocess .tabelleninhalt, section.content .orderprocess .tabellenfuss { width: 100%; padding: 5px 0px 5px 0px } section.content .orderprocess .tabelleninhalt_gesamtpreis, section.content .orderprocess .tabellenfuss_gesamtpreis { width: 100%; padding: 5px 0px 5px 0px; font-size: 18px } section.content .orderprocess .tabellenfuss[colspan="3"], section.content .orderprocess .tabellenfuss_gesamtpreis[colspan="3"] { width: 60% } section.content .orderprocess .pic { display: none } section.content .orderprocess .name { width: 50% } section.content .orderprocess .einzel { width: 10% } section.content .orderprocess .netto { width: 10% } section.content .orderprocess .gesamt { width: 15% } section.content .orderprocess .loeschen { width: 15% } section.content .orderprocess .buttonfarbe { max-width: 280px; height: 30px; padding: 3px; border-radius: 2.5px } section.content .orderprocess .pass_show { font-size: 15px !important } section.content .orderprocess .voucher { padding: 20px 0px 20px 0px; border-width: 1px; margin: 20px 0px 20px 0px } section.content .orderprocess .voucher b { font-size: 20px; line-height: 34px } section.content .orderprocess .voucher input[type=text] { width: calc(60% - 10px); padding: 7px; margin: 10px 10px 0px 0px !important } section.content .orderprocess .voucher button { width: 40% !important; padding: 11.5px !important; margin: 10px 0px 0px 0px !important; font-size: 15px; line-height: 15px } section.content .orderprocess .detail_article_selector { width: 120px; margin: 0px 10px 10px 0px } section.cats { padding: 5px calc(50% - 175px) 5px calc(50% - 175px); margin: -10px 0px -10px 0px } section.cats a { width: calc(33.3333% - 10px); padding: 0% 0% calc(40% - 10px) 0%; margin: 5px } section.cats a div { padding: 10px } section.cats a div h3 { font-size: 16px; line-height: 21px } section.cats a div:after { font-size: 15px; line-height: 26px } section.articles { padding: 5px calc(50% - 175px) 5px calc(50% - 175px); margin: -10px 0px -10px 0px } section.articles a { width: calc(50% - 10px); margin: 5px } section.articles a div { padding: 10px } section.articles a div h3 { font-size: 18px; line-height: 21px } section.articles a div h4 { font-size: 16px; line-height: 25px } section.articles a div ul { margin: 5px 0px 0px 0px; font-size: 15px; line-height: 26px } form.article_detail { padding: 0% calc(50% - 150px) 0% calc(50% - 150px); margin: -20px 0px -20px 0px } form.article_detail .column { position: static !important; float: left; width: calc(100% - 20px) !important; padding: 5px; margin: 10px !important } form.article_detail .column hr { width: calc(100% - 10px); height: 1px; margin: 5px } form.article_detail .column .thumbs { display: none } form.article_detail .column .pics { width: 270px; height: 270px } form.article_detail .column .pics .bx-prev { left: calc(50% - 10px); top: 5px; width: 20px; height: 20px; border-radius: 2.5px } form.article_detail .column .pics .bx-next { left: calc(50% - 10px); bottom: 5px; width: 20px; height: 20px; border-radius: 2.5px } form.article_detail .column .pics ul li { width: 270px; height: 270px; padding: 5px } form.article_detail .column .pics ul li a:before { width: 20px; height: 20px; border-radius: 2.5px } form.article_detail .column .entry { width: calc(100% - 10px); margin: 5px } form.article_detail .column .entry h2 { font-size: 16px; line-height: 25px } form.article_detail .column .entry h3 { font-size: 18px; line-height: 27px } form.article_detail .column .entry table tr td { display: table-cell; float: none; width: auto } form.article_detail .column .entry table tr td u { font-size: 15px; line-height: 26px } form.article_detail .column .entry .acrobat, form.article_detail .column .entry .request, form.article_detail .column .entry .cart { height: 40px; padding: 15.5px 13px 15.5px 40px; background-position: 13px center; background-size: 14px; font-size: 16px; line-height: 16px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups { width: calc(100% + 10px); margin: 5px -5px 5px -5px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups ul li { margin: 5px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups ul li a { padding: 10.5px 15px 10.5px 15px; border-radius: 2.5px; line-height: 9px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-nav { padding: 2.5px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-nav li { flex-grow: 0; margin: 2.5px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-nav li a { padding: 10.5px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-accordion-title { width: calc(100% - 10px); margin: 5px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .r-tabs-accordion-title a { padding: 10.5px; border-radius: 2.5px; line-height: 9px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento { width: 100%; padding: 5px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionheader { left: 10px; padding: 2px 8px 2px 8px; font-size: 15px; line-height: 15px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .collapse span { height: 40px !important; border-width: 1px !important; border-radius: 2.5px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .collapse span a { padding: 4px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .collapse span a .thumbnail { width: 30px; height: 30px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .collapse span a .subject { line-height: 18px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .radiobuttons-wrapper, form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .checkbox-wrapper, form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .multiquantity-wrapper { margin: 10px 0px 0px 0px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .multiquantity-wrapper .multiquantity { padding: 20px 0px 20px 0px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .options .configento .optionmain .multiquantity-wrapper .multiquantity .qty { width: 60px; max-width: 60px; margin: -10px 10px -10px 0px } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .footer { padding: 2.5px !important } form.article_detail .column .entry #configento-form #configurator1 #configurator1-groups .footer button { width: calc(50% - 5px) !important; margin: 2.5px !important } form.article_detail .column fieldset field { width: 100%; padding: 5px 25px 5px 5px } form.article_detail .column fieldset field .download { height: 40px; padding: 8px 10px 8px 40px; background-position: 10px center; border-radius: 2.5px; font-size: 16px; line-height: 21px } form.article_detail .column fieldset field .download h4 { font-size: 18px; line-height: 18px } form.article_detail .column fieldset legend { right: 0px; top: 15px; outline-width: 1px } form.article_detail .column fieldset legend:before { line-height: 9px } form.article_detail .column fieldset legend div { right: 40px; bottom: 50%; width: 140px; padding: 10px; border-radius: 2.5px; font-size: 15px; line-height: 26px; transform: translateY(50%) } form.article_detail .column fieldset legend div:before { right: -4px; bottom: 50%; width: 8px; height: 8px; transform: translateY(50%) rotate(45deg) } section.choice { padding: 20px calc(50% - 150px) 20px calc(50% - 150px) } section.choice div { padding: 10px 10px 20px 10px } section.choice div h2 { font-size: 30px; line-height: 45px } section.choice div h3 { font-size: 18px; line-height: 27px } section.choice ul { padding: 10px 40px 30px 40px } section.choice ul li { width: 100% !important; margin: 0px !important; transform: scale(0) !important } section.choice ul li a { padding: 25px 25px 65px 25px !important} section.choice ul li a i { width: calc(100% - 70px); padding: 0% 0% calc(100% - 70px) 0%; margin: 5px 35px 5px 35px } section.choice ul li a h4 { width: calc(100% - 10px); margin: 5px; font-size: 16px; line-height: 21px } section.choice ul li a span { width: calc(100% - 10px); margin: 5px; font-size: 24px; line-height: 32px } section.choice ul li a b { bottom: 30px !important; padding: 10.5px 15px 10.5px 15px; border-radius: 2.5px; outline-width: 1px; line-height: 9px } section.choice ul li:nth-child(1) a { border-radius: 5px 5px 0px 0px } section.choice ul li:nth-child(2) a { border-radius: 0px } section.choice ul li:nth-child(3) a { border-radius: 0px 0px 5px 5px } section.promo { padding: 0px 0px 50px 0px } section.promo .bx-pager { padding: 15px } section.promo .bx-pager .bx-pager-item { margin: 5px } section.promo .bx-pager .bx-pager-item a { width: 10px; height: 10px; border-radius: 5px } section.promo .bx-pager .bx-pager-item a.active { width: 30px } section.promo .bx-prev { left: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 2.5px } section.promo .bx-next { right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 2.5px } section.promo .slider { margin: 0% calc(50% - 140px) 0% calc(50% - 140px) } section.promo .slider a { width: 280px !important; padding: 30px } section.promo .slider a picture { width: calc(100% - 10px); padding: 0% 0% calc(75% - 7.5px) 0%; margin: 5px } section.promo .slider a div { width: calc(100% - 10px); margin: 5px } section.promo .slider a div h3 { font-size: 18px; line-height: 21px } section.promo .slider a div h4 { font-size: 16px; line-height: 25px } section.promo .slider a div ul { margin: 10px 0px 0px 0px; font-size: 15px; line-height: 26px } section.sitemap { padding: 0px calc(50% - 160px) 0px calc(50% - 160px) } section.sitemap ul { width: 100%; padding: 15px; margin: 0px } section.sitemap ul li { width: calc(100% - 10px) !important; margin: 5px } section.sitemap ul li h3 { padding: 6px 0px 6px 0px; font-size: 24px; line-height: 24px } section.sitemap ul li a { padding: 5.5px 0px 5.5px 0px; line-height: 9px } section.sitemap ul li span { padding: 6px 0px 6px 0px } section.company ul { width: 100%; padding: 15px calc(50% - 145px) 15px calc(50% - 145px) !important } section.company ul li { width: calc(50% - 10px); margin: 5px } section.company ul:first-child li { width: calc(100% - 10px) } section.company ul li a { padding: 5.5px 0px 5.5px 20px; background-size: 12px; line-height: 9px } section.company ul li.logo a img { height: 45px } section.company ul li.logo a span { padding: 6px 0px 0px 0px; font-size: 16px; line-height: 16px } section.company ul li.phone a { padding: 3px 0px 3px 20px; font-size: 20px; line-height: 20px } section.company ul li.mail a { padding: 4px 0px 4px 20px; font-size: 18px; line-height: 18px } footer { padding: 10px calc(50% - 150px) 60px calc(50% - 150px) } footer ul { width: 100%; padding: 5px; margin: 0px } footer ul li { width: calc(25% - 10px); margin: 5px } footer ul li:first-child { width: calc(100% - 10px) } footer ul li a { height: 30px; padding: 11.5px 5px 11.5px 5px; border-radius: 2.5px; font-size: 15px; line-height: 15px } footer hr { width: calc(100% - 20px); height: 1px; margin: 10px } footer div { width: 100%; padding: 10px; margin: 0px; font-size: 15px; line-height: 26px } footer div h4 { font-size: 16px; line-height: 25px } /* Hilfsklassen für die Formatierung im SCMS */ hr.desc_bar { height: 0.5px; margin: 10px 0px 10px 0px } h4.desc_headline { font-size: 16px; line-height: 25px } span.desc_pic { width: 100%; padding: 0% 0% 100% 0%; border-radius: 5px } span.desc_pic.right, span.desc_pic.left { margin: 0px 0px 10px 0px } table.desc_four_cols tr td { width: 100%; font-size: 15px; line-height: 26px } ul.desc_list { width: calc(100% + 10px); border-width: 0.5px; margin: 0px -5px 0px -5px } ul.desc_list li { padding: 5.5px 5px 5.5px 25px; border-width: 0.5px; font-size: 15px; line-height: 19px } ul.desc_list li:before { left: 10px; top: 7.5px; width: 5px; padding: 0px 0px 5px 0px } ul.desc_list.ordered li:before { left: 5px; top: 2.5px; width: 15px; padding: 4px 0px 4px 0px; line-height: 7px } ul.desc_cta { width: calc(100% + 20px); padding: 5px; margin: -10px } ul.desc_cta li { margin: 5px } ul.desc_cta li a { padding: 6.5px 10px 6.5px 10px; border-radius: 2.5px; outline-width: 1px !important; font-size: 15px; line-height: 15px } ul.desc_faq_questions { width: calc(100% + 10px); border-width: 0.5px; margin: 0px -5px 0px -5px } ul.desc_faq_questions li { border-width: 0.5px } ul.desc_faq_questions li a { padding: 5.5px 5px 5.5px 25px; font-size: 15px; line-height: 19px } ul.desc_faq_questions li a:before { left: 5px; top: 2.5px; width: 15px; padding: 4px 0px 4px 0px; border-radius: 2.5px; line-height: 7px } ul.desc_faq_answers { width: calc(100% + 10px); margin: 0px -5px 0px -5px } ul.desc_faq_answers li { padding: 10px 5px 30px 5px; border-width: 0.5px; font-size: 15px; line-height: 26px } ul.desc_faq_answers li a.desc_faq_top { left: 5px; bottom: 5px; width: 15px; height: 15px; border-radius: 2.5px } ul.desc_faq_answers li h5 { font-size: 15px; line-height: 26px } }