/* montserrat-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('https://diarin.de/fonts/montserrat-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: url('https://diarin.de/fonts/montserrat-v29-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }/* DIARIN Stylesheets */ html, body { margin:0; padding:0; font-family: 'Montserrat'; color: #454749; background-color:#F3F6F8; } * {outline: none; -webkit-tap-highlight-color: transparent;} /* ALlgemeine Definitionen: font-size, line-height, font-weight, color, margin-top, margin-bottom */ H1, H2 {margin: 60px 0px 30px 0px; height: auto; width: 100%; font-weight:600; font-size: 40px; line-height: 50px; color: #18418D; text-transform: uppercase; letter-spacing: -1px;} H1:first-child, H2:first-child, H3:first-child, H4:first-child {margin-top: 0px;} H1 > H2 {} H3 {margin: 40px 0px 20px 0px; font-size: 30px; line-height: 120%; color: #18418D; letter-spacing: -0.6px; font-weight:600;} /*H4 {margin: 20px 0px 20px 0px; font-size: 20px; line-height: 120%; color: #18418D; font-weight: normal; height: 30px;}*/ H4 {margin: 20px 0px 20px 0px; font-size: 20px; line-height: 120%; color: #18418D; font-weight: 600; letter-spacing: -0.6px;} /*H4.price {margin:0px;padding:10px 0 0 0; font-size: 32px; line-height:42px; font-weight:400; color:#000000;}*/ H4.price {margin:0px; font-size: 32px; line-height:42px; font-weight:700; color:#18418D;} H4.price SPAN.uvp {margin-left: 10px; font-size: calc(75%); color:#00000099; text-decoration: line-through;} H5 {margin: 30px 0px 20px 0px; font-size: 16px; line-height: 24px; font-weight: 600; color:#333333; text-transform: uppercase;} /*H4:last-child {padding: 0px 0px 40px 0px;}*/ P {margin: 15px 0px 15px 0px; padding: 0px; font-size: 18px; line-height: 150%; width: 100%; height: auto; text-align: justify; color: #454749; hyphens: auto;} P:first-child {margin: 0 0 15px 0px;} /*P:last-child {margin: 15px 0 0 0;}*/ P SPAN.img-container {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; white-space: nowrap; vertical-align: middle; display: inline-block;} UL {} UL>LI {font-size: 18px; line-height: 150%; hyphens: auto;} INPUT, SELECT, TEXTAREA {padding:5px 10px 5px 10px; box-sizing: border-box; border: 1px solid #18448D33; font-size: 18px;} TEXTAREA {height:100px;} SPAN {} FORM {font-size: 18px;} FORM > DIV {display: flex; justify-content: space-between; align-items: center;} .lieferstatus{display: inline-block; width: 15px; height: 15px;} .magenta{color: #E6007E;} .active {color: #E6007E;} .highlight {color: #E6007E;} .white {} .black {} .blue {color:#18418D;} .bold {font-weight: 600;} .fehler {color:#E6007E;} .desktop-only {} .mobile-only {display: none;} .hidden {display: none;} .klein {font-size: 14px;} .flex {display: flex;} .center{text-align: center;} .align-center {display: flex; align-items: center;} .w66{width: 66%;} .w33{width: 33%;} .quantity {text-transform: lowercase; font-weight: normal;} SPAN.brand {color: #E6007E; font-size: 120%;} SPAN.brand > SPAN {text-transform: lowercase; font-size: 96%;} SPAN.brand > SPAN > SPAN {color:#18418D;} .p-pt {padding-top: 40px;} .pt-zero {padding-top: 0px;} .pt-big {padding-top: 50px;} .pt-med {padding-top: 25px;} .pt-sml {padding-top: 10px;} .pt-50 {padding-top: 50px;} .pb-0 {padding-bottom: 0;} .pb-40 {padding-bottom: 40px;} .pb-big {padding-bottom: 40px;} .uppercase {text-transform: uppercase; letter-spacing: 1px;} A {color:#18418D; text-decoration:none;} A:hover {color:#E6007E;} /* schlichter Button */ A.button, INPUT.button {margin: 20px 0px 20px 0px;padding: 10px 30px 10px 30px;align-items: center;background-color: #F0F0F0;border: 1px solid rgba(0, 0, 0, 0.1);box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.25);box-sizing: border-box;color: #454749;cursor: pointer;display: inline-flex;font-size: 16px;font-weight: 600;justify-content: center;line-height: 1.0;position: relative;text-align: center; text-decoration: none;user-select: none;-webkit-user-select: none;touch-action: manipulation;} A.button:hover, A.button:focus, INPUT.button:hover, INPUT.button:focus {background-color: #E3E5E7;} /* auffälliger Button */ A.submit, INPUT.submit, BUTTON.submit {margin: 20px 0 20px 0; padding: 10px 30px 10px 30px; max-width: min(100%, 400px); max-height: 50px; position: relative;outline: 0; box-sizing: border-box; border: none;color: #FFFFFF;cursor: pointer;display: inline-block;font-size: 16px;font-weight: 600;line-height: 1.0;letter-spacing: 1px; outline: transparent;text-align: center;text-decoration: none;box-shadow:0px 0px 15px 5px rgba(0,0,0,0.25); user-select: none;-webkit-user-select: none;touch-action: manipulation;white-space: nowrap;background-color: #18418D;} A.submit.disabled, INPUT.submit.disabled, BUTTON.submit.disabled {background-color: rgba(180, 180, 180, 0.3);} A.submit:hover, A.submit:focus, INPUT.submit:hover, INPUT.submit:focus, BUTTON.submit:hover, BUTTON.submit:focus {background-color: #E6007E;} A.submit.disabled:hover, A.submit.disabled:focus, INPUT.submit.disabled:hover, INPUT.submit.disabled:focus, BUTTON.submit.disabled:hover, BUTTON.submit.disabled:focus {background-color: rgba(150, 150, 150, 0.3);} A.center, INPUT.center {left: 50%; transform: translateX(-50%);} A.checkout-abort {margin: 50px 0 50px 0; font-size: 12px; line-height: 150%; text-decoration: none; color: #454749; display: inline-block; transition: color 0.5s ease;} A.checkout-abort:hover {color: #E6007E;} A.checkout-abort SPAN {margin-right: 5px; width: 16px; height: 16px; display: inline-flex; color: #454749; font-size: 12px; line-height: 150%; align-items: center; justify-content: center; text-align: center; background-color: #F7F7F7; box-sizing: border-box; border-radius: 50%; transition: color 0.5s ease, background-image 0.5s ease;} A.checkout-abort:hover SPAN {color: #F7F7F7; background-color: #E6007E;} A.back {padding: 10px 0 10px 30px; max-width: 200px; display: block; font-size: 18px; line-height: 24px; font-weight: 600; white-space: nowrap; color: #18418D; text-decoration: none; background-image: url("../images/chevron-left.svg"); background-repeat: no-repeat; background-position: left center; transition: color 0.5s ease, background-image 0.5s ease;} A.back:hover {color: #E6007E; background-image: url("../images/chevron-left-active.svg");} /* Formulare */ FORM LABEL > INPUT, FORM LABEL > SELECT {margin-top: 5px;} FORM DIV.two-columns {display: flex; align-items: flex-start;} FORM.flex {display: flex; flex-direction: column;} FORM.flex INPUT[type="submit"]{margin-left: auto;} UL.icons {padding-left:0px; margin-left:0px;} UL>li.haken-magenta {list-style:none; margin:0px; padding-left:30px; background-image:url(../images/icon-haken-magenta-v2.svg); background-repeat:no-repeat; background-position:0px 0px; background-size:25px auto;} UL>li.haken-blau {list-style:none; margin:0px; padding-left:30px; background-image:url(../images/icon-haken-blau.svg); background-repeat:no-repeat; background-position:0px 0px; background-size:25px auto;} UL>li.zahlung {list-style:none; margin:0px; padding-left:50px; padding-top:5px; padding-bottom:10px; background-image:url(../images/li-icon-zahlung.png); background-repeat:no-repeat; background-position:0px 0px; background-size:40px auto;} UL>li.login {list-style:none; margin:0px; padding-left:50px; padding-top:5px; padding-bottom:10px; background-image:url(../images/li-icon-login.png); background-repeat:no-repeat; background-position:0px 0px; background-size:40px auto;} UL>li.fachinfos {list-style:none; margin:0px; padding-left:50px; padding-top:5px; padding-bottom:10px; background-image:url(../images/li-icon-fachinfos.png); background-repeat:no-repeat; background-position:0px 0px; background-size:40px auto;} UL>li.lieferung {list-style:none; margin:0px; padding-left:50px; padding-top:5px; padding-bottom:10px; background-image:url(../images/li-icon-lieferung.png); background-repeat:no-repeat; background-position:0px 0px; background-size:40px auto;} UL>li.retoure {list-style:none; margin:0px; padding-left:50px; padding-top:5px; padding-bottom:10px; background-image:url(../images/li-icon-retoure.png); background-repeat:no-repeat; background-position:0px 0px; background-size:40px auto;} UL>li.schulung {list-style:none; margin:0px; padding-left:50px; padding-top:5px; padding-bottom:10px; background-image:url(../images/li-icon-schulung.png); background-repeat:no-repeat; background-position:0px 0px; background-size:40px auto;} UL>li.marketing {list-style:none; margin:0px; padding-left:50px; padding-top:5px; padding-bottom:10px; background-image:url(../images/li-icon-marketing.png); background-repeat:no-repeat; background-position:0px 0px; background-size:40px auto;} UL>li.konto {list-style:none; margin:0px; padding-left:50px; padding-top:5px; padding-bottom:10px; background-image:url(../images/li-icon-konto.png); background-repeat:no-repeat; background-position:0px 0px; background-size:40px auto;} UL>li.blanko {list-style:none; margin:0px;} UL>li IMG.inline-icon {position:absolute; margin-left:-30px;} UL.checkbox {padding-left:40px; margin-left:0px;} UL.checkbox>LI.checkbox {padding:0px 0px 10px 35px; margin:0px; list-style:none; background-image:url(../images/icon-checkbox-v2.svg); background-repeat:no-repeat; background-position:0px 0px; background-size:25px auto;} UL.checkbox>LI.checkbox.aktiv {background-image:url(../images/icon-checkbox-checked-blau-v2.svg);} UL.checkbox>LI.checkbox:hover {color:#18418D; cursor:pointer; background-image:url(../images/icon-checkbox-checked-grey-v2.svg);} H4.haken-magenta {padding-left:40px; background-image:url(../images/icon-haken-magenta-v2.svg); background-repeat:no-repeat; background-position:0px -3px; background-size:30px auto;} FORM.checkout INPUT[type="checkbox"] {width: 25px; height: 25px;} /* FORM.checkout DIV.two-columns:last-child DIV:last-child {display: flex; align-self: baseline;} */ /* FORM.checkout DIV.two-columns:last-child DIV:last-child INPUT.submit {margin: 0 0 0 auto;} */ /* Tabellen */ TABLE.table_form_adress {margin:0; border:0px; border-spacing:0px; width:100%;} TABLE.table_form_adress TR {} TABLE.table_form_adress TH, TABLE.table_form_adress TD {padding-bottom: 20px; text-align:left; font-weight:normal;} TABLE.table_form_adress TH LABEL {color: #E6007E;} TABLE.table_form_adress TH LABEL.blue {color:#18418D;} TABLE.table_form_adress TD LABEL {color:#18418D;} TABLE.table_form_adress LABEL {display:block; padding-bottom:5px;} TABLE.table_form_adress INPUT, TABLE.table_form_adress SELECT, TABLE.table_form_adress TEXTAREA {width:100%; background-color:#FFFFFF;} TABLE.table_form_adress .teil5050 LABEL {width:47%; float:left;} TABLE.table_form_adress .teil5050 LABEL:not(:first-of-type) {margin-left:6%;} TABLE.table_form_adress .teil30 LABEL {width:30%; float:left;} TABLE.table_form_adress .teil30 LABEL:not(:first-of-type) {margin-left:5%;} /*TABLE.table_form_adress .teil5050 INPUT {width:47%; float:left;}*/ TABLE.table_form_adress .teil5050 INPUT:not(:first-of-type) {margin-left:6%;} TABLE.table_form_adress .teil30 INPUT:not(:first-of-type) {margin-left:5%;} /*TABLE.table_form_adress .teil5050 SELECT {width:47%; float:left;}*/ TABLE.table_form_adress .teil5050 SELECT:not(:first-of-type) {margin-left:6%;} TABLE.table_form_adress .teil30 SELECT:not(:first-of-type) {margin-left:5%;} TABLE.table_form_adress .teil2575 LABEL:nth-of-type(1) {width: 23.5%; float: left; clear: none;} TABLE.table_form_adress .teil2575 LABEL:nth-of-type(2) {width: 70.5%; float: left; clear: none;} TABLE.table_form_adress .teil2575 LABEL:not(:first-of-type) {margin-left: 6%;} TABLE.table_form_adress TEXTAREA {width: 100%; max-width: 100%; resize: vertical;} TABLE.table_form_adress INPUT[type="number"]::-webkit-inner-spin-button, TABLE.table_form_adress INPUT[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none;} TABLE.table_form_adress INPUT[type="number"] {-moz-appearance: textfield;} TABLE.plus-three-rows {padding-bottom: 175px;} TABLE.table_form_newsletter {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border-collapse: collapse;} TABLE.table_form_newsletter TH {padding: 10px; text-align: center;} TABLE.table_form_newsletter TD {padding: 10px; text-align: left;} TABLE.table_form_newsletter INPUT[type="email"] {width: 100%;} TABLE.table_form_newsletter INPUT[type="radio"] {margin: 0 auto; vertical-align: middle; display: flex} TABLE.table_form_newsletter INPUT[type="submit"] {margin: 0 auto; display: block;} TABLE.table_product_data {margin: 0; padding: 0; width: 100%;} /*TABLE.table_product_data.half {width: 50%;}*/ /*TABLE.table_product_data.full {width: 100%;}*/ TABLE.table_product_data TH {padding: 10px 10px 0px 10px; width: 33.3%; text-align: left; color: #18418D; font-size: 18px; line-height: 150%} TABLE.table_product_data TH:first-child {padding-left: 0;} TABLE.table_product_data TH.img {text-align: center;} /*TABLE.table_product_data TH > A > IMG {padding-left: 5px; max-width: 18px; height: auto; background-image: url('../images/info.svg'); }*/ TABLE.table_product_data TH > A {padding-right: 25px;background-image: url('../images/info.svg'); background-size: auto 90%;background-position: right center;background-repeat: no-repeat;background-color: transparent;} TABLE.table_product_data TH > A:hover {background-image: url('../images/info-active.svg')} /*TABLE.table_product_data TH > A > IMG {padding-left: 5px; max-width: 18px; height: auto;}*/ TABLE.table_product_data TD {padding: 0px 10px 10px 10px;} TABLE.table_product_data TD:first-child {padding-left: 0;} TABLE.effects {margin-top: 50px; margin-bottom: 50px; width: 100%; border-collapse: separate;} TABLE.effects THEAD TH {border:0px; background:transparent; padding:0px 0px 20px 0px; font-weight:bold; text-transform: uppercase; color:#E6007E; font-size:30px; line-height:120%; letter-spacing:-0.6px;} TABLE.effects TH {background-color:#FFFFFF; padding: 20px 10px; color: #18418D; font-size: 18px; line-height: 150%; text-align: left; border:4px solid #e7ecf3;} TABLE.effects TD {vertical-align: top; font-size: 18px; line-height: 150%; padding: 10px 10px; background-color:#FFFFFF; color:#18418D;} TABLE.effects TD:nth-child(1) {width: 33%; font-weight:bold; border:4px solid #e7ecf3; border-right-width:2px;} TABLE.effects TD:nth-child(2) {width: 66%; padding:0px; border:4px solid #e7ecf3; border-left-width:2px;} TABLE.effects UL {margin:0px; padding:0px; display:block;} TABLE.effects UL LI {margin:0px; padding:5px 10px 5px 10px; display:block; list-style:none;} TABLE.effects UL LI:nth-of-type(2n+0) {background-color:#e7ecf3;} TABLE.effects UL LI:first-of-type {padding-top:10px;} TABLE.effects UL LI:last-of-type {padding-bottom:10px} TABLE.effects TR:nth-of-type(2n+1) TD {background-color:#18418D; color:#FFFFFF;} TABLE.effects TR:nth-of-type(2n+1) TD {border-color:#4667a4;} TABLE.effects TR:nth-of-type(2n+1) UL LI:nth-of-type(2n+0) {background-color:#4667a4;} TABLE.ingredients {margin-top: 50px; margin-bottom: 20px; width: 100%; border-collapse: separate;} TABLE.ingredients TH {padding-bottom: 20px; color: #18418D; font-size: 18px; line-height: 150%; text-align: left;} TABLE.ingredients TD {vertical-align: top; font-size: 14px; line-height: 150%;} TABLE.ingredients TD:nth-child(1), TABLE.ingredients TD:nth-child(2) {width: 50%;} /*TABLE.ingredients TD:nth-child(2),TABLE.ingredients TD:nth-child(3){width: 31.5%;}*/ TABLE.ingredients TH:first-child, TABLE.ingredients TD:first-child {padding-right: 30px;} TABLE.info {margin:20px 0px 10px 0px; border-spacing:0px; border:0px;} TABLE.info TH {border-bottom:3px solid #18418D; padding:3px 10px 3px 0px; vertical-align:top; text-align:left; font-size:18px; line-height:24px; color:#525252; font-weight:600;} TABLE.info TD {border-bottom:1px solid #18418D; padding:3px 10px 3px 0px; vertical-align:top; text-align:left; font-size:18px; line-height:22px; color:#525252;} TABLE.info TR:last-child TD {border-bottom:0px;} TABLE.info TR:last-child TH {border-bottom:0px;} TABLE.info TD.r {text-align:right;} TABLE.info TH.r {text-align:right;} TABLE.warenkorb {margin:20px 0px 20px 0px; border-spacing:0px; border:0px; width:100%;border-bottom:1px solid #18418D;} TABLE.warenkorb th {border-top:1px solid #18418D; border-bottom:0px; padding:6px 10px 6px 0px; vertical-align:middle; text-align:left; font-size:15px; line-height:22px; color:#525252; position: relative; font-weight: 600;} TABLE.warenkorb td {border-top:1px solid #18418D; border-bottom:0px; padding:6px 10px 6px 0px; vertical-align:middle; text-align:left; font-size:16px; line-height:24px; color:#525252; position: relative;} TABLE.warenkorb td img {border:1px solid #18418D; vertical-align: middle;} TABLE.warenkorb td.r {text-align:right;} TABLE.warenkorb td.c {text-align:center;} TABLE.warenkorb th.small {font-size:13px;} TABLE.warenkorb td.small {font-size:13px;} TABLE.warenkorb TH.small:last-child {width: 80px;} TABLE.warenkorb TD.mobile {padding-left: 10px; display: none;} TABLE.warenkorb th.big {font-size:16px;} TABLE.warenkorb th.r {text-align:right;} TABLE.warenkorb td.a {padding-top:18px; border-top-width:3px;} TABLE.warenkorb th.a {padding-top:18px; border-top-width:3px;} TABLE.warenkorb th span:not(.brand, .brand SPAN) {float:right;font-size:13px;font-weight:normal;} /*TABLE.warenkorb TH span:not(.brand, .brand SPAN):before {content: '\A'; white-space: pre}*/ TABLE.warenkorb TD LABEL {margin-right: 5px;} TABLE.warenkorb TD INPUT {text-align:center; width:50px; font-size:13px;} TABLE.warenkorb TD.amount {width: 120px;} TABLE.warenkorb TD.amount DIV {display: flex; align-items: center;} /* TABLE.warenkorb TH > DIV {position: absolute; right: 0; top: 50%; transform: translateY(-50%);} */ /*TABLE.warenkorb A.delete {margin: 0px;padding: 0px;display: block;line-height: 30px;height: 30px;width: 30px;transition: background-image 0.5s ease;background-size: auto 80%;background-position: center center;background-repeat: no-repeat;background-image: url("../images/icon-delete.svg"); position: absolute; left: 50%; top: 50%; transform: translateY(-50%);}*/ TABLE.warenkorb A.delete {margin: 0px;padding: 0px; display: inline-block; line-height: 30px; height: 30px;width: 30px;transition: background-image 0.5s ease;background-size: auto 80%;background-position: center center;background-repeat: no-repeat;background-image: url("../images/icon-delete.svg");} TABLE.warenkorb A.delete:hover {background-image: url("../images/icon-delete-active.svg");} TABLE.warenkorb tr.highlight td {background-color:#FFFFFF;} TABLE.warenkorb .rot {color:#FF0000;} TABLE.warenkorb .rot a {color:#FF0000;} TABLE.warenkorb .grau {color:#BBBBBB;} TABLE.warenkorb .grau a {color:#BBBBBB;} TABLE.warenkorb .grau img {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter: alpha(opacity=50);-moz-opacity: 0.5;-khtml-opacity: 0.5;opacity: 0.5;} TABLE.warenkorb .strichpreis {text-decoration:line-through;} TABLE.status {margin-top: 0;} TABLE.status TH {border-top: none;} TABLE.order_status {} TABLE.order_status TH {padding-right: 20px; font-size: 16px; line-height: 24px; font-weight: 600; text-align: left; vertical-align: top;} TABLE.order_status TD {font-size: 16px; line-height: 24px; text-align: left; vertical-align: top;} section.checkout_content table.zusammenfassung {margin:0px 0px 20px 0px; border-spacing:0px; border:0px; width:100%; border-bottom:3px double #18418D;} table.zusammenfassung tr:first-child td, table.zusammenfassung tr:first-child th {border-top:0px;} table.zusammenfassung th {border-top:1px solid #18418D; border-bottom:0px; padding:6px 10px 6px 0px; vertical-align:top; text-align:left; font-size:15px; line-height:22px; font-weight: 600;} table.zusammenfassung td {border-top:1px solid #18418D; border-bottom:0px; padding:6px 10px 6px 0px; vertical-align:top; text-align:left; font-size:15px; line-height:22px;} section.checkout_content table.zusammenfassung td:last-child {padding-right:10px;} table.zusammenfassung td img {border:1px solid #CCCCCC;} table.zusammenfassung .r {text-align:right;} table.zusammenfassung .c {text-align:center;} table.zusammenfassung .big {font-size:16px;} table.zusammenfassung .a {padding-top:18px; border-top-width:2px;} table.zusammenfassung th span.normal {float:none;font-weight:normal;} table.zusammenfassung th span {float:right;font-size:13px;font-weight:normal;} table.zusammenfassung td input {text-align:center; width:20px; font-size:11px; float:right;} table.zusammenfassung tr.highlight td {background-color:#FFFFFF;} table.zusammenfassung .rot {color:#FF0000;} table.zusammenfassung .rot span {float:none;} table.zusammenfassung .rot a {color:#FF0000;} table.zusammenfassung .grau {color:#BBBBBB;} table.zusammenfassung .grau span {float:none;} table.zusammenfassung .grau a {color:#BBBBBB;} table.zusammenfassung .grau img {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter: alpha(opacity=50);-moz-opacity: 0.5;-khtml-opacity: 0.5;opacity: 0.5;} table.zusammenfassung .strichpreis {text-decoration:line-through;} /*DIV.inci {margin-top: 50px; margin-bottom: 20px; width: 100%; display: flex; flex-wrap: wrap;}*/ /*DIV.inci > H3 {flex: 1 0 100%; color: #18418D; font-size: 18px; line-height: 150%; text-align: left;}*/ /*DIV.inci > SPAN {flex: 1 0 calc(33.33% - 10px); font-size: 14px; line-height: 150%;}*/ .wrapper {margin: auto auto;padding: 0px 20px 0px 20px;height: 100%;width: 1680px;box-sizing: border-box;} .wrapper.maxtext p, .wrapper.maxtext h2, .wrapper.maxtext h3, .wrapper.maxtext h4 {max-width: 1400px; margin-left: auto; margin-right:auto;} .wrapper.maxtext p {hyphens: none;} .wrapper.center {text-align:center;} .wrapper.center p {text-align:center;} HEADER SECTION#highlights {margin: 0px;padding: 0px;height: 30px;width: 100%;font-size: 12px;line-height: 30px;font-weight: 600;text-transform: uppercase;color: #FFFFFF;background-color: #4f6ab1;position: relative;display: block;} /*HEADER SECTION#highlights DIV.wrapper DIV {display: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}*/ HEADER SECTION#highlights DIV.wrapper DIV {display: none; text-align: center; letter-spacing: 1px;} HEADER SECTION#nav {height: 100px;width: 100%;line-height: 30px;background-color: #FFFFFF; position:relative; z-index:999; box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.2);} HEADER SECTION#nav DIV.wrapper {display: flex;align-items: flex-end;} HEADER SECTION#nav A#logo {display: flex;align-items: center;height: 100%;} HEADER SECTION#nav A#logo IMG {height: 70px;width: auto;} HEADER SECTION#nav NAV#main {margin: 0px auto 16px 50px;height: 100%;align-items: start;} HEADER SECTION#nav NAV#main > DIV.wrapper-nav > UL {margin: 0;padding: 0;list-style: none;display: flex;flex-wrap: wrap;gap:10px; align-items: center;height: 100%;} HEADER SECTION#nav NAV#main > DIV.wrapper-nav > UL > LI {z-index: 100;box-sizing: border-box; position: relative;} HEADER SECTION#nav NAV#main > DIV.wrapper-nav > UL > LI > A {margin: 0px;padding: 17px 10px 10px 10px;font-weight: 600; display: block; text-decoration: none;color: #18418D;font-size: 18px;line-height: 150%;transition: color 0.5s ease; text-transform: uppercase;} HEADER SECTION#nav NAV#main > DIV.wrapper-nav > UL > LI > A.active {color: #E6007E;} HEADER SECTION#nav NAV#main > DIV.wrapper-nav > UL > LI:hover > A {color: #E6007E;} HEADER SECTION#nav NAV#main DIV.wrapper-nav UL > LI > UL {margin: 0px;padding: 17px 0px 0px 0px; display: none; position: absolute; overflow: hidden;transition: opacity .4s, top .4s ease-out;line-height: 30px;list-style: none;left: 0px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);} HEADER SECTION#nav NAV#main DIV.wrapper-nav UL > LI:hover > UL {display: block;} HEADER SECTION#nav NAV#main DIV.wrapper-nav UL > LI > UL > LI {margin: 0px;padding: 5px 0px 5px 0px; background-color: #18418D;} HEADER SECTION#nav NAV#main DIV.wrapper-nav UL > LI > UL > LI A {margin: 0px;padding: 2px 15px; font-size: 17px; text-transform:uppercase; line-height: 150%; white-space: nowrap;display: block;text-decoration: none;color: #FBFBFB; transition: color 0.5s ease;} HEADER SECTION#nav NAV#main DIV.wrapper-nav UL > LI > UL > LI:hover {background-color: #E6007E;} HEADER SECTION#nav NAV#main DIV.wrapper-nav UL > LI > UL > LI.active {background-color: #E6007E;} HEADER SECTION#nav NAV#checkoutnav {margin: 0 0 0 auto; padding: 0 0 15px 0;} HEADER SECTION#nav NAV#checkoutnav UL {margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 60px; list-style-type: none;} HEADER SECTION#nav NAV#checkoutnav UL LI {margin: 0; padding: 0; display: block; line-height:20px;} HEADER SECTION#nav NAV#checkoutnav UL LI SPAN {margin: 0 10px 0 0; padding: 0; width:20px; height: 20px; text-align: center; font-size: 12px; line-height: 20px; display: inline-block; box-sizing:border-box; border:2px solid #454749; transition: border 0.5s ease; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; vertical-align:bottom;} HEADER SECTION#nav NAV#checkoutnav UL LI A {display: block; font-size: 18px; font-weight: 600; line-height: 20px; color: #454749; transition: color 0.5s ease;} HEADER SECTION#nav NAV#checkoutnav UL LI A:hover {color: #18418D;} HEADER SECTION#nav NAV#checkoutnav UL LI A:hover SPAN {border: 2px solid #18418D;} HEADER SECTION#nav NAV#checkoutnav UL LI.done A {color:#454749AA;} HEADER SECTION#nav NAV#checkoutnav UL LI.done A SPAN {color:#454749AA; border: 1px solid #454749AA;} HEADER SECTION#nav NAV#checkoutnav UL LI.active A {color:#E6007E} HEADER SECTION#nav NAV#checkoutnav UL LI.active A SPAN {color:#E6007E; border: 1px solid #E6007E;} HEADER SECTION#nav ASIDE#checkoutASIDE {margin: 0 0 10px 0;} HEADER SECTION#nav NAV#checkoutnav-mobile {display:none; box-sizing: border-box; border-bottom:1px solid #18418D; position: absolute; z-index: 100; top: 131px; left:0px; right: 0px; height: auto; width:100%; background-color:#F7F7F7; color:#FFFFFF; } HEADER SECTION#nav NAV#checkoutnav-mobile P {padding-top: 40px; font-size: 25px; line-height: 150%; font-weight: 600; color: #454749;} HEADER SECTION#nav NAV#checkoutnav-mobile UL {padding: 0 0 40px 0; margin: 0; list-style-type: none;} HEADER SECTION#nav NAV#checkoutnav-mobile UL LI {padding-top: 20px; padding-bottom: 20px; font-size: 25px; font-weight: 600; line-height: 25px; color: #454749;} HEADER SECTION#nav NAV#checkoutnav-mobile UL LI A {color: #454749;} HEADER SECTION#nav NAV#checkoutnav-mobile UL LI.done, HEADER SECTION#nav NAV#checkoutnav-mobile UL LI.done A {color:#454749AA;} HEADER SECTION#nav NAV#checkoutnav-mobile UL LI.done SPAN {color:#454749AA; border: 1px solid #454749AA;} HEADER SECTION#nav NAV#checkoutnav-mobile UL LI.active, HEADER SECTION#nav NAV#checkoutnav-mobile UL LI.active A {color:#E6007E;} HEADER SECTION#nav NAV#checkoutnav-mobile UL LI.active SPAN {color:#E6007E; border: 1px solid #E6007E;} HEADER SECTION#nav NAV#checkoutnav-mobile UL LI SPAN {margin-right: 20px; width:30px; height:30px; display: inline-block; color: #454749; text-align: center; align-items: center; font-size: 25px; line-height: 30px; box-sizing:border-box; border: 1px solid #454749; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;} HEADER SECTION#nav NAV#checkoutnav-mobile UL LI A:hover {color: #18418D;} HEADER SECTION#nav NAV#checkoutnav-mobile UL LI A:hover SPAN {color: #18418D; border: 1px solid #18418D;} HEADER SECTION#nav NAV#checkoutnav-mobile UL LI UL {display: none; padding: 20px 0 20px 50px; margin: 0; overflow: hidden; line-height: 30px;} HEADER SECTION#nav NAV#checkoutnav-mobile UL LI UL LI {padding: 0; margin: 0; font-size: 20px; font-weight: normal; line-height: 150%; white-space: nowrap; display: block; text-decoration: none; } HEADER SECTION#nav NAV#checkoutnav-mobile UL LI UL LI A {display: block; padding: 10px 0 10px 0; font-size: 20px; line-height: 150%;} HEADER SECTION#nav FORM#search {margin: 0px 0px 26px 0px; padding: 0px 0px 0px 0px; background-color: #F3F6F8;display: flex;align-items: center;} HEADER SECTION#nav FORM#search INPUT[type="text"] {margin: 0px;padding: 0px 20px 0px 20px;height: 30px;line-height: 30px;width: 100%;color: #454749;font-size: 16px;border: none;background: transparent;box-sizing: border-box;} HEADER SECTION#nav FORM#search INPUT[type="text"]::placeholder {color: #45474933;} HEADER SECTION#nav FORM#search INPUT[type="submit"] {padding: 0px;margin: 0px;margin-right: 12px;line-height: 30px;align-items: center;cursor: pointer;width: 30px;height: 30px;border: none;background-image: url('../images/search-active.svg');background-size: auto 70%;background-position: center center;background-repeat: no-repeat;background-color: transparent;transition: background-image 0.5s ease;} HEADER SECTION#nav FORM#search INPUT[type="submit"]:hover {background-image: url('../images/search-magenta.svg');} HEADER SECTION#nav ASIDE {margin: 0px 0px 26px 0px; padding-left: 20px;display: flex;gap: 10px;} HEADER SECTION#nav ASIDE>A {margin: 0px;padding: 0px;display: block;line-height: 30px;height: 30px;width: 30px;transition: background-image 0.5s ease;background-size: auto 80%;background-position: center center;background-repeat: no-repeat;} HEADER SECTION#nav ASIDE>A.icon-search {background-image: url("../images/search-active.svg");display: none;} HEADER SECTION#nav ASIDE>A.icon-search:hover {background-image: url("../images/search-magenta.svg");} HEADER SECTION#nav ASIDE>A.icon-shopping-cart {background-image: url("../images/shopping-cart-active.svg"); position:relative;} HEADER SECTION#nav ASIDE>A.icon-shopping-cart:hover {background-image: url("../images/shopping-cart-magenta.svg");} HEADER SECTION#nav ASIDE>A.icon-shopping-cart span {position:absolute; width: 18px; height:18px; line-height:18px; text-align:center; background-color:#E6007E; color:#FFFFFF; font-weight: 600; font-size:13px; border-radius:50%; top:-10px; right:3px;} HEADER SECTION#nav ASIDE>A.icon-user {background-image: url("../images/user-active.svg");} HEADER SECTION#nav ASIDE>A.icon-user:hover {background-image: url("../images/user-magenta.svg");} HEADER SECTION#nav ASIDE>A.icon-menu {background-image: url("../images/menu-active.svg");display: none;} HEADER SECTION#nav ASIDE>A.icon-menu:hover {background-image: url("../images/menu-magenta.svg");} HEADER SECTION#nav ASIDE>A.icon-close {background-image: url("../images/close.svg");} HEADER SECTION#nav ASIDE>A.icon-close:hover {background-image: url("../images/close-active.svg");} HEADER SECTION#nav ASIDE>A.icon-contact {background-image: url("../images/contact-active.svg");} HEADER SECTION#nav ASIDE>A.icon-contact:hover {background-image: url("../images/contact-magenta.svg");} DIV.headline {margin-bottom: 30px;} MAIN SECTION#teaser {position:relative; margin: auto; background-image: url("../images/teaser-lebensfreude-desktop-v3.webp");background-size: cover;aspect-ratio: 1920/800;} MAIN SECTION#teaser:before {content:""; display:block; position:absolute; top:-20px; right:1%; z-index:1200; width:120px; transform: rotate(20deg); aspect-ratio:250/241; background-image:url(../images/made-in-germany-small.png); background-size:cover; background-repeat:no-repeat; background-position:center center;} MAIN SECTION#teaser DIV.wrapper {padding-top: 5%;} MAIN SECTION#teaser DIV.wrapper > H2 {margin: 0px 0px 30px 0px;padding: 0px 0px 0px 0px;font-size: 70px;font-style: normal;font-weight: 600;line-height: 130%;;text-transform: uppercase;letter-spacing: 1px;color: #18418D;} MAIN SECTION#teaser DIV.wrapper > H4 {margin: 0px 0px 30px 0px;padding: 0px 0px 0px 0px;font-size: 35px;line-height: 115%;} MAIN SECTION#teaser DIV.wrapper > H2 > SPAN:first-child {color: #E6007E;} MAIN SECTION#teaser DIV.wrapper > A.submit {font-size: 20px;} SECTION.products {margin: 80px 0px 80px 0px;padding: 0px 0px 0px 0px;} /*MAIN SECTION#products DIV.card-container {display: flex;padding: 0px 0px 5px 0px;height: auto;flex-wrap: nowrap;scroll-snap-type: x mandatory;touch-action: manipulation;box-sizing: border-box;overflow-x: scroll;overflow-y: hidden;}*/ SECTION.products DIV.card-container {display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 50px; row-gap: 60px;} SECTION.products DIV.card-container > DIV {position: relative; text-align: center;} SECTION.products DIV.card-container > DIV:hover {/*cursor: pointer;*/} SECTION.products DIV.card-container > DIV > A > IMG {margin: 0 auto; height: auto; width: 100%; aspect-ratio:1; max-width: 100%;} SECTION.products DIV.card-container > DIV > A > H3 {margin-top: 15px; hyphens: auto; margin-bottom:5px;} SECTION.products DIV.card-container > DIV:hover > A > H3 {color: #E6007E;} SECTION.products DIV.card-container > DIV > A > P {font-size: 15px; color: #454749AA; text-align: center; margin-top:0px;} SECTION.products DIV.card-container > DIV > A > P.inhalt {font-size: 17px; color: #E6007E; font-weight:bold;} SECTION.products DIV.card-container > DIV SPAN {margin-top: auto; width: 100%; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 150%; color: #E6007E; font-weight:bold;} SECTION.products DIV.card-container > DIV SPAN.uvp {margin-left: 0px; font-size: 15px; color: #00000099;} SECTION.products DIV.card-container > DIV SPAN A.add-to-shopping-cart {margin: 0;padding: 0; position: absolute; bottom: 0; right: 20px; min-width: 30px; height: auto; display: flex;aspect-ratio: 1;overflow: hidden;border-radius: 50%;background-image: url("../images/shopping-cart-add.svg");background-position: center;background-repeat: no-repeat;background-size: cover;background-color: #18418D;justify-content: center;align-items: center;border: 2px solid #18418D;transition: background-color 0.3s ease;} SECTION.products DIV.card-container > DIV SPAN A.add-to-shopping-cart:hover {background-color: #FFFFFF;background-image: url("../images/shopping-cart-add-active.svg");} /* SECTION.product DIV#popup {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 20px;background-color: #fff;border: 1px solid #ccc;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);z-index: 1000;} */ /* SECTION.product DIV#popup H2 {text-align: center;} */ #popup-review-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);z-index: 1000;display: none;} #popup-review {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: white;padding: 20px;z-index: 1001;display: none;} #popup-review-close {display: block;margin: 20px auto 0;padding: 10px 20px;background: #007bff;color: white;border: none;cursor: pointer;} IMG.star {max-width: 16px; width: 16px; max-height: 16px; height: 16px;} MAIN SECTION.rezensionen {} MAIN SECTION.rezensionen DIV.rezensionen-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 5%;} MAIN SECTION.rezensionen FORM {margin-bottom: 50px;} MAIN SECTION.rezensionen FORM SELECT#bewertung {color: #18418D;} MAIN SECTION.rezensionen H3 {margin-bottom: 0;} MAIN SECTION.rezensionen DIV.rezensionen {margin-bottom: -100px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 5%;} MAIN SECTION.rezensionen DIV.rezensionen DIV.rezension {} MAIN SECTION.rezensionen DIV.rezensionen ARTICLE.rezension {padding: 30px; margin-bottom: 100px; position: relative; min-width: 460px; width: 30%; box-sizing: border-box; background-color: #FFF; overflow: visible; box-shadow: -2px 10px 10px rgba(0, 0, 0, 0.1), 2px 10px 10px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.3);} /*MAIN SECTION.rezensionen DIV.rezensionen ARTICLE.rezension:not(:last-child) {margin-bottom: 100px;}*/ MAIN SECTION.rezensionen DIV.rezensionen ARTICLE.rezension > img:first-child {position: absolute; top: 0; left: 0; width: 30px; height: auto;} MAIN SECTION.rezensionen DIV.rezensionen ARTICLE.rezension > img:last-child {position: absolute; bottom: 0; right: 0; width: 30px; height: auto;} MAIN SECTION.rezensionen DIV.rezensionen ARTICLE.rezension SPAN.stars {position: absolute; top: 10px; right: 10px;} MAIN SECTION.rezensionen DIV.rezensionen ARTICLE.rezension P {margin: 0; padding: 0; line-height: 20px; font-size: 14px; font-weight: lighter;} MAIN SECTION.rezensionen DIV.rezensionen ARTICLE.rezension H5 {margin: 0; padding: 0; position: absolute; bottom: -60px; right: 20%; text-transform: none; font-weight: 400; font-size: 14px; line-height: 18px; font-style: italic;} MAIN SECTION.rezensionen DIV.rezensionen ARTICLE.rezension::after {content: ""; position: absolute; bottom: -30px; right: 20%; width: 0; height: 0; border-right: 30px solid transparent; border-top: 30px solid #fff; z-index: 1; filter: drop-shadow(0 5px 2px rgba(0, 0, 0, 0.3));} /*MAIN SECTION.rezensionen DIV.rezensionen > ARTICLE {margin: 0px -15px 0px -15px; padding: 40px 60px 0px 60px; min-width: 460px; width: 460px; max-height: 220px; height: 220px; overflow: hidden; position: relative; box-sizing: border-box; background-image: url("../images/background-review.png"); background-repeat: no-repeat; background-size: 100% auto;}*/ /*!*MAIN SECTION.rezensionen DIV.rezensionen > ARTICLE {margin: 0px -15px 0px -15px; padding: 40px 60px 0px 60px; min-width: 460px; width: 460px; position: relative;}*!*/ /*MAIN SECTION.rezensionen DIV.rezensionen > ARTICLE > SPAN.stars {position: absolute; right: 0;}*/ /*MAIN SECTION.rezensionen DIV.rezensionen > ARTICLE > P {margin: 0; padding: 0; line-height: 20px; font-size: 14px; font-weight: lighter;}*/ /*MAIN SECTION.rezensionen DIV.rezensionen > ARTICLE > H5 {margin: 0; position: absolute; bottom: 20px; right: 150px; text-transform: none; font-weight: 400; font-size: 14px; line-height: 18px; font-style: italic;}*/ .review-box {padding: 15px; margin-bottom: 15px; border: 1px solid #18418D;} .review-box:not(:first-child) {margin-top: 15px;} .review-box-header {display: flex; justify-content: space-between; align-items: center;} .custom-select-wrapper {margin-top: 5px;position: relative;user-select: none;} .custom-select {display: block;position: relative;width: 100%;cursor: pointer;} .custom-select-trigger {max-height: 34px;position: relative;display: flex;align-items: center;justify-content: space-between;padding: 5px;box-sizing: border-box;border: 1px solid #18448D33;background: #fff;} .custom-options {position: absolute;top: 100%;left: 0;right: 0;border: 1px solid #ccc;background: #fff;display: none;z-index: 999;} .custom-option {padding: 5px;cursor: pointer;display: flex;align-items: center;} .custom-option:hover {background-color: #f0f0f0;} .custom-option img {margin-right: 5px;} .custom-select.open .custom-options {display: block;} .custom-select-selected {max-height: 24px;} .custom-select-arrow {width: 10px;height: 10px;border-left: 2px solid #333;border-bottom: 2px solid #333;transform: rotate(-45deg);margin-left: 10px;} /*MAIN SECTION.content DIV.card-container {display: flex; gap: 10px;}*/ /*MAIN SECTION.content DIV.card-container > DIV {padding: 1%; width: 20%; max-width: 20%; text-align: center;}*/ /*MAIN SECTION.content DIV.card-container > DIV:hover {cursor: pointer;}*/ /*MAIN SECTION.content DIV.card-container > DIV > A {display: flex;}*/ /*MAIN SECTION.content DIV.card-container > DIV > A > IMG {margin: 0 auto; height: 100%; max-width: 100%;}*/ /*MAIN SECTION.content DIV.card-container > DIV > H3 {margin-top: 15px;}*/ /*MAIN SECTION.content DIV.card-container > DIV:hover > H3 {color: #E6007E;}*/ /*MAIN SECTION.content DIV.card-container > DIV > P {margin: auto 0; padding: 0; font-size: 15px; color: #454749AA; text-align: center;}*/ MAIN SECTION.content DIV.wrapper.pt-big {padding-top: 40px;} MAIN SECTION.content DIV.wrapper H4:last-child {margin-bottom: 50px;} /*MAIN SECTION.content DIV.two-columns > DIV:last-child > H2 {margin-top: 50px;}*/ MAIN SECTION.content DIV.seal {margin-top: 50px; margin-bottom: 50px; display: flex; align-items: center; gap: 20px;} MAIN SECTION.content DIV.seal IMG {margin: 15px 0px 15px 0px; max-width: 100px;} MAIN SECTION.content DIV.seal P {font-size: 14px;} MAIN SECTION.content DIV.two-columns > DIV > FORM > DIV:last-child {margin-top: 50px;} MAIN SECTION.content DIV.two-columns + DIV.two-columns {margin-top: 50px;} MAIN SECTION.content {margin: 0px;padding: 80px 0px 80px 0px;color: #454749;background-size: cover;background-position: center;justify-content: center;} MAIN SECTION.content.search:not(:last-child) {margin-bottom: 30px; padding-bottom: 0px;} MAIN SECTION.content.search:last-child {margin-top: 30px; padding-top: 0px; padding-bottom: 80px;} /*MAIN SECTION.content IMG {display: block;margin: auto auto;max-width: 100%;max-height: 300px;height: auto;}*/ MAIN SECTION.content.weiss {background-color: #FFFFFF;} MAIN SECTION.content.grau {background-color: #F0F0F0;} MAIN SECTION.content.blau {background-color: #18418D;} MAIN SECTION.content.blau P, MAIN SECTION.content.blau H2, MAIN SECTION.content.blau H3 {color: white;} MAIN SECTION.content.schwarz {color: white;background-color: #101319;} MAIN SECTION.content.schwarz P, MAIN SECTION.content.schwarz H2, MAIN SECTION.content.schwarz H3 {color: white;} MAIN SECTION.content DIV.two-columns {display: flex; justify-content: space-between; flex-wrap: wrap; row-gap:80px;} MAIN SECTION.content DIV.two-columns.mini {max-width: 1080px;} MAIN SECTION.content DIV.two-columns > DIV {width: 45%;} MAIN SECTION.content DIV.two-columns > DIV.flex {display: flex; justify-content: space-between;} MAIN SECTION.content DIV.two-columns > DIV > P IMG {padding: 0px 15px 0px 0px; height: 90px; width: auto; max-width: 100px; max-height: 200px;} MAIN SECTION.content DIV.two-columns > DIV > H3 > IMG {margin: 0px 0px 0px -5px; padding: 2px 0px 0px 0px; transform: scaleX(1) scaleY(1.9);} MAIN SECTION.content DIV.two-columns > DIV.bildergallerie {} MAIN SECTION.content DIV.two-columns > DIV.bildergallerie IMG {margin: 0 auto; max-width: 100%; display: block; position: -webkit-sticky; position: sticky; top: 0;} MAIN SECTION.content > DIV.wrapper.two-columns > DIV > DIV.search-entry:not(:first-child) {padding-top: 20px;} MAIN SECTION.content > DIV.wrapper.two-columns > DIV > DIV.search-entry > A:hover > H3 {color: #E6007E;} MAIN SECTION.content > DIV.wrapper.two-columns > DIV > DIV.search-entry > A > H3 {margin-bottom: 10px;} MAIN SECTION.content > DIV.wrapper.two-columns > DIV > DIV.search-entry > A > P {margin-top: 10px;} MAIN SECTION.content DIV.two-columns-wrap.mini {max-width: 1080px;} MAIN SECTION.content DIV.two-columns-wrap > DIV {display: flex; justify-content: space-between; flex-wrap: wrap; row-gap:25px;} MAIN SECTION.content DIV.two-columns-wrap > DIV.middle {align-items:center;} MAIN SECTION.content DIV.two-columns-wrap > DIV > DIV {width: 45%;} MAIN SECTION.content DIV.two-columns-wrap > DIV > DIV.fullimage > IMG {width: 100%;} MAIN SECTION.content DIV.two-columns-wrap > DIV:not(:first-child) {padding-top:80px;} /*MAIN SECTION.content DIV.two-columns > DIV > DIV {display: flex;}*/ /*MAIN SECTION.content DIV.two-columns > DIV > DIV > IMG {height: 200px; width: 100px; max-height: 200px; max-width: 100px;}*/ /*MAIN SECTION.content DIV.two-columns > DIV > DIV > ARTICLE > H3 {margin: 5px 5px 5px 0; color: #E6007E; display: inline-flex;}*/ /*MAIN SECTION.content DIV.two-columns > DIV > DIV > ARTICLE > H3 > SPAN {color: #18418D;}*/ /*MAIN SECTION.content DIV.two-columns > DIV > DIV > ARTICLE > H3 > IMG {margin: -2px 0px 0px -5px; transform: scaleX(0.7) scaleY(1.3);}*/ /*MAIN SECTION.content DIV.two-columns > DIV > DIV > ARTICLE > H4 {text-transform: uppercase; text-align: justify; hyphens: auto;}*/ MAIN SECTION.content DIV.two-columns > H4 {width: 100%;} MAIN SECTION.content DIV.two-columns > DIV > DIV.double-image-container {display: none;} MAIN SECTION.content DIV.two-columns > DIV.double-image-container {display: flex; justify-content: center; align-items: center; position: relative;} MAIN SECTION.content DIV.two-columns > DIV.double-image-container.image-on-top {align-items: flex-start;} /* ================ MUSS DRINGEND GEÄNDERT WERDEN, rund nur auf spezielle Klasse legen, nicht über ausschluß */ MAIN SECTION.content DIV.two-columns > DIV:not(.fullimage) > IMG:not(.infopaket) {height: auto; max-height: 380px; max-width: 380px; position: relative; border-radius: 50%; display: flex; aspect-ratio: 1/1; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);} MAIN SECTION.content DIV.two-columns > DIV > IMG.infopaket {width: 100%;} MAIN SECTION.content DIV.two-columns > DIV.fullimage > IMG {width: 100%;} MAIN SECTION.content DIV.two-columns > DIV > IMG.infopaket.top {display: none;} MAIN SECTION.content DIV.two-columns > DIV.double-image-container:first-child > IMG:first-child {bottom: 5%; left: 5%; width: 40%; } MAIN SECTION.content DIV.two-columns > DIV.double-image-container:first-child > IMG:last-child {top: 5%; right: 5%; width: 50%; } MAIN SECTION.content DIV.two-columns > DIV.double-image-container.image-on-top:first-child > IMG:first-child {top: 0;} MAIN SECTION.content DIV.two-columns > DIV.double-image-container.image-on-top:first-child > IMG:last-child {top: 10%;} MAIN SECTION.content DIV.two-columns > DIV.double-image-container:last-child > IMG:first-child {top: 7.5%; left: 5%; z-index: 1; width: 40%; } MAIN SECTION.content DIV.two-columns > DIV.double-image-container:last-child > IMG:last-child {bottom: 7.5%; right: 5%; z-index: 2; width: 50%; ;} /*MAIN SECTION.content DIV.two-columns > DIV.two-columns > DIV {height: 100%;}*/ /*MAIN SECTION.content DIV.two-columns > DIV.two-columns > DIV {display: flex; align-items: center; justify-content: end;}*/ MAIN SECTION.content DIV.two-columns > DIV.side-contact > DIV > IMG {margin-left: auto; max-height: 200px; width: auto;} MAIN SECTION.content DIV.two-columns > DIV.side-contact {align-content: baseline;} MAIN SECTION.content DIV.two-columns > DIV.side-contact > P {text-align: left; hyphens: none;} MAIN SECTION.content DIV.two-columns > DIV.side-contact > DIV > P {text-align: left;} MAIN SECTION.content DIV.two-columns > DIV.single-image-container {display: flex; justify-content: right;} MAIN SECTION.content DIV.two-columns > DIV UL.list-highlights {margin: 0; padding: 0; list-style-type: none;} MAIN SECTION.content DIV.two-columns > DIV UL.list-highlights > LI {margin: 0px 0px 15px 0px; padding: 0px 0px 0px 30px; position: relative; background-image: url("../images/chevron-right-2-active.svg"); background-repeat: no-repeat; background-position: left 0px; background-size: auto 25px; } MAIN SECTION.content DIV.two-columns > DIV > P > A.fancyboxcontent {padding-right: 25px;background-image: url('../images/info.svg'); background-size: auto 90%;background-position: right center;background-repeat: no-repeat;background-color: transparent;} MAIN SECTION.content DIV.two-columns > DIV UL.list-studies {margin: 0; padding: 0; list-style-type: none;} MAIN SECTION.content DIV.two-columns > DIV UL.list-studies > LI {margin: 0px 0px 15px 0px; padding: 0px 0px 0px 30px; position: relative; text-align: justify; background-image: url("../images/chevron-right-2-active.svg"); background-repeat: no-repeat; background-position: left 0px; background-size: auto 25px; } MAIN SECTION.content DIV.two-columns > DIV > TABLE.effects UL {margin: 0; padding: 0; list-style-type: none;} MAIN SECTION.content DIV.two-columns > DIV > TABLE.effects UL > LI {margin: 0px 0px 15px 0px; padding: 0px 0px 0px 30px; position: relative; background-image: url("../images/chevron-right-2-active.svg"); background-repeat: no-repeat; background-position: left 0px; background-size: auto 25px;} MAIN SECTION.content DIV.two-columns > DIV > DIV.hightlightfehler {padding: 15px; margin-bottom: 20px; box-sizing: border-box; border: 1px solid #E6007E;} MAIN SECTION.content DIV.two-columns > DIV > DIV.hightlightfehler UL {padding: 0; list-style-type: none;} MAIN SECTION.content DIV.one-column DIV:last-child {display: inline-flex;gap: 20px;} MAIN SECTION.content DIV.one-column DIV:last-child P {max-width: 66%;} MAIN SECTION.content DIV.one-column P {margin: 0px;padding: 0px;} /* MAIN SECTION.content DIV:last-child {max-height: 100%;} */ MAIN SECTION.content DIV.two-columns #klinische-anwendungsstudie .highcharts-xaxis-labels TEXT {font-size: 18px; color: #454749; fill: #454749;} MAIN SECTION.content DIV.two-columns #hautphysiologische-untersuchung .highcharts-plot-band-label {font-size: 18px; color: #454749;} /*MAIN SECTION.content DIV.two-columns #hautphysiologische-untersuchung .highcharts-xaxis-labels TEXT {font-size: 12px; color: #454749; fill: #454749;}*/ MAIN SECTION.content DIV.two-columns > DIV.hightlight {width: 100%;} MAIN SECTION.content DIV.hightlight {display:inline-block; padding: 15px 15px 15px 15px; margin-bottom:30px; background-color: #F0F0F0;border: 1px solid rgba(0, 0, 0, 0.1);box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.25);box-sizing: border-box;color: #454749;} MAIN SECTION.content DIV.hightlight H4 {margin-top:0px; margin-bottom:5px;} MAIN SECTION.content DIV.hightlight UL {margin:0px;} MAIN SECTION.content DIV.shopicons {display:flex; flex-wrap: wrap; justify-content: space-between; margin-top:40px; margin-bottom:40px;} MAIN SECTION.content DIV.shopicons>DIV {width:18%;} MAIN SECTION.content DIV.shopicons>DIV>IMG {width:90%;} MAIN SECTION.content DIV.shopicons>DIV>P {hyphens: auto; word-break: break-word; overflow-wrap: break-word; color:#18418D; margin-top:10px; margin-bottom:0px; display: flex; align-items: center; justify-content: center; font-weight:bold; width:100%; height:60px;} /* Kacheln */ MAIN SECTION.content DIV.kacheln-3 {display:flex; flex-wrap: wrap; justify-content: space-around; margin-top:100px; margin-bottom:40px;} MAIN SECTION.content DIV.kacheln-3>DIV {width:25%; box-shadow: 1px 5px 21px 0px rgba(0,0,0,0.40); -webkit-box-shadow: 1px 5px 21px 0px rgba(0,0,0,0.40); -moz-box-shadow: 1px 5px 21px 0px rgba(0,0,0,0.40); transition: transform 0.2s ease; transform-origin: center;} MAIN SECTION.content DIV.kacheln-3>DIV:hover {transform: scale(1.1);} MAIN SECTION.content DIV.kacheln-3>DIV IMG {width:100%; height:auto; display:block;} /* 3er Banner */ SECTION.banner3 DIV.wrapper {display:flex; flex-wrap: wrap; justify-content: space-around; margin-top:100px; margin-bottom:40px;} SECTION.banner3 DIV.wrapper>ARTICLE {position:reative; width:25%;} SECTION.banner3 DIV.wrapper>ARTICLE>IMG {width:100%;} SECTION.banner3 DIV.wrapper>ARTICLE>IMG.proz90 {width:90%; margin:5%;} SECTION.banner3 DIV.wrapper>ARTICLE>IMG+DIV {padding-top:25px;} SECTION.banner3 DIV.wrapper>ARTICLE>DIV {text-align:center;} SECTION.banner3 DIV.wrapper>ARTICLE>DIV>*:first-child {margin-top:0px;} SECTION.banner3 DIV.wrapper>ARTICLE>DIV P {text-align:center;} SECTION.banner3 DIV.wrapper>ARTICLE>DIV UL>LI:not(:first-child) {padding-top:5px;} /*SECTION.product ARTICLE DIV.seal {margin-top: 10px; display: flex; align-items: center; gap: 20px;}*/ /*SECTION.product ARTICLE DIV.seal IMG {margin: 15px 0px 15px 0px; max-width: 100px;}*/ /*SECTION.product ARTICLE DIV.seal P {font-size: 14px;}*/ /* Produkt Detailseite */ SECTION.product {display: flex; position: relative; overflow: visible;} SECTION.product div.mobilehead {display: none; padding: 60px 10px 30px 10px; font-size:30px; line-height:50px; text-transform:uppercase; letter-spacing:-1px; color:#18418D; font-weight:bold;} SECTION.product ASIDE {width: 45%; position: sticky; top: 0px; align-self: flex-start;} SECTION.product ASIDE div.produktimages.mobile {display:none; width:100%; max-width:600px; margin:auto auto; aspect-ratio: 1/1; position:relative; overflow:hidden;} SECTION.product ASIDE div.produktimages.mobile div.imageslider {width:9999px; height:100%; position:absolute; display:flex;} SECTION.product ASIDE div.produktimages.mobile div.imageslider img {width:100vw; aspect-ratio: 1/1;} SECTION.product ASIDE div.produktimages.mobile .left {display:block; position:absolute;top:calc(33vw - 18px);left:10px;z-index:50;background-color:#DFEEF8; box-sizing:border-box; width:36px; height:36px; background-image:url(../images/icon-arrow-left.svg); background-repeat:no-repeat; background-position:45% center; background-size:auto 45%; text-align:center; border-radius:50%; transition: color 0.2s ease-in-out, background 0.2s ease-in-out;} SECTION.product ASIDE div.produktimages.mobile .left:hover {background-color:#E6007E; background-image:url(../images/icon-arrow-left-white.svg);} SECTION.product ASIDE div.produktimages.mobile .right {display:block; position:absolute;top:calc(33vw - 18px);right:10px;z-index:50;background-color:#DFEEF8; box-sizing:border-box; width:36px; height:36px; background-image:url(../images/icon-arrow-right.svg); background-repeat:no-repeat; background-position:55% center; background-size:auto 45%; text-align:center; border-radius:50%; transition: color 0.2s ease-in-out, background 0.2s ease-in-out;} SECTION.product ASIDE div.produktimages.mobile .right:hover {background-color:#E6007E; background-image:url(../images/icon-arrow-right-white.svg);} SECTION.product ASIDE div.produktimages.desktop {display:flex; flex-direction: column; gap:10px;} SECTION.product ASIDE div.produktimages.desktop img {width:100%; cursor:pointer;} SECTION.product ARTICLE {width: 55%; max-width: 1000px; box-sizing: border-box; padding: 60px 30px 50px 40px; position: sticky; top: 0px; align-self: flex-start;} SECTION.product ARTICLE DIV.product-data {margin-top: 50px; margin-bottom: 50px; display: flex; justify-content: space-between;} SECTION.product ARTICLE DIV.product-data.product-data-2 {gap: 70px; justify-content: start;} SECTION.product ARTICLE DIV.product-data LABEL, SECTION.product ARTICLE DIV.product-data-2 LABEL {color: #18418D; font-size: 18px; font-weight: 600; line-height: 150%; } SECTION.product ARTICLE DIV.product-data A, SECTION.product ARTICLE DIV.product-data-2 A {padding-right: 25px; font-size: 18px; font-weight: 600; background-image: url("../images/info.svg");background-size: auto 90%; background-position: right center; background-repeat: no-repeat; background-color: transparent;} SECTION.product ARTICLE DIV.product-spec {width: 66%;} SECTION.product ARTICLE DIV.product-price {margin-top: 50px; margin-bottom: 50px; text-align: right;} SECTION.product ARTICLE DIV.product-price > FORM > DIV, SECTION.product ARTICLE DIV.product-price > DIV {width: 100%; display: inline-flex; align-items: center; justify-content: space-between;} SECTION.product ARTICLE DIV.product-price DIV#price-tooltip {position: absolute; left: 15px; top: 10px;} SECTION.product ARTICLE DIV.product-price A {padding-right: 25px; font-size: 18px; font-weight: 600; background-image: url("../images/info.svg");background-size: auto 90%; background-position: right center; background-repeat: no-repeat; background-color: transparent;} SECTION.product ARTICLE DIV.product-price DIV.info {background-color: #F7F7F7;} SECTION.product ARTICLE DIV.product-price DIV.info P {margin: 10px 0 10px 0; text-align: center; align-self: center; align-items: center;} SECTION.product ARTICLE DIV.icon-pzn {padding-left:45px; background-image:url(../images/icon-barcode-blue.svg); background-repeat:no-repeat; background-size: 35px auto; background-position: left center;} SECTION.product ARTICLE DIV.icon-inhalt {padding-left:45px; background-image:url(../images/icon-drop-blue.svg); background-repeat:no-repeat; background-size: 35px auto; background-position: left center;} /*SECTION.product ARTICLE DIV.basket {padding: 10px 0 0 0; display: flex;align-items: center;}*/ SECTION.product ARTICLE DIV.basket {display: flex; align-items: center; position: relative;} SECTION.product ARTICLE DIV.basket.right {margin-left: auto;} SECTION.product ARTICLE DIV.basket SPAN {padding: 0 5px 0 5px;} SECTION.product ARTICLE DIV.basket INPUT[type="text"] {width:30px; text-align:center;} SECTION.product ARTICLE DIV.basket INPUT[type="submit"] {} SECTION.product ARTICLE P.klein {font-size:12px;} MAIN SECTION.content ARTICLE.checkout-card {padding: 10px; width: 30%; height: fit-content; background-color: #F7F7F7; box-sizing: border-box; border: 1px solid #DDDDDD; display: flex; flex-direction: column;} MAIN SECTION.content ARTICLE.checkout-card DIV {display: flex; align-items: center; gap: 20px;} MAIN SECTION.content ARTICLE.checkout-card DIV P {text-align: left; hyphens: none;} MAIN SECTION.content ARTICLE.checkout-card DIV IMG {height: 50px; width: 50px;} MAIN SECTION.content ARTICLE.checkout-card DIV.hightlightfehler {display: block; box-sizing: border-box; border: 1px solid #E6007E;} MAIN SECTION.content ARTICLE.checkout-card DIV.hightlightfehler H4 {color: #FF0000; font-size: 14px; font-weight: 600; line-height: 150%; text-transform: uppercase;} MAIN SECTION.content ARTICLE.checkout-card DIV.hightlightfehler UL {margin: 0; padding: 0;} MAIN SECTION.content ARTICLE.checkout-card DIV.hightlightfehler UL LI {margin: 20px 0 20px 0; padding: 0; font-size: 14px; line-height: 150%; list-style: none;} MAIN SECTION.content ARTICLE.checkout-card A, MAIN SECTION.content ARTICLE.checkout-card INPUT[type="submit"] {margin-top: auto; margin-left: auto;} MAIN SECTION.content DIV.two-columns.checkout-process-nav {margin-top:50px;} MAIN SECTION.content DIV.two-columns.checkout-process-nav DIV:nth-child(1){order:2;} MAIN SECTION.content DIV.two-columns.checkout-process-nav DIV INPUT.submit {float:right; margin:0px;} MAIN SECTION.content DIV.two-columns.checkout-process-nav DIV:nth-child(2){order:1;} MAIN SECTION.content DIV.two-columns DIV.next-steps UL {padding: 0; margin: 0; list-style-type: none;} MAIN SECTION.content DIV.two-columns DIV.next-steps UL {padding: 0; margin: 0; list-style-type: none;} MAIN SECTION.content DIV.three-columns {display: flex; justify-content: space-between; flex-wrap: wrap;} MAIN SECTION.content DIV.three-columns H3 {width: 100%;} MAIN SECTION.content DIV.three-columns H5 {width: 100%;} MAIN SECTION.content DIV.three-columns FORM {width: 100%;} /*MAIN SECTION.content DIV.three-columns FORM INPUT[type="text"] {padding: 0; margin: 0; height: 30px;}*/ /*MAIN SECTION.content DIV.three-columns FORM INPUT[type="submit"] {padding: 0 30px 0 30px; height: 30px;}*/ MAIN SECTION.content DIV.three-columns > DIV {width: 30%;} MAIN SECTION.content DIV.three-columns DIV.two-columns {width: 60%;} MAIN SECTION.content DIV.three-columns DIV.checkout_info_count3, MAIN SECTION.content DIV.three-columns DIV.checkout_info_count4 {margin-top: 30px; width: 100%; display: flex; flex-wrap: wrap; gap: 30px;} /*MAIN SECTION.content DIV.three-columns DIV.checkout_info_count3 > DIV {width: 30%;}*/ /*MAIN SECTION.content DIV.three-columns DIV.checkout_info_count4 > DIV {width: 23%;}*/ /*MAIN SECTION.content DIV.three-columns DIV.checkout_info_count3 H3.no-image {margin-bottom: 60px;}*/ MAIN SECTION.content DIV.three-columns DIV.checkout_info_count3 DIV.checkout_info {display: flex; flex-direction: column; max-width: 30%;} MAIN SECTION.content DIV.three-columns DIV.checkout_info_count4 DIV.checkout_info {display: flex; flex-direction: column; max-width: 24%;} /*MAIN SECTION.content DIV.three-columns DIV.checkout_info_count3 DIV.checkout_info > IMG {height: 50px; align-self: start;}*/ MAIN SECTION.content DIV.three-columns DIV.checkout_info_count3 DIV.checkout_info > H3, MAIN SECTION.content DIV.three-columns DIV.checkout_info_count4 DIV.checkout_info > H3 {margin: 0; padding: 0; font-size: 16px; line-height: 20px; font-weight: normal;} MAIN SECTION.content DIV.three-columns DIV.checkout_info_count3 DIV.checkout_info > A, MAIN SECTION.content DIV.three-columns DIV.checkout_info_count4 DIV.checkout_info > A {padding-left: 20px; margin-top: auto; background-position: -5px center; font-size: 16px;} /*MAIN SECTION.content DIV.three-columns DIV.checkout_info_count4 DIV.checkout_info > A {font-size: 12px; line-height: 14px;}*/ MAIN SECTION.content DIV.three-columns DIV.checkout_info_count3 DIV.checkout_info > P, MAIN SECTION.content DIV.three-columns DIV.checkout_info_count4 DIV.checkout_info > P {font-size: 16px; line-height: 18px; text-align: left; hyphens: none;} .warenkorb_highlight {display:block; margin:20px 0px 20px 0px; padding: 10px; background-color:#F7F7F7; border:1px solid #DDDDDD;} .warenkorb_highlight p {font-size:16px; line-height:18px; margin:10px 0px 0px 0px;} .warenkorb_highlight DIV {display: flex; justify-content: flex-end;} FORM[name="form_infopaket"] DIV.checkbox {margin-bottom: 30px; display: flex; align-items: flex-start; gap: 20px;} FORM[name="form_infopaket"] DIV.checkbox > * {flex: 1;} FORM[name="form_infopaket"] LABEL.checkbox {display: flex; align-items: flex-start; gap: 0.5em; cursor: pointer;} FORM[name="form_infopaket"] SPAN.checkbox {hyphens: auto; word-break: break-word; overflow-wrap: break-word;} /*FOOTER SECTION#seals {background-color: #35393C;}*/ /*FOOTER SECTION#seals {background-color: #18418D;} FOOTER SECTION#seals DIV.wrapper.seal-container {padding: 30px 0px 30px 0px; display: flex; justify-content: space-between; box-sizing: border-box;} FOOTER SECTION#seals DIV.wrapper.seal-container H2 {margin: 0px 0px 0px 0px; padding: 30px 0px 30px 0px;} FOOTER SECTION#seals DIV.wrapper.seal-container ARTICLE {padding: 0; margin: 0; width: 30%; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; grid-template-rows: min-content auto; gap: 0 10px; align-items: center;} FOOTER SECTION#seals DIV.wrapper.seal-container ARTICLE H5 {margin: 5px 0px; font-size: 16px; color: #FFFFFF;} FOOTER SECTION#seals DIV.wrapper.seal-container ARTICLE IMG {width: 80px; height: auto; grid-row: 1 / span 2; display: flex; align-items: center; color: #FFFFFF;} FOOTER SECTION#seals DIV.wrapper.seal-container ARTICLE IMG.dermatest {height: 80px; width: auto;} FOOTER SECTION#seals DIV.wrapper.seal-container ARTICLE IMG.mobile {display: none;} FOOTER SECTION#seals DIV.wrapper.seal-container ARTICLE A:first-child {grid-row: 1 / span 2;} FOOTER SECTION#seals DIV.wrapper.seal-container ARTICLE A:hover {color: #D0D0D0;} FOOTER SECTION#seals DIV.wrapper.seal-container ARTICLE A:hover H5 {color: #D0D0D0;} FOOTER SECTION#seals DIV.wrapper.seal-container ARTICLE P {margin: 0; align-self: start; hyphens: auto; text-align: left; color: #FFFFFF; font-size: 14px; line-height: 18px;} */ FOOTER SECTION#social {padding:80px 0px 80px 0px; display:flex; justify-content:center; gap:40px; background: #F3F6F8; background: linear-gradient(180deg,rgba(243, 246, 248, 1) 0%, rgba(255, 255, 255, 1) 100%);} FOOTER SECTION#social IMG {height:auto; width:50px;} FOOTER SECTION#nav {background-color: #4f6ab1;} FOOTER SECTION#nav DIV.wrapper {padding: 30px 0px 60px 0px; display: flex; justify-content: center; gap: 10%; flex-wrap: wrap;} FOOTER SECTION#nav ARTICLE {margin: 0px;padding: 0px; width: 10%; max-width: 20%; box-sizing: border-box;font-size: 13px;line-height: 20px;color: #FFFFFF;} FOOTER SECTION#nav ARTICLE:not(:last-child) {width: fit-content;} FOOTER SECTION#nav ARTICLE:last-child {max-width: 300px;width: 220px;} FOOTER SECTION#nav ARTICLE SPAN.title {margin: 0px 0px 15px 0px;text-transform: uppercase;font-size: 15px;line-height: 22px;font-weight: 600; display: block} FOOTER SECTION#nav ARTICLE UL {margin: 0px;padding: 0px;list-style: none;} FOOTER SECTION#nav ARTICLE UL LI {margin: 0px;padding: 0px;list-style: none;font-size: 14px;line-height: 25px;} FOOTER SECTION#nav ARTICLE A {color: #FFFFFF;text-decoration: none;transition: color 0.5s;} FOOTER SECTION#nav ARTICLE A:hover {color: #FFFFFF; text-decoration: underline;} FOOTER SECTION#nav ARTICLE DIV { /*max-width: 50%;*/} FOOTER SECTION#nav ARTICLE.zahlung-versand DIV IMG {margin: -5px 5px 10px 0px;padding: 0px;height: autopx;width: 67px;display: inline-block;border: 0px;} FOOTER SECTION#nav ARTICLE IMG.dermatest {margin: 60px 0px 0px 0px; width:100%; max-width:190px;} FOOTER SECTION#nav ARTICLE LI.social {display:flex; column-gap:20px; justify-content:left; padding-top:20px;} FOOTER SECTION#nav ARTICLE LI.social IMG {width:40px; height:40px;} FOOTER SECTION#nav ARTICLE LI.jahre20 {padding-top:90px;} FOOTER SECTION#nav ARTICLE LI.jahre20 IMG {width:100%; height:auto; max-width:190px;} FOOTER SECTION#nav ARTICLE LI.diakompass {padding-top:20px;} FOOTER SECTION#nav ARTICLE LI.diakompass IMG {width:100%; height:auto; max-width:260px;} FOOTER SECTION#nav DIV.icons-mobile {display:none;} FOOTER SECTION#nav ARTICLE DIV.seal-container IMG {margin-bottom: 10px; width: auto; height: 60px;} FOOTER SECTION#nav ARTICLE DIV.seal-container IMG.mobile {display: none;} #backtotop { display: none; cursor: pointer; position: fixed; z-index: 500; border: 3px solid #B0B0B0; bottom: 20px; right: 20px; width: 30px; height: 30px; box-sizing: border-box; background-color: #000000; background-image: url("../images/arrow-up.svg"); transition: border-color 0.5s, background-image 0.5s; } #backtotop:hover { border: 3px solid #F0F0F0; background-image: url("../images/arrow-up-active.svg"); } #footline { margin: 0px; padding: 8px 0px 7px 0px; color: #FFFFFF; background-color: #313437; line-height: 20px; text-align: center; font-size: 12px; position: relative; width: 100%; } #footline A {color: #FFFFFF;} #footline A:hover {color: #D0D0D0;} /* Cookies Consten */ #cookies_consent {position:fixed; bottom:0; box-sizing:border-box; width:100%; padding:15px 0px 15px 0px; background-color:#FFFFFF; z-index:2147483647; -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.3); box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.3);} #cookies_consent .wrapper {width: 800px;} /*@media only screen and (min-width:800px){#cookies_consent .wrapper {max-width:800px;}}*/ #cookies_consent .cc_head {font-size:14px; line-height: 18px; font-weight: 600; padding-bottom:4px;} #cookies_consent .cc_text {font-size:13px; line-height: 16px;} #cookies_consent .cc_buttons {padding-top:8px; text-align:right; font-size:14px; line-height: 18px;} #cookies_consent .cc_buttons a {display:inline-block; background-color:rgba(0,0,0,0.3); padding:6px 10px 6px 10px; text-decoration:none; color:#ffffff;} #cookies_consent .cc_buttons a.cc_all {color:#FFFFFF; background-color:#18418D;} #cookies_consent .cc_buttons a:hover {color:#FFFFFF; background-color:#333333;} #cookies_consent .cc_buttons a.cc_all:hover {color:#FFFFFF; background-color:#E6007E;} #cookies_consent .cc_buttons a:not(:first-of-type) {margin-left:20px;} #cookies_consent .cc_typen {padding-top:16px; font-size:13px; line-height: 16px;} #cookies_consent .cc_typen a {display:inline-block; font-weight: 600; padding-left:20px; background-image:url(../images/icon-checkbox.svg); background-position:0px 0px; background-size: auto 15px; background-repeat:no-repeat;} #cookies_consent .cc_typen a.cc_active {background-image:url(../images/icon-checkbox-checked.svg);} #cookies_consent .cc_typen a.cc_someactive {background-image:url(../images/icon-checkbox-checked-grey.svg);} #cookies_consent .cc_typen a.cc_musthave {background-image:url(../images/icon-checkbox-checked-grey.svg); color:#888888; text-decoration:none;} #cookies_consent .cc_typen a:not(:first-of-type) {margin-left:20px;} #cookies_consent .cc_infos {display:none;padding-top:8px; margin-top:8px; border-top:1px solid #888888; font-size:13px; line-height: 16px;} #cookies_consent .cc_infos a {font-weight: 600; margin-top:12px; margin-bottom:4px;display:block; padding-left:20px; background-image:url(../images/icon-checkbox.svg); background-position:0px 0px; background-size: auto 15px; background-repeat:no-repeat;} #cookies_consent .cc_infos a.cc_active {background-image:url(../images/icon-checkbox-checked.svg);} #cookies_consent .cc_infos a.cc_musthave {background-image:url(../images/icon-checkbox-checked-grey.svg); color:#888888; text-decoration:none;} #cookies_consent .cc_links {padding-top:16px; text-align:right; font-size:13px; line-height: 16px;} #cookies_consent .cc_links a {display:inline-block;} #cookies_consent .cc_links a:not(:first-of-type) {margin-left:20px;} /*@media only screen and (max-width:720px){*/ /* #cookies_consent .cc_buttons {padding-top:16px; padding-bottom:8px; font-size:16px; line-height: 20px;}*/ /* #cookies_consent .cc_infos a {margin-top:20px;}*/ /* #cookies_consent .cc_links {padding-top:30px; font-size:12px; line-height: 15px;}*/ @media only screen and (max-width:1700px){ H1, H2 {font-size: 40px;} H3 {font-size: 30px;} H4 {font-size: 20px;} P {font-size: 18px;} UL>LI {font-size: 18px;} DIV.wrapper {width:1440px;} MAIN SECTION#teaser DIV.wrapper > H2 {font-size: 60px;} MAIN SECTION#teaser DIV.wrapper > H4 {font-size: 33px;} /* SECTION.products DIV.card-container {column-gap: 30px;} */ TABLE.warenkorb A.delete {left: 60%;} } @media only screen and (max-width:1460px){ DIV.wrapper {width:1200px;} HEADER SECTION#nav NAV#main {margin-left: 30px;} HEADER SECTION#nav NAV#main > DIV.wrapper-nav > UL > LI > A {padding: 17px 5px 10px 5px; font-size:16px; letter-spacing:-0.7px;} HEADER SECTION#nav FORM#search {width:200px;} HEADER SECTION#nav NAV#main DIV.wrapper-nav UL > LI > UL > LI A {font-size: 16px; letter-spacing:-0.7px;} /*MAIN SECTION#teaser DIV.wrapper > H4 {font-size: 32px; line-height: 36px;}*/ MAIN SECTION#teaser DIV.wrapper > H2 {font-size: 50px;} MAIN SECTION#teaser DIV.wrapper > H4 {font-size: 28px;} /* SECTION.products DIV.card-container {column-gap: 20px;} */ /* SECTION.products DIV.card-container > DIV > A > P {hyphens: none;} */ /* SECTION.products DIV.card-container > DIV > A > H3 {font-size:22px; line-height:30px;} */ MAIN SECTION.content > DIV.two-columns > DIV.double-image-container{flex-direction: column;} MAIN SECTION.content > DIV.two-columns > DIV.double-image-container.image-on-top {align-items: center;} MAIN SECTION.content > DIV.two-columns > DIV.double-image-container:first-child > IMG {height: auto; max-width: 80%; max-height: none;} MAIN SECTION.content > DIV.two-columns > DIV.double-image-container:first-child > IMG:first-child {top: 5%; left: -5%; width: 60%;} MAIN SECTION.content > DIV.two-columns > DIV.double-image-container:first-child > IMG:last-child {top: -5%; right: -5%; width: 70%;} MAIN SECTION.content > DIV.two-columns > DIV.double-image-container.image-on-top:first-child > IMG:last-child {top: -10%; bottom: 0;} MAIN SECTION.content > DIV.two-columns > DIV.double-image-container:last-child > IMG {height: auto; max-width: 80%; max-height: none;} MAIN SECTION.content > DIV.two-columns > DIV.double-image-container:last-child > IMG:first-child {order: 2; top: -5%; left: -5%; width: 60%;} MAIN SECTION.content > DIV.two-columns > DIV.double-image-container:last-child > IMG:last-child {order: 1; top: 5%; right: -5%; width: 70%;} MAIN SECTION.content > DIV.two-columns > DIV.double-image-container.mobile-row {flex-direction: row;} MAIN SECTION.content > DIV.two-columns > DIV.double-image-container.mobile-row > IMG {width: 50%;} MAIN SECTION.content > DIV.two-columns > DIV.double-image-container.mobile-row:last-child > IMG:first-child {order: 1; top: 7.5%; left: 5%; width: 40%;} MAIN SECTION.content > DIV.two-columns > DIV.double-image-container.mobile-row:last-child > IMG:last-child {order: 2; top: -7.5%; bottom: 7.5%; right: 5%; width: 50%;} MAIN SECTION.content DIV.three-columns DIV.checkout_info_count3 DIV.checkout_info {max-width: 45%;} MAIN SECTION.content DIV.three-columns DIV.checkout_info_count4 DIV.checkout_info {max-width: 45%;} SECTION.product ARTICLE DIV.product-data-4 {flex-wrap: wrap; row-gap:50px;} SECTION.product ARTICLE DIV.product-data-4>DIV {width:40%; box-sizing:border-box;} /*DIV.table-container {grid-template-columns: repeat(2, 1fr);}*/ TABLE.ingredients {grid-template-columns: repeat(2, 1fr);} SECTION.product DIV.produkt DIV.product-spec {width: 100%;} SECTION.product DIV.produkt DIV.flex {flex-direction: column;} SECTION.product DIV.produkt DIV.produktwarenkorb {justify-content: end;} /*MAIN SECTION.rezensionen DIV.rezensionen > ARTICLE {flex: 1 1 45%;}*/ TABLE.warenkorb A.delete {left: 80%;} MAIN SECTION.content DIV.three-columns DIV.checkout_info_count3 DIV.checkout_info > A {font-size: 14px;} FOOTER SECTION#nav ARTICLE DIV.seal-container IMG.desktop {display: none;} FOOTER SECTION#nav ARTICLE DIV.seal-container IMG.mobile {display: inline-block;} } @media only screen and (min-width: 1221px){ HEADER SECTION#nav NAV#main {height: auto; opacity: 1 !important; display: flex !important;} HEADER SECTION#nav ASIDE#checkoutASIDE {display: none;} HEADER SECTION#nav NAV#checkoutnav-mobile {display: none !important;} } @media only screen and (max-width:1220px){ /*H1:first-child, H2:first-child, H3:first-child:not(SECTION.content > DIV.wrapper > H3, SECTION.content > DIV.wrapper > DIV > H3, ARTICLE.checkout-card H3) {margin-top: 60px;}*/ FORM DIV.two-columns TABLE.plus-three-rows {padding-bottom: 0;} DIV.wrapper {width:960px;} DIV.wrapper-nav {padding: 0px 30px 0px 30px; margin: 0 auto; width:960px; box-sizing: border-box;} HEADER SECTION#nav NAV#main DIV.wrapper-nav {text-align: center; } HEADER SECTION#nav DIV.wrapper {justify-content: space-between;} HEADER SECTION#nav NAV#main {display: none; align-items: flex-start; background-color: #F7F7F7; z-index: 100; position: absolute; top: 100px; margin:0px; left: 0px; right: 0px; height: auto; box-sizing: border-box; border-bottom: 1px solid #18418D; justify-content: center;} HEADER SECTION#nav NAV#main.open-mobile {display: flex;box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);} /*HEADER SECTION#nav NAV#main > DIV.wrapper-nav {margin: 0 auto; text-align: center;}*/ HEADER SECTION#nav NAV#main > DIV.wrapper-nav>UL {padding: 40px 0px 40px 0px;display: block;} HEADER SECTION#nav NAV#main > DIV.wrapper-nav UL LI A {padding: 10px 10px 10px 10px;line-height: 35px;font-size: 25px;} HEADER SECTION#nav NAV#main > DIV.wrapper-nav>UL>LI:hover>A {color: #E6007E;} /*HEADER SECTION#nav NAV DIV.wrapper-nav UL LI UL {padding: 0px 0px 0px 30px; height: 100%; position: relative;box-shadow: none;opacity: 1;visibility: visible; background-color: transparent;}*/ HEADER SECTION#nav NAV#main > DIV.wrapper-nav UL LI UL {padding: 0px 0px 30px 0px; display: none; position: relative;box-shadow: none; background-color: transparent;} HEADER SECTION#nav NAV#main > DIV.wrapper-nav UL LI UL LI {padding: 0px 0px 0px 0px;} HEADER SECTION#nav NAV#main > DIV.wrapper-nav UL LI UL LI A {padding: 5px 10px 5px 10px; color: #454749;} HEADER SECTION#nav NAV#main > DIV.wrapper-nav UL LI UL LI:hover A {color: #E6007E;} HEADER SECTION#nav NAV#main > DIV.wrapper-nav UL > LI > UL > LI.active {background: transparent;} HEADER SECTION#nav NAV#main > DIV.wrapper-nav UL > LI > UL > LI.active > A {color: #E6007E;} HEADER SECTION#nav NAV#main DIV.wrapper-nav UL > LI > UL > LI:hover {background-color: transparent;} HEADER SECTION#nav NAV#main DIV.wrapper-nav UL > LI > UL > LI.active {background-color: transparent;} HEADER SECTION#nav NAV#main LI.mobile-only {display: block;} HEADER SECTION#nav NAV#main DIV.wrapper-nav UL > LI > UL {display: block;} HEADER SECTION#nav NAV#main DIV.wrapper-nav UL > LI > UL > LI {background: transparent;} HEADER SECTION#nav FORM#search INPUT[type="submit"] {height: 35px;width: 35px;} HEADER SECTION#nav ASIDE {padding-left: 0px;} HEADER SECTION#nav ASIDE A.icon-menu {display: block;} HEADER SECTION#nav ASIDE {gap: 40px;} HEADER SECTION#nav ASIDE A {height: 35px;width: 35px;} HEADER SECTION#nav NAV#checkoutnav {margin: 0 auto 0 auto;} HEADER SECTION#nav NAV#checkoutnav UL LI {display: none;} HEADER SECTION#nav NAV#checkoutnav UL LI.active {display: block;} HEADER SECTION#nav ASIDE>A.icon-shopping-cart span {top:-7px; right:6px;} MAIN SECTION#teaser DIV.wrapper {position: relative;} MAIN SECTION#teaser DIV.wrapper > H2 {font-size: 45px; max-width: 75%;} MAIN SECTION#teaser DIV.wrapper > H4 {font-size: 25px; max-width: 75%;} MAIN SECTION#teaser DIV.wrapper > A {position: absolute; bottom: 0%;} MAIN SECTION.content DIV.shopicons {justify-content: center; column-gap:9.5%; row-gap: 30px;} MAIN SECTION.content DIV.shopicons>DIV {width:27%;} SECTION.products DIV.card-container {grid-template-columns: repeat(3, 1fr); column-gap: 50px; row-gap: 40px;} SECTION.products DIV.card-container > DIV > A > H3 {font-size:30px; line-height:40px;} MAIN SECTION.content > DIV.wrapper.two-columns > DIV:last-child > DIV.search-entry:first-child {padding-top: 20px;} /*MAIN SECTION#teaser {background-image: url("../images/img-teaser-mobile.jpg"); aspect-ratio: 2/3;}*/ /*MAIN SECTION#teaser {max-width:1920px;background-image: url("../images/img-teaser.jpg");background-size: cover;aspect-ratio: 1920/700;}*/ /*MAIN SECTION#teaser DIV.wrapper {display: grid; grid-template-rows: 70% 15% 15%;}*/ /*MAIN SECTION#teaser DIV.wrapper > H2 {text-align: center;}*/ /*MAIN SECTION#teaser DIV.wrapper > H4 {margin: 0 auto; align-self: center; text-align: center; max-width: 100%;}*/ /*MAIN SECTION#teaser DIV.wrapper > A.submit {margin: 20px auto; align-self: center;}*/ MAIN SECTION.content DIV.two-columns {row-gap: 30px;} MAIN SECTION.content DIV.two-columns > DIV {width: 75%;} MAIN SECTION.content DIV.two-columns > DIV.bildergallerie {width: 100%;} MAIN SECTION.content DIV.two-columns-wrap > DIV > DIV {width:75%} MAIN SECTION.content DIV.two-columns-wrap.mobile-switch > DIV > DIV.mobilefirst {order: -1;} /*MAIN SECTION.content DIV.two-columns > DIV:last-child > H2:first-child {padding-top: 50px;}*/ /*MAIN SECTION.content DIV.two-columns > DIV:last-child > H3:first-child {margin-top: 50px;}*/ /*MAIN SECTION.content DIV.two-columns > DIV:last-child {margin-top: 50px;}*/ MAIN SECTION.content DIV.two-columns DIV.breakpoint {margin-top: 50px;} MAIN SECTION.content > DIV.two-columns > DIV.double-image-container {display: none;} MAIN SECTION.content > DIV.two-columns > DIV > DIV.double-image-container {margin-top: 50px; display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative;} MAIN SECTION.content > DIV.two-columns > DIV > DIV.double-image-container > IMG {height: auto; width: 40%; max-height: 380px; max-width: 380px; position: relative; border-radius: 50%; display: flex; aspect-ratio: 1/1;box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);} MAIN SECTION.content > DIV.two-columns > DIV > DIV.double-image-container > IMG:first-child {right: -2.5%; width: 35%;} MAIN SECTION.content > DIV.two-columns > DIV > DIV.double-image-container > IMG:last-child {left: -2.5%; width: 45%;} /*MAIN SECTION.content > DIV.two-columns > DIV > DIV.double-image-container.mobile-row > IMG {width: 40%;}*/ /*MAIN SECTION.content > DIV.two-columns > DIV > DIV.double-image-container:last-child > IMG:first-child {order: 1; top: 0; left: 0; right: -2.5%;}*/ /*MAIN SECTION.content > DIV.two-columns > DIV > DIV.double-image-container:last-child > IMG:last-child {order: 2; top: 0; left: -2.5%; right: 0;}*/ MAIN SECTION.content DIV.two-columns > DIV > FORM {margin-top: 50px;} /*MAIN SECTION.content DIV.two-columns > DIV:last-child > H3 {margin-top: 50px;}*/ /*MAIN SECTION.content DIV.two-columns > DIV:last-child > H2 {margin-top: 50px;}*/ MAIN SECTION.content DIV.two-columns > DIV.side-contact {padding-top: 50px;} MAIN SECTION.content DIV.two-columns > DIV.side-contact > DIV {width: 50%;} MAIN SECTION.content.product {padding-top: 0px;} MAIN SECTION.content.product DIV.two-columns > DIV:last-child {margin-top: 0px;} MAIN SECTION.content.product DIV.two-columns > DIV:last-child.produkt > H3 {margin-top: 0px;} /*SECTION.product ARTICLE DIV.product-spec{width: 75%;}*/ SECTION.product ARTICLE DIV.flex {flex-direction: row;} MAIN SECTION.content DIV.two-columns DIV#klinische-anwendungsstudie {padding-bottom: 50px;} MAIN SECTION.content DIV.two-columns DIV#hautphysiologische-untersuchung {padding-top: 50px;} /* Kacheln */ MAIN SECTION.content DIV.kacheln-3 {justify-content: space-between; } MAIN SECTION.content DIV.kacheln-3>DIV {width:30%;} /* 3er Banner */ SECTION.banner3 DIV.wrapper {justify-content: space-between;} SECTION.banner3 DIV.wrapper>ARTICLE {width:30%;} TABLE.warenkorb A.delete {left: 60%;} MAIN SECTION.content ARTICLE.checkout-card {width: 45%;} MAIN SECTION.content ARTICLE#loginform {margin-top: 50px; width: 45%;} MAIN SECTION.content DIV.two-columns > DIV > IMG.infopaket.right {display: none;} MAIN SECTION.content DIV.two-columns > DIV > IMG.infopaket.top {display: block;} MAIN SECTION.rezensionen DIV.rezensionen ARTICLE.rezension:not(:last-child) {margin-bottom: 100px;} /*FOOTER SECTION#seals DIV.wrapper.seal-container {display: block;}*/ /*FOOTER SECTION#seals DIV.wrapper ARTICLE {margin: 0; width: 100%; border: none;}*/ /*FOOTER SECTION#seals DIV.wrapper ARTICLE:first-child {padding: 60px 2% 0px 2%; border: none;}*/ /*FOOTER SECTION#seals DIV.wrapper ARTICLE:last-child {padding: 0px 2% 60px 2%;}*/ } @media only screen and (max-width:1080px){ SECTION.product {display:block;} SECTION.product DIV.mobilehead {display:block;} SECTION.product ASIDE {width: 100%; position:relative;} SECTION.product ASIDE DIV.produktimages.desktop {display:none;} SECTION.product ASIDE DIV.produktimages.mobile {display:block;} SECTION.product ARTICLE {width: 100%; max-width: auto; position: relative; padding-left:20px; padding-right:20px;} SECTION.product ARTICLE H1.mobilehidden {display:none;} } @media only screen and (max-width:980px){ H1, H2 {font-size: 30px;} H3 {font-size: 24px;} H4 {font-size: 18px;} .mobilehidden {display:none;} DIV.wrapper {width:720px;justify-content: space-between;} DIV.wrapper-nav {width:720px;justify-content: space-between;} #cookies_consent DIV.wrapper {width: 720px;} /*MAIN SECTION#teaser {background-image: url("../images/teaser-mobile.jpg");aspect-ratio: 3/4;}*/ MAIN SECTION#teaser DIV.wrapper {padding-top: 3%; position: relative;} MAIN SECTION#teaser DIV.wrapper > H2 {font-size: 40px;} MAIN SECTION#teaser DIV.wrapper > H4 {font-size: 22px;max-width: 100%;} MAIN SECTION#teaser DIV.wrapper > A.submit {font-size: 16px; position: absolute; bottom: 0%;} /*MAIN SECTION.content DIV.two-columns {display: block;}*/ /*MAIN SECTION.content DIV.two-columns > DIV {margin: 50px 0px 0px 0px; width: 100%;}*/ MAIN SECTION.content DIV.two-columns > DIV {width: 100%;} MAIN SECTION.content DIV.two-columns-wrap > DIV > DIV {width: 100%;} SECTION.products DIV.wrapper P {width: 100%;} SECTION.products DIV.card-container {column-gap: 20px; row-gap: 30px;} SECTION.products DIV.card-container > DIV > A > H3 {font-size:22px; line-height:30px;} MAIN SECTION.content ARTICLE.checkout-card {height: auto;} MAIN SECTION.content ARTICLE#loginform {width: 100%;} MAIN SECTION.content DIV.three-columns > DIV, MAIN SECTION.content DIV.three-columns > DIV.two-columns {width: 100%;} MAIN SECTION.content DIV.three-columns > DIV:not(:first-child) {margin-top: 50px;} /* 3er Banner */ SECTION.banner3 DIV.wrapper {flex-wrap: wrap; row-gap:40px;} SECTION.banner3 DIV.wrapper>ARTICLE {width:45%;} SECTION.banner3 DIV.wrapper>ARTICLE:last-child {margin:auto auto;} FOOTER SECTION#seals DIV.wrapper.seal-container {padding: 30px 50px 30px 50px; display: block;} FOOTER SECTION#seals DIV.wrapper.seal-container ARTICLE {margin: 20px 0px 20px 0px; width: 100%; border: none;} FOOTER SECTION#seals DIV.wrapper.seal-container ARTICLE:first-child {margin-top: 0;} FOOTER SECTION#seals DIV.wrapper.seal-container ARTICLE:last-child {margin-bottom: 0;} FOOTER SECTION#seals DIV.wrapper.seal-container ARTICLE IMG.desktop {display: none;} FOOTER SECTION#seals DIV.wrapper.seal-container ARTICLE IMG.mobile {display: flex;} FOOTER SECTION#nav DIV.wrapper {padding: 30px 50px 30px 50px; justify-content: space-between;} FOOTER SECTION#nav ARTICLE {width: 25%;max-width: 25%;} FOOTER SECTION#nav ARTICLE H4 {font-size: 20px;line-height: 30px;} FOOTER SECTION#nav ARTICLE UL LI {font-size: 15px;line-height: 30px;} FOOTER SECTION#nav ARTICLE.zahlung-versand {margin: 0px; padding: 30px 0px 0px 0px;display: flex;width: 100%;max-width: 100%;justify-content: space-between;flex-wrap: wrap;} FOOTER SECTION#nav ARTICLE.zahlung-versand > DIV {max-width: 50%;} FOOTER SECTION#nav ARTICLE.seal-container {width: 50%; max-width: 50%;} /*FOOTER SECTION#nav ARTICLE DIV.seal-container {width: 75%; max-width: 75%;}*/ /*#footline {font-size: 14px;}*/ } @media only screen and (min-width:741px) { HEADER SECTION#nav FORM#search {height: auto !important;opacity: 1 !important;display: flex !important;} HEADER SECTION#nav FORM#search INPUT[type="text"] {height: auto !important;} } @media only screen and (max-width:740px){ .desktop-only {display:none;} SECTION.product ARTICLE DIV.product-price > FORM > DIV, SECTION.product ARTICLE DIV.product-price > DIV {display:flex; flex-wrap:wrap; row-gap:20px; margin-top:70px; justify-content: right;} H4.price {width: auto; display: flex; flex-direction: column; align-items: flex-end;} H4.price SPAN.uvp {margin-left: 0px;} DIV.wrapper {width:480px;} DIV.wrapper-nav {width:480px;justify-content: space-between;} #cookies_consent DIV.wrapper {width: 480px;} /*HEADER SECTION#highlights {font-size: 10px;}*/ HEADER SECTION#nav A#logo {padding: 0px 10px 0px 10px;} HEADER SECTION#nav FORM#search {margin: 0px;padding: 0px;display: none;z-index: 100;background-color: #F7F7F7;border: none;position: absolute;top: 131px;left: 0px;right: 0px;height: 60px;box-sizing: border-box;justify-content: center;} HEADER SECTION#nav FORM#search.open-mobile {display: flex;} HEADER SECTION#nav FORM#search INPUT[type="text"] {height: 40px;width: 350px;background-color: #F5F5F5;border-left: 1px solid #18448D33;border-top: 1px solid #18448D33;border-bottom: 1px solid #18448D33;border-right: none;border-top-left-radius: 18px;border-bottom-left-radius: 18px;} HEADER SECTION#nav FORM#search INPUT[type="submit"] {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;height: 40px;width: 60px;background-color: #F5F5F5;border-top: 1px solid #18448D33;border-bottom: 1px solid #18448D33;border-right: 1px solid #18448D33;border-left: none;border-top-right-radius: 18px;border-bottom-right-radius: 18px;background-size: auto 80%;} HEADER SECTION#nav ASIDE {margin: 0 0 0 0; gap: 0px; height: 100%; align-items: center;} HEADER SECTION#nav ASIDE A {padding: 0px 10px 0px 10px; height: 40px; width: 40px;} HEADER SECTION#nav ASIDE A.icon-search {display: block;} HEADER SECTION#nav ASIDE#checkoutASIDE A {padding: 0px;} HEADER SECTION#nav ASIDE>A.icon-shopping-cart span {top:-7px; right:18px;} /*HEADER SECTION#nav NAV {height: 1000px !important;}*/ /*HEADER SECTION#highlights DIV {font-size: 10px;}*/ HEADER .image-link {padding: 0px 0px 0px 0px;height: 40px;width: 40px;} HEADER ASIDE {display: flex;justify-content: space-between;} TABLE.info TH.desktop-only {display: none;} TABLE.info TD.desktop-only {display: none;} TABLE.info SPAN.mobile-only {display: block; font-size: 14px;} SPAN.desktop-only {display: none;} SPAN.mobile-only {display: block;} MAIN SECTION#teaser {background-image: url("../images/teaser-lebensfreude-mobile-v2.jpg");aspect-ratio: 960/1358;} MAIN SECTION#teaser:before {right:auto; left:1%; top:-15px; width:100px; transform: rotate(-20deg);} /*MAIN SECTION#teaser DIV.wrapper {display: grid; grid-template-rows: 33% 33% 33%;}*/ MAIN SECTION#teaser DIV.wrapper {padding-top: 10%;} MAIN SECTION#teaser DIV.wrapper > H2 {font-size: 40px; margin-top: 20px; max-width: 100%; text-align: center;} MAIN SECTION#teaser DIV.wrapper > H4 {font-size: 30px; margin-top: 40px; max-width: 100%; text-align: center;} MAIN SECTION#teaser DIV.wrapper > A.submit {right: 50%; transform: translateX(50%);} MAIN SECTION.content ARTICLE.checkout-card {width: 100%;} MAIN SECTION.content ARTICLE.checkout-card:not(:first-child) {margin-top: 50px; } MAIN SECTION.content DIV.two-columns FORM > DIV:last-child {flex-direction: column; align-items: start;} MAIN SECTION.content DIV.two-columns DIV#klinische-anwendungsstudie .highcharts-xaxis-labels TEXT {font-size: 14px;} MAIN SECTION.content DIV.two-columns DIV#hautphysiologische-untersuchung .highcharts-plot-band-label {font-size: 16px;} /*MAIN SECTION.content DIV.two-columns DIV#hautphysiologische-untersuchung .highcharts-xaxis-labels TEXT {font-size: 14px;}*/ MAIN SECTION.content DIV.two-columns > DIV.side-contact {padding-top: 50px;} MAIN SECTION.content DIV.two-columns > DIV.side-contact > DIV {width: 100%;} MAIN SECTION.content DIV.two-columns > DIV.side-contact > DIV > IMG {margin: 20px 0px 50px 0px; max-width: 80%; width: auto; height: auto;} MAIN SECTION.content DIV.two-columns > DIV.flex {flex-direction: column; align-items: flex-end;} MAIN SECTION.content DIV.shopicons {column-gap:5%;} MAIN SECTION.content DIV.shopicons>DIV {width:30%;} MAIN SECTION.content DIV.shopicons>DIV>P {font-size:14px; line-height:21px; height:42px;} SECTION.products DIV.card-container {grid-template-columns: repeat(2, 1fr); column-gap: 10px; row-gap: 30px;} SECTION.products DIV.card-container > DIV > A > H3 {font-size:20px; line-height:28px;} SECTION.product ARTICLE DIV.product-data {width: 100%; flex-wrap: wrap; gap: 20px;} SECTION.product ARTICLE DIV.product-data-4 DIV {min-width: 45%;} SECTION.product ARTICLE DIV.flex {flex-direction: column;} MAIN SECTION.content DIV.two-columns FORM DIV A.button {display: block; width: 100%;} MAIN SECTION.content DIV.two-columns FORM DIV A.submit {display: block; width: 100%; max-width: 100%;} MAIN SECTION.content DIV.two-columns FORM DIV A:last-child {margin-top: 0px;} MAIN SECTION.content DIV.two-columns FORM TD.desktop {display: none;} MAIN SECTION.content DIV.two-columns FORM TD.mobile {display: table-cell;} TABLE.warenkorb TH > DIV {top: 33%;} /*MAIN SECTION.content DIV.two-columns FORM TH.product-name {overflow-wrap: anywhere; word-wrap: anywhere;}*/ TABLE.warenkorb th.product-name SPAN.brand::after {content: '\A'; white-space: pre;} BODY.checkout MAIN SECTION.content DIV.two-columns ARTICLE.gast-register {width:48%; margin:0px; position:relative; padding-bottom:70px;} BODY.checkout MAIN SECTION.content DIV.two-columns ARTICLE.gast-register H3 {display:block; font-size:20px; line-height:25px;} BODY.checkout MAIN SECTION.content DIV.two-columns ARTICLE.gast-register P {display:block; font-size:16px; line-height:21px;} BODY.checkout MAIN SECTION.content DIV.two-columns ARTICLE.gast-register DIV {display:block;} BODY.checkout MAIN SECTION.content DIV.two-columns ARTICLE.gast-register DIV>IMG {position:absolute; bottom:20px;} BODY.checkout MAIN SECTION.content DIV.two-columns ARTICLE.gast-register DIV>IMG {position:absolute; bottom:20px; left:10px;} BODY.checkout MAIN SECTION.content DIV.two-columns ARTICLE.gast-register A.submit {position:absolute; bottom:20px; right:10px; margin:0px;} MAIN SECTION.content ARTICLE.checkout-card DIV IMG {width:35px; height:35px;} HEADER SECTION#nav NAV#checkoutnav {display:none;} MAIN SECTION.content DIV.two-columns.checkout-process-nav DIV:nth-child(1){order:1;} MAIN SECTION.content DIV.two-columns.checkout-process-nav DIV INPUT.submit {float:none; margin:0px 0px 30px 0px; width:100%; max-width:100%; box-sizing:border-box;} MAIN SECTION.content DIV.two-columns.checkout-process-nav DIV:nth-child(2){order:2;} MAIN SECTION.content DIV.three-columns DIV.checkout_info_count3 {flex-direction: column;} MAIN SECTION.content DIV.three-columns DIV.checkout_info_count3 DIV.checkout_info {width: 100%;} MAIN SECTION.content DIV.three-columns DIV.checkout_info_count3 DIV.checkout_info:not(:first-child) {padding-top: 20px;} /* Kacheln */ MAIN SECTION.content DIV.kacheln-3 {flex-wrap: wrap; row-gap:40px;} MAIN SECTION.content DIV.kacheln-3>DIV {width:45%;} MAIN SECTION.content DIV.kacheln-3>DIV:last-child {margin:auto auto;} /* 3er Banner */ SECTION.banner3 DIV.wrapper {flex-wrap: wrap;} SECTION.banner3 DIV.wrapper>ARTICLE {width:100%;} SECTION.banner3 DIV.wrapper>ARTICLE:last-child {margin:0;} MAIN SECTION.rezensionen DIV.rezensionen ARTICLE.rezension {min-width: 440px; width: 440px; max-width: 440px;} FOOTER SECTION#seals DIV.wrapper.seal-container {padding: 30px 30px 30px 30px;} FOOTER SECTION#social {display:none;} FOOTER SECTION#nav DIV.wrapper {padding: 30px 10px 30px 10px;} FOOTER SECTION#nav ARTICLE {display: none;} FOOTER SECTION#nav ARTICLE:last-child {padding: 0px 0px 0px 0px;display: flex;width: 100%;max-width: 100%;justify-content: space-between;} FOOTER SECTION#nav ARTICLE.zahlung-versand>DIV:not(:last-child) {width: 65%;max-width: 65%;} FOOTER SECTION#nav DIV.icons-mobile {width:100%; display:flex; justify-content:space-between; padding-bottom:40px; flex-wrap: wrap; row-gap:40px;} FOOTER SECTION#nav DIV.icons-mobile DIV {width:auto!important; max-width:auto!important;} FOOTER SECTION#nav DIV.icons-mobile DIV.social {display:flex; column-gap:20px; justify-content:left;} FOOTER SECTION#nav DIV.icons-mobile DIV.social IMG {width:80px; height:80px;} FOOTER SECTION#nav DIV.icons-mobile DIV.jahre20 IMG {width:170px;} FOOTER SECTION#nav DIV.icons-mobile DIV.dermatest IMG {width:170px;} FOOTER SECTION#nav DIV.icons-mobile DIV.diakompass IMG {width:200px;} /*#footline {font-size: 9px;}*/ }/*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('../js/fancybox/source/fancybox_sprite.png'); } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url('../js/fancybox/source/fancybox_loading.gif') center center no-repeat; } .fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('../js/fancybox/source/blank.gif'); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: hidden; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: rgba(33,33,33,0.75); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); }