@charset "utf-8"; /** * @license * MyFonts Webfont Build ID 3016676, 2015-04-28T05:55:02-0400 * * The fonts listed in this notice are subject to the End User License * Agreement(s) entered into by the website owner. All other parties are * explicitly restricted from using the Licensed Webfonts(s). * * You may obtain a valid license at the URLs below. * * Webfont: FuturaBT-Book by Bitstream * URL: http://www.myfonts.com/fonts/bitstream/futura/book/ * * Webfont: FuturaBT-Bold by Bitstream * URL: http://www.myfonts.com/fonts/bitstream/futura/bold/ * * Webfont: FuturaBT-Heavy by Bitstream * URL: http://www.myfonts.com/fonts/bitstream/futura/heavy/ * * * License: http://www.myfonts.com/viewlicense?type=web&buildid=3016676 * Licensed pageviews: 10,000 * Webfonts copyright: Copyright 1990-2003 Bitstream Inc. All rights reserved. * * © 2015 MyFonts Inc */ /* Text #22304F rgba(34, 48, 79, 1) darkblue #11304D rgba(17, 48, 77, 1) blue #009FE3 rgba(0, 159, 227, 1) lightblue #E4EAEF rgba(233, 245, 251, 1) grauer text #9e9e9e; hintergrundgrau #E0E2DE magenta #e6007e; usericon
Icons made by Lucy G from www.flaticon.com is licensed by CC 3.0 BY
userfullicon
Icons made by Dave Gandy from www.flaticon.com is licensed by CC 3.0 BY
*/ /* @import must be at top of file, otherwise CSS will not work */ /*@import url("//hello.myfonts.net/count/2e07e4");*/ @font-face {font-family: 'FuturaBT-Book';src: url('../webfonts/2E07E4_0_0.eot');src: url('../webfonts/2E07E4_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/2E07E4_0_0.woff2') format('woff2'),url('../webfonts/2E07E4_0_0.woff') format('woff'),url('../webfonts/2E07E4_0_0.ttf') format('truetype');} @font-face {font-family: 'FuturaBT-Bold';src: url('../webfonts/2E07E4_1_0.eot');src: url('../webfonts/2E07E4_1_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/2E07E4_1_0.woff2') format('woff2'),url('../webfonts/2E07E4_1_0.woff') format('woff'),url('../webfonts/2E07E4_1_0.ttf') format('truetype');} @font-face {font-family: 'FuturaBT-Heavy';src: url('../webfonts/2E07E4_2_0.eot');src: url('../webfonts/2E07E4_2_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/2E07E4_2_0.woff2') format('woff2'),url('../webfonts/2E07E4_2_0.woff') format('woff'),url('../webfonts/2E07E4_2_0.ttf') format('truetype');} /* open-sans-300 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('../googlefonts/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('../googlefonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../googlefonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../googlefonts/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */ url('../googlefonts/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../googlefonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../googlefonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../googlefonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../googlefonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../googlefonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../googlefonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../googlefonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-500 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 500; src: url('../googlefonts/open-sans-v34-latin-500.eot'); /* IE9 Compat Modes */ src: local(''), url('../googlefonts/open-sans-v34-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../googlefonts/open-sans-v34-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('../googlefonts/open-sans-v34-latin-500.woff') format('woff'), /* Modern Browsers */ url('../googlefonts/open-sans-v34-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('../googlefonts/open-sans-v34-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-600 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('../googlefonts/open-sans-v34-latin-600.eot'); /* IE9 Compat Modes */ src: local(''), url('../googlefonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../googlefonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('../googlefonts/open-sans-v34-latin-600.woff') format('woff'), /* Modern Browsers */ url('../googlefonts/open-sans-v34-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('../googlefonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-700 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../googlefonts/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('../googlefonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../googlefonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../googlefonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */ url('../googlefonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../googlefonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-800 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url('../googlefonts/open-sans-v34-latin-800.eot'); /* IE9 Compat Modes */ src: local(''), url('../googlefonts/open-sans-v34-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../googlefonts/open-sans-v34-latin-800.woff2') format('woff2'), /* Super Modern Browsers */ url('../googlefonts/open-sans-v34-latin-800.woff') format('woff'), /* Modern Browsers */ url('../googlefonts/open-sans-v34-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */ url('../googlefonts/open-sans-v34-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-300italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: url('../googlefonts/open-sans-v34-latin-300italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../googlefonts/open-sans-v34-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../googlefonts/open-sans-v34-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../googlefonts/open-sans-v34-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('../googlefonts/open-sans-v34-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../googlefonts/open-sans-v34-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('../googlefonts/open-sans-v34-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../googlefonts/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../googlefonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../googlefonts/open-sans-v34-latin-italic.woff') format('woff'), /* Modern Browsers */ url('../googlefonts/open-sans-v34-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../googlefonts/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-500italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 500; src: url('../googlefonts/open-sans-v34-latin-500italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../googlefonts/open-sans-v34-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../googlefonts/open-sans-v34-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../googlefonts/open-sans-v34-latin-500italic.woff') format('woff'), /* Modern Browsers */ url('../googlefonts/open-sans-v34-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../googlefonts/open-sans-v34-latin-500italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-600italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: url('../googlefonts/open-sans-v34-latin-600italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../googlefonts/open-sans-v34-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../googlefonts/open-sans-v34-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../googlefonts/open-sans-v34-latin-600italic.woff') format('woff'), /* Modern Browsers */ url('../googlefonts/open-sans-v34-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../googlefonts/open-sans-v34-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-700italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: url('../googlefonts/open-sans-v34-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../googlefonts/open-sans-v34-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../googlefonts/open-sans-v34-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../googlefonts/open-sans-v34-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('../googlefonts/open-sans-v34-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../googlefonts/open-sans-v34-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-800italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 800; src: url('../googlefonts/open-sans-v34-latin-800italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../googlefonts/open-sans-v34-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../googlefonts/open-sans-v34-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../googlefonts/open-sans-v34-latin-800italic.woff') format('woff'), /* Modern Browsers */ url('../googlefonts/open-sans-v34-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../googlefonts/open-sans-v34-latin-800italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /** * z-index reihenfolge * * leftnav filter 100 **/ /** * Standardeinstellungen **/ html { scroll-behavior:smooth; } html, body { background-color:#E0E2DE; height:100%; } body.noscroll { overflow:hidden; } *, a.like_text_link, a:hover.like_text_link { margin:0; padding:0; border:0; font-family: 'Open Sans', sans-serif; font-display: swap; font-size:14px; font-weight:normal; text-decoration:none; font-style:normal; color:#0c0c0c; line-height:22px; background:none; outline:none; resize:none; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } ::-moz-selection { background-color:#009FE3; color:#fff; } ::selection { background-color:#009FE3; color:#fff; } *:focus { outline:none; } input { border:none; box-shadow:none; } input:-moz-placeholder, input:focus { box-shadow:none !important; } input:invalid { box-shadow:none; } h1, .h1 { font-family: 'FuturaBT-Book'; display:block; position:relative; font-size:36px; line-height:40px; margin:0 0 30px 0; color:#11304D; } h2, .h2 { font-family: 'FuturaBT-Book'; display:block; position:relative; font-size:26px; line-height:30px; margin:0 0 22px 0; color:#11304D; } h3, .h3 * { display:block; position:relative; font-family:'FuturaBT-Heavy'; border:none; } h4, h4 * { display:block; position:relative; font-family:'FuturaBT-Book'; border:none; } .underline, .overline { display:block; font-size:20px; line-height:24px; margin:0 0 10px 0; font-family:'FuturaBT-Book'; color:#11304D; letter-spacing:1px; } a, a * { color:#009FE3; transition:color 0.5s linear; } a:hover, a:hover * { color:#11304D; } a.important, a:hover.important { display:inline-block; font-family:'FuturaBT-Heavy'; padding:2px 5px; transition:background-color 0.3s; border-radius:3px; color:#fff; background-color:#009FE3; } a:hover.important { background-color:#11304D; } strong, b, strong *, b * { font-weight:bold; } italic, em, italic *, em * { font-style:italic; } u { text-decoration:underline; } input, textarea { } p { display:block; position:relative; margin:0 0 20px 0; } ol { display:block; position:relative; margin:0px; margin:0 0 0 0; padding:18px 0 30px 0; } ol li { margin:0 0 0 30px; line-height:18px; padding:0 0 0 15px; position:relative; } ul { display:block; margin:0 0 30px 0; } ul.noBottomSpacing { margin:0 0 0 0; } ul li { display:block; position:relative; /*display:list-item;*/ /*margin:0 0 9px 0;*/ /*list-style:outside;*/ margin:0 0 2px 15px; } ul li::before { display:block; position:absolute; left:-15px; font-weight:bold; top:3px; color:#009FE3; font-size:14px; content:"°\00A0" } @media only screen and (max-width : 750px) { h1, .h1 { font-size:32px; line-height:36px; margin:0 0 30px 0; } h2, .h2 { font-size:22px; line-height:26px; } } /** * Helper **/ .clear_both { display:block; height:0px; clear:both; } .clear_left { display:block; height:0px; clear:left; } .clear_right { display:block; height:0px; clear:right; } a.anchor_top, a:hover.anchor_top { display:block; position:absolute; height:1px; width:1px; line-height:0px; overflow:hidden; } .nowrap { white-space:nowrap; } .contact_img { display:block; position:relative; width:100px; border-radius:6px; margin:0 0 20px 0; border:2px solid #E4EAEF; } /** * Allgemeine Inhalte **/ .page_border { display:block; position:relative; height:10px; width:100%; background-color:#009FE3; background-image: linear-gradient(to left, #11304D, #009FE3); } .page_border_white { display:block; position:relative; height:10px; width:100%; background-color:#fff; } /** Länderauflistung **/ .countryTextList { display:flex; position:relative; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; margin:0 auto 20px auto; } .countryTextList.center { justify-content:center; } .countryTextList.smallwidth { max-width:800px; } .countryTextList a { display:flex; position:relative; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; align-content:flex-start; margin:0 10px 5px 0; } .countryTextList a img, .countryTextList a:hover img { flex:0 0 auto; display:block; position:relative; width:24px; margin:0 4px 0 0; } .countryTextList a, .countryTextList a:hover, .countryTextList a span, .countryTextList a:hover span { white-space:nowrap; color:#11304D; text-decoration:none; } .countryTextList a:hover, .countryTextList a:hover span { color:#009FE3; } /** Gallery **/ .hidden_gallery_container { display:none; } .galleryFigure { display:block; position:relative; text-decoration:none; width:100%; overflow:hidden; } .galleryFigcaption { display:none } a.gallery, a.gallery:hover { display:block; position:relative; text-decoration:none; } a.gallery img.thumb, a.gallery:hover img.thumb { display:block; position:relative; text-decoration:none; width:100%; } a.gallery:hover img.thumb { opacity:0.8; filter:grayscale(90%); } a.gallery span.more, a.gallery:hover span.more { display:block; position:absolute; text-decoration:none; width:60px; height:60px; top:50%; left:-120%; margin-top:-30px; margin-left:-30px; border-radius:30px; text-transform:uppercase; opacity:0; transition:0.5s ease-in-out; background-color:#009ee0; } a.gallery:hover span.more { opacity:1; left:50%; } a.gallery span.more_plus, a.gallery:hover span.more_plus { display:block; position:absolute; text-decoration:none; width:60px; height:60px; top:50%; right:-100%; margin-top:-30px; margin-right:-30px; opacity:0; transition:0.5s ease-in-out; } a.gallery span.more_plus img, a.gallery:hover span.more_plus img { display:block; position:absolute; text-decoration:none; width:20px; height:20px; top:20px; left:20px; } a.gallery:hover span.more_plus { opacity:1; right:50%; } /* Erklärungsgalerie - einöseseite */ .page_explanation_gallery { display:flex; position:relative; box-sizing: border-box; flex-wrap:wrap; flex-direction:row; justify-content:flex-start; align-items:center; align-content:center; overflow:hidden; padding:0; } .page_explanation_gallery figure { flex:0 1 calc(33.33% - 10px); display:block; position:relative; box-sizing:boder-box; margin:0 5px 10px 5px; box-shadow:2px 2px 10px 0px rgba(0,0,0,0.5); border-radius:3px; cursor:pointer; } .page_explanation_gallery figcaption { display:block; position:relative; padding:10px 15px; border-bottom:1px solid #ccc; font-size:20px; line-height:20px; font-size:14px; line-height:18px; font-family: 'FuturaBT-Heavy'; text-decoration:none; color:#11304D; transition:color 0.5s ease-out; } .page_explanation_gallery figure:hover figcaption { color:#009FE3; } @media only screen and (max-width : 650px) { .page_explanation_gallery figure { flex:0 1 calc(50% - 10px); } } @media only screen and (max-width : 450px) { .page_explanation_gallery figure { flex:0 1 100%; margin:0 0 10px 0; } } /** * Buttons **/ label.c2a_bttn_label { flex:0 0 auto; display:block; width:calc(100% - 20px); position:relative; margin:0 0 10px 20px; color:#11304D; font-family:'FuturaBT-Book'; letter-spacing:1px; font-size:16px } label.c2a_bttn_label.autowidth { width:auto; } label.c2a_bttn_label::before { display:block; position:absolute; left:-20px; top:0px; content:"→\00A0" } .c2a_wellcard_bttn_container { display:flex; position:relative; flex-direction:row; justify-content:flex-start; align-items:flex-start; align-content:center; flex-wrap:wrap; } .c2a_wellcard_bttn_container.spacer { margin-bottom:20px; } .c2a_wellcard_bttn_container.column { flex-direction:column; } .c2a_wellcard_bttn_container.full { width:100%; } .c2a_wellcard_bttn_container.center { justify-content:center; align-items:center; } .c2a_wellcard_bttn_container.right { justify-content:flex-end; align-items:flex-end; } .c2a_wellcard_bttn_container.nowrap a { white-space:nowrap; } .c2a_wellcard_bttn_container a.discount_line, .c2a_wellcard_bttn_container a.discount_line:hover { display:block; position:relative; margin:4px 0 0 0; padding:2px 5px; text-decoration:none; background-color:#E6007E; color:#ffffff; } .c2a_wellcard_bttn_img_container, a.c2a_wellcard_bttn_img_container, a:hover.c2a_wellcard_bttn_img_container { display:flex; position:relative; flex-direction:column; justify-content:center; align-items:center; align-content:center; text-decoration:none; border-radius:12px; width:180px; padding:15px 0 0 0; margin:0 auto -25px auto; } .c2a_wellcard_bttn_container.small .c2a_wellcard_bttn_img_container, .c2a_wellcard_bttn_container.small a.c2a_wellcard_bttn_img_container, .c2a_wellcard_bttn_container.small a:hover.c2a_wellcard_bttn_img_container { width:120px; border-radius:8px; padding:10px 0 0 0; margin:0 auto -15px auto; } a.c2a_wellcard_bttn_img_container *, a:hover.c2a_wellcard_bttn_img_container * { text-decoration:none; } .c2a_wellcard_bttn_img_container img.icon_wellcard { display:block; position:relative; width:100%; transform: rotateX(0deg) rotateY(0deg) rotateZ(-10deg); border-radius:12px; } /* level 1 */ .c2a_button_level1, a.c2a_button_level1, a:hover.c2a_button_level1 { display:block; position:relative; border-radius:5px 5px 5px 5px; background-color:#507E29; color:#fff; font-size:18px !important;; line-height:22px !important;; padding:10px 15px; text-decoration:none; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.2); box-shadow:0 2px 0 #395F26, 0 4px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.2) inset; cursor:pointer; font-family:'FuturaBT-Book'; letter-spacing:2px; transition:box-shadow 0.3s linear; } .c2a_wellcard_bttn_container.small .c2a_button_level1, .c2a_wellcard_bttn_container.small a.c2a_button_level1, .c2a_wellcard_bttn_container.small a:hover.c2a_button_level1 { font-size:14px !important;; padding:8px 10px; } a:hover.c2a_wellcard_bttn_img_container .c2a_button_level1, a:hover.c2a_button_level1 { box-shadow:none; } /* level 2 */ .c2a_button_level1flat, a.c2a_button_level1flat, a:hover.c2a_button_level1flat { display:block; position:relative; border-radius:5px 5px 5px 5px; font-size:16px !important;; line-height:18px !important;; padding:10px 10px; text-decoration:none; cursor:pointer; background-color:#507E29; color:#fff; font-family:'FuturaBT-Book'; transition:background-color 0.3s; } a:hover.c2a_wellcard_bttn_img_container .c2a_button_level1flat, a:hover.c2a_button_level1flat { background-color:#507E29; } /* level 2 */ .c2a_button_level2, a.c2a_button_level2, a:hover.c2a_button_level2 { display:block; position:relative; border-radius:5px 5px 5px 5px; font-size:16px !important; line-height:18px !important;; padding:10px 10px; text-decoration:none; cursor:pointer; background-color:#009FE3; color:#fff; font-family:'FuturaBT-Book'; transition:background-color 0.3s; } a:hover.c2a_wellcard_bttn_img_container .c2a_button_level2, a:hover.c2a_button_level2 { background-color:#11304D; } /* level 3 */ .c2a_button_level3, a.c2a_button_level3, a:hover.c2a_button_level3 { display:block; position:relative; border-radius:5px 5px 5px 5px; font-size:16px !important;; line-height:18px !important;; margin:0; padding:10px 10px; text-decoration:none; cursor:pointer; color:#fff; font-family:'FuturaBT-Book'; transition:background-color 0.3s; background-color:#11304D; } a:hover.c2a_wellcard_bttn_img_container .c2a_button_level3, a:hover.c2a_button_level3 { background-color:#009FE3; } /* level 4*/ .c2a_button_level4, a.c2a_button_level4, a:hover.c2a_button_level4 { display:block; position:relative; border-radius:5px 5px 5px 5px; font-size:16px !important;; line-height:18px !important;; margin:0; padding:10px 10px; text-decoration:none; cursor:pointer; font-family:'FuturaBT-Book'; transition:background-color 0.3s; color:#11304D; border:2px solid #E4EAEF; } a:hover.c2a_wellcard_bttn_img_container .c2a_button_level4, a:hover.c2a_button_level4 { border-color:#11304D; } /* level 5*/ .c2a_button_level5, a.c2a_button_level5, a:hover.c2a_button_level5 { display:block; position:relative; border-radius:5px 5px 5px 5px; font-size:16px !important;; line-height:18px !important;; margin:0; padding:10px 10px; text-decoration:none; cursor:pointer; font-family:'FuturaBT-Book'; transition:border-color 0.3s, color 0.3s; color:#11304D; border:2px solid #11304D; } a:hover.c2a_wellcard_bttn_img_container .c2a_button_level5, a:hover.c2a_button_level5 { border-color:#009FE3; color:#009FE3; } .c2a_wellcard_bttn_container.multiline .c2a_button_level1, .c2a_wellcard_bttn_container.multiline a.c2a_button_level1, .c2a_wellcard_bttn_container.multiline a:hover.c2a_button_level1, .c2a_wellcard_bttn_container.multiline .c2a_button_level1flat, .c2a_wellcard_bttn_container.multiline a.c2a_button_level1flat, .c2a_wellcard_bttn_container.multiline a:hover.c2a_button_level1flat, .c2a_wellcard_bttn_container.multiline .c2a_button_level2, .c2a_wellcard_bttn_container.multiline a.c2a_button_level2, .c2a_wellcard_bttn_container.multiline a:hover.c2a_button_level2, .c2a_wellcard_bttn_container.multiline .c2a_button_level3, .c2a_wellcard_bttn_container.multiline a.c2a_button_level3, .c2a_wellcard_bttn_container.multiline a:hover.c2a_button_level3 .c2a_wellcard_bttn_container.multiline .c2a_button_level4, .c2a_wellcard_bttn_container.multiline a.c2a_button_level4, .c2a_wellcard_bttn_container.multiline a:hover.c2a_button_level4, .c2a_wellcard_bttn_container.multiline .c2a_button_level5, .c2a_wellcard_bttn_container.multiline a.c2a_button_level5, .c2a_wellcard_bttn_container.multiline a:hover.c2a_button_level5 { margin:5px 5px; } .c2a_wellcard_bttn_container .c2a_button_level1flat.full, .c2a_wellcard_bttn_container .c2a_button_level1.full, .c2a_wellcard_bttn_container .c2a_button_level2.full, .c2a_wellcard_bttn_container .c2a_button_level3.full, .c2a_wellcard_bttn_container .c2a_button_level4.full, .c2a_wellcard_bttn_container .c2a_button_level5.full { width:100%; } .c2a_wellcard_bttn_container .c2a_button_level1flat.center, .c2a_wellcard_bttn_container .c2a_button_level1.center, .c2a_wellcard_bttn_container .c2a_button_level2.center, .c2a_wellcard_bttn_container .c2a_button_level3.center, .c2a_wellcard_bttn_container .c2a_button_level4.center, .c2a_wellcard_bttn_container .c2a_button_level5.center { text-align:center; } .c2a_wellcard_subLinkContainer { display:flex; position:relative; flex-direction:row; justify-content:center; align-items:center; align-content:center; box-sizing:border-box; margin:30px 0 0 0; } .c2a_wellcard_subLinkContainer a, .c2a_wellcard_subLinkContainer a:hover { flex:0 0 auto; color:#9e9e9e; cursor:pointer; } /** * Formular **/ /** content **/ .form_inputContainer { display:flex; position:relative; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; margin:0 auto 20px auto; width:100%; } .form_inputContainer.row { flex-direction:row; } /* Label */ .form_inputLabel { flex:0 0 auto; display:block; position:relative; display:block; font-size:14px; line-height:20px; padding:10px 0 10px 13px; font-family:'FuturaBT-Book'; color:#11304D; letter-spacing:1px; } .form_inputLabel::before { display:block; position:absolute; left:0px; top:50%; margin-top:-20px; line-height:20px; height:20px; padding:10px 0; font-size:12px; line-height:20px; content:"→\00A0" } .form_inputContainer.row .form_inputLabel { padding:14px 0 14px 13px; } /* input text */ .form_inputText { display:block; position:relative; box-sizing: border-box; width:100%; height:48px; line-height:48px; font-size:16px; cursor:pointer; padding:0 5px; border:2px solid #E4EAEF; transition:border 0.5s ease-in-out; } .form_inputContainer.row .form_inputText { width:auto; margin:0 0 0 15px; } /* input text */ .form_inputTextarea { display:block; position:relative; box-sizing: border-box; width:100%; height:140px; line-height:22px; font-size:16px; cursor:pointer; padding:5px 5px; border:2px solid #E4EAEF; transition:border 0.5s ease-in-out; } /* Select */ .form_selectContainer { flex:0 0 auto; width:100%; box-sizing:border-box; display:block; position:relative; height:48px; line-height:48px; cursor:pointer; overflow:hidden; border:2px solid #E4EAEF; transition:border 0.5s ease-in-out; } .form_inputContainer.row .form_selectContainer { width:auto; margin:0 0 0 15px; } .form_inputSelect { display:block; position:relative; height:44px; line-height:44px; width:125%; padding:0 16px; font-size:16px; cursor:pointer; } .form_selectContainer .icon { display:block; position:absolute; top:12px; right:12px; height:10px; width:10px; transform: rotate(45deg); border-right:2px solid #11304D; border-bottom:2px solid #11304D; transition:border 0.3s linear; } .form_selectContainer:hover .icon { border-right:2px solid #009FE3; border-bottom:2px solid #009FE3; } /* all focus */ .form_inputText:focus, .form_inputTextarea:focus, .form_selectContainer.focus { border:2px solid #009FE3; } /** * Formular Ende **/ /*** * Global sizing '**/ .page_container_size { min-width:320px !important; } .content_container_noborder_size { max-width:2200px !important; box-sizing: border-box !important; margin-left:auto; margin-right:auto; } .bg_content { background-color:#fff !important; } .bg_content_light { background-color:#E4EAEF !important; } .bg_content_darkblue { background-color:#11304D !important; color:#fff !important; } .bg_content_darkblue * { color:#fff !important; } .bg_content_white { background-color:#fff !important; } .content_container_size { padding-left:30px !important; padding-right:30px !important; max-width:2200px !important; box-sizing: border-box !important; margin-left:auto; margin-right:auto; } .content_center_container_size { padding-left:30px !important; padding-right:30px !important; max-width:1200px !important; box-sizing: border-box !important; margin-left:auto; margin-right:auto; } @media only screen and (max-width : 1260px) { .content_center_container_size, .content_container_size { padding-left:20px !important; padding-right:20px !important; } } @media only screen and (max-width : 788px) { .content_container_size { padding-left:10px !important; padding-right:10px !important; } } .headerspacing_topcontent { padding-top:110px !important; } @media only screen and (max-width : 425px) { .headerspacing_topcontent { padding-top:160px !important; } } /**** * Fixed Header ****/ #page_header_outer_container { display:block; position:fixed; top:0px; left:0px; width:100%; z-index:100; background-color:rgba(255,255,255,1); box-sizing: border-box; transition:box-shadow 0.3s linear; /*height:110px;*/ } #page_header_outer_container.min { box-shadow:0 10px 10px rgba(0,0,0,0.5); } /* border bottom (gradiant linie) */ #page_header_borderBottom { display:block; position:relative; height:10px; width:100%; background-color:#009FE3; background-image: linear-gradient(to left, #11304D, #009FE3); } /* content */ #page_header_container { display:flex; position:relative; margin:0 auto; box-sizing: border-box; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; box-sizing: border-box; padding-top:20px; /*height:100px;*/ } @media only screen and (max-width : 425px) { #page_header_outer_container.min #page_header_container, #page_header_outer_container.max #page_header_container { transition:padding-top 0.3s linear; } #page_header_outer_container.min #page_header_container { padding-top:0px; } } /** * Header Left -Logo **/ #page_header_left_container { flex:0 0 152px; width:152px; display:block; position:relative; overflow:hidden; height:60px; } #page_header_outer_container.min #page_header_left_container { height:auto; } a#logo, a:hover#logo { display:block; position:relative; width:152px; margin:0 auto; text-decoration:none; } a#logo img.mainlogo, a:hover#logo img.mainlogo { display:block; position:relative; width:100%; text-decoration:none; } a#logo img.sublogo, a:hover#logo img.sublogo { display:block; position:relative; width:100%; text-decoration:none; margin:5px 0 0 0; opacity:1; transition:opacity 0.3s linear; } #page_header_outer_container.min a#logo img.sublogo, #page_header_outer_container.min a:hover#logo img.sublogo { opacity:0; } @media only screen and (max-width : 425px) { #page_header_left_container { flex:0 0 100%; margin:0 0 10px 0; } } @media only screen and (max-width : 425px) { #page_header_outer_container.min #page_header_left_container, #page_header_outer_container.max #page_header_left_container { transition:height 0.3s linear; } #page_header_outer_container.min #page_header_left_container { height:0px; } } /** * Header Center - Nav **/ #page_header_nav_container { flex:1 1 auto; display:flex; position:relative; flex-direction:column; justify-content:flex-end; align-items:stretch; align-content:stretch; min-height:65px; transition:padding-bottom 0.3s linear; } /** Topnavigation **/ #top_nav_container { flex:1 1 auto; display:flex; position:relative; flex-direction:row; justify-content:flex-end; align-items:center; } #top_nav_container a.navpoint, #top_nav_container a.navpoint:hover { display:block; position:relative; line-height:30px; text-decoration:none; margin:0 0 0 15px; } #page_header_outer_container.min #top_nav_container a.navpoint, #page_header_outer_container.min #top_nav_container a.navpoint:hover { display:none; } #top_nav_container a.navpoint span.txt, #top_nav_container a.navpoint:hover span.txt { display:inline-block; line-height:30px; font-size:16px; text-decoration:none; font-family:'FuturaBT-Book'; color:#11304D; } #top_nav_container a.navpoint:hover, #top_nav_container a.navpoint:hover span.txt, #top_nav_container a.navpoint.active, #top_nav_container a.navpoint.active span.txt { color:#009FE3; } #top_nav_container a.navpoint span.border, #top_nav_container a.navpoint:hover span.border { display:block; position:absolute; bottom:1px; left:0px; height:1px; width:0%; z-index:1; transition:width 0.3s linear; background-color:#009FE3; } #top_nav_container a.navpoint:hover span.border, #top_nav_container a.navpoint.active span.border { width:100%; } @media only screen and (max-width : 875px) { #top_nav_container a.navpoint, #top_nav_container a.navpoint:hover { display:none; } } @media only screen and (max-width : 425px) { #top_nav_container { flex-direction:row-reverse; } } /* Topnav Icon */ a.topnav_bttn, a:hover.topnav_bttn { display:block; position:relative; height:30px; border-radius:15px; box-sizing: border-box; cursor:pointer; overflow:hidden; text-decoration:none; margin:0 0 0 10px; transition:border-color 0.3s linear; padding:0 0 0 28px; border:none; } a:hover.topnav_bttn { border:none; } a.topnav_bttn img, a:hover.topnav_bttn img { display:block; position:absolute; text-decoration:none; left:8px; top:7px; height:14px; width:14px; opacity:1; transition:opacity 0.3s linear; } a.topnav_bttn img.icon, a:hover.topnav_bttn img.icon_hover { opacity:1; } a.topnav_bttn img.icon_hover, a:hover.topnav_bttn img.icon { opacity:0; } a.topnav_bttn span, a:hover.topnav_bttn span { display:inline-block; padding:0 8px 0 0; line-height:28px; font-size:14px; color:#009FE3; font-family:'FuturaBT-Book'; transition:color 0.3s linear; } a:hover.topnav_bttn span { color:#11304D; } /* Warenkorb Icon */ a.show_hide_basket, a:hover.show_hide_basket { display:block; position:relative; width:64px; height:30px; border-radius:15px; cursor:pointer; overflow:hidden; text-decoration:none; margin:0 0 0 10px; transition:background-color 0.3s linear; background-color:#009FE3; } a:hover.show_hide_basket { background-color:#11304D; } a.show_hide_basket.active, a:hover.show_hide_basket.active { background-color:#7EC244; } a.show_hide_basket img, a:hover.show_hide_basket img { display:block; position:absolute; text-decoration:none; left:8px; top:6px; height:18px; width:18px; opacity:1; } a .show_hide_basket_count, a:hover .show_hide_basket_count { display:block; position:absolute; text-decoration:none; right:8px; width:26px; text-align:center; top:0px; height:30px; line-height:30px; font-size:12px; color:#fff; } @media only screen and (max-width : 425px) { a.show_hide_basket, a:hover.show_hide_basket { margin:0 0 0 0px; } } /** Hauptnavigation **/ #main_nav_container { flex:0 0 auto; display:flex; position:relative; flex-direction:row; justify-content:flex-end; align-items:flex-start; align-content:center; transition: opacity 0.1s linear, flex 0.1s linear; } #main_nav_container a.navpoint, #main_nav_container a.navpoint:hover { flex:0 0 auto; display:block; position:relative; text-decoration:none; padding:0; margin:10px 0 0 40px; line-height:40px; height:40px; color:#009FE3; } #page_header_outer_container.min #main_nav_container a.navpoint, #page_header_outer_container.min #main_nav_container a.navpoint:hover, #page_header_outer_container.max #main_nav_container a.navpoint, #page_header_outer_container.max #main_nav_container a.navpoint:hover { transition: height 0.1s linear, margin 0.1s linear; } #main_nav_container a.navpoint span.txt, #main_nav_container a.navpoint:hover span.txt, #main_nav_container a.navpoint span.txt span, #main_nav_container a.navpoint:hover span.txt span { display:inline-block; text-decoration:none; border:none; overflow:hidden; font-size:18px; line-height:40px; height:40px; overflow:hidden; font-family:'FuturaBT-Book'; color:#11304D; transition:color 0.3s linear; letter-spacing:1px; } #page_header_outer_container.min #main_nav_container a.navpoint span.txt, #page_header_outer_container.min #main_nav_container a.navpoint:hover span.txt, #page_header_outer_container.min #main_nav_container a.navpoint span.txt span, #page_header_outer_container.min #main_nav_container a.navpoint:hover span.txt span, #page_header_outer_container.max #main_nav_container a.navpoint span.txt, #page_header_outer_container.max #main_nav_container a.navpoint:hover span.txt, #page_header_outer_container.max #main_nav_container a.navpoint span.txt span, #page_header_outer_container.max #main_nav_container a.navpoint:hover span.txt span { transition: font-size 0.1s linear, height 0.1s linear, margin 0.1s linear; } #main_nav_container a.navpoint:hover span.txt span, #main_nav_container a.navpoint.active span.txt span { color:#009FE3; } #main_nav_container a.navpoint span.namePrefix { padding:0 5px 0 0; } #main_nav_container a.navpoint span.nameSuffix { padding:0 0 0 5px; } #main_nav_container a.navpoint span.border, #main_nav_container a.navpoint:hover span.border { display:block; position:absolute; bottom:-5px; left:0px; height:5px; width:0%; z-index:1; background-color:#009FE3; transition:width 0.3s linear; } #main_nav_container a.navpoint:hover span.border, #main_nav_container a.navpoint.active span.border { width:100%; } #page_header_outer_container.min #main_nav_container a.navpoint, #page_header_outer_container.min #main_nav_container a.navpoint:hover { line-height:30px; height:30px; margin:5px 0 0 20px; } #page_header_outer_container.min #main_nav_container a.navpoint span.txt, #page_header_outer_container.min #main_nav_container a.navpoint:hover span.txt, #page_header_outer_container.min #main_nav_container a.navpoint span.txt span, #page_header_outer_container.min #main_nav_container a.navpoint:hover span.txt span { line-height:30px; height:30px; font-size:14px; } @media only screen and (max-width : 1600px) { #main_nav_container a.navpoint, #main_nav_container a.navpoint:hover { margin:10px 0 0 30px; } } @media only screen and (max-width : 1400px) { #main_nav_container a.navpoint, #main_nav_container a.navpoint:hover { margin:10px 0 0 20px; } } @media only screen and (max-width : 1400px) { #main_nav_container a.navpoint span.txt, #main_nav_container a.navpoint:hover span.txt, #main_nav_container a.navpoint span.txt span, #main_nav_container a.navpoint:hover span.txt span { font-size:16px; } } @media only screen and (max-width : 1100px) { #main_nav_container a.navpoint span.txt span.namePrefix, #main_nav_container a.navpoint span.txt span.nameSuffix { display:none; } } @media only screen and (max-width : 750px) { #main_nav_container a.navpoint span.txt, #main_nav_container a.navpoint:hover span.txt, #main_nav_container a.navpoint span.txt span, #main_nav_container a.navpoint:hover span.txt span { font-size:14px; } } @media only screen and (max-width : 630px) { #main_nav_container a.navpoint:nth-child(2) { display:none; } } @media only screen and (max-width : 530px) { #main_nav_container a.navpoint:nth-child(1) { display:none; } } @media only screen and (max-width : 425px) { #main_nav_container a.navpoint, #main_nav_container a.navpoint:hover, #page_header_outer_container.min #main_nav_container a.navpoint, #page_header_outer_container.min #main_nav_container a.navpoint:hover { line-height:30px; height:30px; margin:5px 12px 0 0; } #main_nav_container { justify-content:flex-start; } #main_nav_container a.navpoint:nth-child(1), #main_nav_container a.navpoint:nth-child(2) { display:block; } #main_nav_container a.navpoint span.txt, #main_nav_container a.navpoint:hover span.txt, #main_nav_container a.navpoint span.txt span, #main_nav_container a.navpoint:hover span.txt span { line-height:30px; height:30px; font-size:14px; } } @media only screen and (max-width : 410px) { #main_nav_container a.navpoint:nth-child(2) { display:none; } } /** * header right / show - hide mobile nav **/ #page_header_right_container { order:1; flex:0 0 60px; display:flex; position:relative; flex-direction:column; justify-content:center; align-items:center; align-content:center; background-color:#11304D; border-radius:3px 3px 0 0; margin:0 0 0 15px; background-image: linear-gradient(to top, #11304D, #009FE3); /*height:80px;*/ } a#show_hide_mobile_nav, a:hover#show_hide_mobile_nav { display:block; position:relative; width:40px; height:40px; cursor:pointer; } a#show_hide_mobile_nav span, a:hover#show_hide_mobile_nav span { display:block; position:absolute; width:100%; left:0px; height:2px; background-color:#fff; } a#show_hide_mobile_nav span:nth-child(1), a:hover#show_hide_mobile_nav span:nth-child(1) { top:12px; } a#show_hide_mobile_nav span:nth-child(2), a:hover#show_hide_mobile_nav span:nth-child(2) { top:19px; } a#show_hide_mobile_nav span:nth-child(3), a:hover#show_hide_mobile_nav span:nth-child(3) { top:26px; } @media only screen and (max-width : 750px) { #page_header_right_container { flex:0 0 44px; margin:0 0 0 10px; } a#show_hide_mobile_nav, a:hover#show_hide_mobile_nav { width:34px; } } @media only screen and (max-width : 425px) { #page_header_right_container { margin:0 0 0 0; } } /** ** Seitenpfad **/ #path_outer_container { display:block; position:relative; } #path_container { display:block; position:relative; background-color:#fff; padding:15px 0 15px 0; } #path_default_container { display:block; position:relative; padding:0 10px; } #path_absolute_container { display:block; position:absolute; top:20px; left:30px; background-color:rgba(255,255,255,0.8); background-color:rgba(17, 48, 77, 0.5); padding:0 10px; border-radius:6px; transitiobn:background-color 0.3s; } #path_absolute_container.open, #path_absolute_container:hover { background-color:rgba(255,255,255,1); background-color:rgba(17, 48, 77, 1); } @media only screen and (max-width : 1250px) { #path_absolute_container { left:20px; } } @media only screen and (max-width : 800px) { #path_absolute_container { left:10px; } } #path_content { display:flex; position:relative; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; } #path_content a.path_home_icon, #path_content a.path_home_icon:hover { flex:0 0 20px; display:block; position:relative; text-decoration:none; width:20px; height:30px; } #path_content a.path_home_icon img, #path_content a.path_home_icon:hover img { display:block; position:absolute; top:50%; left:0px; margin-top:-7px; height:14px; width:14px; text-decoration:none; transition:opacity 0.3s ease-out; } #path_content a.path_home_icon img:nth-child(2) { opacity:0; } #path_content a:hover.path_home_icon img:nth-child(2) { opacity:1; } #path_open_dropdown { flex:0 1 auto; display:flex; position:relative; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #path_open_dropdown .path_spacer { flex:0 0 auto; display:block; position:relative; font-size:14px; font-family:'FuturaBT-Book'; line-height:20px; padding:5px 0; color:#9e9e9e; margin:0 5px 0 5px; transition:color 0.3s ease-out; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; } #path_open_dropdown .path_now { flex:1 1 auto; display:inline block; font-size:14px; font-family:'FuturaBT-Book'; line-height:20px; padding:5px 0; color:#9e9e9e; transition:color 0.3s ease-out; white-space: nowrap; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; } #path_open_dropdown .path_dropdown_icon_container { flex:0 0 18px; display:block; position:relative; height:30px; width:18px; } #path_open_dropdown .path_dropdown_icon_container .icon { display:block; position:absolute; top:10px; right:2px; height:6px; width:6px; transform: rotate(45deg); border-right:2px solid #9e9e9e; border-bottom:2px solid #9e9e9e; transition:border 0.3s linear; } #path_default_container.open #path_open_dropdown .path_dropdown_icon_container .icon, #path_open_dropdown:hover .path_dropdown_icon_container .icon { border-color:#11304D; } #path_default_container.open #path_open_dropdown .path_spacer, #path_open_dropdown:hover .path_spacer, #path_default_container.open #path_open_dropdown .path_now, #path_open_dropdown:hover .path_now { color:#11304D; } #path_absolute_container #path_open_dropdown .path_spacer, #path_absolute_container #path_open_dropdown .path_dropdown, #path_absolute_container #path_open_dropdown .path_now { color:#fff; } #path_absolute_container #path_open_dropdown .path_dropdown_icon_container .icon { border-color:#fff; } #path_absolute_container.open #path_open_dropdown .path_spacer, #path_absolute_container #path_open_dropdown:hover .path_spacer, #path_absolute_container.open #path_open_dropdown .path_now, #path_absolute_container #path_open_dropdown:hover .path_now { color:#009FE3; } #path_absolute_container.open #path_open_dropdown .path_dropdown_icon_container .icon, #path_absolute_container #path_open_dropdown:hover .path_dropdown_icon_container .icon { border-color:#009FE3; } /* DropDown */ #path_dropdown_outer_container { display:none; position:absolute; bottom:0px; left:0px; height:0px; z-index:2 } #path_default_container.open #path_dropdown_outer_container, #path_absolute_container.open #path_dropdown_outer_container { display:block; } #path_dropdown_container { display:block; position:absolute; box-sizing:border-box; top:0px; left:0px; z-index:1; width:300px; box-shadow:2px 2px 10px 0px rgba(0,0,0,0.5); border-radius:0 0 3px 3px; padding:4px 4px 32px 4px; background-color:#E4EAEF; background-image: linear-gradient(to top left, #11304D, #009FE3); } #path_dropdown_container label { display:block; position:relative; padding:5px 10px 5px 30px; line-height:20px; background-color:#E4EAEF; color:#11304D; font-family:'FuturaBT-Book'; letter-spacing:1px; font-size:14px; } #path_dropdown_container label::before { display:block; position:absolute; left:10px; height:20px; line-height:20px; top:5px; content:"→\00A0" } #path_dropdown_container ol { list-style:none; display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:stretch; align-content:stretch; padding:0; margin:0; background-color:#E4EAEF; } #path_dropdown_container ol li { display:block; position:relative; padding:0; background-color:#fff; margin:0 0 2px 0; } #path_dropdown_container ol li a, #path_dropdown_container ol li a:hover { display:flex; position:relative; padding:12px 10px; line-height:16px; padding:10px 10px; text-decoration:none; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; cursor:pointer; } #path_dropdown_container ol li a span.icon, #path_dropdown_container ol li a:hover span.icon { flex:0 0 18px; width:18px; display:block; position:relative; line-height:16px; text-decoration:none; color:#0c0c0c; } #path_dropdown_container ol li a span.icon img, #path_dropdown_container ol li a:hover span.icon img { display:block; position:absolute; width:14px; height:14px; top:1px; left:0px; transition:opacity 0.3s; } #path_dropdown_container ol li a span.icon img:nth-child(2) { opacity:0; } #path_dropdown_container ol li a:hover span.icon img:nth-child(2) { opacity:1; } #path_dropdown_container ol li a:hover span.icon { color:#009FE3; } #path_dropdown_container ol li a span.txt, #path_dropdown_container ol li a:hover span.txt { display:inline-block; line-height:16px; text-decoration:none; color:#0c0c0c; } #path_dropdown_container ol li a:hover span.txt { color:#009FE3; } #path_dropdown_close_container { display:block; position:absolute; bottom:0px; left:0px; width:100%; box-sizing:border-box; height:32px; padding:0 20px 0 0; text-align:center; line-height:32px; color:#fff; font-family:'FuturaBT-Book'; letter-spacing:1px; font-size:14px; cursor:pointer; } #path_dropdown_close_container .close_icon { display:block; position:absolute; height:32px; width:20px; top:0px; right:0px; cursor:pointer; } #path_dropdown_close_container .close_icon span { display:block; position:absolute; width:16px; height:2px; border-radius:1px; background-color:#fff; transition:transform 0.3s ease; top:50%; left:-3px; margin-top:-1px; } #path_dropdown_close_container .close_icon span:nth-child(1) { transform: rotate(45deg); } #path_dropdown_close_container .close_icon span:nth-child(2) { transform: rotate(-45deg); } #path_dropdown_close_container:hover .close_icon span:nth-child(1) { transform: rotate(30deg); } #path_dropdown_close_container:hover .close_icon span:nth-child(2) { transform: rotate(-30deg); } /* aufzaehlung mit icon */ ul.pros_list { display:block; position:relative; } ul.pros_list li { display:block; padding:0 0 10px 25px; margin:0 0 9px 0; list-style:outside; background-image:url(../pix/li/star_blue.png); background-position:left 2px; background-repeat:no-repeat; background-size: 16px 16px; } ul.pros_list li.important { background-position:left 4px; line-height:22px; } ul.pros_list li a.important, ul.pros_list li a:hover.important { display:inline-block; font-family:'FuturaBT-Heavy'; padding:2px 5px; transition:background-color 0.3s; border-radius:3px; color:#fff; background-color:#009FE3; } ul.pros_list li a:hover.important { background-color:#11304D; } ul.pros_list.checked li { background-image:url(../pix/icons/check-green.svg); } ul.pros_list li::before { display:none; } ul.pros_list li img { display:inline-block; vertical-align:middle; margin:0 5px 0 0; } /*ul.pros_list { display:block; position:relative; } ul.pros_list li { display:block; padding:0 0 10px 25px; margin:0 0 9px 0; list-style:outside; background-image:url(../pix/li/star_blue.png); background-position:left 2px; background-repeat:no-repeat; background-size: 16px 16px; } ul.pros_list.checked li { background-image:url(../pix/icons/check-green.svg); } ul.pros_list li::before { display:none; } ul.pros_list li img { display:inline-block; vertical-align:middle; margin:0 5px 0 0; }*/ /* content split(text oder aufzählunf mit störer */ .conten_split_container { display:flex; position:relative; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; align-content:flex-start; margin:0 0 22px 0; } .conten_split_container_stoererContainer { flex:0 0 150px; display:block; position:relative; box-sizing: border-box; padding:0 20px 0 0; } a.conten_split_container_stoerer, a:hover.conten_split_container_stoerer { display:flex; position:relative; flex-direction:column; box-sizing:border-box; justify-content:center; align-items:center; align-content:center; height:130px; width:130px; border-radius:75px; margin:0 auto; background-color:#e6007e; transform: rotateX(0deg) rotateY(0deg) rotateZ(-10deg); /* Weihnachten */ /*box-shadow: inset -25px -15px 40px rgba(0,0,0,.3); background-image:linear-gradient(-45deg, rgba(255,255,220, 0.2) 0%, transparent 100%);*/ /* */ } /* Weihnachten */ /* a.conten_split_container_stoerer[href="de/wellcard-kaufen/"]::before, a:hover.conten_split_container_stoerer[href="de/wellcard-kaufen/"]::before { display:block; position:absolute; top:-38px; left:50%; margin-left:-25px; content:"\00a0"; width:50px; height:50px; background-image:url(../pix/weihnachtskugel-aufhaengung.png); background-repeat:no-repeat; background-position:center center; background-size:contain; } */ /* */ a.conten_split_container_stoerer.forImg, a:hover.conten_split_container_stoerer.forImg { background:none; border-radius:0; transform:none; } a.conten_split_container_stoerer img.imgStoerer, a:hover.conten_split_container_stoerer img.imgStoerer { display:block; position:relative; width:130px; /*height:130px;*/ background-color:#fff; } a.conten_split_container_stoerer, a:hover.conten_split_container_stoerer, a.conten_split_container_stoerer *, a:hover.conten_split_container_stoerer * { color:#fff; text-align:center; font-size:14px; line-height:20px; } a.conten_split_container_stoerer *, a:hover.conten_split_container_stoerer * { flex:0 0 auto; margin:0 0; padding:0 0; } .conten_split_container_textContainer { flex:1 1 auto; display:block; position:relative; } .conten_split_container_textContainer ul.pros_list { margin:0 0 0 0; } @media only screen and (max-width : 1000px) { .conten_split_container { flex-wrap:wrap; } .conten_split_container_stoererContainer { flex:1 0 100%; padding:0 0 22px 0; } } @media only screen and (max-width : 850px) { .conten_split_container { flex-wrap:nowrap; } .conten_split_container_stoererContainer { flex:0 0 150px; padding:0 20px 0 0; } } @media only screen and (max-width : 470px) { .conten_split_container { flex-wrap:wrap; } .conten_split_container_stoererContainer { flex:1 0 100%; padding:0 0 22px 0; } } /** * allgemeine seitencontainer **/ .page_section_outer_container { display:block; position:relative; } .page_section_container { display:block !important; min-height:auto !important; position:relative; } .page_center_section_container { display:block; position:relative; padding:80px 0; } .page_center_section_container.smallSpaceBottom { padding:80px 0 40px 0; } .page_center_section_container.noSpaceBottom { padding:80px 0 0 0; } .page_center_section_container.align_center, .page_center_section_container.align_center * { text-align:center; } .page_full_section_container, .page_section_container { display:flex; position:relative; height:auto; min-height:calc(100% - 95px); flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; box-sizing:border-box; } .page_full_section_container.headerspacing_topcontent { min-height:100%; } @media only screen and (max-width: 420px) { .page_fullHeight_half_content { min-height:calc(100% - 75px); } .page_full_section_container.headerspacing_topcontent { min-height:100%; } } /* volle hoehe - mehrere zeilen */ .page_fullHeight_row_container, .page_row_container { flex:1 1 auto; display:flex; position:relative; height:auto; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; box-sizing: border-box; } /* Zeile mit zwei spalten */ .page_fullHeight_content_column, .page_content_column { flex:1 1 auto; display:flex; position:relative; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; box-sizing: border-box; background-color:#E4EAEF; background-color:#fff; } .page_fullHeight_content_column.center, .page_content_column.center { justify-content:center; } /* spalte */ .page_fullHeight_half_container, .page_half_container { flex:1 1 50%; display:flex; position:relative; box-sizing: border-box; flex-direction:column; justify-content:center; align-items:stretch; align-content:stretch; } @media only screen and (max-width : 850px) { .page_fullHeight_half_container, .page_half_container { flex:1 1 100%; } .page_fullHeight_half_container.mobile_last { order:2; } .page_fullHeight_half_container.mobile_hidden { display:none } } /** * Geschenkboxen vorschau **/ a.geschenkbox_prev_container, a:hover.geschenkbox_prev_container { flex:1 1 auto; display:block; position:relative; box-sizing: border-box; background-position:center center; background-repeat:no-repeat; background-size:cover; text-decoration:none; } a:hover.geschenkbox_prev_container, a:hover.geschenkbox_prev_container * { text-decoration:none; } a.geschenkbox_prev_container.geschenkbox-auszeit { background-image:url(../pix/products/geschenkbox-auszeit/prev-open.jpg); } a.geschenkbox_prev_container.geschenkbox-romantik { background-image:url(../pix/products/geschenkbox-romantik/prev-open.jpg); } .geschenkbox_prev_container img.spacer { display:block; width:100%; } a.geschenkbox_prev_container .geschenkbox_prev_content_container { display:flex; position:absolute; top:0px; left:0px; width:100%; min-height:100%; height:1%; flex-direction:column; flex-wrap:wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; background-color:rgba(0,0,0,0); transition:background-color 0.3s ease-out; } a.geschenkbox_prev_container:hover .geschenkbox_prev_content_container { background-color:rgba(0,0,0,0.5); } .geschenkbox_prev_content_header { flex:0 0 25%; display:flex; position:relative; flex-direction:column; flex-wrap:wrap; justify-content:flex-end; align-items:center; align-content:center; padding:20px 20px 0 20px; box-sizing: border-box; } a.geschenkbox_prev_container .geschenkbox_prev_content_header *, a.geschenkbox_prev_container:hover .geschenkbox_prev_content_header * { color:#fff; text-shadow:2px 2px 2px rgba(0,0,0,0.2); text-align:center; } .geschenkbox_prev_content_body { flex:1 1 auto; display:block; position:relative; } .geschenkbox_prev_content_footer { flex:0 0 20%; display:flex; position:relative; flex-direction:column; flex-wrap:wrap; justify-content:flex-start; align-items:center; align-content:center; padding:0 20px 20px 20px; box-sizing:border-box; } a.geschenkbox_prev_container .geschenkbox_prev_content_footer *, a.geschenkbox_prev_container:hover .geschenkbox_prev_content_footer * { text-align:center; color:#fff; } .geschenkbox_prev_content_footer_overline { flex:0 0 auto; display:block; position:relative; color:#fff; text-shadow:2px 2px 2px rgba(0,0,0,0.2); margin:0 0 5px 0; } .c2a_geschenkbox_prev_content_footer { display:block; position:relative; border-radius:5px 5px 5px 5px; background-color:#507E29; color:#fff !important; font-size:18px !important;; line-height:22px !important;; padding:10px 15px; text-decoration:none; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.2); box-shadow:0 2px 0 #395F26, 0 4px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.2) inset; cursor:pointer; font-family:'FuturaBT-Book'; letter-spacing:2px; transition:box-shadow 0.3s linear; } a.geschenkbox_prev_container:hover .c2a_geschenkbox_prev_content_footer { box-shadow:none; } @media only screen and (max-width : 600px) { .geschenkbox_prev_container img.spacer { display:none; } a.geschenkbox_prev_container .geschenkbox_prev_content_container { position:relative; top:auto; left:auto; width:auto; min-height:auto; height:auto; flex-direction:column; flex-wrap:wrap; justify-content:flex-start; align-items:center; align-content:center; } .geschenkbox_prev_content_header { flex:1 1 auto; padding:20px 20px 0 20px; } .geschenkbox_prev_content_body { flex:0 0 150px; display:block; position:relative; } .geschenkbox_prev_content_footer { flex:1 1 auto; padding:0 20px 20px 20px; } } /** ** Seitenpfad **/ #geschenkbox_prev_aktion_outer_container { display:block; position:relative; background-color:#e6007e; background-color:#E4EAEF; background-color:#11304D; } #geschenkbox_prev_aktion_container { display:block; position:relative; padding:40px 10px; max-width:2200px; text-align:center; } #geschenkbox_prev_aktion_container * { color:#11304D; color:#fff; text-align:center; } #geschenkbox_prev_aktion_container h1 { margin-bottom:0px; } /* Text #22304F rgba(34, 48, 79, 1) darkblue #11304D rgba(17, 48, 77, 1) blue #009FE3 rgba(0, 159, 227, 1) lightblue #E4EAEF rgba(233, 245, 251, 1) grauer text #9e9e9e; hintergrundgrau #E0E2DE magenta #e6007e; */ /** Geschenkboxen vorschau Ende **/ /* Bildinhalt */ .emotion_img { display:block; top:0px; left:0px; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; } .emotion_img img.spacer { display:block; width:100%; } .emotion_img.pos_top .emotion_img.pos_left { background-position:left center; } /* wellcard aufladen */ .emotion_img.wellcard-aufladen { background-image:url(../pix/emotionsbilder/wellcard-aufladen.jpg) } .emotion_img.wellcard-aufladen-2 { background-image:url(../pix/emotionsbilder/wellcard-aufladen-2.jpg) } .emotion_img.wellcard-aufladen_block1 { background-image:url(../pix/emotionsbilder/aufladen/Aufladen_1stBlock_mehrEntspannung.jpg) } .emotion_img.wellcard-aufladen_block2 { background-image:url(../pix/emotionsbilder/aufladen/Aufladen_2ndBlock_Herz.png) } .emotion_img.wellcard-aufladen_block3 { background-image:url(../pix/emotionsbilder/aufladen/Aufladen_3rdBlock_Begeisterung.jpg) } /* wellcard guthaben */ .emotion_img.wellcard-guthaben { background-image:url(../pix/emotionsbilder/wellcard-guthaben.jpg) } .emotion_img.wellcard-abfragen_block1 { background-image:url(../pix/emotionsbilder/abfragen/Abfragen_Block-1.jpg) } .emotion_img.wellcard-abfragen_block2 { background-image:url(../pix/emotionsbilder/abfragen/Abfragen_Block-2.jpg) } /* wellcard wellnesssparen */ .emotion_img.wellnesssparen { background-image:url(../pix/emotionsbilder/wellnesssparen.jpg) } /* wellcard support */ .emotion_img.support { background-image:url(../pix/emotionsbilder/wellcard-support.jpg) } /* wellcard newsletter */ .emotion_img.newsletter { background-image:url(../pix/emotionsbilder/newsletter.jpg) } /* standard Bilder */ .emotion_img.frau-wellness-ruecken { background-image:url(../pix/emotionsbilder/frau-wellness-ruecken.jpg) } .emotion_img.xMas_Ronacher { background-image:url(../pix/emotionsbilder/xMas_Ronacher.jpg) } .emotion_img.tauernSpa_winter { background-image:url(../pix/emotionsbilder/tauernSpa_winter.jpg) } .emotion_img.tauernSpa_sommer { background-image:url(../pix/emotionsbilder/tauernSpa_sommer.jpg) } .emotion_img.tauernSpa_muttertag { background-image:url(../pix/emotionsbilder/tauernSpa_muttertag.jpg) } .emotion_img.paar-wellness { background-image:url(../pix/emotionsbilder/paar-wellness.jpg) } .emotion_img.paar-wellness-2 { background-image:url(../pix/emotionsbilder/paar-wellness-2.jpg) } .emotion_img.kontakt { background-image:url(../pix/emotionsbilder/kontakt.jpg) } .emotion_img.buero-runder-tisch { background-image:url(../pix/emotionsbilder/buero-runder-tisch.jpg) } /* Produktseite */ .emotion_img.gutscheinkarte { background-image:url(../pix/productheros/Gutscheinkarte_default.jpg) } .emotion_img.printathome { background-image:url(../pix/productheros/printathome.jpg) } .emotion_img.thermenbox { background-image:url(../pix/productheros/thermenbox.jpg) } /* Deafult */ .emotion_img.sommer-frau-schwimmen { background-image: url(../pix/emotionsbilder/sommer-frau-schwimmen.jpg); } .emotion_img.osteraktion-tauernspa { background-image: url(../pix/emotionsbilder/osteraktion-tauernspa.jpg); } .emotion_img.kampagne-comeback2021 { background-image: url(../pix/emotionsbilder/comeback-aktion.jpg); } /* Partner default */ .emotion_img.partner-sommer { background-image: url(../pix/emotionsbilder/lp/partner-sommer.jpg); } /* Jahreszeiten */ .emotion_img.herbst01 { background-image:url(../pix/emotionsbilder/herbst-1.jpg) } .emotion_img.herbst02 { background-image:url(../pix/emotionsbilder/herbst-2.jpg) } .emotion_img.xmas-23 { background-image:url(../pix/emotionsbilder/xMas_AT_DE_v2.jpg) } .emotion_img.xmas-schoene-momente { background-image:url(../pix/emotionsbilder/xmas-schoene-momente.jpg) } .emotion_img.xmas-feiertage { background-image:url(../pix/emotionsbilder/AT_Feiertage_v1.jpg) } .emotion_img.winter { background-image:url(../pix/emotionsbilder/winter.jpg) } .emotion_img.fruehling { background-image:url(../pix/emotionsbilder/wellcard-fruehling.jpg) } .emotion_img.fruehjahr { background-image:url(../pix/emotionsbilder/AT_afterXmas.jpg) } .emotion_img.ostern_aktion_1 { background-image:url(../pix/emotionsbilder/ostern_aktion_1.jpg) } .emotion_img.ostern-default { background-image:url(../pix/emotionsbilder/ostern01.jpg) } .emotion_img.valentin-promo { background-image:url(../pix/emotionsbilder/valentin-promo.jpg) } /* Aktionen */ .emotion_img.kampagne-aufladeaktion2021 { background-image:url(../pix/emotionsbilder/kampagne-aufladeaktion2021.jpg) } .emotion_img.aktion_5prozent_bonus { background-image:url(../pix/emotionsbilder/aktion_5prozent_bonus.jpg) } .emotion_img.aktion_firmengeschenk_1 { background-image:url(../pix/emotionsbilder/LP_Firmengeschenk_Bild_1.jpg) } .emotion_img.aktion_firmengeschenk_2 { background-image:url(../pix/emotionsbilder/LP_Firmengeschenk_Bild_2.jpg) } .emotion_img.xmas_aktion21 { background-image:url(../pix/emotionsbilder/lp_xmas_21.jpg) } .emotion_img.lastMinuteXmas21 { background-image:url(../pix/emotionsbilder/lastMinuteXmas21.jpg) } .emotion_img.aufladeAktion22 { background-image:url(../pix/emotionsbilder/auflade-aktion15_2022.jpg) } .emotion_img.milkaschokosnack { background-image: url(../pix/emotionsbilder/lp/milkaschokosnack.jpg); } /* Gutscheine */ .emotion_img.geburtstag { background-image:url(../pix/geschenkgutscheine/geburtstag/hero.jpg) } .emotion_img.muttertag { /*background-image:url(../pix/geschenkgutscheine/muttertag/hero.jpg)*/ background-image:url(../pix/geschenkgutscheine/muttertag/hero-gratisVerpackung.jpg) } .emotion_img.vatertag { background-image:url(../pix/geschenkgutscheine/vatertag/hero.jpg) } .emotion_img.weihnachten { background-image:url(../pix/geschenkgutscheine/weihnachten/hero.jpg) } .emotion_img.ostern { background-image:url(../pix/geschenkgutscheine/ostern/hero.jpg) } .emotion_img.valentinstag { background-image:url(../pix/geschenkgutscheine/valentinstag/hero.jpg) } .emotion_img.hochzeit { background-image:url(../pix/geschenkgutscheine/hochzeit/hero.jpg) } .emotion_img.mitarbeitergeschenke { background-image:url(../pix/geschenkgutscheine/mitarbeitergeschenke/hero.jpg) } .emotion_img.kundengeschenke { background-image:url(../pix/geschenkgutscheine/kundengeschenke/hero.jpg) } .emotion_img.danke { background-image:url(../pix/geschenkgutscheine/danke/hero.jpg) } .emotion_img.ruhestand { background-image:url(../pix/geschenkgutscheine/ruhestand/hero.jpg) } /* Produkte */ .emotion_img.geschenkbox-auszeit { background-image:url(../pix/products/geschenkbox-auszeit/hero.jpg) } .emotion_img.geschenkbox-romantik { background-image:url(../pix/products/geschenkbox-romantik/hero.jpg) } .emotion_copyright { display:block; position:absolute; color:#fff; font-size:12px; line-height:20px; text-shadow:1px 1px #146587; bottom:0px; left:0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .emotion_logo { display:block; position:absolute; bottom:20px; right:20px; max-width:250px; max-height:150px; } @media only screen and (max-width : 1250px) { .emotion_copyright { right:20px; } } @media only screen and (max-width : 500px) { .emotion_logo { right:10px; max-width:180px; max-height:100px; } } /* Textinhalt */ .page_half_content, .page_half_border_sep_content_container, .page_fullHeight_half_content { flex:1 1 auto; display:flex; position:relative; box-sizing: border-box; flex-direction:column; justify-content:center; align-items:stretch; align-content:stretch; overflow:hidden; padding:60px 120px; } .page_fullHeight_half_gallery { flex:1 1 auto; display:flex; position:relative; box-sizing: border-box; flex-wrap:wrap; flex-direction:row; justify-content:flex-start; align-items:center; align-content:center; overflow:hidden; padding:0; /*background-color:#11304D;*/ background-color:#E4EAEF; } .page_fullHeight_half_gallery.border-top { border-top:5px solid #fff; } .page_fullHeight_half_gallery div, .page_fullHeight_half_gallery figure { flex:0 0 50%; display:block; position:relative; box-sizing:boder-box; } .page_fullHeight_half_content_row_section { flex:0 0 auto; display:block; position:relative; box-sizing: border-box; padding:0 0 80px 0; } .page_fullHeight_half_content_row_section.small_spacing { padding:0 0 40px 0; } .page_fullHeight_half_content_row_section:last-child { padding:0 0 0 0; } .page_half_border_sep_content_container { justify-content:flex-start; padding:60px 0; } .page_half_border_sep_content { flex:1 1 auto; padding:0 120px; } .page_half_container:nth-child(1) .page_half_border_sep_content { border-right:1px solid #11304D; } .page_small_center_outer_container { display:block; position:relative; box-sizing:border-box; margin:0 auto; max-width:1250px; padding:20px 0; } .page_small_center_container { display:block; position:relative; box-shadow:2px 2px 10px 0px rgba(0,0,0,0.5); border-radius:3px; background-color:#fff; padding:40px 40px; } /** * Gewinnspiel Fassauna */ .page_fullHeight_half_mediaFullscreen { flex:1 1 auto; display:flex; position:relative; box-sizing: border-box; flex-wrap:wrap; flex-direction:row; justify-content:flex-start; align-items:center; align-content:center; overflow:hidden; padding:0; background-color:#E4EAEF; } #fasssaauna_3d { display:block; position:relative; width:100%; height:100%; } @media only screen and (max-width : 850px) { #fasssaauna_3d { height:480px; } } @media only screen and (max-width : 500px) { #fasssaauna_3d { height:420px; } } @media only screen and (max-width : 360px) { #fasssaauna_3d { height:380px; } } @media only screen and (max-width: 1800px) { .page_half_content, .page_fullHeight_half_content { padding:60px 80px; } .page_half_border_sep_content { padding:0 60px; } } @media only screen and (max-width: 1250px) { .page_small_center_outer_container { padding:10px 0; } .page_small_center_container { padding:40px 20px; } } @media only screen and (max-width: 788px) { .page_small_center_outer_container { padding:10px 0; } .page_small_center_container { padding:30px 10px; } } @media only screen and (max-width: 1200px) { .page_half_content, .page_fullHeight_half_content { padding:60px 60px; } .page_half_border_sep_content { padding:0 60px; } } @media only screen and (max-width: 1000px) { .page_half_content, .page_fullHeight_half_content { padding:60px 40px; } .page_half_border_sep_content { padding:0 40px; } } @media only screen and (max-width: 850px) { .page_half_border_sep_content_container { padding:0 40px; } .page_half_border_sep_content { padding:60px 0; } .page_half_container:nth-child(1) .page_half_border_sep_content { border-right:none; border-bottom:1px solid #11304D; } .page_fullHeight_half_content_row_section { padding:0 0 60px 0; } } @media only screen and (max-width: 450px) { .page_half_content, .page_fullHeight_half_content { padding:60px 20px; } .page_half_border_sep_content_container { padding:0 20px; } } /* full height Footer */ .page_fullHeight_header_column { flex:0 0 auto; display:block; position:relative; } /* full height Footer */ .page_fullHeight_footer_column { flex:0 0 auto; display:block; position:relative; } /* partner der wioche */ .ad_partner_outer_container { flex:0 0 50%; display:flex; position:relative; flex-direction:column; /*flex-wrap:no-wrap;*/ flex-wrap:wrap; justify-content:center; align-items:center; align-content:stretch; box-sizing:border-box; padding:80px 40px; } .ad_partner_container { flex:1 1 auto; display:flex; position:relative; flex-direction:column; /*flex-wrap:no-wrap;*/ flex-wrap:wrap; justify-content:flex-start; align-items:center; align-content:center; } .ad_partner_container .overline, .ad_partner_container h1 { flex:1 1 auto; white-space:normal !important; } a.ad_partner_img_container, a:hover.ad_partner_img_container { display:block; position:relative; text-decoration:none; margin: 0 0 20px 0; } a.ad_partner_img_container .ad_partner_img, a:hover.ad_partner_img_container .ad_partner_img { display:block; position:relative; text-decoration:none; width:100%; max-width:400px; } a.ad_partner_img_container .ad_partner_logo, a:hover.ad_partner_img_container .ad_partner_logo { display:block; position:absolute; text-decoration:none; bottom:10px; right:10px; width:100%; height:auto; max-width:33.3%; max-height:90%; } @media only screen and (max-width : 850px) { .ad_partner_outer_container { padding:40px 10px; } .ad_partner_outer_container { flex:1 1 100%; } } /* Premiumpartner */ .premiumpartner_outer_container { flex:0 0 auto; display:block; position:relative; padding:14px 7px 14px 7px; background-color:#009FE3; background-image: linear-gradient(to left, #11304D, #009FE3); } .premiumpartner_outer_container.bg_light { background-color:#E4EAEF; background-image:none; } .premiumpartner_outer_container .overline { text-align:center; margin:0 0 7px 0; /*color:#11304D;*/ color:#fff; } .premiumpartner_outer_container.bg_light .overline { color:#11304D; } .premiumpartner_logoContainer { display:flex; position:relative; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center; } .premiumpartner_logoContainer a, .premiumpartner_logoContainer a:hover { flex:0 0 auto; display:flex; position:relatve; flex-direction:row; flex-wrap:nowrap; margin:7px 10px; text-decoration:none; } .premiumpartner_logoContainer a img, .premiumpartner_logoContainer a:hover img { display:block; position:relatve; text-decoration:none; height:80px; } .premiumpartner_logoContainer a img:nth-child(2) { margin:0 0 0 5px; } @media only screen and (max-width: 900px) { .premiumpartner_logoContainer a img:nth-child(2) { display:none; } } @media only screen and (max-width : 850px) { .premiumpartner_outer_container .overline { margin:0 0 7px 0; } .premiumpartner_outer_container { padding:20px 7px; } } /* Erklaerung so funktionierts */ .explanation_outer_container { flex:0 0 auto; display:flex; position:relative; flex-direction:column; flex-wrap:wrap; justify-content:center; align-items:center; align-content:stretch; padding:10px 10px; background-color:#E4EAEF } .explanation_outer_container.large_space { padding:40px 10px; } .explanation_outer_container .overline { text-align:center; padding:5px 0 10px 0; margin:0; color:#11304D; } .explanation_outer_container.large_space .overline { padding:0px 0 30px 0; } .explanationList_container { display:flex; position:relative; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:stretch; align-content:center; max-width:1600px; } .explanationItem_container { flex:1 1 calc(33.33% - 20px); box-sizing: border-box; padding:5px 10px; margin:0 10px; background-color:#fff; border-radius:10px; display:flex; position:relative; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; align-content:center; } .explanationItem_container img { flex:0 0 60px; display:block; position:relative; width:60px; } .explanationItem_container div { display:block; position:relative; padding:0 0 0 10px; } .explanation_outer_container .addText { text-align:center; padding:20px 0 10px 0; margin:0; color:#11304D; font-size:12px; color:#11304D; line-height:20px; } .explanation_outer_container.large_space .addText { padding:20px 0 0 0; } .explanation_outer_container .addText a, .explanation_outer_container .addText a:hover { font-size:12px; color:#11304D; line-height:20px; } @media only screen and (max-width: 700px) { .explanationItem_container { flex:0 0 calc(100% - 20px); margin:10px 0; } } /** auflistung gutscheinthemen **/ .page_grid_container { display:flex; position:relative; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:stretch; align-content:flex-start; background-color:#fff; padding:0 0 80px 0; } .page_grid_half_container { display:flex; position:relative; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:stretch; align-content:flex-start; background-color:#fff; padding:10px 0; } a.page_grid_item, a:hover.page_grid_item { flex:0 1 calc(20% - 10px); display:flex; position:relative; flex-direction:column; justify-content:flex-start; align-items:stretch; align-content:flex-start; box-sizing: border-box; overflow:hidden; transition:box-shadow 0.3s ease-out; margin:0 5px 10px 5px; box-shadow:2px 2px 10px 0px rgba(0,0,0,0.5); border-radius:3px; max-width:450px; background-color:#fff; } .page_grid_half_container a.page_grid_item, .page_grid_half_container a:hover.page_grid_item { flex:0 1 calc(33.3% - 10px); } a:hover.page_grid_item { z-index:1; box-shadow:5px 5px 10px 0px rgba(0,0,0,0.9); } a.page_grid_item .page_grid_item_img_container, a:hover.page_grid_item .page_grid_item_img_container { flex:0 0 auto; display:block; position:relative; width:100%; } a.page_grid_item .page_grid_item_img_container img, a:hover.page_grid_item .page_grid_item_img_container img { display:block; position:relative; width:100%; } a.page_grid_item .page_grid_item_img_container span.more, a:hover.page_grid_item .page_grid_item_img_container span.more { display:block; position:absolute; text-decoration:none; width:60px; height:60px; top:50%; left:-120%; margin-top:-30px; margin-left:-30px; border-radius:30px; text-transform:uppercase; opacity:0; transition:0.5s ease-in-out; background-color:#009ee0; } a:hover.page_grid_item .page_grid_item_img_container span.more { opacity:1; left:50%; } a.page_grid_item .page_grid_item_img_container span.more_plus, a:hover.page_grid_item .page_grid_item_img_container span.more_plus { display:block; position:absolute; text-decoration:none; width:60px; height:60px; top:50%; right:-100%; margin-top:-30px; margin-right:-30px; opacity:0; transition:0.5s ease-in-out; } a:hover.page_grid_item .page_grid_item_img_container span.more_plus { opacity:1; right:50%; } a.page_grid_item .page_grid_item_img_container span.more_plus span:nth-child(1), a:hover.page_grid_item .page_grid_item_img_container span.more_plus span:nth-child(1) { display:block; position:absolute; width:20px; height:4px; background-color:#fff; top:50%; left:50%; margin-top:-2px; margin-left:-10px; } a.page_grid_item .page_grid_item_img_container span.more_plus span:nth-child(2), a:hover.page_grid_item .page_grid_item_img_container span.more_plus span:nth-child(2) { display:block; position:absolute; width:4px; height:20px; background-color:#fff; top:50%; left:50%; margin-top:-10px; margin-left:-2px; } a.page_grid_item .page_grid_item_contentContainer, a:hover.page_grid_item .page_grid_item_contentContainer { flex:1 1 auto; display:block; position:relative; padding:10px 15px; border-bottom:1px solid #ccc; } a.page_grid_item .page_grid_item_title, a:hover.page_grid_item .page_grid_item_title { display:block; position:relative; font-size:20px; line-height:20px; font-size:14px; line-height:18px; font-family: 'FuturaBT-Heavy'; text-decoration:none; color:#11304D; transition:color 0.5s ease-out; } a:hover.page_grid_item .page_grid_item_title { color:#009FE3; } a.page_grid_item .page_grid_item_teaser, a:hover.page_grid_item .page_grid_item_teaser { display:block; position:relative; font-size:14px; font-family:'FuturaBT-Book'; line-height:20px; color:#9e9e9e; padding:10px 0 0 0; } @media only screen and (max-width: 1200px) { .page_grid_half_container a.page_grid_item, .page_grid_half_container a:hover.page_grid_item { flex:0 1 calc(50% - 10px); } } @media only screen and (max-width: 1200px) { a.page_grid_item, a:hover.page_grid_item { flex:0 1 calc(25% - 10px); } } @media only screen and (max-width: 850px) { a.page_grid_item, a:hover.page_grid_item { flex:0 1 calc(33.33% - 10px); } .page_grid_half_container a.page_grid_item, .page_grid_half_container a:hover.page_grid_item { flex:0 1 calc(33.33% - 10px); } } @media only screen and (max-width: 650px) { a.page_grid_item, a:hover.page_grid_item { flex:0 1 calc(50% - 10px); } .page_grid_half_container a.page_grid_item, .page_grid_half_container a:hover.page_grid_item { flex:0 1 calc(50% - 10px); } } @media only screen and (max-width: 380px) { a.page_grid_item, a:hover.page_grid_item { flex:0 1 calc(100% - 10px); } .page_grid_half_container a.page_grid_item, .page_grid_half_container a:hover.page_grid_item { flex:0 1 calc(100% - 10px); } } /** * Wellcard kaufen liste Optionen **/ .wellcard_kaufen_optionList_container { display:flex; position:relative; flex-wrap:wrap; flex-direction:row; justify-content:stretch; align-items:stretch; align-content:stretch; box-sizing: border-box; } .wellcard_kaufen_optionItem_container { flex:0 0 calc(33.33% - 10px); margin:0 5px; display:flex; position:relative; overflow:hidden; /* xx */ flex:0 0 calc(50% - 10px); margin:0 5px 5px 0; /* xx */ } .wellcard_kaufen_optionItem_container input[type=checkbox] { display:none; } .wellcard_kaufen_optionItem_container label { display:flex; position:relative; flex-wrap:nowrap; flex-direction:column; justify-content:flex-start; align-items:stretch; align-content:flex-start; box-sizing: border-box; border:2px solid #E4EAEF; border-radius:4px; width:100%; /* xx */ flex-direction:row; /* xx */ } .wellcard_kaufen_optionItem_container input[type=checkbox]:checked ~ label { border:2px solid #009FE3; } .wellcard_kaufen_optionItem_container label .select_header { flex:0 0 30px; display:block; position:relative; background-color:#E4EAEF; cursor:pointer; } .wellcard_kaufen_optionItem_container label .select_header div { display:block; position:relative; height:22px; width:22px; box-sizing: border-box; margin:4px 10px; border:1px solid #E4EAEF; background-color:#fff; } .wellcard_kaufen_optionItem_container label:hover .select_header div { border:1px solid #009FE3; } .wellcard_kaufen_optionItem_container input[type=checkbox]:checked ~ label .select_header div { border:1px solid #E4EAEF; } .wellcard_kaufen_optionItem_container label .select_header div img { display:none; position:absolute; width:20px; height:20px; top:0px; left:0px; } .wellcard_kaufen_optionItem_container input[type=checkbox]:checked ~ label .select_header div img { display:block; } .wellcard_kaufen_optionItem_container label img.select_img { display:block; position:relative; max-width:200px; width:100%; align-self:flex-start; height:auto; margin:0 auto; cursor:pointer; /* xxx */ margin:10px auto; max-width:100px; /* xxx */ } .wellcard_kaufen_optionItem_container label div.select_content_container { flex:1 1 auto; display:flex; position:relative; flex-direction:column; justify-content:stretch; align-items:stretch; align-content:stretch; } .wellcard_kaufen_optionItem_container label div.select_title { flex:0 0 auto; display:block; position:relative; padding:5px 10px; font-weight:bold; cursor:pointer; } .wellcard_kaufen_optionItem_container label div.select_desc { flex:1 1 auto; display:flex; position:relative; flex-direction:column; justify-content:stretch; align-items:stretch; align-content:stretch; overflow:hidden; } .wellcard_kaufen_optionItem_container label div.select_desc_content { flex:1 1 auto; display:block; position:relative; padding:5px 10px; } .wellcard_kaufen_optionItem_container label div.select_desc_content span { white-space:nowrap } .wellcard_kaufen_optionItem_container label div.select_desc_content italic { margin:5px 0 0 0; display:block; color:#11304D; } .wellcard_kaufen_optionItem_container label div.select_desc_content a { margin:5px 0 0 0; display:block; line-height:22px; } .wellcard_kaufen_optionItem_container label div.select_desc_content a::before { content:"→\00A0" } .wellcard_kaufen_optionItem_container label div.select_desc .select_bttn_container { display:flex; position:absolute; flex-direction:column; justify-content:center; align-items:center; align-content:center; width:100%; height:100%; top:100%; left:0; box-sizing: border-box; background-color:rgba(255,255,255,1); transition:top 0.2s ease-in; /* xxx */ align-items:flex-start; padding:0 10px; /* xxx */ } .wellcard_kaufen_optionItem_container input[type=checkbox]:checked ~ label div.select_desc .select_bttn_container { top:0%; } .wellcard_kaufen_discountline { display:block; positon:relative; text-align:center; font-size:14px; line-height:20px; font-weight:bold; color:#507E29; margin:10px auto auto auto; } @media only screen and (max-width: 1640px) { .wellcard_kaufen_optionItem_container label { flex-direction:column; } .wellcard_kaufen_optionItem_container label img.select_img { margin:0 10px; } } @media only screen and (max-width: 1200px) { .wellcard_kaufen_optionList_container { flex-direction:column; } .wellcard_kaufen_optionItem_container { flex:0 0 auto; margin:5px 0; } .wellcard_kaufen_optionItem_container label { flex-direction:row; } .wellcard_kaufen_optionItem_container label img.select_img { margin:10px auto; } } @media only screen and (max-width: 850px) { .wellcard_kaufen_optionList_container { flex-direction:row; } .wellcard_kaufen_optionItem_container { flex:0 0 calc(50% - 10px); margin:0 5px 5px 0; } } @media only screen and (max-width: 740px) { .wellcard_kaufen_optionList_container { flex-direction:column; } .wellcard_kaufen_optionItem_container { flex:0 0 auto; margin:5px 0; } } @media only screen and (max-width: 400px) { .wellcard_kaufen_optionItem_container label { flex-direction:column; } .wellcard_kaufen_optionItem_container label img.select_img { margin:0 10px; } } /*** **** * footer **** ***/ #page_footer_outer_container { display:block; position:relative; margin:auto auto auto auto; background-image: linear-gradient(to top, #11304D, #009FE3); padding:0 0 100px 0; } /** 2 spalten kaufen & aufladen **/ #page_footer_c2a_row_container { display:flex; position:relative; flex-direction:row; flex-wrap:no-wrap; justify-content:center; align-items:stretch; align-content:stretch; box-sizing: border-box; } @media only screen and (max-width : 850px) { #page_footer_c2a_row_container { flex-direction:column; } } /* wellcard kaufen footer */ #page_footer_c2a_shop_container { flex:0 1 50%; display:flex; position:relative; box-sizing: border-box; flex-direction:column; flex-wrap:no-wrap; justify-content:flex-start; align-items:stretch; align-content:stretch; box-sizing: border-box; padding:60px 60px; border-right:1px solid #11304D; } #page_footer_c2a_shop_container, #page_footer_c2a_shop_container h2 { color:#fff; } #page_footer_c2a_shop_container_row { flex:1 1 auto; display:flex; position:relative; box-sizing: border-box; flex-direction:row; flex-wrap:no-wrap; justify-content:center; align-items:flex-start; align-content:stretch; box-sizing: border-box; } #page_footer_c2a_shop_container_row .c2a_wellcard_bttn_container { flex:0 1 auto; } ul.footer_pros_list { flex:1 1 auto; display:block; position:relative; padding:0 20px 0 0; margin:0; } ul.footer_pros_list li { display:block; padding:0 0 10px 30px; margin:0 0 9px 0; list-style:outside; background-image:url(../pages/designdemo/star_blue.png); background-position:left top; background-repeat:no-repeat; color:#fff; line-height:22px; font-family:'FuturaBT-Book'; } ul.footer_pros_list li:last-child { padding:0 0 0 30px; } ul.footer_pros_list li img { display:inline-block; vertical-align:middle; margin:0 5px 0 0; } ul.footer_pros_list li::before { display:none; } @media only screen and (max-width : 1550px) { #page_footer_c2a_shop_container { padding:60px 30px 60px 0; } } @media only screen and (max-width : 1250px) { #page_footer_c2a_shop_container h2 { text-align:center; } #page_footer_c2a_shop_container { padding:60px 30px 60px 20px; } #page_footer_c2a_shop_container_row { flex-direction:column; } #page_footer_c2a_shop_container_row .c2a_wellcard_bttn_container { margin:20px 0 0 0; width:100%; } } @media only screen and (max-width : 850px) { #page_footer_c2a_shop_container { border-right:none; border-bottom:1px solid #11304D; padding:60px 120px; } } @media only screen and (max-width : 700px) { #page_footer_c2a_shop_container { padding:60px 80px; } } @media only screen and (max-width : 600px) { #page_footer_c2a_shop_container { padding:60px 40px; } } @media only screen and (max-width : 500px) { #page_footer_c2a_shop_container { padding:60px 20px; } } /* wellcard aufladen footer */ #page_footer_c2a_reload_container { flex:0 1 50%; display:flex; position:relative; box-sizing: border-box; flex-direction:column; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; align-content:stretch; box-sizing: border-box; padding:60px 40px; border-left:1px solid #009FE3; } #page_footer_c2a_reload_container, #page_footer_c2a_reload_container h2 { color:#fff; } #page_footer_c2a_reload_container_row { display:flex; position:relative; flex:1 1 auto; box-sizing: border-box; flex-direction:row; flex-wrap:no-wrap; justify-content:center; align-items:center; align-content:center; box-sizing: border-box; } #page_footer_c2a_reload_container_icon { display:block; position:relative; flex:1 1 50px; width:50px; height:50px; } #page_footer_c2a_reload_container_contentcolumn { display:block; position:relative; padding:0 20px 0 20px; flex:1 1 auto; } #page_footer_c2a_reload_container_contentcolumn * { color:#fff; } #page_footer_c2a_reload_container_contentcolumn p { padding:0; margin:0; font-family:'FuturaBT-Book'; } #page_footer_c2a_reload_container_row .c2a_wellcard_bttn_container { flex:0 1 auto; } @media only screen and (max-width : 1550px) { #page_footer_c2a_reload_container { padding:60px 0 60px 30px; } } @media only screen and (max-width : 1450px) { #page_footer_c2a_reload_container_icon { display:none; } #page_footer_c2a_reload_container_contentcolumn { padding:0 20px 0 0; } } @media only screen and (max-width : 1250px) { #page_footer_c2a_reload_container { padding:60px 20px 60px 30px; } #page_footer_c2a_reload_container h2 { text-align:center; width:100%; } #page_footer_c2a_reload_container_row { flex-direction:column; flex:0 1 auto; } #page_footer_c2a_reload_container_row .c2a_wellcard_bttn_container { margin:30px 0 0 0; width:100%; } } @media only screen and (max-width : 850px) { #page_footer_c2a_reload_container { border-left:none; border-top:1px solid #009FE3; border-bottom:1px solid #11304D; padding:60px 120px; } } @media only screen and (max-width : 700px) { #page_footer_c2a_reload_container { padding:60px 80px; } } @media only screen and (max-width : 600px) { #page_footer_c2a_reload_container { padding:60px 40px; } } @media only screen and (max-width : 500px) { #page_footer_c2a_reload_container { padding:60px 20px; } } /** info **/ #footer_info_container { display:block; position:relative; } /* lieferung */ #footer_info_delivery { display:block; position:relative; text-align:center; } #footer_info_delivery span, #footer_info_delivery { font-family:'FuturaBT-Heavy'; color:#11304D; font-size:30px; line-height:38px; padding:60px 0 30px 0; } #footer_info_delivery span { white-space:nowrap; } @media only screen and (max-width : 1250px) { #footer_info_delivery span, #footer_info_delivery { font-size:24px; line-height:32px; } } @media only screen and (max-width : 850px) { #footer_info_delivery { border-top:1px solid #009FE3; } } /* zahlmethoden */ #footer_info_payment { display:flex; position:relative; box-sizing: border-box; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center; padding:20px 0 50px 0; border-bottom:1px solid #11304D; } #footer_info_payment a, #footer_info_payment a:hover { flex:0 0 auto; margin:10px 20px; display:block; position:relative; text-decoration:none; } #footer_info_payment a img, #footer_info_payment a:hover img { display:block; position:relative; } @media only screen and (max-width : 1250px) { #footer_info_payment a img, #footer_info_payment a:hover img { height:30px; } } /** navigation **/ #footer_nav_container { display:block; position:relative; } #footer_nav { display:flex; position:relative; padding:50px 0; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center; border-bottom:1px solid #11304D; border-top:1px solid rgba(0, 159, 227, 0.5); } #footer_nav a, #footer_nav a:hover { display:block; position:relative; cursor:pointer; font-family:'FuturaBT-Book'; color:#fff; margin:5px 10px; cursor:pointer; font-size:16px; line-height:30px; } #footer_nav a:hover, #footer_nav a.active { color:#009FE3; } #footer_nav a span.border, #footer_nav a:hover span.border { display:block; position:absolute; bottom:1px; left:0px; height:1px; width:0%; z-index:1; background-color:#11304D; transition:width 0.3s linear; background-color:#009FE3; } #footer_nav a:hover span.border, #footer_nav a.active span.border { width:100%; } /** Länderhinweise **/ #footer_countryList_container { display:block; position:relative; } #footer_countryList { display:block; position:relative; padding:50px 0; text-align:center; border-top:1px solid rgba(0, 159, 227, 0.5); } #footer_countryList, #footer_countryList a, #footer_countryList a:hover { color:#fff; font-family:'FuturaBT-Book'; text-decoration:none; } #footer_countryList a { text-decoration:underline; } a.countrylink, a:hover.countrylink { display:inline-block; margin:0 5px 0 5px; } a.countrylink img, a:hover.countrylink img { display:inline-block; vertical-align:baseline; height:12px; margin:0 3px 0 0; text-decoration:none; } #static_footer_outer_container { display:block; position:fixed; bottom:0px; left:0px; width:100%; z-index:100; background-color:rgba(255,255,255,0); box-sizing: border-box; } #static_footer_container { display:flex; position:relative; margin:0 auto; box-sizing: border-box; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; box-sizing: border-box; padding-bottom:10px; } /* Text #22304F rgba(34, 48, 79, 1) darkblue #11304D rgba(17, 48, 77, 1) blue #009FE3 rgba(0, 159, 227, 1) lightblue #E4EAEF rgba(233, 245, 251, 1) */ /** * Geo Api **/ #system_map_window_container.close, #system_map_window_container { display:none; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:800; background-color:#E4EAEF; background-image: linear-gradient(to top left, #11304D, #009FE3); border-radius:6px; overflow:hidden; box-sizing: border-box; padding:10px 10px; flex-direction:column; flex-wrap:no-wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; } #system_map_window_container.open { display:flex; } #system_map_header_container { flex:0 0 40px; display:flex; position:relative; overflow:hidden; box-sizing: border-box; flex-direction:row; flex-wrap:no-wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; } #system_map_header_logo { flex:0 0 auto; display:block; position:relative; height:30px; } #system_map_header_title { flex:1 1 auto; display:block; position:relative; height:30px; text-align:center; } #system_map_header_close { flex:0 0 30px; display:block; position:relative; height:40px; width:40px; cursor:pointer; } #system_map_header_close img { display:block; position:relative; height:30px; width:30px; } #system_map_body_container { flex:1 1 auto; display:flex; position:relative; background-color:#F00; flex-direction:column; flex-wrap:no-wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; } /* inaktiv */ #system_map_filter_container { flex:0 0 auto; display:block; position:relative; background-color:#E4EAEF; padding:20px 0; } #system_map_content_container { flex:1 1 auto; display:flex; position:relative; background-color:#fff; flex-direction:row; flex-wrap:no-wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; } #system_map_googleapi_container { flex:1 1 auto; display:block; position:relative; } /* ergebnis in sprechblase*/ a.system_map_result_bubble, a:hover.system_map_result_bubble { display:block; position:relative; /*max-width:250px;*/ border:none; } a.system_map_result_bubble .system_map_result_bubble_logo, a:hover.system_map_result_bubble .system_map_result_bubble_logo { display:block; position:relative; max-width:100px; max-height:80px; border:none; margin:0 auto 10px auto; } a.system_map_result_bubble .system_map_result_bubble_prevpic, a:hover.system_map_result_bubble .system_map_result_bubble_prevpic { display:block; position:relative; max-width:200px; max-height:120px; border:none; margin:0 auto 10px auto; } a.system_map_result_bubble .overline, a:hover.system_map_result_bubble .overline { display:block; position:relative; font-size:14px; font-family:'FuturaBT-Book'; line-height:20px; color:#9e9e9e; margin:0; } a.system_map_result_bubble .rating, a:hover.system_map_result_bubble .rating { display:block; position:relative; font-size:14px; font-family:'FuturaBT-Book'; line-height:20px; padding:0 0 0 20px; margin:0; color:#9e9e9e; } a.system_map_result_bubble .rating img, a:hover.system_map_result_bubble .rating img { display:block; position:absolute; left:0px; top:2px; width:16px; height:16px; } a.system_map_result_bubble .title, a:hover.system_map_result_bubble .title { display:block; position:relative; border:none; color:#000; padding:0 0 0 20px; text-decoration:none; border:none; font-size:14px; line-height:18px; font-family: 'FuturaBT-Heavy'; text-decoration:none; color:#11304D; transition:color 0.5s ease-out; margin:5px 0 0 0; } a:hover.system_map_result_bubble .title { color:#009FE3; } a.system_map_result_bubble .title img, a:hover.system_map_result_bubble .title img { display:block; position:absolute; left:0px; top:5px; border-radius:2px; width:16px; text-decoration:none; border:none; } a.system_map_result_bubble .system_map_result_bubble_region, a:hover.system_map_result_bubble .system_map_result_bubble_region { display:none; position:relative; color:#000; text-align:left; padding:0 0 0 20px; margin:10px 0 0 0; } a.system_map_result_bubble .system_map_result_bubble_region img, a:hover.system_map_result_bubble .system_map_result_bubble_region img { display:block; position:absolute; left:0px; top:5px; border-radius:2px; width:16px; text-decoration:none; border:none; } /* ergebnis auf rechter Seite*/ #system_map_result_container { flex:0 0 auto; width:0px; overflow:hidden; box-sizing:border-box; height:100%; display:flex; position:relative; flex-direction:column; flex-wrap:no-wrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; background-color:#fff; } #system_map_result_container.open { width:33.33%; max-width:400px; min-width:200px; } a#system_map_result_imgContainer, a:hover#system_map_result_imgContainer { flex:0 0 auto; display:block; position:relative; width:100%; box-sizing:border-box; border:none; } a#system_map_result_imgContainer #system_map_result_imgContainer_img, a:hover#system_map_result_imgContainer #system_map_result_imgContainer_img { display:block; position:relative; border:none; width:100%; } a#system_map_result_imgContainer #system_map_result_imgContainer_flag, a:hover#system_map_result_imgContainer #system_map_result_imgContainer_flag { display:block; position:absolute; left:10px; bottom:10px; border-radius:2px; text-decoration:none; border:none; } a#system_map_result_imgContainer #system_map_result_imgContainer_logo, a:hover#system_map_result_imgContainer #system_map_result_imgContainer_logo { display:block; position:absolute; right:10px; bottom:10px; max-height:40%; max-width:40%; border:none; } #system_map_result_contentContainer { flex:0 1 auto; display:block; position:relative; box-sizing:border-box; padding:20px 20px 0 20px; overflow:auto; } #system_map_result_contentContainer .overline { display:block; position:relative; font-size:14px; font-family:'FuturaBT-Book'; line-height:20px; color:#9e9e9e; margin:0; } #system_map_result_contentContainer .rating { display:block; position:relative; font-size:14px; font-family:'FuturaBT-Book'; line-height:20px; padding:0 0 0 20px; margin:0; color:#9e9e9e; } #system_map_result_contentContainer .rating img { display:block; position:absolute; left:0px; top:2px; width:16px; height:16px; } #system_map_result_contentContainer h2 { padding:0; margin:20px 0 20px 0; } #system_map_result_addressContainer { display:block; position:relative; margin:0 0 20px 0; } #system_map_result_wellcardService { display:block; position:relative; color:#11304D; background-color:#E4EAEF; padding:10px; margin:auto auto 20px auto; } #system_map_result_wellcardService * { color:#11304D; } @media only screen and (max-width :600px) { a.system_map_result_bubble .title, a:hover.system_map_result_bubble .title { padding:0 0 0 0; } a.system_map_result_bubble .title img, a:hover.system_map_result_bubble .title img { display:none; } a.system_map_result_bubble .system_map_result_bubble_region, a:hover.system_map_result_bubble .system_map_result_bubble_region { display:block; } #system_map_result_container { display:none; } } /** * Set my Pos Maps Pop Up **/ #system_map_getlocation_outer_container { display:flex; position:relative; width:100%; height:100%; overflow:hidden; flex-direction:column; flex-wrap:no-wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; } #system_map_getlocation_input_container { flex:0 0 100px; display:block; position:relative; background-color:#F0F; color:#000; } #system_map_getlocation_input_distane { display:inline-block; position:relative; height:36px; width:100px; background-color:#ccc; } #system_map_getlocation_container { flex:1 1 auto; display:block; position:relative; background-color:#ff0 } /** * PopUp * z-index:900; **/ #system_all_popup_outer_container { display:none; position:fixed; z-index:900; width:100%; height:100%; top:0px; left:0px; } .system_popup_outer_container { display:flex; position:absolute; width:100%; height:100%; top:0px; left:0px; transition:background-color 0.3s; background-color:rgba(0,0,0,0.9); flex-direction:column; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center; padding:20px 10px; box-sizing: border-box; } .system_popup_container { flex:0 1 auto; display:flex; position:relative; box-sizing: border-box; width:auto; height:auto; max-width:100%; max-height:100%; min-width:280px; min-height:100px; overflow:hidden; border-radius:4px 4px 4px 4px; flex-direction:column; flex-wrap:no-wrap; justify-content:center; align-items:stretch; align-content:stretch; box-sizing: border-box; } .system_popup_content_title_container { flex:0 0 auto; display:block; box-sizing: border-box; position:relative; text-align:center; font-family:'FuturaBT-Book'; color:#fff; font-size:14px; line-height:20px; padding:10px 34px 10px 10px; border-radius:4px 4px 0 0; color:#fff; background-color:#009FE3; background-image: linear-gradient(to left, #11304D, #009FE3); } a.system_popup_close, a:hover.system_popup_close { display:block; position:absolute; right:7px; top:50%; margin-top:-10px; height:20px; width:20px; cursor:pointer; } .system_popup_content_container { flex:1 1 auto; display:block; position:relative; background-color:#fff; font-size:14px; line-height:20px; padding:15px 10px; box-sizing: border-box; overflow:auto; -webkit-overflow-scrolling: touch; } .system_popup_content_footer_container { flex:0 0 auto; display:flex; position:relative; text-align:center; flex-direction:row; /*flex-wrap:nowrap;*/ flex-wrap:wrap; justify-content:center; align-items:flex-start; align-content:flex-start; background-color:#E0E2DE; line-height:20px; padding:5px 10px 0 10px; border-radius:0 0 4px 4px; box-sizing: border-box; } .popup_spacer_container { margin:10px 10px; font-size:14px; line-height:20px; } .popup_spacer_container.alert, .popup_spacer_container.alert * { font-size:14px; line-height:20px; } h3.popup_title { text-align:center; } .c2a_popup_bttnlevel1, a.c2a_popup_bttnlevel1, a:hover.c2a_popup_bttnlevel1 { display:block; height:44px; line-height:44px; text-decoration:none; font-family:'FuturaBT-Book'; color:#fff; font-size:16px; transition:background-image 0.3s; padding:0 10px 0 10px; border-radius:6px 6px 6px 6px; margin:0 5px 5px 5px; cursor:pointer; background-image:linear-gradient(to top, #507E29, #7EC244); } .c2a_popup_bttnlevel1:hover, a.c2a_popup_bttnlevel1:hover, a:hover.c2a_popup_bttnlevel1:hover { background-image:linear-gradient(to bottom, #507E29, #7EC244); } .c2a_popup_bttnlevel2, a.c2a_popup_bttnlevel2, a:hover.c2a_popup_bttnlevel2 { display:block; height:44px; line-height:44px; text-decoration:none; font-family:'FuturaBT-Book'; color:#11304D; font-size:16px; transition:background-image 0.3s; padding:0 10px 0 10px; border-radius:6px 6px 6px 6px; margin:0 5px 5px 5px; cursor:pointer; border:2px solid #11304D; box-sizing:border-box; } .c2a_popup_bttnlevel2:hover, a.c2a_popup_bttnlevel2:hover, a:hover.c2a_popup_bttnlevel2:hover { } .c2a_popup_bttn, a.c2a_popup_bttn, a:hover.c2a_popup_bttn { display:block; height:44px; line-height:44px; text-decoration:none; font-family:'FuturaBT-Book'; color:#fff; font-size:16px; transition:background-image 0.3s; padding:0 10px 0 10px; border-radius:6px 6px 6px 6px; margin:0 5px 5px 5px; cursor:pointer; background-image:linear-gradient(to top, #11304D, #009FE3); } .c2a_popup_bttn:hover, a.c2a_popup_bttn:hover, a:hover.c2a_popup_bttn:hover { background-image:linear-gradient(to bottom, #11304D, #009FE3); } /** * Ende **/ /** * Page Lock **/ #page_lock { display:none; position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:rgba(0,0,0,0.95); } /** * Ende **/ /** * Page Loader **/ #page_loader { display:flex; flex-direction:column; align-items:center; -webkit-justify-content:center; justify-content:center; z-index:1000; position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.95); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select:none; display:none; opacity:0; } .loader_bar_logo { display:block; position:relative; width:90px; margin:20px 20px; } .loader_bar_container { flex:0 1 auto; position:relative; height:100px; text-align:center; font-size:10px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select:none; } .loader_bar_container div { background-color:#009FE3; background-image: linear-gradient(to top, #11304D, #009FE3); height:100%; width:14px; margin:0 2px; border-radius:4px; display:inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select:none; -webkit-animation: loader_ani 1.2s infinite ease-in-out; animation: loader_ani 1.2s infinite ease-in-out; } .loader_bar_container .bar_2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .loader_bar_container .bar_3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .loader_bar_container .bar_4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .loader_bar_container .bar_5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes loader_ani { 0%, 40%, 100% { -webkit-transform: scaleY(0.6); background-color:#11304D; background-image: linear-gradient(to bottom, #11304D, #009FE3); } 20% { -webkit-transform: scaleY(1.0); background-color:#009FE3; background-image: linear-gradient(to top, #11304D, #009FE3); } } @keyframes loader_ani { 0%, 40%, 100% { -webkit-transform: scaleY(0.6); background-color:#11304D; background-image: linear-gradient(to bottom, #11304D, #009FE3); } 20% { -webkit-transform: scaleY(1.0); background-color:#009FE3; background-image: linear-gradient(to top, #11304D, #009FE3); } } #page_loader_text_container { flex:0 1 auto; position:relative; line-height:20px; padding:20px 20px; font-family:'FuturaBT-Book'; color:#fff; font-size:14px; text-align:center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select:none; } /** * Ende **/ .content_section_conainer { flex: 1 1 100%; display:flex; position:relative; box-sizing: border-box; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:stretch; align-content:stretch; width:100%; max-width:2200px; } .content_section_conainer.center { justify-content:center; } .article { flex:1 1 50%; display:flex; position:relative; box-sizing: border-box; flex-direction:column; justify-content:center; align-items:stretch; align-content:stretch; overflow:hidden; padding:60px 168px; } @media only screen and (max-width: 1800px) { .article { padding:40px 100px; } } @media only screen and (max-width: 1200px) { .article { padding:40px 60px; } } @media only screen and (max-width: 1000px) { .article { padding:40px 40px; } } @media only screen and (max-width: 450px) { .article { padding:40px 20px; } } .article_full { display:flex; position:relative; flex:1 1 100%; box-sizing: border-box; flex-direction:column; justify-content:center; padding:160px 60px; max-width:1060px; text-align:center; } .important_message, .important_message * { font-size:40px; line-height:56px; text-transform:none; font-family:'DomaineSansTextWeb', serif; } .important_message.img_overlay, .important_message.img_overlay * { color:#fff; text-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.5); } @media only screen and (max-width : 1800px) { .important_message, .important_message * { font-size:32px; line-height:40px; } } @media only screen and (max-width : 768px) { .article_full { padding:60px 40px; } .important_message, .important_message * { font-size:20px; line-height:34px; } } .gallery_container { flex:1 1 50%; display:block; position:relative; overflow:hidden; min-height:600px; } .app_outer_container { display:block; position:relative; flex-grow:1; flex-shrik:1; flex-basis:50%; } .app_container { display:block; position:relative; } @media only screen and (max-width: 768px) { .content_section_conainer { flex-direction:column; } .article, .gallery_container, .app_outer_container { flex-grow:0; flex-shrik:0; flex-basis:100%; width:100%; } .app_container { height:auto; } .article.mobile_first, .gallery_container.mobile_first, .app_outer_container.mobile_first { order:1; } .article.mobile_second, .gallery_container.mobile_second, .app_outer_container.mobile_second { order:2; } } @media only screen and (max-width : 768px) { .important_message, .important_message * { font-size:20px; line-height:34px; } } .gallery_img { display:block; position:absolute; top:0px; left:0px; width:100%; height:100%; background-position:center center; background-repeat:repeat; background-size:cover; } .gallery_img.pos_top { background-position:top center; } .gallery_img.pos_left { background-position:left center; } .gallery_img.dummy { background-image:url(../pix/demo/bg_wellness_sommer.jpg) } /** formular allgemein - wellnessparen**/ .wellcard_form_wrapper { display:flex; position:relative; flex-direction:row; flex-wrap:no-wrap; justify-content:flex-start; align-items:stretch; align-content:center; } .wellcard_form_outer_container { flex:0 0 auto; display:block; position:relative; max-width:280px; width:100%; margin:0 auto 0 0; background-color:#11304D; background-image:url(../pix/wellcard-bg-topleft.png); background-position:top left; background-repeat:no-repeat; background-size:47px 35px; border-radius:10px; overflow:hidden; box-shadow:2px 2px 10px 0px rgba(0,0,0,0.5); transition:box-shadow 0.3s ease-out; } .wellcard_form_outer_container:hover { box-shadow:5px 5px 10px 0px rgba(0,0,0,0.9); } .wellcard_form_container { display:flex; box-sizing:border-box; padding:30px 20px 40px 20px; position:relative; background-image:url(../pix/wellcard-bg-bottomright.png); background-position:bottom right; background-repeat:no-repeat; background-size:91px 28px; flex-direction:column; flex-wrap:no-wrap; justify-content:center; align-items:center; align-content:center; } /** content **/ .wellcard_form_inputContainer { display:flex; position:relative; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; margin:0 auto 10px auto; width:100%; } /* Label */ .wellcard_form_inputLabel { flex:0 0 auto; display:block; position:relative; display:block; font-size:14px; line-height:20px; padding:0 0 5px 13px; font-family:'FuturaBT-Book'; color:#fff; letter-spacing:1px; } .wellcard_form_inputLabel::before { display:block; position:absolute; left:0px; top:0px; height:20px; font-size:12px; line-height:20px; content:"→\00A0" } /* input text */ .wellcard_form_inputText { display:block; position:relative; box-sizing: border-box; width:100%; height:48px; line-height:48px; font-size:16px; cursor:pointer; padding:0 5px; background-color:#fff; /*border:2px solid #E4EAEF;*/ border:2px solid #11304D; border-radius:6px; overflow:hidden; box-shadow: inset 0px 11px 5px -10px rgba(0,0,0,0.8), inset 11px 0px 5px -10px rgba(0,0,0,0.8), inset -11px 0px 5px -10px rgba(0,0,0,0.8), inset 0px -11px 5px -10px rgba(0,0,0,0.8); transition:border 0.5s ease-in-out; } .wellcard_form_inputText:focus { border-color:#009FE3; } .wellcard_form_faq_container { flex:1 1 auto; display:flex; box-sizing:border-box; padding:0 0 0 20px; position:relative; flex-direction:column; flex-wrap:no-wrap; justify-content:center; align-items:center; align-content:center; } @media only screen and (max-width : 1300px) { .wellcard_form_wrapper { flex-direction:column; } .wellcard_form_faq_container { padding:20px 0 0 0; } } @media only screen and (max-width : 850px) { .wellcard_form_wrapper { flex-direction:row; } .wellcard_form_faq_container { padding:0 0 0 20px; } } @media only screen and (max-width : 580px) { .wellcard_form_wrapper { flex-direction:column; } .wellcard_form_faq_container { padding:20px 0 0 0; } } /** * Aufladen **/ /** Rechenbeispiele **/ .wellcard_aufladen_sampelList_container { display:flex; position:relative; flex-wrap:wrap; flex-direction:row; justify-content:stretch; align-items:stretch; align-content:stretch; box-sizing: border-box; margin:0 0 20px 0; } .wellcard_aufladen_sampel_container { flex:0 0 calc(33.33% - 10px); box-sizing:border-box; margin:0 5px; position:relative; overflow:hidden; border-radius:4px; background-color:#E4EAEF; display:flex; flex-wrap:no-wrap; flex-direction:column; justify-content:stretch; align-items:stretch; align-content:stretch; max-width:360px; } @media only screen and (max-width: 1450px) { .wellcard_aufladen_sampelList_container { flex-direction:column; } .wellcard_aufladen_sampel_container { flex:0 0 auto; margin:10px 0; } } @media only screen and (max-width: 850px) { .wellcard_aufladen_sampelList_container { flex-direction:row; } .wellcard_aufladen_sampel_container { flex:0 0 calc(33.33% - 10px); margin:0 5px; } } @media only screen and (max-width: 650px) { .wellcard_aufladen_sampelList_container { flex-direction:column; } .wellcard_aufladen_sampel_container { flex:0 0 auto; margin:10px 0; } } .wellcard_aufladen_sampel_header { flex:0 0 auto; display:block; position:relative; height:50px; padding:10px 10px 10px 65px; } .wellcard_aufladen_sampel_header img { display:block; position:absolute; left:10px; top:10px; width:50px; height:50px; } .wellcard_aufladen_sampel_header span { display:block; position:relative; line-height:50px; color:#009FE3; font-weight:bold; } .wellcard_aufladen_sampel_title { flex:0 0 auto; display:block; position:relative; padding:0 0 0 0; font-weight:bold; line-height:18px; padding:0 10px 10px 10px; } .wellcard_aufladen_sampel_content { flex:1 1 auto; display:block; position:relative; padding:0 10px 0 10px; } .wellcard_aufladen_sampel_umfang { display:block; position:relative; padding:0 0 0 0; line-height:18px; border-top:1px solid #11304D; padding:8px 0; } .wellcard_aufladen_sampel_price { display:flex; position:relative; flex-direction:row; justify-content:stretch; align-items:stretch; align-content:stretch; flex-wrap:no-wrap; border-top:1px solid #11304D; padding:8px 0; } .wellcard_aufladen_sampel_price span:nth-child(1) { flex:1 1 auto; display:block; position:relative; } .wellcard_aufladen_sampel_price span:nth-child(2) { flex:0 0 auto; display:block; position:relative; text-align:right; } .wellcard_aufladen_sampel_bonus { flex:0 0 auto; display:block; position:relative; border:1px solid #11304D; padding:2px; background-color:#fff; border-radius:4px; } .wellcard_aufladen_sampel_bonus div { display:flex; position:relative; flex-direction:row; justify-content:stretch; align-items:stretch; align-content:stretch; flex-wrap:no-wrap; border-radius:4px; padding:7px 7px 40px 7px; background-color:#11304D; background-image:url(../pix/icons/check-green.svg); background-position:center 35px; background-size:24px 24px; background-repeat:no-repeat; } .wellcard_aufladen_sampel_bonus div span:nth-child(1) { flex:1 1 auto; display:block; position:relative; color:#fff; font-weight:bold; } .wellcard_aufladen_sampel_bonus div span:nth-child(2) { flex:0 0 auto; display:block; position:relative; text-align:right; color:#fff; font-weight:bold; } /** 404 **/ .mobileMenu_404_outer_container { display:flex; position:fixed; top:0px; right:0px; width:100%; height:100%; z-index:900; background-color:#E4EAEF; background-image: linear-gradient(to right bottom, #11304D, #009FE3); overflow:hidden; box-sizing: border-box; padding:10px 10px; flex-direction:column; flex-wrap:no-wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; transition:right 0.3s ease-in-out; } #mobileMenu_404_header_container { flex:0 0 40px; display:flex; position:relative; overflow:hidden; box-sizing: border-box; flex-direction:row; flex-wrap:no-wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; } #mobileMenu_404_header_logo { flex:0 0 auto; display:block; position:relative; height:30px; margin-left:100px; } #mobileMenu_404_content_container { flex:0 0 auto; display:block; position:relative; margin-left:100px; margin-top:50px; } #mobileMenu_404_content_container, #mobileMenu_404_content_container * { color:#fff; } /** * Mobile Navigtaion **/ .mobileMenu_outer_container, .mobileMenu_outer_container.close { display:flex; position:fixed; top:0px; right:-100%; width:100%; height:100%; z-index:900; background-color:#E4EAEF; background-image: linear-gradient(to right bottom, #11304D, #009FE3); border-radius:6px; overflow:hidden; box-sizing: border-box; padding:10px 10px; flex-direction:column; flex-wrap:no-wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; transition:right 0.3s ease-in-out; } .mobileMenu_outer_container.open { right:0%; } #mobileMenu_header_container { flex:0 0 40px; display:flex; position:relative; overflow:hidden; box-sizing: border-box; flex-direction:row; flex-wrap:no-wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; } #mobileMenu_header_logo { flex:0 0 auto; display:block; position:relative; height:30px; display:none } #mobileMenu_header_title { flex:1 1 auto; display:block; position:relative; height:30px; line-height:30px; text-align:center; color:rgba(255,255,255,0.8); font-family:'FuturaBT-Book'; letter-spacing:1px; overflow:hidden; } a#mobileMenu_header_close, a:hover#mobileMenu_header_close { flex:0 0 auto; display:block; position:relative; height:30px; width:36px; cursor:pointer; margin:0 0 10px 0; } a#mobileMenu_header_close span, a:hover#mobileMenu_header_close span { display:block; position:absolute; width:40px; height:4px; border-radius:2px; background-color:#fff; transition:transform 0.3s ease; top:50%; left:-3px; margin-top:-2px; } a#mobileMenu_header_close span:nth-child(1) { transform: rotate(45deg); } a#mobileMenu_header_close span:nth-child(2) { transform: rotate(-45deg); } a:hover#mobileMenu_header_close span:nth-child(1) { transform: rotate(30deg); } a:hover#mobileMenu_header_close span:nth-child(2) { transform: rotate(-30deg); } #mobileMenu_body_container { flex:0 0 auto; display:flex; position:relative; flex-direction:column; justify-content:flex-start; align-items:flex-start; align-content:flex-start; height:calc(100% - 40px); overflow:auto; -webkit-overflow-scrolling: touch; width:100%; } .mobileMenu_content_container { flex:1 1 auto; display:flex; position:relative; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; padding:0 0; } /** mainnav **/ .mobileMenu_mainMenuContainer { flex:0 0 auto; display:flex; position:relative; flex-direction:column; flex-wrap:no-wrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; margin:60px 0 0 0; padding:50px 100px 0 100px; } .mobileMenu_mainMenuContainer a, .mobileMenu_mainMenuContainer a:hover { flex:0 0 auto; display:block; position:relative; font-family:'FuturaBT-Book'; font-size:36px; line-height:40px; margin:0 0 20px 0; padding:10px 0; color:#fff; text-decotration:none; } /** topnav **/ .mobileMenu_topMenuContainer { flex:0 0 auto; display:flex; position:relative; flex-direction:column; flex-wrap:no-wrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; margin:100px 0; padding:10px 50px; border-left:1px solid rgba(255,255,255,0.4); } .mobileMenu_topMenuContainer a, .mobileMenu_topMenuContainer a:hover { flex:0 0 auto; display:block; position:relative; font-family:'FuturaBT-Book'; font-size:18px; line-height:24px; margin:10px 0 10px 0; color:#fff; text-decotration:none; } /* Topnav Icon */ a.mobileMenu_topnav_bttn, a:hover.mobileMenu_topnav_bttn { display:block; position:relative; height:30px; box-sizing:border-box; cursor:pointer; overflow:hidden; text-decoration:none; padding:0 0 0 28px; } a.mobileMenu_topnav_bttn img, a:hover.mobileMenu_topnav_bttn img { display:block; position:absolute; text-decoration:none; left:8px; top:7px; height:14px; width:14px; opacity:1; transition:opacity 0.3s linear; } a.mobileMenu_topnav_bttn img.icon, a:hover.mobileMenu_topnav_bttn img.icon_hover { opacity:1; } a.mobileMenu_topnav_bttn img.icon_hover, a:hover.mobileMenu_topnav_bttn img.icon { opacity:0; } a.mobileMenu_topnav_bttn span, a:hover.mobileMenu_topnav_bttn span { display:inline-block; padding:0 8px 0 0; line-height:28px; font-size:18px; color:#fff; font-family:'FuturaBT-Book'; transition:color 0.3s linear; } a:hover.mobileMenu_topnav_bttn span { color:#009FE3; } /* Warenkorb Icon */ .mobileMenu_topMenuContainer a.show_hide_basket, .mobileMenu_topMenuContainer a:hover.show_hide_basket { transition:background-color 0.3s linear; background-color:#fff; } .mobileMenu_topMenuContainer a:hover.show_hide_basket { background-color:#009FE3; } .mobileMenu_topMenuContainer a.show_hide_basket img, .mobileMenu_topMenuContainer a:hover.show_hide_basket img { transition:opacity 0.3s linear; } .mobileMenu_topMenuContainer a.show_hide_basket img:nth-child(2), .mobileMenu_topMenuContainer a:hover.show_hide_basket img:nth-child(1), .mobileMenu_topMenuContainer a.show_hide_basket.active img:nth-child(1), .mobileMenu_topMenuContainer a:hover.show_hide_basket.active img:nth-child(1) { opacity:1; } .mobileMenu_topMenuContainer a:hover.show_hide_basket img:nth-child(2), .mobileMenu_topMenuContainer a.show_hide_basket img:nth-child(1), .mobileMenu_topMenuContainer a.show_hide_basket.active img:nth-child(2), .mobileMenu_topMenuContainer a:hover.show_hide_basket.active img:nth-child(2) { opacity:0; } .mobileMenu_topMenuContainer a .show_hide_basket_count, .mobileMenu_topMenuContainer a:hover .show_hide_basket_count { color:#009FE3; transition:color 0.3s linear; } .mobileMenu_topMenuContainer a:hover .show_hide_basket_count { color:#fff; } .mobileMenu_topMenuContainer a.show_hide_basket.active, .mobileMenu_topMenuContainer a:hover.show_hide_basket.active { background-color:#7EC244; color:#fff; } .mobileMenu_topMenuContainer a.show_hide_basket.active .show_hide_basket_count, .mobileMenu_topMenuContainer a:hover.show_hide_basket.active .show_hide_basket_count { background-color:#7EC244; color:#fff; } .mobileMenu_topMenuContainer a.show_hide_basket.active .show_hide_basket_count .mobileMenu_topMenuContainer a:hover.show_hide_basket img:nth-child(1), .mobileMenu_topMenuContainer a:hover.show_hide_basket.active .show_hide_basket_count .mobileMenu_topMenuContainer a:hover.show_hide_basket img:nth-child(1) { background-color:#7EC244; color:#fff; } /** Footernav **/ .mobileMenu_footerMenuContainer { flex:0 0 auto; display:flex; position:relative; flex-direction:column; flex-wrap:no-wrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; margin:100px 0 0 0; padding:10px 50px; border-left:1px solid rgba(255,255,255,0.4); } .mobileMenu_footerMenuContainer a, .mobileMenu_footerMenuContainer a:hover { flex:0 0 auto; display:block; position:relative; font-family:'FuturaBT-Book'; font-size:18px; line-height:24px; margin:10px 0 10px 0; color:#fff; text-decotration:none; } .mobileMenu_mainMenuContainer a.mp span, .mobileMenu_topMenuContainer a.mp span, .mobileMenu_footerMenuContainer a.mp span { display:block; position:absolute; height:5px; width:0px; left:0px; bottom:0px; background-color:#009FE3; transition:width 0.3s linear; } .mobileMenu_topMenuContainer a.mp span, .mobileMenu_footerMenuContainer a.mp span { height:2px; } .mobileMenu_mainMenuContainer a.mp:hover span, .mobileMenu_topMenuContainer a.mp:hover span, .mobileMenu_footerMenuContainer a.mp:hover span { width:100%; } .mobileMenu_countryInfoContainer { flex:0 1 auto; display:block; position:relative; padding:100px 20px 0 100px; } .mobileMenu_countryInfoContainer, .mobileMenu_countryInfoContainer a, .mobileMenu_countryInfoContainer a:hover { color:#fff; font-family:'FuturaBT-Book'; text-decoration:none; } .mobileMenu_countryInfoContainer a { text-decoration:underline; } @media only screen and (max-width : 1180px) { .mobileMenu_mainMenuContainer { flex:1 1 100%; margin:0 0 0 0; padding:50px 0 0 100px; } .mobileMenu_topMenuContainer { margin:30px 0 0 0; padding:10px 50px 0 100px; border-left:none; } .mobileMenu_footerMenuContainer { margin:30px 0 0 0; padding:10px 50px; } .mobileMenu_countryInfoContainer { padding:50px 20px 0 100px; } } @media only screen and (max-width : 750px) { .mobileMenu_mainMenuContainer a, .mobileMenu_mainMenuContainer a:hover { font-size:26px; line-height:30px; padding:10px 0; margin:0 0 20px 0; } .mobileMenu_mainMenuContainer a.mp span { height:3px; } .mobileMenu_mainMenuContainer { flex:1 1 100%; margin:0 0 0 0; padding:20px 40px; } .mobileMenu_topMenuContainer { flex:1 1 100%; margin:0 0 0 0; padding:20px 40px; border-top:1px solid rgba(255,255,255,0.4); } .mobileMenu_footerMenuContainer { flex:1 1 100%; margin:0 0 0 0; padding:20px 40px; border-left:none; border-top:1px solid rgba(255,255,255,0.4); } .mobileMenu_countryInfoContainer { padding:20px 40px; } #mobileMenu_404_content_container, #mobileMenu_404_header_logo { margin-left:50px; } } @media only screen and (max-width : 400px) { .mobileMenu_mainMenuContainer, .mobileMenu_topMenuContainer, .mobileMenu_footerMenuContainer { padding:20px 20px; } #mobileMenu_404_content_container, #mobileMenu_404_header_logo { margin-left:20px; } } /** * Inhalts Layer, demo request... **/ .layer_outer_container, .layer_outer_container.close { display:flex; position:fixed; top:0px; left:-100%; width:100%; height:100%; z-index:800; background-color:#E4EAEF; background-image: linear-gradient(to top left, #11304D, #009FE3); border-radius:6px; overflow:hidden; box-sizing: border-box; padding:10px 10px; flex-direction:column; flex-wrap:no-wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; transition:left 0.5s ease-out; /*left:0%;*/ } .layer_outer_container.open { left:0%; } #layer_header_container { flex:0 0 40px; display:flex; position:relative; overflow:hidden; box-sizing: border-box; flex-direction:row; flex-wrap:no-wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; } #layer_header_logo { flex:0 0 auto; display:block; position:relative; height:30px; } #layer_header_title { flex:1 1 auto; display:block; position:relative; height:30px; line-height:30px; text-align:center; color:rgba(255,255,255,0.8); font-family:'FuturaBT-Book'; letter-spacing:1px; overflow:hidden; } a#layer_header_close, a:hover#layer_header_close { flex:0 0 auto; display:block; position:relative; height:30px; width:36px; cursor:pointer; margin:0 0 10px 0; } a#layer_header_close span, a:hover#layer_header_close span { display:block; position:absolute; width:40px; height:4px; border-radius:2px; background-color:#fff; transition:transform 0.3s ease; top:50%; left:-3px; margin-top:-2px; } a#layer_header_close span:nth-child(1) { transform: rotate(45deg); } a#layer_header_close span:nth-child(2) { transform: rotate(-45deg); } a:hover#layer_header_close span:nth-child(1) { transform: rotate(30deg); } a:hover#layer_header_close span:nth-child(2) { transform: rotate(-30deg); } #global_layer_body_container { flex:0 0 auto; display:block; position:relative; height:calc(100% - 40px); width:100%; } #global_layer_scroll_content_container { display:block; position:relative; height:100%; width:100%; overflow:auto; background-color:#fff; box-sizing:border-box; padding:40px 20px; } #global_layer_scroll_content_container.nopadding { padding:0 0 0 0; } /** * Produkt konfiguration im Layer **/ #layer_productConfig_outer_container { display:flex; position:relative; height:100%; width:100%; flex-direction:row; flex-wrap:no-wrap; justify-content:stretch; align-items:srtetch; align-content:stretch; } /* Bild */ #layer_productConfig_hero_contaienr { flex:1 1 auto; display:block; position:relative; } #layer_productConfig_content_outer_container { flex:0 0 auto; box-sizing: border-box; display:flex; position:relative; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; background-color:#fff; height:100%; } #layer_productConfig_content_top_container { flex:1 1 auto; display:flex; position:relative; flex-direction:row; flex-wrap:no-wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; min-height:1px; height:100%; } /** Vorschau Ergebnis **/ #layer_productConfig_content_summery { flex:1 1 auto; box-sizing:border-box; padding:10px 40px 10px 80px; display:flex; position:relative; overflow:hidden; flex-direction:column; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:center; order:1; } #layer_productConfig_content_summery_quantity { display:block; position:relative; text-align:center; font-size:30px; color:#009FE3; font-weight:bold; margin:0 auto 10px auto; } #layer_productConfig_content_summery_productImg { display:block; position:relative; max-width:100px; width:100%; margin:0 auto; } .layer_productConfig_content_summery_sectionContainer { display:block; position:relative; } .layer_productConfig_content_summery_sectionContainer.hidden { display:none; } .layer_productConfig_content_summery_title { display:block; position:relative; text-align:center; font-size:14px; font-weight:bold; width:200px; margin:0 auto; } .layer_productConfig_content_summery_title_small { display:block; position:relative; text-align:center; font-size:14px; width:200px; margin:0 auto; } .layer_productConfig_content_summery_code { display:block; position:relative; text-align:center; font-size:14px; } .layer_productConfig_content_summery_price { display:block; position:relative; text-align:center; font-size:14px; font-weight:bold; } .layer_productConfig_content_summery_price_benefit { display:block; position:relative; text-align:center; font-size:16px; font-weight:bold; color:#507E29; } .layer_productConfig_content_summery_price_important { display:block; position:relative; text-align:center; font-size:20px; font-weight:bold; } .layer_productConfig_content_summery_prevIcon { flex:0 0 auto; display:block; position:relative; height:20px; width:20px; margin:0 auto; } .layer_productConfig_content_summery_prevIcon img { display:block; position:absolute; top:0px; left:0px; height:20px; width:20px; opacity:0; transition:opacity 0.3s linear; cursor:pointer; } .layer_productConfig_content_summery_prevIcon img:nth-child(2), .layer_productConfig_content_summery_prevIcon:hover img:nth-child(1) { opacity:1; } .layer_productConfig_content_summery_prevIcon:hover img:nth-child(2), .layer_productConfig_content_summery_prevIcon img:nth-child(1) { opacity:0; } .layer_productConfig_content_summery_add { display:block; position:relative; text-align:center; font-size:30px; color:#009FE3; font-weight:bold; margin:5px auto 5px auto; } .layer_productConfig_content_summery_add.hidden { display:none; } /** * Formular konfiguration **/ #layer_productConfig_content_main { flex:0 0 auto; box-sizing:border-box; padding:40px 80px 40px 40px; display:flex; position:relative; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:center; align-content:center; overflow:hidden; overflow-y:auto; -webkit-overflow-scrolling: touch; height:100%; width:480px; order:2; } /** Konfigurations bereich **/ .layer_productConfig_section { display:block; position:relative; box-sizing:border-box; margin:0 20px; width:100%; } .layer_productConfig_section_title { display:block; position:relative; border-radius:4px; cursor:pointer; background-color:#11304D; padding:0 50px; transition:box-shadow 0.3s linear; box-shadow:0 5px 5px rgba(0,0,0,0.5); } .layer_productConfig_section_title.alwaysopen { padding:0 10px; } .layer_productConfig_section.open .layer_productConfig_section_title, .layer_productConfig_section_title:hover { box-shadow:none; } .layer_productConfig_section_title span.open_close { display:block; position:absolute; height:50px; width:50px; border-radius:4px; transition:left 0.3s linear; background-image:linear-gradient(to top, #11304D, #009FE3); left:0px; top:0px; z-index:4; } .layer_productConfig_section.open .layer_productConfig_section_title span.open_close { left:calc(100% - 50px); } .layer_productConfig_section.open .layer_productConfig_section_title span.open_close span { transform:rotate(45deg); } .layer_productConfig_section_title span.open_close span { display:block; position:absolute; top:50%; left:50%; transition:transform 0.3s ease-out; background-color:#009FE3; background-color:#fff; } .layer_productConfig_section_title span.open_close span:nth-child(1) { margin:-2px auto auto -15px; height:4px; width:30px; } .layer_productConfig_section_title span.open_close span:nth-child(2) { margin:-15px auto auto -2px; height:30px; width:4px; } .layer_productConfig_section_title span.txt { display:flex; justify-content:flex-start; flex-direction:row; align-items:center; align-content:center; position:relative; color:#11304D; font-family:'FuturaBT-Book'; color:#fff; letter-spacing:1px; font-size:16px; line-height:20px; padding:0 0 0 10px; height:50px; } .layer_productConfig_section_content { display:block; position:relative; box-sizing:border-box; overflow:hidden; height:auto; max-height:0px; /*transition:max-height 0.3s linear;*/ margin:20px 0 10px 0; } .layer_productConfig_section.open .layer_productConfig_section_content { max-height:1500px; } /** content **/ .productConfig_inputContainer { display:flex; position:relative; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; margin:0 auto 20px auto; width:100%; } .productConfig_inputContainer.nospacing { margin:0 auto; } .productConfig_inputContainer.row { flex-direction:row; } /* Label */ .productConfig_inputLabel { flex:0 0 auto; display:block; position:relative; display:block; font-size:14px; line-height:20px; padding:10px 0 2px 13px; font-family:'FuturaBT-Book'; color:#11304D; letter-spacing:1px; } .productConfig_inputLabel::before { display:block; position:absolute; left:0px; top:50%; margin-top:-16px; line-height:20px; height:20px; padding:10px 0 2px 0; font-size:12px; line-height:20px; content:"→\00A0" } .productConfig_inputContainer.row .productConfig_inputLabel { padding:14px 0 14px 13px; } /* input text */ .productConfig_inputText { display:block; position:relative; box-sizing: border-box; width:100%; height:48px; line-height:48px; font-size:16px; cursor:pointer; padding:0 5px; border:2px solid #E4EAEF; transition:border 0.5s ease-in-out; } .productConfig_inputContainer.row .productConfig_inputText { width:auto; margin:0 0 0 15px; } /* input htmltext */ .productConfig_inputTextHTML { display:block; position:relative; box-sizing:border-box; width:100%; height:48px; line-height:48px; font-size:16px; padding:0 5px; } .productConfig_inputContainer.row .productConfig_inputTextHTML { width:auto; margin:0 0 0 15px; } /* input textarea */ .productConfig_inputTextarea { display:block; position:relative; box-sizing: border-box; width:100%; height:140px; line-height:22px; font-size:16px; cursor:pointer; padding:5px 5px; border:2px solid #E4EAEF; transition:border 0.5s ease-in-out; } /* Select */ .productConfig_selectContainer { flex:0 0 auto; width:100%; box-sizing:border-box; display:block; position:relative; height:48px; line-height:48px; cursor:pointer; overflow:hidden; border:2px solid #E4EAEF; transition:border 0.5s ease-in-out; } .productConfig_inputContainer.row .productConfig_selectContainer { width:auto; margin:0 0 0 15px; } .productConfig_inputSelect { display:block; position:relative; height:44px; line-height:44px; width:125%; padding:0 16px; font-size:16px; cursor:pointer; } .productConfig_selectContainer .icon { display:block; position:absolute; top:12px; right:12px; height:10px; width:10px; transform: rotate(45deg); border-right:2px solid #11304D; border-bottom:2px solid #11304D; transition:border 0.3s linear; } .productConfig_selectContainer:hover .icon { border-right:2px solid #009FE3; border-bottom:2px solid #009FE3; } /* all focus */ .productConfig_inputText:focus, .productConfig_inputTextarea:focus, .productConfig_selectContainer.focus { border:2px solid #009FE3; } /* hinweise aufzählung */ .productConfig_infoContainer { display:block; position:relative; margin:0 auto 20px auto; } .productConfig_infoContainer ul { margin:0; } /** Geschenkvepackung auswahl **/ .layer_productConfig_verpackungList_container { width:100%; display:flex; position:relative; flex-wrap:wrap; flex-direction:row; justify-content:stretch; align-items:stretch; align-content:stretch; box-sizing: border-box; margin:0 0 20px 0; } .layer_productConfig_verpackungItem_container { flex:0 0 calc(33.33% - 10px); margin:5px 5px 5px 5px; display:flex; flex-direction:column; position:relative; justify-content:stretch; align-items:stretch; align-content:stretch; overflow:hidden; } .layer_productConfig_verpackungItem_checkbox { display:none; } .layer_productConfig_verpackungItem { flex:1 1 auto; display:flex; border:2px solid #E4EAEF; flex-direction:column; position:relative; justify-content:stretch; align-items:stretch; align-content:stretch; border-radius:4px; } .layer_productConfig_verpackungItem_container input[type=checkbox]:checked ~ .layer_productConfig_verpackungItem { border:2px solid #009FE3; } .layer_productConfig_verpackungItem_container a.img_container, .layer_productConfig_verpackungItem_container a:hover.img_container { flex:0 0 auto; width:100%; overflow:hidden; display:block; position:relative; cursor:pointer; } .layer_productConfig_verpackungItem_container a.img_container .thumb, .layer_productConfig_verpackungItem_container a:hover.img_container .thumb { display:block; position:realtive; width:100%; } .layer_productConfig_verpackungItem_container a.img_container span.more, .layer_productConfig_verpackungItem_container a.img_container:hover span.more { display:block; position:absolute; text-decoration:none; width:30px; height:30px; top:50%; left:-120%; margin-top:-15px; margin-left:-15px; border-radius:15px; text-transform:uppercase; opacity:0; transition:0.5s ease-in-out; background-color:#009ee0; } .layer_productConfig_verpackungItem_container a.img_container:hover span.more { opacity:1; left:50%; } .layer_productConfig_verpackungItem_container a.img_container span.more_plus, .layer_productConfig_verpackungItem_container a.img_container:hover span.more_plus { display:block; position:absolute; text-decoration:none; width:30px; height:30px; top:50%; right:-100%; margin-top:-15px; margin-right:-15px; opacity:0; transition:0.5s ease-in-out; } .layer_productConfig_verpackungItem_container a.img_container span.more_plus img, .layer_productConfig_verpackungItem_container a.img_container:hover span.more_plus img { display:block; position:absolute; text-decoration:none; width:10px; height:10px; top:10px; left:10px; } .layer_productConfig_verpackungItem_container a.img_container:hover span.more_plus { opacity:1; right:50%; } .layer_productConfig_verpackungItem_container label { flex:1 1 auto; display:flex; flex-direction:column; position:relative; justify-content:flex-start; align-items:stretch; align-content:stretch; overflow:hidden; cursor:pointer; } .layer_productConfig_verpackungItem_container label .title { flex:0 0 auto; display:block; position:realtive; padding:0 5px; font-size:14px; } .layer_productConfig_verpackungItem_container label .price_container { flex:1 1 auto; display:flex; flex-direction:column; position:realtive; justify-content:flex-end; align-items:flex-end; align-content:flex-end; padding:5px 5px; } .layer_productConfig_verpackungItem_container label .price { flex:0 0 auto; width:100%; display:flex; position:realtive; flex-direction:row; justify-content:stretch; align-items:stretch; align-content:stretch; line-height:18px; } .layer_productConfig_verpackungItem_container label .price .quantity { flex:1 1 auto; display:block; position:realtive; text-align:left; } .layer_productConfig_verpackungItem_container label .price .txt { flex:1 1 auto; display:block; position:realtive; text-align:right; } .layer_productConfig_verpackungItem_container label .price_old { flex:0 0 auto; display:block; position:realtive; text-decoration: line-through; font-size:12px; text-align:right; line-height:18px; } .layer_productConfig_verpackungItem_container label .select_footer { flex:0 0 30px; display:block; position:relative; background-color:#E4EAEF; cursor:pointer; } .layer_productConfig_verpackungItem_container label .select_footer div { display:block; position:relative; height:22px; width:22px; box-sizing: border-box; margin:4px 10px; border:1px solid #E4EAEF; background-color:#fff; } .layer_productConfig_verpackungItem_container label:hover .select_footer div { border:1px solid #009FE3; } .layer_productConfig_verpackungItem_container input[type=checkbox]:checked ~ .layer_productConfig_verpackungItem label .select_footer div { border:1px solid #E4EAEF; } .layer_productConfig_verpackungItem_container label .select_footer div img { display:none; position:absolute; width:20px; height:20px; top:0px; left:0px; } .layer_productConfig_verpackungItem_container input[type=checkbox]:checked ~ .layer_productConfig_verpackungItem label .select_footer div img { display:block; } /* c2a footer */ #layer_productConfig_content_footer_container { flex:0 0 auto; box-sizing: border-box; border-top:2px solid #E4EAEF; display:flex; position:relative; background-color:#fff; flex-direction:column; flex-wrap:wrap; justify-content:flex-start; align-items:center; align-content:center; padding:0 0 0 0; box-shadow:0 -5px 5px rgba(0,0,0,0.2); } #layer_productConfig_content_footer_bttn_container { flex:0 0 auto; box-sizing:border-box; display:flex; position:relative; background-color:#fff; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:srtetch; align-content:stretch; padding:10px 0 0 0; } #layer_productConfig_content_footer_container .c2a_wellcard_bttn_container { padding:0 10px 10px 10px; } #layer_productConfig_content_footer_info { display:block; position:relative; color:#11304D; font-family:'FuturaBT-Book'; font-size:14px; line-height:18px; padding:0 0 10px 0; text-align:center; color:#009FE3; } @media only screen and (max-width : 1300px) { #layer_productConfig_content_summery { padding:10px 20px 10px 40px; } #layer_productConfig_content_main { padding:20px 40px 20px 20px; width:400px; } } @media only screen and (max-width : 1100px) { #layer_productConfig_hero_contaienr { display:none } #layer_productConfig_content_outer_container { flex:1 1 auto; } #layer_productConfig_content_summery { flex:0 0 auto; padding:10px 40px 10px 80px; } #layer_productConfig_content_main { flex:1 1 auto; padding:40px 80px 40px 40px; } } @media only screen and (max-width : 850px) { #layer_productConfig_content_summery { padding:10px 20px 10px 40px; } #layer_productConfig_content_main { padding:20px 40px 20px 20px; } } @media only screen and (max-width : 650px) { #layer_productConfig_content_top_container { flex:1 1 auto; flex-direction:column; justify-content:flex-start; align-items:flex-start; align-content:flex-start; overflow:hidden; overflow:auto; -webkit-overflow-scrolling:touch; display:block; } #layer_productConfig_content_summery { overflow:visible; /*padding:10px 0;*/ flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; display:block; position:relative; padding:0 0 20px 0; margin:0 auto; /*order:2; -webkit-order:2;*/ } #layer_productConfig_content_main { position:relative; width:100%; padding:10px 10px; overflow:visible; height:auto; /*order:1; -webkit-order:1;*/ } /** Vorschau Ergebnis **/ #layer_productConfig_content_summery { /*position:relative; flex:1 0 auto; padding:0 0 20px 0; margin:0 auto; overflow:visible; justify-content:flex-start; align-items:flex-start; align-content:flex-start;*/ } } @media only screen and (max-width : 370px) { .layer_productConfig_verpackungItem_container { flex:0 0 calc(50% - 10px); } } /** * Range Slider **/ .range_slider_container { width:100%; display:block; position:relative; } .range_slider_input_container { display:block; position:relative; height:46px; box-sizing:border-box; border-left:2px solid #E4EAEF; border-top:2px solid #E4EAEF; border-right:2px solid #E4EAEF; border-radius:4px 4px 0 0; } .range_slider_input_container input { display:block; position:relative; box-sizing:border-box; padding:0 5px; background-color:#fff; height:44px; line-height:44px; left:50px; width:calc(100% - 50px); font-size:16px; } .range_slider_input_container div { display:block; position:absolute; top:0px; left:0px; text-align:right; padding:0 5px; box-sizing: border-box; background-color:#E4EAEF; height:44px; line-height:44px; width:50px; font-size:16px; } /* Standardwerte deaktivieren-unsichtbar - danch anpassen */ input[type=range] { display:block; position:relative; margin:0 auto; -webkit-appearance:none; width:100%; background:transparent; z-index:803; } input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; } input[type=range]:focus { outline:none; } input[type=range]::-webkit-slider-thumb { top:50%; margin-top:-5px; height:40px; width:40px; border-radius:4px; box-shadow:0 10px 10px rgba(0,0,0,0.5); background-image:linear-gradient(to top, #11304D, #009FE3); cursor:pointer; } input[type=range]::-moz-range-thumb { -webkit-appearance: none; top:50%; margin-top:-5px; height:40px; width:40px; border-radius:4px; box-shadow:0 10px 10px rgba(0,0,0,0.5); background-image:linear-gradient(to top, #11304D, #009FE3); cursor:pointer; border:none; } input[type=range]::-webkit-slider-runnable-track { width:100%; height:30px; cursor:pointer; } input[type=range]::-moz-range-track { width:100%; height:30px; cursor:pointer; } .range_slider_legende { dispaly:block; position:relative; height:80px; z-index:801; } .range_slider_legende.noMaxValue { height:40px; } .range_slider_container div.min { display:block; position:absolute; left:0px; top:5px; background-color:#E4EAEF; padding:5px 5px; line-height:20px; height:20px; border-radius:0 4px 4px 4px; cursor:pointer; } .range_slider_container div.min::before { display:block; position:absolute; height:5px; width:5px; background-color:#E4EAEF; top:-5px; left:0px; content:' '; } .range_slider_container div.max { display:block; position:absolute; right:0px; top:5px; background-color:#E4EAEF; padding:5px 5px; line-height:20px; height:20px; border-radius:4px 0 4px 4px; cursor:pointer; } .range_slider_container div.max::before { display:block; position:absolute; height:5px; width:5px; background-color:#E4EAEF; top:-5px; right:0px; content:' '; } .range_slider_container div.best { display:block; position:absolute; box-sizing:border-box; left:17.085%; top:40px; background-color:#009FE3; padding:5px 5px 10px 5px; color:#fff; margin-left:-27.5px; width:80px; text-align:center; line-height:20px; height:40px; border-radius:4px 4px 4px 4px; cursor:pointer; } .range_slider_container div.best::before { display:block; position:absolute; height:40px; width:8px; background-color:#009FE3; top:-40px; left:50%; margin-left:-4px; content:' '; } .range_slider_container div.best.reached, .range_slider_container div.best.reached::before { background-color:#507E29; } .range_slider_container div.best::after { display:block; position:absolute; height:12px; line-height:12px; left:0px; top:20px; width:100%; text-align:center; content:'meistgekauft'; font-size:10px; letter-spacing:1px; } /** * Range Slider Ende **/ /** *FooterFixedNav *z-index:50; **/ /** back top **/ a#back_to_page_top, a:hover#back_to_page_top, a#back_to_page_top.hide, a:hover#back_to_page_top.hide { z-index:50; display:block; position:fixed; right:10px; bottom:-45px; height:40px; width:40px; background-color:#11304D; background-image:linear-gradient(to top, #11304D, #009FE3); transition: box-shadow 0.2s, background-color 0.3s, right 0.2s, bottom 0.2s; box-shadow: -2px 0px 5px 0px rgba(0,0,0,0.4), -2px -2px 5px 0px rgba(0,0,0,0.4); } a#back_to_page_top.show, a:hover#back_to_page_top.show { bottom:0px; } a:hover#back_to_page_top { right:9px; background-color:#009FE3; box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.4), -3px -3px 5px 0px rgba(0,0,0,0.4); } a#back_to_page_top span:nth-child(1), a:hover#back_to_page_top span:nth-child(1) { display:block; position:absolute; top:7px; left:10px; height:25px; width:6px; transform: rotate(45deg); background-color:#fff } a#back_to_page_top span:nth-child(2), a:hover#back_to_page_top span:nth-child(2) { display:block; position:absolute; top:7px; right:10px; height:25px; width:6px; transform: rotate(-45deg); background-color:#fff } /* FooterFixedNav */ #footerFixedLeftContainer, #footerFixedLeftContainer.hide { z-index:50; display:flex; position:fixed; left:10px; bottom:-50px; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; transition:bottom 0.2s; } #footerFixedLeftContainer.show { bottom:10px; } /* Addon Bttn */ .footerFixedLeft_bttn_container { flex:0 0 auto; display:flex; position:relative; height:48px; line-height:48px; border-radius:6px 6px 6px 6px; overflow:hidden; margin:20px 10px 0 0; display:flex; flex-wrap:wrap; flex-direction:row; justify-content:flex-start; align-items:flex-start; align-content:flex-start; box-shadow: -2px 0px 5px 0px rgba(0,0,0,0.4), -2px -2px 5px 0px rgba(0,0,0,0.4); } a.footerFixedLeft_bttn, a:hover.footerFixedLeft_bttn { flex:0 0 auto; display:block; position:relative; height:48px; line-height:48px; text-decoration:none; transition:background-image 0.3s; padding:0 10px 0 10px; margin:0 0 0 0; cursor:pointer; background-image:linear-gradient(to top, #11304D, #009FE3); font-family:'FuturaBT-Book'; color:#fff; font-size:16px; } a:hover.footerFixedLeft_bttn { background-image:linear-gradient(to bottom, #009FE3, #11304D); } /** Cookie Layer **/ #cookie { display:block; position:fixed; left:0px; bottom:0px; box-sizing:border-box; background-color:rgba(17, 48, 77, 0.9); padding:100px 20px; text-align:center; width:100%; z-index:3000; box-shadow:0 -10px 10px rgba(0,0,0,0.5); } #cookie.hidden { display:none; } #cookietxt { display:block; posiiotn:relative; color:#fff; } #cookietxt a, #cookietxt a:hover { color:#fff; text-decoration:underline; } #cookietxt a:hover { text-decoration:none; } #cookie .c2a_wellcard_bttn_container { margin-top:20px; } /** * Iframe Container - payment etc **/ /** * Inhalts Layer, demo request... **/ #iframe_outer_container, #iframe_outer_container.close { display:none; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:2000; background-color:#E4EAEF; background-image: linear-gradient(to top left, #11304D, #009FE3); border-radius:6px; overflow:hidden; box-sizing: border-box; padding:10px 10px; flex-direction:column; flex-wrap:no-wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; } #iframe_outer_container.open { display:flex; } #iframe_header_container { flex:0 0 40px; display:flex; position:relative; overflow:hidden; box-sizing: border-box; flex-direction:row; flex-wrap:no-wrap; justify-content:flex-start; align-items:srtetch; align-content:stretch; } #iframe_header_logo { flex:0 0 auto; display:block; position:relative; height:30px; } #iframe_header_title { flex:1 1 auto; display:block; position:relative; height:30px; line-height:30px; text-align:center; color:rgba(255,255,255,0.8); font-family:'FuturaBT-Book'; letter-spacing:1px; overflow:hidden; } #iframe_body_container { flex:0 0 auto; display:block; position:relative; height:calc(100% - 40px); width:100%; background-color:#fff; } #iframe_body_container iframe#iframe_container { display:block; position:relative; width:100%; height:100%; } #formwalker { display:block; position:absolute; right:0px; bottom:0px; max-height:1px; max-width:1px; overflow:hidden; } #country_alert_popup { display:block; position:relative; line-height:22px; } #country_alert_popup h3 { margin:0 0 30px 0 !important; text-align:left; font-size:18px; line-height:22px; } .country_alert_popup_row { display:flex; position:relative; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; margin:0 0 40px 0; } .country_alert_popup_flag { flex:0 0 30px; width:30px; display:block; position:relative; margin:5px auto auto auto; } .country_alert_popup_txt { flex:1 1 auto; display:block; position:relative; box-sizing:border-box; margin:0 0 0 10px; text-align:left; }