/* compiled by scssphp v0.6.2 on Mon, 27 Nov 2023 14:33:42 +0100 (0.2786s) */ /* ┌┬┐┌─┐┌─┐┌┬┐ ┌─┐┬┌─┐┬ ┬ ┌─┐┌┬┐┌┐ ┬ ┬ │ ├┤ ├─┤│││ └─┐│└─┐│ │ │ ┬│││├┴┐├─┤ ┴ └─┘┴ ┴┴ ┴ └─┘┴└─┘└─┘ └─┘┴ ┴└─┘┴ ┴ */ /* ┌┬┐┬─┐ ┬┬┌┐┌┌─┐ ││││┌┴┬┘││││└─┐ ┴ ┴┴┴ └─┴┘└┘└─┘ File: _base/_mixins.scss Beschreibung: Vorlagen zum einbinden einer oder mehrerer Deklarationen Autor: Team sisu Datum: 01.02.2016 */ /* Example: @include placeholder { font-style:italic; color: white; font-weight:100; } */ /* ┌─┐┌─┐┌┐┌┌┬┐┌─┐ ├┤ │ ││││ │ └─┐ └ └─┘┘└┘ ┴ └─┘ File: _base/_fonts.scss Beshreibung: Beinhaltet alle Schriften Autor: Team sisu Datum: 29.02.2016 */ @font-face { font-family: 'OpenSans Regular'; src: url('../fonts/OpenSans/OpenSans-Regular-webfont.eot'); src: url('../fonts/OpenSans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'), url('../fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype'), url('../fonts/OpenSans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSans Bold'; src: url('../fonts/OpenSans/OpenSans-Bold-webfont.eot'); src: url('../fonts/OpenSans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'), url('../fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype'), url('../fonts/OpenSans/OpenSans-Bold-webfont.svg#open_sansregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSans Light'; src: url('../fonts/OpenSans/OpenSans-Light-webfont.eot'); src: url('../fonts/OpenSans/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'), url('../fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype'), url('../fonts/OpenSans/OpenSans-Light-webfont.svg#open_sansregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'zipfer_regular'; /*FFZineSansDisplayWebProRegular*/ src: url('../fonts/zinea/2EF4B6_7_0.eot'); src: url('../fonts/zine/2EF4B6_7_0.eot?#iefix') format('embedded-opentype'), url('../fonts/zine/2EF4B6_7_0.woff2') format('woff2'), url('../fonts/zine/2EF4B6_7_0.woff') format('woff'), url('../fonts/zine/2EF4B6_7_0.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'zipfer_medium'; /*FFZineSansDisplayWebProMedium*/ src: url('../fonts/zine/2EF4B6_5_0.eot'); src: url('../fonts/zine/2EF4B6_5_0.eot?#iefix') format('embedded-opentype'), url('../fonts/zine/2EF4B6_5_0.woff2') format('woff2'), url('../fonts/zine/2EF4B6_5_0.woff') format('woff'), url('../fonts/zine/2EF4B6_5_0.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'zipfer_bold'; /*FFZineSansDisplayWebProBold*/ src: url('../fonts/zine/2EF4B6_1_0.eot'); src: url('../fonts/zine/2EF4B6_1_0.eot?#iefix') format('embedded-opentype'), url('../fonts/zine/2EF4B6_1_0.woff2') format('woff2'), url('../fonts/zine/2EF4B6_1_0.woff') format('woff'), url('../fonts/zine/2EF4B6_1_0.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'zipfer_black'; /*FFZineSansDisplayWebProBlack*/ src: url('../fonts/zine/2EF4B6_1B_0.eot'); src: url('../fonts/zine/2EF4B6_1B_0.eot?#iefix') format('embedded-opentype'), url('../fonts/zine/2EF4B6_1B_0.woff2') format('woff2'), url('../fonts/zine/2EF4B6_1B_0.woff') format('woff'), url('../fonts/zine/2EF4B6_1B_0.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* ┬ ┬┌─┐┬─┐┬┌─┐┌┐ ┬ ┌─┐┌┐┌ └┐┌┘├─┤├┬┘│├─┤├┴┐│ ├┤ │││ └┘ ┴ ┴┴└─┴┴ ┴└─┘┴─┘└─┘┘└┘ File: _base/_variables.scss Beschreibung: verwendete Variablen Autor: Team sisu Datum: 29.02.2016 */ /* Hauptschriftart Verwendet in _reset.scss */ /* Schriften für H1 bis H4 */ /* Fonts für Buttons Verwendet in: _cb_formular.scss _main.scss _newsletter.scss */ /* Menu Font Verwendet in: hauptmenu.scss */ /* ================ Farbdefinitionen ================ */ /* Hauptmenü Verwendet in: hauptmenu.scss */ /* Footer Verwendet in: _footer.scss */ /* Formulare Verwendet in: _formulare.scss */ /* Akkordion */ /* Farbe für Tabellen Verwendet in: _cb_tabelle.scss */ /* Cookiehinweis Verwendet in: _cookiehinweis.scss */ /* ┬─┐┌─┐┌─┐┌─┐┌┬┐ ├┬┘├┤ └─┐├┤ │ ┴└─└─┘└─┘└─┘ ┴ File: _base/_reset.scss Beschreibung: Reset default browser styles Autor: Team sisu Datum: 01.02.2016 */ html { -webkit-font-smoothing: antialiased; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 10px; } body { line-height: 1.5em; font-family: "zipfer_regular", Arial, sans-serif; font-weight: 400; color: #000; overflow-x: hidden; width: 100%; text-align: left; background-color: #fff; background-position: top center; background-repeat: no-repeat; font-size: 1.8rem; /* Wartungsmodus */ } body.wartungsmodus { text-align: center; } body.wartungsmodus #content { margin-top: 100px; margin-top: 10rem; } body .news-page { margin-top: 7rem; } body.page-id-9299 .cb_tabelle { margin-bottom: 1rem !important; } * { margin: 0px; margin: 0rem; padding: 0px; padding: 0rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* LINKS */ a { color: #000; text-decoration: underline; -webkit-transition: color 0.3s ease-in; -moz-transition: color 0.3s ease-in; -ms-transition: color 0.3s ease-in; -o-transition: color 0.3s ease-in; transition: color 0.3s ease-in; cursor: pointer; font-weight: normal; outline: none; } a:hover { color: #13205a; } a:active { color: #13205a; } a:focus { color: #13205a; } input::-ms-clear { display: none; } strong { font-family: "zipfer_bold", Arial, sans-serif; font-weight: normal !important; } address { font-style: italic; margin: 0px 0px 24px 0px; margin: 0rem 0rem 2.4rem 0rem; } abbr[title] { border-bottom: 1px dotted; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 14px; font-size: 1.4rem; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } pre { background: #fff; color: #f00; font-family: Arial, sans-serif; font-size: 14px; font-size: 1.4rem; margin: 20px 0px 20px 0px; margin: 2rem 0rem 2rem 0rem; overflow: auto; padding: 20px; padding: 2rem; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } label { font-weight: normal; } small { font-size: smaller; } sub, sup { font-size: 7.5px; font-size: 0.75rem; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -5px; top: -0.5rem; } sub { bottom: -2.5px; bottom: -0.25rem; } dl { margin: 0px 20px; margin: 0rem 2rem; } dt { font-weight: bold; } dd { margin: 0px 0px 20px; margin: 0rem 0rem 2rem; } menu, ol, ul { padding: 0px; padding: 0rem; margin: 0px; margin: 0rem; } /* Listenelemente */ ul { list-style-type: square; margin: 0px 0px 20px 20px; margin: 0rem 0rem 2rem 2rem; } ol { margin: 0rem 0rem 0rem 1.6rem; } nav ul, nav ol { margin: 0px 0px 0px 0px; margin: 0rem 0rem 0rem 0rem; list-style: none; list-style-image: none; } li > ul, li > ol { margin: 0; } img { -ms-interpolation-mode: bicubic; vertical-align: middle; border: 0; max-width: 100%; height: auto; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } ins { text-decoration: none; } .container-big { padding: 0 3.5rem; } .sisu-cookie-content-element { margin-bottom: 10rem !important; } .sisu-cookie-content-element .accept-wrapper { justify-content: flex-start !important; } .cb_html { margin-bottom: 2rem !important; } /* ┬ ┬┌─┐┬ ┌─┐┌─┐┬─┐ ├─┤├┤ │ ├─┘├┤ ├┬┘ ┴ ┴└─┘┴─┘┴ └─┘┴└─ File: _base/_helper.scss Beschreibung: hilfreiche CSS Klassen Autor: Team sisu Datum: 01.02.2016 */ .gap0 { margin-bottom: 0px; margin-bottom: 0rem; } .gap5 { margin-bottom: 5px; margin-bottom: 0.5rem; } .gap10 { margin-bottom: 10px; margin-bottom: 1rem; } .gap15 { margin-bottom: 15px; margin-bottom: 1.5rem; } .gap20 { margin-bottom: 20px; margin-bottom: 2rem; } .gap25 { margin-bottom: 25px; margin-bottom: 2.5rem; } .gap30 { margin-bottom: 30px; margin-bottom: 3rem; } .gap40 { margin-bottom: 40px; margin-bottom: 4rem; } .gap60 { margin-bottom: 60px; margin-bottom: 6rem; } .nogap { margin-bottom: 0 !important; padding-bottom: 0 !important; } .nogap-top { margin-top: 0 !important; padding-top: 0 !important; } .padding-xs { padding: 5px; padding: 0.5rem; } .padding-sm { padding: 15px; padding: 1.5rem; } .padding-md { padding: 20px; padding: 2rem; } .padding-lg { padding: 30px; padding: 3rem; } .clearfix { clear: both; } .height5 { height: 5px; height: 0.5rem; } .height10 { height: 10px; height: 1rem; } .height15 { height: 15px; height: 1.5rem; } .height20 { height: 20px; height: 2rem; } .height25 { height: 25px; height: 2.5rem; } .height30 { height: 30px; height: 3rem; } .height35 { height: 35px; height: 3.5rem; } .height40 { height: 40px; height: 4rem; } .height45 { height: 45px; height: 4.5rem; } .height50 { height: 50px; height: 5rem; } .height55 { height: 55px; height: 5.5rem; } .height60 { height: 60px; height: 6rem; } .height65 { height: 65px; height: 6.5rem; } .height70 { height: 70px; height: 7rem; } .height75 { height: 75px; height: 7.5rem; } .height80 { height: 80px; height: 8rem; } .height85 { height: 85px; height: 8.5rem; } .height90 { height: 90px; height: 9rem; } .height95 { height: 95px; height: 9.5rem; } .height100 { height: 100px; height: 10rem; } /* ┌─┐┌─┐┌─┐┬┌─┬┌─┐ ┬ ┬┬┌┐┌┬ ┬┌─┐┬┌─┐ │ │ ││ │├┴┐│├┤ ├─┤│││││││├┤ │└─┐ └─┘└─┘└─┘┴ ┴┴└─┘ ┴ ┴┴┘└┘└┴┘└─┘┴└─┘ File: _modules/_cookiehinweis.scss Beschreibung: Styles für den Cookie Hinweis Autor: Team sisu Datum: 11.03.2016 */ #cookiesWarning { clear: both; overflow: hidden; position: fixed; bottom: 0px; bottom: 0rem; width: 100%; z-index: 1; background: #eaeaea; display: table; padding: 5px 10px; padding: 0.5rem 1rem; } #cookiesWarning #cookiesWarningActive { font-size: 13px; font-size: 1.3rem; display: table-cell; vertical-align: middle; } #cookiesWarning #cookieAgreement { display: table-cell; vertical-align: middle; text-align: right; min-width: 60px; } #cookiesWarning #cookieAgreement input { border: none !important; padding: 4px 8px; padding: 0.4rem 0.8rem; border-radius: 40px; border-radius: 4rem; background: #1b1b1b !important; color: #fff; } #cookiesWarning a { text-decoration: underline; color: #3a3a3a; } #cookiesWarning a:hover { text-decoration: none; color: #56bae1; } /* ┌─┐┌─┐┌─┐┬┌─┐┬ ┌┬┐┌─┐┌┬┐┬┌─┐ ┬┌─┐┌─┐┌┐┌┌─┐ └─┐│ ││ │├─┤│ │││├┤ │││├─┤ ││ │ ││││└─┐ └─┘└─┘└─┘┴┴ ┴┴─┘ ┴ ┴└─┘─┴┘┴┴ ┴ ┴└─┘└─┘┘└┘└─┘ File: _modules/_socialmedia.scss Beschreibung: Sozial Media Icons Autor: Team sisu Datum: 01.02.2016 */ #share_icons { margin-top: 25px; margin-top: 2.5rem; width: 100%; } #share_icons .share_count, #share_icons #shariffbox .share_text { display: none; visibility: hidden; } #share_icons ul { display: table; margin: 0 auto; } #share_icons ul li { list-style-type: none; display: table-cell; margin: 0px; margin: 0rem; vertical-align: middle; text-align: center; min-width: 30px; min-width: 3rem; max-width: 30px; max-width: 3rem; float: left; margin: 0px 2px 0px 2px; margin: 0rem 0.2rem 0rem 0.2rem; } #share_icons ul li a { height: 30px !important; } #share_icons ul li .fa { width: 24px; width: 2.4rem; line-height: 31px; line-height: 3.1rem; font-size: 18px; font-size: 1.8rem; } #share_icons .round ul li a { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #share_icons .round ul.theme-white li { border: none; } #share_icons .round ul.theme-white li a { border: solid 1px #ddd; } /* ┬ ┬┌─┐┌─┐┌┬┐┌─┐┬─┐ ├─┤├┤ ├─┤ ││├┤ ├┬┘ ┴ ┴└─┘┴ ┴─┴┘└─┘┴└─ File: _modules/_header.scss Beschreibung: Styles für die Hauptnavigation Autor: Team sisu Datum: 01.02.2016 */ header#header { padding: 0; background-image: url('../images/shopheader.jpg'); background-size: cover; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; width: 100%; position: fixed; z-index: 200; } header#header .headermenu { background: #13205a; padding: 25px 0 25px 0; } header#header .socialicons { position: absolute; top: 0px; right: 0px; z-index: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } header#header .socialicons a { float: right; display: block; width: 45px; height: 74px; text-decoration: none; } @media (max-width: 500px) { header#header .socialicons a { width: 35px; } } @media (max-width: 360px) { header#header .socialicons a { width: 29px; } } header#header .socialicons a i { display: block; width: 100%; height: 51px; padding: 27px 7px 0px 7px; text-align: center; font-size: 18px; line-height: 25px; color: #13205a; } @media (max-width: 1024px) { header#header .socialicons a i { padding-top: 21px; } } header#header .socialicons a i.instagram { background-image: url('../images/instagramlogo.png'); color: transparent; background-position: center bottom; background-repeat: no-repeat; background-size: 25px; } @media (max-width: 1024px) { header#header .socialicons a i.instagram { background-position: center bottom 6px; } } header#header .navbar-default { background-color: transparent !important; border-radius: 0px !important; border: none !important; } header#header .navbar-default .navbar-collapse, header#header .navbar-default .navbar-form { border-color: #fff !important; } header#header.menu-opened { background: transparent; border-bottom: 1px solid transparent; } header#header.menu-opened #hauptmenu { float: none; margin-top: 10rem; } header#header.menu-opened .burgermenu { margin-top: -9rem; } header#header #logo { display: inline-block; z-index: 10; position: absolute; left: 10px; top: -15px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; margin: 0; } @media (max-width: 1024px) { header#header #logo { left: 50%; margin-left: -70px; } } header#header #logo img { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (max-width: 767px) { header#header #logo img { width: 139px; margin-top: -0.5rem; } } @media screen and (min-width: 768px) { header#header #logo img { width: 139px; margin-top: -0.5rem; } } @media screen and (min-width: 1025px) { header#header #logo img { width: 139px; margin-top: -1rem; } } header#header .navbar { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; margin: 0px; margin: 0rem; } .headerbild-shop { font-size: 60px; font-weight: normal; text-align: center; color: white; line-height: 100%; padding: 55px 0px 35px 0px; background-size: cover; } @media (max-width: 767px) { .headerbild-shop { font-size: 38px; padding: 49px 0px 21px 0px; } } /* ┬ ┬┌─┐┌─┐┌┬┐┌─┐┬─┐ ┌─┐┌┬┐┌─┐ ├─┤├┤ ├─┤ ││├┤ ├┬┘ │ │ ├─┤ ┴ ┴└─┘┴ ┴─┴┘└─┘┴└─ └─┘ ┴ ┴ ┴ File: _modules/header_cta.scss Beschreibung: CSS Styles für die CTA im sticky Header Autor: Team sisu Datum: 09.02.2016 */ .header_cta { position: absolute; left: 180px; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; transform: translate(0, -100px); -webkit-transform: translate(0, -100px); /** Chrome & Safari **/ -o-transform: translate(0, -100px); /** Opera **/ -moz-transform: translate(0, -100px); /** Firefox **/ -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -ms-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; transition: opacity 0.5s ease; -webkit-transition: transform 1.5s ease; -moz-transition: transform 1.5s ease; -ms-transition: transform 1.5s ease; -o-transition: transform 1.5s ease; transition: transform 1.5s ease; } @media screen and (max-width: 767px) { .header_cta { top: 6px; } } @media screen and (min-width: 768px) { .header_cta { top: 6px; } } @media screen and (min-width: 992px) { .header_cta { top: 10px; } } .header_cta .btn { padding: 5px 10px 5px 10px; padding: 0.5rem 1rem 0.5rem 1rem; } header.smaller .header_cta { opacity: 1; -ms-filter: "progid:DXImageTra nsform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); transform: translate(0, 0px); -webkit-transform: translate(0, 0px); /** Chrome & Safari **/ -o-transform: translate(0, 0px); /** Opera **/ -moz-transform: translate(0, 0px); /** Firefox **/ } /* ┌┬┐┌─┐┌─┐ ┌┐┌┌─┐┬ ┬┬┌─┐┌─┐┌┬┐┬┌─┐┌┐┌ │ │ │├─┘ │││├─┤└┐┌┘││ ┬├─┤ │ ││ ││││ ┴ └─┘┴ ┘└┘┴ ┴ └┘ ┴└─┘┴ ┴ ┴ ┴└─┘┘└┘ File: _modules/top_nav.scss Beschreibung: CSS Styles die Top Navigation über der Hauptnavigation Autor: Team sisu Datum: 26.02.2016 */ .topnav { margin-top: 10px; margin-top: 1rem; margin-bottom: 10px; margin-bottom: 1rem; height: 21px; height: 2.1rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (max-width: 767px) { .topnav { display: none; } } @media screen and (min-width: 768px) { .topnav { display: none; } } @media screen and (min-width: 992px) { .topnav { display: block; } } .topnav .loginstatus { float: right; text-align: right; position: relative; margin-right: 2px; margin-right: 0.2rem; padding: 2px 8px; padding: 0.2rem 0.8rem; height: 24px; height: 2.4rem; background: #eaeaea; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .topnav .loginstatus a { color: #000; } .topnav .loginstatus .layer { display: none; background: #eaeaea; text-align: left; position: absolute; width: 100%; min-width: 150px; right: 0px; z-index: 2; text-align: center; font-size: 12px; font-size: 1.2rem; } .topnav .loginstatus .layer a { width: 100%; display: block; padding: 5px 10px; padding: 0.5rem 1rem; color: #000; } .topnav .loginstatus .layer a:hover { background: #444; color: #fff; text-decoration: none; } .topnav .loginstatus .layer.formular { min-width: 200px; } .topnav .loginstatus .layer form#login_form .fields { padding: 10px 10px 10px 10px; padding: 1rem 1rem 1rem 1rem; } .topnav .loginstatus .layer form#login_form .fields input { display: inline-block; border-radius: 0px; border-radius: 0rem; padding: 5px 10px; padding: 0.5rem 1rem; margin-bottom: 5px; margin-bottom: 0.5rem; width: 200px; width: 20rem; border: 1px solid #ccc; background: #fff; color: #13205a; font-family: Arial, sans-serif; font-size: 14px; font-size: 1.4rem; box-shadow: none !important; } .topnav .loginstatus .layer form#login_form .fields input:hover { background-color: #3a3a3a; color: #fff; } .topnav .loginstatus .layer form#login_form a { padding: 5px; padding: 0.5rem; background: #ccc; text-transform: uppercase; } .topnav .loginstatus .layer form#login_form a:hover { background-color: #3a3a3a; color: #fff; } .topnav .loginstatus:hover { -webkit-border-radius: 6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px; -ms-border-radius: 6px 6px 0px 0px; -o-border-radius: 6px 6px 0px 0px; border-radius: 6px 6px 0px 0px; } .topnav .loginstatus:hover .layer { display: block; } .smaller .topnav { display: none; } /* ┌─┐┌─┐┌─┐┌─┐┌─┐┌─┐┬┌┐ ┬┬ ┬┌┬┐┬ ┬ ┌┬┐┌─┐┌┐┌┬ ┬ ├─┤│ │ ├┤ └─┐└─┐│├┴┐││ │ │ └┬┘ │││├┤ ││││ │ ┴ ┴└─┘└─┘└─┘└─┘└─┘┴└─┘┴┴─┘┴ ┴ ┴ ┴ ┴└─┘┘└┘└─┘ File: _modules/accessibilitymenu.scss Beschreibung: Menu für Barrierefreiheit Autor: Team sisu Datum: 16.02.2016 */ .accessibilityMenu { float: right; text-align: right; } @media screen and (max-width: 767px) { .accessibilityMenu { display: none; } } @media screen and (min-width: 768px) { .accessibilityMenu { display: none; } } @media screen and (min-width: 992px) { .accessibilityMenu { display: block; } } .accessibilityMenu ul { margin: 0px; padding: 0px; } .accessibilityMenu ul li { width: 24px; width: 2.4rem; height: 24px; height: 2.4rem; background: #eaeaea; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; position: relative; } .accessibilityMenu ul li:before { position: absolute; left: 0px; top: 0px; } .accessibilityMenu ul li.fa-font { cursor: pointer; } .accessibilityMenu ul li.fa-font.normal { font-size: 12px; font-size: 1.2rem; } .accessibilityMenu ul li.fa-font.normal:before { left: 6px; left: 0.6rem; top: 6px; top: 0.6rem; } .accessibilityMenu ul li.fa-font.middle { font-size: 14px; font-size: 1.4rem; } .accessibilityMenu ul li.fa-font.middle:before { left: 5px; left: 0.5rem; top: 5px; top: 0.5rem; } .accessibilityMenu ul li.fa-font.big { font-size: 16px; font-size: 1.6rem; } .accessibilityMenu ul li.fa-font.big:before { left: 4px; left: 0.4rem; top: 4px; top: 0.4rem; } .accessibilityMenu ul li.fa-adjust { font-size: 14px; font-size: 1.4rem; } .accessibilityMenu ul li.fa-adjust.on { background: #000; color: #fff; } .accessibilityMenu ul li.fa-adjust:before { left: 6px; left: 0.6rem; top: 5px; top: 0.5rem; } .accessibilityMenu ul li.fa-tint { font-size: 16px; font-size: 1.6rem; } .accessibilityMenu ul li.fa-tint.on { background: #000; color: #fff; } .accessibilityMenu ul li.fa-tint:before { left: 7px; left: 0.7rem; top: 5px; top: 0.5rem; } /* ┬ ┬┌─┐┬ ┬┌─┐┌┬┐┌┬┐┌┐┌┌─┐┬ ┬ ├─┤├─┤│ │├─┘ │ ││││││├┤ │ │ ┴ ┴┴ ┴└─┘┴ ┴ ┴ ┴┘└┘└─┘└─┘ File: _modules/_hauptmenu.scss Beschreibung: CSS Styles für das Hauptmenü Autor: Team sisu Datum: 01.02.2016 */ /* Layer der sich über die gesamte Seite legt, wenn das Mobile Menü geöffnet ist */ .mobile_menu_background { display: none; position: fixed; width: 100%; height: 100%; background: #13205a; z-index: 1; } .mobile_menu_background.menu-opened { display: block; } /* Hauptnavigation */ #hauptmenu { margin: 0px; margin: 0rem; padding: 0px; padding: 0rem; border: 0; list-style: none; display: block; position: relative; font-family: "zipfer_medium", Arial, sans-serif; z-index: 1; } @media screen and (max-width: 767px) { #hauptmenu { float: right; margin-top: 66px; padding-right: 1rem; } } @media screen and (min-width: 768px) { #hauptmenu { float: right; margin-top: 66px; padding-right: 2rem; } } @media screen and (min-width: 1025px) { #hauptmenu { margin-top: 0px; } } #hauptmenu:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #hauptmenu ul { /* Submenu + Button in der mobilen Navigation */ /* Menüpunkte in der Hauptnavigation */ } @media screen and (max-width: 767px) { #hauptmenu ul { display: none; width: 100%; } } @media screen and (min-width: 768px) { #hauptmenu ul { display: none; width: 100%; } } @media screen and (min-width: 1025px) { #hauptmenu ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-justify-content: space-between; justify-content: flex-end; -ms-flex-pack: justify; } } #hauptmenu ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #hauptmenu ul .submenu-button { position: absolute; z-index: 99; right: 0; top: 0; border-left: 1px solid white; height: 52px; width: 46px; cursor: pointer; } @media screen and (max-width: 767px) { #hauptmenu ul .submenu-button { display: block; } } @media screen and (min-width: 768px) { #hauptmenu ul .submenu-button { display: block; } } @media screen and (min-width: 1025px) { #hauptmenu ul .submenu-button { display: none; } } #hauptmenu ul .submenu-button.submenu-opened { background: white; } #hauptmenu ul .submenu-button.submenu-opened:before { display: none; } #hauptmenu ul .submenu-button.submenu-opened:after { background: #13205a; } #hauptmenu ul .submenu-button:after { position: absolute; top: 24px; right: 19px; width: 8px; height: 2px; background: white; content: ''; } @media screen and (max-width: 767px) { #hauptmenu ul .submenu-button:after { display: block; } } @media screen and (min-width: 768px) { #hauptmenu ul .submenu-button:after { display: block; } } @media screen and (min-width: 1025px) { #hauptmenu ul .submenu-button:after { display: none; } } #hauptmenu ul .submenu-button:before { position: absolute; top: 21px; right: 22px; width: 2px; height: 8px; background: white; content: ''; } @media screen and (max-width: 767px) { #hauptmenu ul .submenu-button:before { display: block; } } @media screen and (min-width: 768px) { #hauptmenu ul .submenu-button:before { display: block; } } @media screen and (min-width: 1025px) { #hauptmenu ul .submenu-button:before { display: none; } } #hauptmenu ul li { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; /* li Element hover State */ /* Hauptmenüpunt hat ein Submenü */ /* Aktiver Zustand des Menüpunktes */ /* Style für Submenu */ } @media screen and (max-width: 767px) { #hauptmenu ul li { width: 100%; border-top: 1px solid white; } } @media screen and (min-width: 768px) { #hauptmenu ul li { width: 100%; border-top: 1px solid white; } } @media screen and (min-width: 1025px) { #hauptmenu ul li { width: auto; border: none; padding: 0px 20px; } } @media screen and (min-width: 1025px) { #hauptmenu ul li.highlighted-menu-item { padding-right: 0; } } #hauptmenu ul li a { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; margin: 0; border: 0; list-style: none; display: block; position: relative; text-align: center; font-size: 1.8rem; text-decoration: none; padding: 18px 0px 14px 0px; border-bottom: 4px solid transparent; } @media (max-width: 1024px) { #hauptmenu ul li a { padding: 16px 50px; font-size: 20px; border-bottom: none; } } @media screen and (max-width: 767px) { #hauptmenu ul li a { color: white; } } @media screen and (min-width: 768px) { #hauptmenu ul li a { color: white; } } @media screen and (min-width: 1025px) { #hauptmenu ul li a { color: white; } } #hauptmenu ul li a.fa:before { margin-right: 5px; margin-right: 0.5rem; } #hauptmenu ul li a .bigtext { display: block; text-transform: uppercase; font-size: 22px; font-family: "zipfer_bold", Arial, sans-serif; font-style: normal; } @media screen and (max-width: 767px) { #hauptmenu ul li:hover > a { color: white; } } @media screen and (min-width: 768px) { #hauptmenu ul li:hover > a { color: white; } } @media screen and (min-width: 1025px) { #hauptmenu ul li:hover > a { color: white; border-bottom: 4px solid #bc8e2f; } } #hauptmenu ul li.has-sub { /* Hover Status für + Symbol => wird zu - */ } #hauptmenu ul li.has-sub:hover > a:before { top: 23px; height: 0; } #hauptmenu ul li:hover > ul { opacity: 1; -ms-filter: "progid:DXImageTra nsform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); top: auto; } @media screen and (max-width: 767px) { #hauptmenu ul li:hover > ul { background: transparent; } } @media screen and (min-width: 768px) { #hauptmenu ul li:hover > ul { background: transparent; } } @media screen and (min-width: 1025px) { #hauptmenu ul li:hover > ul { background-color: #fff; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); padding: 16px 6px; } #hauptmenu ul li:hover > ul a { color: #13205a; } #hauptmenu ul li:hover > ul a:hover { font-family: "zipfer_bold", Arial, sans-serif; } } @media screen and (min-width: 1025px) and (min-width: 1025px) { #hauptmenu ul li:hover > ul a { border-bottom: 1.5px solid #bc8e2f; } } @media screen and (max-width: 767px) { #hauptmenu ul li.current-menu-item > a, #hauptmenu ul li.current-menu-parent > a { color: white; } } @media screen and (min-width: 768px) { #hauptmenu ul li.current-menu-item > a, #hauptmenu ul li.current-menu-parent > a { color: white; } } @media screen and (min-width: 1025px) { #hauptmenu ul li.current-menu-item > a, #hauptmenu ul li.current-menu-parent > a { color: #bc8e2f; border-bottom: 4px solid #13205a; } } @media screen and (max-width: 767px) { #hauptmenu ul li.highlighted-menu-item > a { color: white; } } @media screen and (min-width: 768px) { #hauptmenu ul li.highlighted-menu-item > a { color: white; } } @media screen and (min-width: 1025px) { #hauptmenu ul li.highlighted-menu-item > a { color: #13205a; background-color: #fff; padding: 1rem 2rem; border-radius: 4px; border: 0; } #hauptmenu ul li.highlighted-menu-item > a:hover { color: #fff; background-color: #bc8e2f; } } @media screen and (min-width: 1025px) { #hauptmenu ul li.highlighted-menu-item { display: flex; flex-direction: column; justify-content: center; } #hauptmenu ul li.highlighted-menu-item.current-menu-item a { background-color: #fff; border: 1px solid #13205a; color: #13205a; } } #hauptmenu ul li ul { -webkit-transition: all 0s ease-in-out; -moz-transition: all 0s ease-in-out; -ms-transition: all 0s ease-in-out; -o-transition: all 0s ease-in-out; transition: all 0s ease-in-out; /* SubSubmenu + Button in der mobilen Navigation */ } @media screen and (min-width: 1025px) { #hauptmenu ul li ul { position: absolute; right: 50%; transform: translateX(50%); opacity: 0; -ms-filter: "progid:DXImageTra nsform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); top: -9999em; display: flex; flex-direction: column; width: auto; } } #hauptmenu ul li ul .submenu-button { height: 34px; width: 34px; } #hauptmenu ul li ul .submenu-button:after { top: 15px; right: 13px; } #hauptmenu ul li ul .submenu-button:before { top: 12px; right: 16px; } #hauptmenu ul li ul li { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; width: 100%; padding: 1rem 2rem 0 2rem; /* letztes Element hat keinen Border bottom */ /* Fügt ein + Symbol zum Submenu hinzu, wenn es weitere Submenüelemente gibt */ /* Style für SubSubmenü */ } #hauptmenu ul li ul li:last-child > a { border-bottom: 0; } #hauptmenu ul li ul li:hover { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } @media screen and (max-width: 767px) { #hauptmenu ul li ul li:hover { background: transparent; } } @media screen and (min-width: 768px) { #hauptmenu ul li ul li:hover { background: transparent; } } @media screen and (min-width: 1025px) { #hauptmenu ul li ul li:hover { background: transparent; } } #hauptmenu ul li ul li.has-sub:hover { /* wird benötigt, wenn es weitere Submenüs gibt */ } #hauptmenu ul li ul li.has-sub:hover > a:before { top: 17px; height: 0; } @media screen and (max-width: 767px) { #hauptmenu ul li ul li.has-sub:hover > a { background: white; } } @media screen and (min-width: 768px) { #hauptmenu ul li ul li.has-sub:hover > a { background: white; } } @media screen and (min-width: 1025px) { #hauptmenu ul li ul li.has-sub:hover > a { background: transparent; } } #hauptmenu ul li ul li a { min-width: 210px; padding: 0; padding-bottom: 1rem; font-size: 16px; font-size: 1.6rem; line-height: 16px; font-weight: 400; /* Hintergrundfarbe bei Hover auf Submenu Element */ } @media screen and (max-width: 767px) { #hauptmenu ul li ul li a { border-bottom: none; color: white; } } @media screen and (min-width: 768px) { #hauptmenu ul li ul li a { border-bottom: none; color: white; } } @media screen and (min-width: 1025px) { #hauptmenu ul li ul li a { border-bottom: 1.5px solid #bc8e2f; } } @media screen and (max-width: 767px) { #hauptmenu ul li ul li a:hover { background: transparent; color: white; } } @media screen and (min-width: 768px) { #hauptmenu ul li ul li a:hover { background: transparent; color: white; } } @media screen and (min-width: 1025px) { #hauptmenu ul li ul li a:hover { background: transparent; color: #13205a; } } @media screen and (max-width: 767px) { #hauptmenu ul li ul li ul { margin-left: 0px; } } @media screen and (min-width: 768px) { #hauptmenu ul li ul li ul { margin-left: 0px; } } @media screen and (min-width: 1025px) { #hauptmenu ul li ul li ul { margin-left: 100%; top: 0; } } /* Mobiles Burger-Icon */ .burgermenu { cursor: pointer; position: absolute; width: 30px; height: 25px; top: 10px; z-index: 1001; right: 0; /* Burger Icon geöffnet */ } @media screen and (max-width: 767px) { .burgermenu { display: block; margin-top: -57px; } } @media screen and (min-width: 768px) { .burgermenu { display: block; margin-top: -57px; } } @media screen and (min-width: 1025px) { .burgermenu { display: none; margin-top: 0px; } } .burgermenu.navTrigger { width: 30px; height: 25px; } .burgermenu.navTrigger i { background-color: white; border-radius: 1px; border-radius: 0.1rem; content: ''; display: block; width: 100%; height: 4px; } .burgermenu.navTrigger i:nth-child(1) { -webkit-animation: outT 0.8s backwards; animation: outT 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } .burgermenu.navTrigger i:nth-child(2) { margin: 5px 0; -webkit-animation: outM 0.8s backwards; animation: outM 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } .burgermenu.navTrigger i:nth-child(3) { -webkit-animation: outBtm 0.8s backwards; animation: outBtm 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } .burgermenu.navTrigger.active i:nth-child(1) { -webkit-animation: inT 0.8s forwards; animation: inT 0.8s forwards; } .burgermenu.navTrigger.active i:nth-child(2) { -webkit-animation: inM 0.8s forwards; animation: inM 0.8s forwards; } .burgermenu.navTrigger.active i:nth-child(3) { -webkit-animation: inBtm 0.8s forwards; animation: inBtm 0.8s forwards; } .burgermenu.menu-opened i { background-color: white; } /* Burger Icon Animation */ @-webkit-keyframes inM { 50% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(45deg); } } @keyframes inM { 50% { transform: rotate(0deg); } 100% { transform: rotate(45deg); } } @-webkit-keyframes outM { 50% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(45deg); } } @keyframes outM { 50% { transform: rotate(0deg); } 100% { transform: rotate(45deg); } } @-webkit-keyframes inT { 0% { -webkit-transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(9px) rotate(0deg); } 100% { -webkit-transform: translateY(9px) rotate(135deg); } } @keyframes inT { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(9px) rotate(0deg); } 100% { transform: translateY(9px) rotate(135deg); } } @-webkit-keyframes outT { 0% { -webkit-transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(9px) rotate(0deg); } 100% { -webkit-transform: translateY(9px) rotate(135deg); } } @keyframes outT { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(9px) rotate(0deg); } 100% { transform: translateY(9px) rotate(135deg); } } @-webkit-keyframes inBtm { 0% { -webkit-transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(-9px) rotate(0deg); } 100% { -webkit-transform: translateY(-9px) rotate(135deg); } } @keyframes inBtm { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-9px) rotate(0deg); } 100% { transform: translateY(-9px) rotate(135deg); } } @-webkit-keyframes outBtm { 0% { -webkit-transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(-9px) rotate(0deg); } 100% { -webkit-transform: translateY(-9px) rotate(135deg); } } @keyframes outBtm { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-9px) rotate(0deg); } 100% { transform: translateY(-9px) rotate(135deg); } } /* ┌┬┐┌─┐┬┌┐┌ ┌─┐┌─┐┌─┐ ┌─┐┬┬ ┌─┐ │││├─┤││││ │ └─┐└─┐ ├┤ ││ ├┤ ┴ ┴┴ ┴┴┘└┘ └─┘└─┘└─┘ └ ┴┴─┘└─┘ File: _default.scss Beschreibung: ALLE STYLES SIND IN DIESEM FILE INTEGRIERT Erstellt von: Team sisu Datum: 01.02.2016 */ /* Wenn der Header fix positioniert wird, dann benötigt der main-container einen Abstand oben */ #main-container { overflow: hidden; margin-top: 11.6rem; } @media (min-width: 1025px) { #main-container { margin-top: 10.4rem; } } #main-container.menu-opened .slider-home-site { z-index: -1; } /* Headlines */ h1, h2, h3, h4 { text-transform: inherit; margin: 0px 0px 20px 0px; margin: 0rem 0rem 2rem 0rem; } h1 { color: #13205a; font-family: "zipfer_bold", Arial, sans-serif; text-transform: uppercase; background-image: url('../images/zipfer_unterstreichung.svg'); background-repeat: no-repeat; background-size: 84% 9%; background-position: bottom center; width: fit-content; padding-bottom: 0.4em; margin-bottom: 1.1em; } @media screen and (max-width: 767px) { h1 { font-size: 22px; font-size: 2.2rem; } } @media screen and (min-width: 768px) { h1 { font-size: 40px; font-size: 4rem; } } @media screen and (min-width: 992px) { h1 { font-size: 55px; font-size: 5.5rem; } } h2 { color: #13205a; font-family: "zipfer_bold", Arial, sans-serif; text-transform: uppercase; } @media screen and (max-width: 767px) { h2 { font-size: 22px; font-size: 2.2rem; } } @media screen and (min-width: 768px) { h2 { font-size: 28px; font-size: 2.8rem; } } @media screen and (min-width: 992px) { h2 { font-size: 36px; font-size: 3.6rem; } } h3, .h3 { font-family: "zipfer_medium", Arial, sans-serif; text-transform: none; color: #13205a; } @media screen and (max-width: 767px) { h3, .h3 { font-size: 22px; font-size: 2.2rem; } } @media screen and (min-width: 768px) { h3, .h3 { font-size: 24px; font-size: 2.4rem; } } @media screen and (min-width: 992px) { h3, .h3 { font-size: 32px; font-size: 3.2rem; } } h4, .h4 { font-family: "zipfer_bold", Arial, sans-serif; text-transform: uppercase; color: #13205a; } @media screen and (max-width: 767px) { h4, .h4 { font-size: 18px; font-size: 1.8rem; } } @media screen and (min-width: 768px) { h4, .h4 { font-size: 20px; font-size: 2rem; } } @media screen and (min-width: 992px) { h4, .h4 { font-size: 24px; font-size: 2.4rem; } } h5, .h5 { font-family: "zipfer_bold", Arial, sans-serif; text-transform: uppercase; color: #13205a; } @media screen and (max-width: 767px) { h5, .h5 { font-size: 16px; font-size: 1.6rem; } } @media screen and (min-width: 768px) { h5, .h5 { font-size: 18px; font-size: 1.8rem; } } @media screen and (min-width: 992px) { h5, .h5 { font-size: 18px; font-size: 1.8rem; } } h6 { font-family: "zipfer_bold", Arial, sans-serif; text-transform: uppercase; color: #13205a; } p { margin: 0px 0px 20px 0px; margin: 0rem 0rem 2rem 0rem; font-size: 18px; font-size: 1.8rem; line-height: 20px; line-height: 2rem; font-weight: 300; } /* Buttons */ .btn { border-radius: 2px; border-radius: 0.2rem; font-family: "zipfer_medium", Arial, sans-serif; font-size: 17px; font-size: 1.7rem; background: transparent; text-shadow: none; text-transform: none; text-decoration: none; padding: 1.3rem 0.5rem; border: none; color: #13205a; display: inline-block; text-align: center; cursor: pointer; width: fit-content; padding-bottom: 0.4em; position: relative; } .btn::after { content: ""; background-color: #947133; background-image: linear-gradient(90deg, #947133 0%, #f6e8b6 46%, #947133 100%); left: 0; right: 0; bottom: 0; height: 0.3rem; position: absolute; } @media (max-width: 767px) { .btn { font-size: 15px; padding: 11px 20px; } } .btn.white { color: #fff; border-color: #fff; } .btn.white:hover, .btn.white:active, .btn.white:focus { text-decoration: underline; } .btn:hover { text-decoration: none; } .btn:hover::after { content: none; } .btn:active { box-shadow: none; } #wrapper { width: 100%; margin: 0 auto; overflow-x: hidden; } #wrapper .container.cb { margin-top: 70px; margin-top: 7rem; } @media (max-width: 768px) { #wrapper .container.cb { margin-top: 3rem; } } #wrapper .container.cb2 { margin-top: 50px; margin-top: 5rem; } #wrapper .ms-slide { -webkit-transition: all ease 2s !important; -moz-transition: all ease 2s !important; -ms-transition: all ease 2s !important; -o-transition: all ease 2s !important; transition: all ease 2s !important; } #wrapper .ms-slide .ms-slide-bgcont img { width: 100% !important; height: auto !important; } #wrapper .ms-slide-layers { width: 100%; height: 100%; background: -moz-linear-gradient(top, rgba(4, 49, 110, 0) 0%, rgba(4, 49, 110, 0) 17%, rgba(4, 49, 110, 0.9) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(4, 49, 110, 0) 0%, rgba(4, 49, 110, 0) 17%, rgba(4, 49, 110, 0.9) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(4, 49, 110, 0) 0%, rgba(4, 49, 110, 0) 17%, rgba(4, 49, 110, 0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0004316e', endColorstr='#e604316e',GradientType=0); /* IE6-9 */ } #wrapper .ms-slide-layers .ms-layer { width: 100% !important; left: 0 !important; text-align: center !important; } #wrapper .ms-slide-layers .ms-layer.headline { color: white !important; font-family: "zipfer_regular", Arial, sans-serif !important; font-size: 88px !important; top: auto !important; bottom: 33% !important; text-transform: uppercase !important; line-height: 100% !important; } @media (max-width: 1200px) { #wrapper .ms-slide-layers .ms-layer.headline { font-size: 50px !important; } } @media (max-width: 767px) { #wrapper .ms-slide-layers .ms-layer.headline { font-size: 18px !important; bottom: 40% !important; } } #wrapper .ms-slide-layers .ms-layer.subline { font-family: "zipfer_regular", Arial, sans-serif !important; font-weight: 400 !important; font-size: 29px !important; bottom: 8% !important; top: auto !important; color: white !important; } #wrapper .ms-slide-layers .ms-layer.subline span { color: white !important; } @media (max-width: 767px) { #wrapper .ms-slide-layers .ms-layer.subline { font-size: 11px !important; margin-top: 5px !important; bottom: 12% !important; } } #wrapper .ms-slide-layers img.ms-layer { width: 70% !important; left: 15% !important; top: auto !important; bottom: 20% !important; height: auto !important; } @media (max-width: 767px) { #wrapper .ms-slide-layers img.ms-layer { bottom: 27% !important; } } #wrapper .socialbox { background: white; padding: 30px 35px; border-radius: 6px; } @media (max-width: 767px) { #wrapper .socialbox { padding: 20px 8px; text-align: center; } } #wrapper .socialbox .socialheader { font-size: 25px; color: #0252a0; margin-bottom: 20px; } #wrapper .socialbox .socialheader i { color: #acbbc6; margin-right: 10px; } body.altersabfrage #wrapper { -webkit-filter: blur(25px); filter: blur(25px); } .alter_overlay, .alter_overlay_neu { display: none; position: fixed; height: 100%; width: 100%; z-index: 10000; } .alter_overlay .alter_container, .alter_overlay_neu .alter_container { width: 100%; max-width: 970px; margin: 0 auto; } .alter_overlay .alter_container .title, .alter_overlay_neu .alter_container .title { font-size: 40px; line-height: 40px; color: #13205a; text-transform: uppercase; text-align: center; margin: 80px 0 30px 0; } .alter_overlay .alter_container .gebform, .alter_overlay_neu .alter_container .gebform { display: inline-block; } .alter_overlay .alter_container .gebform input[type=number]::-webkit-outer-spin-button, .alter_overlay_neu .alter_container .gebform input[type=number]::-webkit-outer-spin-button, .alter_overlay .alter_container .gebform input[type=number]::-webkit-inner-spin-button, .alter_overlay_neu .alter_container .gebform input[type=number]::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } .alter_overlay .alter_container ::-webkit-input-placeholder, .alter_overlay_neu .alter_container ::-webkit-input-placeholder { color: white; } .alter_overlay .alter_container :-moz-placeholder, .alter_overlay_neu .alter_container :-moz-placeholder { color: white; } .alter_overlay .alter_container ::-moz-placeholder, .alter_overlay_neu .alter_container ::-moz-placeholder { color: white; } .alter_overlay .alter_container :-ms-input-placeholder, .alter_overlay_neu .alter_container :-ms-input-placeholder { color: white; } .alter_overlay .alter_container .formbtn, .alter_overlay_neu .alter_container .formbtn { background: #13205a; color: #fff; font-size: 22px; line-height: 26px; padding: 15px 20px; border: 1px solid #13205a; -webkit-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; width: auto; } .alter_overlay .alter_container .formbtn:hover, .alter_overlay_neu .alter_container .formbtn:hover { background: #fff; color: #13205a; } .alter_overlay .alter_container .privacy, .alter_overlay_neu .alter_container .privacy { font-size: 20px; line-height: 20px; color: #13205a; text-transform: uppercase; text-align: center; max-width: 100%; position: absolute; bottom: 0; left: 0; padding: 20px 20%; } @media (max-width: 1200px) { .alter_overlay .alter_container .title, .alter_overlay_neu .alter_container .title { font-size: 35px; } } @media (max-width: 767px) { .alter_overlay .alter_container, .alter_overlay_neu .alter_container { padding: 0 12px; } .alter_overlay .alter_container .title, .alter_overlay_neu .alter_container .title { font-size: 16px; margin-top: 10px; margin-bottom: 25px; line-height: 18px; } .alter_overlay .alter_container .overlaylogo, .alter_overlay_neu .alter_container .overlaylogo { max-width: 120px; } .alter_overlay .alter_container .privacy, .alter_overlay_neu .alter_container .privacy { padding: 0px 8px; margin-bottom: 20px; } .alter_overlay .alter_container .formbtn, .alter_overlay_neu .alter_container .formbtn { padding: 1px 10px; font-size: 16px; } .alter_overlay .alter_container .alter_error, .alter_overlay_neu .alter_container .alter_error { margin-top: 15px; margin-bottom: 10px; } .alter_overlay .alter_container .privacy, .alter_overlay_neu .alter_container .privacy { font-size: 13px; line-height: 16px; } .alter_overlay .alter_container .fbbtn button, .alter_overlay_neu .alter_container .fbbtn button { margin: 0px !important; } } .alter_overlay_neu { z-index: 10001; } .alter_overlay_neu .alter_container fieldset { border: none; margin-bottom: 2rem; } @media screen and (max-width: 767px) { .alter_overlay_neu .alter_container fieldset { margin-bottom: 0rem; } } .alter_overlay_neu .alter_container fieldset .formentry label { color: white; } .alter_overlay_neu .alter_container fieldset .formentry input { width: auto; cursor: pointer; height: 24px; } @media screen and (max-width: 767px) { .alter_overlay_neu .alter_container fieldset .formentry { margin-bottom: 1rem; } } .alter_overlay_neu .alter_container fieldset input { width: auto; height: 24px; float: left; margin-top: 0; position: absolute; opacity: 0; cursor: pointer; left: 0; z-index: 999; width: 100%; } .alter_overlay_neu .alter_container fieldset .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #fff; border-radius: 50%; border: 1px solid #c7a154; } .alter_overlay_neu .alter_container fieldset .checkmark:after { content: ""; position: absolute; display: none; } .alter_overlay_neu .alter_container fieldset .formentry input:checked ~ .checkmark:after { display: block; } .alter_overlay_neu .alter_container fieldset .formentry .checkmark:after { left: 8px; top: 3px; width: 8px; height: 15px; border: solid #000; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .alter_overlay_neu .alter_container a { color: white; text-decoration: underline; } .alter_overlay_neu .alter_container a:hover { text-decoration: none; } .alter_overlay_neu .alter_container .formbtn { float: none; } .cb_trennlinie { position: relative; } .cb_trennlinie .trennlinie { height: 1px; height: 0.1rem; background-color: #d4dcd1; margin: 30px 0px 10px 0px; } .cb_trennlinie img { position: absolute; top: 0px; left: 50%; margin-left: -30px; margin-top: 17px; height: 30px; } @media (max-width: 767px) { .cb_trennlinie .trennlinie { margin: 15px 0px 10px 0px; } .cb_trennlinie img { height: 30px !important; margin-top: 0px !important; margin-left: -30px; } } .single-product .fancybox-skin, .page-template-tpl_Sortiment .fancybox-skin { padding: 60px !important; background: white; } @media (max-width: 767px) { .single-product .fancybox-skin, .page-template-tpl_Sortiment .fancybox-skin { padding: 30px 5px !important; } } .wdi_feed_users { display: none; } .wdi_load_more_wrap { height: auto !important; } .wdi_load_more { padding-bottom: 0px !important; } .instagrampostwrapper { height: 515px; overflow-y: scroll; margin-top: 17px; } @media (max-width: 1200px) { .instagrampostwrapper { height: 400px; } } @media (max-width: 991px) { .instagrampostwrapper { height: 300px; } } .socialbox iframe { display: none; } @media (min-width: 1200px) { .socialbox iframe.facebookbig { display: block; } } @media (max-width: 1199px) and (min-width: 992px) { .socialbox iframe.facebookmiddle { display: block; } } @media (max-width: 991px) and (min-width: 768px) { .socialbox iframe.facebooktablet { display: block; } } @media (max-width: 767px) { .socialbox iframe.facebooktablet { display: inline-block; } } .search-everything-highlight-color { background: none !important; } .gform_confirmation_message { text-align: center; } .pp_gallery { display: none !important; } .thumbnails.columns-3 { text-align: center; } .thumbnails.columns-3 a { width: 20% !important; float: none !important; clear: none !important; margin-right: 0px !important; display: inline-block; } @media (max-width: 991px) { .thumbnails.columns-3 a { width: 33.3% !important; } } .thumbnails.columns-3 a img { padding: 0px 8px; } #wrapper .woocommerce ul.product_list_widget li dl dd { margin: 0px; padding: 0px; } #wrapper .woocommerce ul.product_list_widget li dl dt { padding: 0px; } .kein-abstand-nach-unten { margin-bottom: 0 !important; } .center { text-align: center; margin-left: auto; margin-right: auto; } /* ┌─┐┌┐ ┬┌┬┐┌─┐┌┬┐ │ ├┴┐ │ │ ├┤ │││ └─┘└─┘ ┴ ┴ └─┘┴ ┴ File: _modules/_cb_item.scss Beschreibung: Allgemeine CSS Definition für die Content Blöcke. Jedes CB Element muss die Classe cb_item enthalten! Autor: Team sisu Datum: 01.02.2016 */ @media screen and (max-width: 767px) { .cb_item { margin-bottom: 50px; margin-bottom: 5rem; } } @media screen and (min-width: 768px) { .cb_item { margin-bottom: 50px; margin-bottom: 5rem; } } @media screen and (min-width: 992px) { .cb_item { margin-bottom: 80px; margin-bottom: 8rem; } } .cb_item.nomargin { margin: 0; } @media screen and (max-width: 767px) { .cb_item:first-child:not(.cb_item) { margin-bottom: 0px; margin-bottom: 0rem; } } @media screen and (min-width: 768px) { .cb_item:first-child:not(.cb_item) { margin-bottom: 0px; margin-bottom: 0rem; } } @media screen and (min-width: 992px) { .cb_item:first-child:not(.cb_item) { margin-bottom: 0px; margin-bottom: 0rem; } } @media screen and (max-width: 767px) { .cb_item.halber-abstand-nach-unten { margin-bottom: 20px; margin-bottom: 2rem; } } @media screen and (min-width: 768px) { .cb_item.halber-abstand-nach-unten { margin-bottom: 30px; margin-bottom: 3rem; } } @media screen and (min-width: 992px) { .cb_item.halber-abstand-nach-unten { margin-bottom: 40px; margin-bottom: 4rem; } } .cb_item.halber-abstand-nach-unten.nomargin { margin: 0; } @media screen and (max-width: 767px) { .cb_item.halber-abstand-nach-unten:first-child:not(.cb_item) { margin-bottom: 0px; margin-bottom: 0rem; } } @media screen and (min-width: 768px) { .cb_item.halber-abstand-nach-unten:first-child:not(.cb_item) { margin-bottom: 0px; margin-bottom: 0rem; } } @media screen and (min-width: 992px) { .cb_item.halber-abstand-nach-unten:first-child:not(.cb_item) { margin-bottom: 0px; margin-bottom: 0rem; } } /* ┌─┐┌┐ ┌┐ ┬ ┌─┐┌─┐┬┌─ ┌─┐┌┬┐┌─┐┬─┐┌┬┐ │ ├┴┐ ├┴┐│ │ ││ ├┴┐ └─┐ │ ├─┤├┬┘ │ └─┘└─┘ └─┘┴─┘└─┘└─┘┴ ┴ └─┘ ┴ ┴ ┴┴└─ ┴ File: _modules/_cb_block_start.scss Beschreibung: Style für Content Block Start und Accordion Autor: Team sisu Datum: 01.02.2016 */ .cb_block_start, .cb_accordion_start { /* ┌─┐┌─┐┌─┐┌─┐┬─┐┌┬┐┬┌─┐┌┐┌ ├─┤│ │ │ │├┬┘ ││││ ││││ ┴ ┴└─┘└─┘└─┘┴└──┴┘┴└─┘┘└┘ */ } .cb_block_start .full_width, .cb_accordion_start .full_width { margin-left: 50%; transform: translateX(-50%); width: 100vw; } .cb_block_start .full_width .panther, .cb_accordion_start .full_width .panther { padding-top: 40px; padding-top: 4rem; padding-bottom: 20px; padding-bottom: 2rem; } .cb_block_start .toggler, .cb_accordion_start .toggler { font-family: "zipfer_bold", Arial, sans-serif; margin-bottom: 10px; margin-bottom: 1rem; padding: 8px 50px 8px 20px; padding: 0.8rem 5rem 0.8rem 2rem; border-bottom: 0px solid #ccc; background-color: #13205a; color: white; background-image: url('../images/acc_arrow_down.png'); background-position: right 15px center; background-repeat: no-repeat; cursor: pointer; } .cb_block_start .toggler.active, .cb_accordion_start .toggler.active { background-image: url('../images/acc_arrow_up.png'); } .cb_block_start.last, .cb_accordion_start.last { border-bottom: none; } .cb_block_start .toggletext, .cb_accordion_start .toggletext { padding-left: 5px; padding-left: 0.5rem; padding-right: 5px; padding-right: 0.5rem; } .cb_accordion_start { margin-bottom: 0px; } @media (max-width: 767px) { .cb_block_start .mobile-center h1, .cb_block_start .mobile-center h2, .cb_block_start .mobile-center h3, .cb_block_start .mobile-center h4, .cb_block_start .mobile-center p { text-align: center !important; } } /* ┌─┐┌┐ ┌─┐┌─┐┬─┐┌┬┐┬ ┬┬ ┌─┐┬─┐ │ ├┴┐ ├┤ │ │├┬┘││││ ││ ├─┤├┬┘ └─┘└─┘ └ └─┘┴└─┴ ┴└─┘┴─┘┴ ┴┴└─ File: _modules/_cb_formular.scss Beschreibung: Alle Styles für die Formulare Autor: Team sisu Datum: 01.02.2016 */ form { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0px 2px; margin: 0rem 0.2rem; padding: 3.5px 6.25px 7.5px; padding: 0.35rem 0.625rem 0.75rem; } legend { border: 0; padding: 0; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; max-width: 100%; vertical-align: baseline; } button, input { line-height: normal; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], input[disabled] { cursor: default; } button { border: none; width: 100%; text-align: left; background: none; } input[type="checkbox"], input[type="radio"] { padding: 0; } input[type="search"] { -webkit-appearance: textfield; padding-right: 2px; padding-right: 0.2rem; /* Don't cut off the webkit search cancel button */ width: 250px; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input[type=text], textarea, select { outline: none; border: 1px solid #ccc; } textarea { overflow: auto; vertical-align: top; } .gfield_label { font-weight: 400 !important; margin-bottom: 0 !important; font-size: 1.6rem !important; } pre { background-color: #fff; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; padding: 0px; padding: 0rem; margin: 0px; margin: 0rem; } .gform_wrapper { max-width: 100% !important; } .gform_wrapper .gform_heading { display: none; } .gform_wrapper .gfield-choice-input + label { line-height: 1; margin-bottom: 13px; } .gform_wrapper ul li { list-style: none; } .gform_wrapper ul li.gfield { clear: none !important; /*form error*/ } .gform_wrapper ul li.gfield.gfield_error { width: 100% !important; background: none !important; border: none !important; } .gform_wrapper ul li.gfield.gfield_error.gfield_contains_required { margin-bottom: 0px; margin-bottom: 0rem; } .gform_wrapper ul li.gfield.gfield_error.gfield_contains_required div.ginput_container { max-width: 100% !important; margin-left: 0px; margin-left: 0rem; } .gform_wrapper ul li.gfield.gfield_error input[type=text] { border: solid 1px #f00 !important; } .gform_wrapper ul li.gfield.gfield_error.col-md-4 { width: 33.33333% !important; } .gform_wrapper ul li.gfield.gfield_error.col-md-5 { width: 41.66667% !important; } .gform_wrapper ul li.gfield.gfield_error.col-md-8 { width: 66.66667% !important; } .gform_wrapper ul li .validation_message { display: none !important; } .gform_wrapper ul li .ginput_container { margin-top: 0px; margin-top: 0rem; margin-bottom: 16px; margin-bottom: 1.6rem; } .gform_wrapper ul li .ginput_container .ginput_container_fileupload { clear: both; } .gform_wrapper ul li .ginput_container input[type='text'], .gform_wrapper ul li .ginput_container textarea, .gform_wrapper ul li .ginput_container select { border-radius: 0px; border-radius: 0rem; border: 1px solid #acb9c5; background: #ebebeb; color: black; width: 100% !important; padding: 13px 20px; padding: 1.3rem 2rem; text-indent: 0px; text-indent: 0rem; font-weight: normal !important; } .gform_wrapper ul li .ginput_container textarea { height: auto; padding: 5px 10px; padding: 0.5rem 1rem; } .gform_wrapper .gform_validation_container { display: none; } .gform_wrapper .validation_error { border-top: none !important; border-bottom: none !important; color: #f00 !important; } .gform_wrapper.gf_browser_chrome ul.gform_fields li.gfield select { margin-left: 0px; margin-left: 0rem; } .gform_wrapper .gform_heading { margin-bottom: 10px; margin-bottom: 1rem; } .gform_wrapper .gform_heading h3 { font-size: 20px; font-size: 2rem; margin-bottom: 5px; margin-bottom: 0.5rem; } .gform_wrapper .gform_heading span.gform_description { font-size: 13px; font-size: 1.3rem; } .gform_wrapper .gform_body { padding: 0px; padding: 0rem; clear: both; overflow: hidden; } .gform_wrapper .gform_body .gfield_required .gfield_required_text { display: none; } .gform_wrapper .gform_body select { border: 0.1rem solid #ebebeb; border-radius: 0.2rem; font-size: 1.8rem !important; } .gform_wrapper .gform_body input, .gform_wrapper .gform_body textarea, .gform_wrapper .gform_body select { background: #ebebeb; border: none; border-radius: 0.2rem; font-size: 1.8rem !important; padding: 5px; padding: 0.5rem; } .gform_wrapper .gform_body ul { list-style: none !important; padding: 0px; padding: 0rem; margin: 0px; margin: 0rem; } .gform_wrapper .gform_body ul li.show-label label { display: block !important; } .gform_wrapper .gform_footer { text-align: center; } .gform_wrapper .gform_footer .btn { font-size: 2rem; } ::-webkit-input-placeholder { color: #13205a; font-weight: normal !important; } :-moz-placeholder { color: #13205a; font-weight: normal !important; } ::-moz-placeholder { color: #13205a; font-weight: normal !important; } :-ms-input-placeholder { color: #13205a; font-weight: normal !important; } .gfield_select { border-radius: 0px; border-radius: 0rem; border: 1px solid #d4dce1; background: none; color: #13205a; width: 100% !important; } .gfield_label { font-weight: 400; } .gform_button { border: 2px #13205a solid; padding: 7px 20px; padding: 0.7rem 2rem; font-family: Arial, sans-serif; color: #13205a; text-transform: uppercase; font-size: 15px; font-size: 1.5rem; background-color: transparent; border-radius: 0px; border-radius: 0rem; } .gform_button:hover { color: #fff; background-color: #fff; } /* NEWSLETTER BOX */ .newsletter .gform_confirmation_wrapper, .newsletter form { max-width: 500px; width: 100%; margin: 0 auto; } #gform_17 .validation_error { padding: 10px; } #gform_17 .gform_fields .gfield { width: 100%; float: left; padding: 0 10px; } #gform_17 .gform_fields .gfield#field_17_2, #gform_17 .gform_fields .gfield#field_17_3 { width: 50%; } #gform_17 .gform_fields .gfield#field_17_4, #gform_17 .gform_fields .gfield#field_17_7 { width: 65%; } #gform_17 .gform_fields .gfield#field_17_5, #gform_17 .gform_fields .gfield#field_17_6 { width: 35%; } #gform_17 .gform_fields .gfield#field_17_22 .gfield_label { display: none; } #gform_17 .gform_fields .gfield .gfield_description { display: block; margin-top: -10px; margin-bottom: 15px; } #gform_17 .openform { display: none; } #gform_17 #gform_submit_button_17 { display: none; margin-top: -60px; } #gform_17 .btn { margin: 20px 10px; } #gform_17 .btn.small { padding: 6px 25px; margin-bottom: 60px; } #gform_17 .gform_footer { margin-top: 15px; } .infopdf { position: absolute; top: 6px; right: 6px; font-size: 21px; border: 2px solid #13205a; width: 30px; height: 30px; text-align: center; border-radius: 15px; padding-top: 1px; } .infobox_fans { border: 1px solid #13205a; padding: 15px 20px 17px 66px; margin-bottom: 18px; position: relative; display: inline-block; } .infobox_fans i { position: absolute; top: 50%; left: 17px; margin-top: -17px; height: 33px; width: 33px; border: 2px solid #13205a; border-radius: 50%; text-align: center; color: #13205a; padding-top: 5px; font-size: 20px; } /* ┌─┐┌┐ ┌─┐┌─┐┌─┐┌─┐┬ ┌─┐ ┌┬┐┌─┐┌─┐ │ ├┴┐ │ ┬│ ││ ││ ┬│ ├┤ │││├─┤├─┘ └─┘└─┘ └─┘└─┘└─┘└─┘┴─┘└─┘ ┴ ┴┴ ┴┴ File: _modules/_cb_google_map.scss Beschreibung: Styles für die Google Map Autor: Team sisu Datum: 01.02.2016 */ .map { width: 100%; height: 400px; height: 40rem; border: #d4dce1 solid 1px; margin: 0px; margin: 0rem; } /* ┌─┐┌┐ ┌─┐┬┌┬┐┌─┐┌┬┐┌─┐┬ ┌─┐┌┬┐┌─┐┌┐┌┌┬┐ │ ├┴┐ ┌─┘│ │ ├─┤ │ ├┤ │ ├┤ │││├┤ │││ │ └─┘└─┘ └─┘┴ ┴ ┴ ┴ ┴ └─┘┴─┘└─┘┴ ┴└─┘┘└┘ ┴ File: _modules/_cb_zitatelement.scss Beschreibung: CSS Styles für das Zitatelement Autor: Team sisu Datum: 01.02.2016 */ @media screen and (min-width: 768px) { .cb_zitatelement .vertical-align { display: -webkit-flex; display: flex; -webkit-flex-direction: row; /* works with row or column */ flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } } @media screen and (min-width: 992px) { .cb_zitatelement .vertical-align { display: -webkit-flex; display: flex; -webkit-flex-direction: row; /* works with row or column */ flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } } @media screen and (min-width: 768px) { .cb_zitatelement .vertical-align > [class^="col-"], .cb_zitatelement .vertical-align > [class*=" col-"] { display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; } } @media screen and (min-width: 992px) { .cb_zitatelement .vertical-align > [class^="col-"], .cb_zitatelement .vertical-align > [class*=" col-"] { display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; } } .cb_zitatelement .source { font-family: "zipfer_regular", Arial, sans-serif; text-transform: none; margin-top: 2rem; } .cb_zitatelement .author { margin-bottom: 2rem; } .cb_zitatelement .quotebox_content { padding-left: 2rem; } .cb_zitatelement .quotebox_content::before { content: ""; position: absolute; left: 0; height: 100%; width: 3px; background-image: url('../images/quote_line.svg'); background-repeat: no-repeat; background-size: 100% 100%; } .cb_zitatelement .box_background { background-size: cover !important; } @media screen and (max-width: 767px) { .cb_zitatelement .box_background.full_width { margin: 0px; margin: 0rem; } } @media screen and (min-width: 768px) { .cb_zitatelement .box_background.full_width { margin: 0px -50% 0px -50%; } } @media screen and (min-width: 992px) { .cb_zitatelement .box_background.full_width { margin: 0px -50% 0px -50%; } } .cb_textbildelement .wrapper { display: flex; flex-wrap: wrap; } .cb_textbildelement .wrapper.inverted { flex-direction: row-reverse; } .cb_textbildelement .wrapper.inverted .textelement_content { margin-left: auto; } .cb_textbildelement .wrapper .imageelement, .cb_textbildelement .wrapper .textelement { width: 50%; flex: 50%; } @media screen and (max-width: 767px) { .cb_textbildelement .wrapper .imageelement, .cb_textbildelement .wrapper .textelement { width: 100%; flex: 100%; } } .cb_textbildelement .imageelement { background-size: cover; background-repeat: no-repeat; background-position: center center; } .cb_textbildelement .imageelement img { display: none; } @media screen and (max-width: 767px) { .cb_textbildelement .imageelement { background-image: none !important; } .cb_textbildelement .imageelement img { display: block; } } .cb_textbildelement .textelement { background-repeat: no-repeat; background-size: cover; padding: 12rem; } @media (max-width: 991px) { .cb_textbildelement .textelement { padding: 4rem; } } @media (min-width: 1000px) { .cb_textbildelement .textelement { min-height: 400px; } } @media (min-width: 768px) { .cb_textbildelement .textelement .textelement_content { max-width: calc(375px - 15px - 4rem); } } @media (min-width: 992px) { .cb_textbildelement .textelement .textelement_content { max-width: calc(485px - 15px - 4rem); } } @media (min-width: 1200px) { .cb_textbildelement .textelement .textelement_content { max-width: calc(585px - 15px - 4rem); } } .cb_textbildelement .textelement, .cb_textbildelement .headline, .cb_textbildelement .btn { color: #fff; } .cb_textbildelement .subline { color: #13205a; margin-bottom: 12px; margin-bottom: 1.2rem; font-size: 18px; } .cb_textbildelement .entry-text { line-height: 20px; line-height: 2rem; } .cb_textbildelement .entry-text *:last-child { margin-bottom: 0; } .cb_textbildelement .entry-text.link-is-btn a { border-radius: 2px; border-radius: 0.2rem; font-family: "zipfer_medium", Arial, sans-serif; font-size: 17px; font-size: 1.7rem; background: transparent; text-shadow: none; text-transform: none; text-decoration: none; padding: 1.3rem 0.5rem; border: none; color: #fff; display: inline-block; text-align: center; cursor: pointer; width: fit-content; padding-bottom: 0.4em; position: relative; } .cb_textbildelement .entry-text.link-is-btn a::after { content: ""; background-color: #947133; background-image: linear-gradient(90deg, #947133 0%, #f6e8b6 46%, #947133 100%); left: 0; right: 0; bottom: 0; height: 0.3rem; position: absolute; } @media (max-width: 767px) { .cb_textbildelement .entry-text.link-is-btn a { font-size: 15px; padding: 11px 20px; } } .cb_textbildelement .entry-text.link-is-btn a:hover { text-decoration: none; } .cb_textbildelement .entry-text.link-is-btn a:hover::after { content: none; } .cb_textbildelement .entry-text.link-is-btn a:active { box-shadow: none; } .cb_textbildelement .entry-text ul { list-style-type: none; margin-left: 0px; margin-left: 0rem; padding-left: 0px; padding-left: 0rem; } .cb_textbildelement .entry-text ul li { margin-bottom: 5px; margin-bottom: 0.5rem; background-image: url('../images/list-style-image.jpg'); background-position: left center; background-repeat: no-repeat; background-size: 1.2%; padding-left: 15px; padding-left: 1.5rem; } .cb_textbildelement .box_background { background-size: cover !important; } @media screen and (max-width: 767px) { .cb_textbildelement .box_background.full_width { margin: 0px; margin: 0rem; } } @media screen and (min-width: 768px) { .cb_textbildelement .box_background.full_width { margin: 0px -50% 0px -50%; } } @media screen and (min-width: 992px) { .cb_textbildelement .box_background.full_width { margin: 0px -50% 0px -50%; } } /* ┌─┐┌┐ ┌┬┐┌─┐─┐ ┬┌┬┐┌─┐┬ ┌─┐┌┬┐┌─┐┌┐┌┌┬┐ │ ├┴┐ │ ├┤ ┌┴┬┘ │ ├┤ │ ├┤ │││├┤ │││ │ └─┘└─┘ ┴ └─┘┴ └─ ┴ └─┘┴─┘└─┘┴ ┴└─┘┘└┘ ┴ File: _modules/_cb_textelement.scss Beschreibung: CSS Styles für Textelemente Autor: Team sisu Datum: 01.02.2016 */ .cb_textelement { /* Text alighnment is set in Wordpress Content Box Element */ } .cb_textelement .container { max-width: 100%; } .cb_textelement .subline { color: #13205a; margin-bottom: 12px; margin-bottom: 1.2rem; font-size: 18px; } .cb_textelement .entry-text { line-height: 20px; line-height: 2rem; } .cb_textelement .entry-text *:last-child { margin-bottom: 0; } .cb_textelement .entry-text ul { list-style-type: none; margin-left: 0px; margin-left: 0rem; padding-left: 0px; padding-left: 0rem; } .cb_textelement .entry-text ul li { margin-bottom: 5px; margin-bottom: 0.5rem; background-image: url('../images/list-style-image.jpg'); background-position: left top 4px; background-repeat: no-repeat; background-size: 1.2%; padding-left: 25px; padding-left: 2.5rem; } .cb_textelement .entry-text ol { margin-bottom: 20px; } .cb_textelement .entry-text ol li { margin-top: 7px; margin-left: 20px; } .cb_textelement.left h1, .cb_textelement.left h2, .cb_textelement.left h3, .cb_textelement.left h4, .cb_textelement.left .subline, .cb_textelement.left .entry-text, .cb_textelement.left .text_button { text-align: left; } .cb_textelement.center h1, .cb_textelement.center h2, .cb_textelement.center h3, .cb_textelement.center h4, .cb_textelement.center .subline, .cb_textelement.center .entry-text, .cb_textelement.center .text_button { text-align: center; } .cb_textelement.center h1, .cb_textelement.center h2, .cb_textelement.center h3, .cb_textelement.center h4 { margin-left: auto; margin-right: auto; } .cb_textelement.right h1, .cb_textelement.right h2, .cb_textelement.right h3, .cb_textelement.right h4, .cb_textelement.right .subline, .cb_textelement.right .entry-text, .cb_textelement.right .text_button { text-align: right; } .cb_textelement.right h1, .cb_textelement.right h2, .cb_textelement.right h3, .cb_textelement.right h4 { margin-left: auto; } .cb_textelement .btn { margin-top: 1rem; font-size: 2.1rem; } .cb_textelement .box_background { background-size: cover !important; } .cb_textelement .box_background.full_width { margin-left: 50%; transform: translateX(-50%); width: 100vw; } @media screen and (max-width: 767px) { .cb_textelement .box_background.full_width { margin: 0px; margin: 0rem; } } /* ┌─┐┌┬┐ ┌┐ ┬┬ ┌┬┐┌─┐┬─┐┌─┐┌─┐┬ ┌─┐┬─┐┬┌─┐ │ ││ ├┴┐││ ││├┤ ├┬┘│ ┬├─┤│ ├┤ ├┬┘│├┤ └─┘─┴┘ └─┘┴┴─┘─┴┘└─┘┴└─└─┘┴ ┴┴─┘└─┘┴└─┴└─┘ File: _modules/_cb_bildergalerie.scss Beschreibung: CSS Styles für Bildergalerie Vorschaubilder Autor: Team sisu Datum: 01.02.2016 */ .gallery { padding: 0px; padding: 0rem; left: 0; } .gallery li { list-style: none; margin-bottom: 15px; margin-bottom: 1.5rem; } .gallery li a { display: block; overflow: hidden; background: white; } .gallery li a img { width: auto; width: 100%; margin: 0px; opacity: 1; -ms-filter: "progid:DXImageTra nsform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; } .gallery li:hover a img { opacity: 0.8; -ms-filter: "progid:DXImageTra nsform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-transition: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .cb_bilderlayout .image_container_wrapper { display: flex; } .cb_bilderlayout .bg_image { background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; } .cb_bilderlayout .image_container2 { display: flex; flex-direction: column; } .cb_bilderlayout .image_container2 .bg_image:first-of-type { margin-bottom: 1rem; } @media screen and (max-width: 767px) { .cb_bilderlayout .image_container2 .bg_image:first-of-type { margin-bottom: 0.25rem; } } .cb_bilderlayout .image_container2 .bg_image:last-of-type { margin-top: 1rem; } @media screen and (max-width: 767px) { .cb_bilderlayout .image_container2 .bg_image:last-of-type { margin-top: 0.25rem; } } .cb_bilderlayout .four-images .image_container1 { width: 50%; padding-right: 1rem; } @media screen and (max-width: 767px) { .cb_bilderlayout .four-images .image_container1 { padding-right: 0.25rem; } } .cb_bilderlayout .four-images .image_container2 { width: 25%; padding: 0 1rem; } @media screen and (max-width: 767px) { .cb_bilderlayout .four-images .image_container2 { padding: 0 0.25rem; } } .cb_bilderlayout .four-images .image_container3 { width: 25%; padding-left: 1rem; } @media screen and (max-width: 767px) { .cb_bilderlayout .four-images .image_container3 { padding-left: 0.25rem; } } .cb_bilderlayout .three-images .image_container1 { width: 70%; padding-right: 1rem; } @media screen and (max-width: 767px) { .cb_bilderlayout .three-images .image_container1 { padding-right: 0.25rem; } } .cb_bilderlayout .three-images .image_container2 { width: 30%; padding-left: 1rem; } @media screen and (max-width: 767px) { .cb_bilderlayout .three-images .image_container2 { padding-left: 0.25rem; } } /* ┌─┐┌┬┐ ┬┌─┐┌─┐┌┐┌┌─┐ │ ││ ││ │ ││││└─┐ └─┘─┴┘ ┴└─┘└─┘┘└┘└─┘ File: _modules/_cb_icons.scss Beschreibung: CSS Styles für Icons (Iconset) Autor: Team sisu Datum: 01.02.2016 */ .cb_iconset { margin-bottom: 0px; margin-bottom: 0rem; } .cb_iconset .cb_icons .iconitem { text-align: center; margin-bottom: 20px; margin-bottom: 2rem; } .cb_iconset .cb_icons .iconitem .image_container { margin-bottom: 15px; margin-bottom: 1.5rem; background-color: white; } .cb_iconset .cb_icons .iconitem .image_container img { margin: 0 auto; transition: transform 0.3s ease; } .cb_iconset .cb_icons .iconitem .image_container .fa { font-size: 60px; font-size: 6rem; color: #333; } .cb_iconset .cb_icons .iconitem .headline { font-family: "zipfer_bold", Arial, sans-serif; font-size: 16px; color: black; } @media (min-width: 992px) { .cb_iconset .cb_icons .iconitem .headline { opacity: 0; transition: opacity 0.3s ease; } } .cb_iconset .cb_icons .iconitem .headline a { font-family: "zipfer_bold", Arial, sans-serif; font-size: 16px; } @media (min-width: 992px) { .cb_iconset .cb_icons .iconitem p { opacity: 0; transition: opacity 0.3s ease; } } .cb_iconset .cb_icons .iconitem .morelink { font-size: 14px; color: #acbac5; } .cb_iconset .cb_icons .iconitem:hover img { transform: scale(1.1); } .cb_iconset .cb_icons .iconitem:hover .headline, .cb_iconset .cb_icons .iconitem:hover p { opacity: 1; } .home .cb_iconset .cb_icons .iconitem { margin-bottom: 0px; margin-bottom: 0rem; } /* ┌─┐┌┐ ┌─┐┬┌─┐┌┬┐┬ ┬┬─┐┌─┐ │ ├┴┐ ├─┘││ │ │ │├┬┘├┤ └─┘└─┘ ┴ ┴└─┘ ┴ └─┘┴└─└─┘ File: _modules/_cb_picture.scss Beschreibung: Styles für Bild-Element Erstellt von: Team sisu Datum: 01.02.2016 */ .cb_picture img { width: 100%; } /* ┌─┐┌┐ ┌┬┐┌─┐┌┐ ┌─┐┬ ┬ ┌─┐ │ ├┴┐ │ ├─┤├┴┐├┤ │ │ ├┤ └─┘└─┘ ┴ ┴ ┴└─┘└─┘┴─┘┴─┘└─┘ File: _modules/_cb_tabelle.scss Beschreibung: CSS für Tabellen Autor: Team sisu Datum: 18.05.2016 */ .cb_tabelle .table-striped > tbody > tr:nth-of-type(odd) { background: none; } .cb_tabelle input { outline: none !important; } .cb_tabelle table, .cb_tabelle td { border: none !important; } .cb_tabelle th { border: none !important; padding: 2px 0px !important; } .cb_tabelle td { padding: 2px 0px !important; font-weight: 400; } .cb_tabelle thead { background: #f8f8f8 !important; color: #333 !important; } .cb_tabelle tr.odd { background: none !important; } .cb_tabelle tr.even { background: none !important; } .cb_tabelle table.table { border: 1px solid #acb9c5 !important; border-right: none !important; } .cb_tabelle .table-bordered > thead > tr > th, .cb_tabelle .table-bordered > tbody > tr > th, .cb_tabelle .table-bordered > tfoot > tr > th, .cb_tabelle .table-bordered > thead > tr > td, .cb_tabelle .table-bordered > tbody > tr > td, .cb_tabelle .table-bordered > tfoot > tr > td { border-bottom: 1px solid #111; padding: 3px 18px 3px 18px !important; border-right: 1px solid #acb9c5 !important; } .cb_tabelle .table-bordered > tbody > tr:first-of-type > td { padding-top: 13px !important; } .cb_tabelle .table-bordered > tbody > tr:last-of-type > td { padding-bottom: 13px !important; } .cb_tabelle table.dataTable thead th, .cb_tabelle table.dataTable thead td { padding: 11px 18px !important; border-bottom: 1px solid #acb9c5 !important; } .cb_tabelle table.dataTable thead .sorting { background-image: none !important; } .cb_tabelle table.dataTable thead .sorting:after { font-family: "FontAwesome", Arial, sans-serif !important; content: '\f0dc' !important; color: #333 !important; float: right; } .cb_tabelle table.dataTable thead .sorting_asc { background-image: none !important; } .cb_tabelle table.dataTable thead .sorting_asc:after { font-family: "FontAwesome", Arial, sans-serif !important; content: '\f0de' !important; color: #333 !important; float: right; } .cb_tabelle table.dataTable thead .sorting_desc { background-image: none !important; } .cb_tabelle table.dataTable thead .sorting_desc:after { font-family: "FontAwesome", Arial, sans-serif !important; content: '\f0dd' !important; color: #333 !important; float: right; } .cb_tabelle table.collapsed tbody td:first-child:before, .cb_tabelle table.collapsed tbody th:first-child:before { font-family: "FontAwesome", Arial, sans-serif !important; content: '\f078' !important; color: #000 !important; border: none !important; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; box-shadow: none !important; background-color: transparent !important; } .cb_tabelle table.collapsed tbody tr.parent > td:first-child:before, .cb_tabelle table.collapsed tbody tr.parent > th:first-child:before { content: '\f077' !important; } .cb_tabelle ul.pagination li { padding: 4px !important; } .cb_tabelle ul.pagination li a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; color: #13205a; outline: none; } .cb_tabelle ul.pagination li a:hover, .cb_tabelle ul.pagination li a:focus { text-decoration: none; } .cb_tabelle ul.pagination li:hover { background: #13205a !important; border: none !important; } .cb_tabelle ul.pagination li:hover a { color: #fff !important; } .cb_tabelle ul.pagination li.active { background: #13205a !important; border: none !important; } .cb_tabelle ul.pagination li.active a { color: #fff !important; } .cb_tabelle ul.pagination li.previous:hover { background: none !important; } .cb_tabelle ul.pagination li.previous:hover a:before { color: #56bae1; } .cb_tabelle ul.pagination li.previous a { line-height: 0; font-size: 0; } .cb_tabelle ul.pagination li.previous a:before { font-family: "FontAwesome", Arial, sans-serif; content: '\f053'; font-size: 16px; font-size: 1.6rem; } .cb_tabelle ul.pagination li.previous a:focus { outline: none; } .cb_tabelle ul.pagination li.next:hover { background: none !important; } .cb_tabelle ul.pagination li.next:hover a:before { color: #56bae1; } .cb_tabelle ul.pagination li.next a { line-height: 0; font-size: 0; } .cb_tabelle ul.pagination li.next a:before { font-family: "FontAwesome", Arial, sans-serif; content: '\f054'; font-size: 16px; font-size: 1.6rem; } .cb_tabelle ul.pagination li.next a:focus { outline: none; } .cb_tabelle ul.pagination li.disabled a { color: #eaeaea; } .cb_tabelle ul.pagination li.disabled:hover a:before { color: #eaeaea; } .fancybox-skin .cb_tabelle th { border: none !important; padding: 10px 0px !important; } .fancybox-skin .cb_tabelle td { padding: 10px 0px !important; font-weight: 400; } @media (max-width: 499px) { #Fan-Tabelle_11415 { overflow: scroll; } } .cb_teaser { text-align: center; } .cb_teaser .image_container { margin-bottom: 15px; margin-bottom: 1.5rem; } .cb_teaser .image_container img { margin: 0 auto; } .cb_teaser .headline { color: #13205a; } @media screen and (max-width: 767px) { .cb_teaser .headline { font-size: 18px; font-size: 1.8rem; } } @media screen and (min-width: 768px) { .cb_teaser .headline { font-size: 22px; font-size: 2.2rem; } } @media screen and (min-width: 992px) { .cb_teaser .headline { font-size: 28px; font-size: 2.8rem; } } .cb_teaser .morelink { font-size: 14px; } .cb_teaser p { font-size: 1.8rem; } .cb_teaser a { text-decoration: none; } .cb_teaser a:hover { text-decoration: none; cursor: pointer; } .cb_sociallinks { margin-top: 30px; display: flex; justify-content: center; } .cb_sociallinks svg { height: 32px; width: 32px; margin: 0 15px; } .cb_sociallinks a:hover svg { transform: scale(1.1); } .cb_bierliste .row { display: flex; flex-wrap: wrap; } .cb_bierliste .beer { display: flex; margin-bottom: 5rem; } @media (max-width: 575px) { .cb_bierliste .beer { flex-direction: column; } } .cb_bierliste .beer .beer-anchor { position: relative; z-index: -1; } @media (min-width: 992px) { .cb_bierliste .beer .beer-anchor { padding-top: 25rem; margin-top: -25rem; } } .cb_bierliste .beer .img-wrapper { text-align: center; } @media (min-width: 576px) { .cb_bierliste .beer .img-wrapper { max-width: 40%; flex-basis: 40%; } } .cb_bierliste .beer .img-wrapper img { transition: transform 0.3s; } .cb_bierliste .beer .img-wrapper a:hover img { transform: scale(0.95); } .cb_bierliste .beer .text { padding-left: 2rem; } @media (min-width: 576px) { .cb_bierliste .beer .text { max-width: 60%; flex-basis: 60%; } } .cb_bierliste .beer .detail-item { border: 0.1rem solid #bc8e2f; border-radius: 0.5rem; display: flex; align-items: center; color: #13205a; text-transform: uppercase; padding: 0.5rem 2rem; max-width: 24rem; } .cb_bierliste .beer .detail-item .icon { width: 2.4rem; text-align: center; } .cb_bierliste .beer .detail-item:first-child { border-bottom: none; } .cb_bierliste .beer .detail-item span { margin: 0 0.5rem 0 1.5rem; } .cb_bierliste .beer .detail-item br { display: none; } .cb_bierliste .beer .js-link-naehrwerte, .cb_bierliste .beer .js-link-zutaten { margin-right: 1rem; } @media (max-width: 575px) { .cb_bierliste .beer .text-btn { line-height: 1; } } .cb_bierliste .beer .popup-naehrwerte .infoBox table td:nth-child(even) { min-width: 14rem; } .cb_bierliste .beer .popup-zutaten, .cb_bierliste .beer .popup-naehrwerte, .cb_bierliste .beer .popup-gebinde { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background-color: rgba(0, 0, 0, 0.5); } .cb_bierliste .beer .popup-zutaten .infoBox, .cb_bierliste .beer .popup-naehrwerte .infoBox, .cb_bierliste .beer .popup-gebinde .infoBox { position: relative; width: 550px; max-width: calc(100% - 30px); top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px 0; padding: 4rem; } @media (max-width: 575px) { .cb_bierliste .beer .popup-zutaten .infoBox, .cb_bierliste .beer .popup-naehrwerte .infoBox, .cb_bierliste .beer .popup-gebinde .infoBox { padding: 3rem 2rem; } } .cb_bierliste .beer .popup-zutaten .close-btn, .cb_bierliste .beer .popup-naehrwerte .close-btn, .cb_bierliste .beer .popup-gebinde .close-btn { position: absolute; top: -23px; right: -23px; width: 46px; height: 46px; background-color: #13205a; border-radius: 100%; text-align: center; line-height: 49px; display: flex; justify-content: center; align-items: center; } @media (max-width: 767px) { .cb_bierliste .beer .popup-zutaten .close-btn, .cb_bierliste .beer .popup-naehrwerte .close-btn, .cb_bierliste .beer .popup-gebinde .close-btn { top: -15px; right: -15px; width: 35px; height: 35px; } } .cb_bierliste .beer .popup-zutaten .close-btn svg, .cb_bierliste .beer .popup-naehrwerte .close-btn svg, .cb_bierliste .beer .popup-gebinde .close-btn svg { fill: #fff; width: 30px; height: 30px; } @media (max-width: 767px) { .cb_bierliste .beer .popup-zutaten .close-btn svg, .cb_bierliste .beer .popup-naehrwerte .close-btn svg, .cb_bierliste .beer .popup-gebinde .close-btn svg { width: 20px; height: 20px; } } .cb_bierliste .beer .popup-zutaten .close-btn:hover, .cb_bierliste .beer .popup-naehrwerte .close-btn:hover, .cb_bierliste .beer .popup-gebinde .close-btn:hover { cursor: pointer; } .cb_bierliste .beer .popup-zutaten .headline, .cb_bierliste .beer .popup-naehrwerte .headline, .cb_bierliste .beer .popup-gebinde .headline { text-transform: uppercase; margin-bottom: 0; } .cb_bierliste .beer .popup-zutaten table, .cb_bierliste .beer .popup-naehrwerte table, .cb_bierliste .beer .popup-gebinde table { width: 100%; } .cb_bierliste .beer .popup-zutaten table tr:nth-of-type(odd), .cb_bierliste .beer .popup-naehrwerte table tr:nth-of-type(odd), .cb_bierliste .beer .popup-gebinde table tr:nth-of-type(odd) { background-color: #f9f9f9; } .cb_bierliste .beer .popup-zutaten table td, .cb_bierliste .beer .popup-naehrwerte table td, .cb_bierliste .beer .popup-gebinde table td { padding: 0.5rem 1rem; } .cb_bierliste .beer .popup-zutaten table td:last-of-type, .cb_bierliste .beer .popup-naehrwerte table td:last-of-type, .cb_bierliste .beer .popup-gebinde table td:last-of-type { text-align: right; } .cb_bierliste .beer .popup-zutaten .additional-info, .cb_bierliste .beer .popup-naehrwerte .additional-info, .cb_bierliste .beer .popup-gebinde .additional-info { margin-top: 2rem; margin-bottom: 0; text-align: center; } .cb_bierliste .beer .popup-zutaten h4, .cb_bierliste .beer .popup-naehrwerte h4, .cb_bierliste .beer .popup-gebinde h4 { margin-top: 2.5rem; } .cb_bierliste .beer .popup-zutaten.active, .cb_bierliste .beer .popup-naehrwerte.active, .cb_bierliste .beer .popup-gebinde.active { display: block; } .cb_bierliste .beer .popup-gebinde .infoBox { width: 750px; } .cb_bierliste .beer .popup-gebinde .gebinde-wrapper { display: flex; flex-wrap: wrap; margin-top: 2rem; justify-content: center; } .cb_bierliste .beer .popup-gebinde .gebinde-wrapper .tray { width: 25%; } .cb_bierliste .beer .popup-gebinde .gebinde-wrapper .tray .image-wrapper { text-align: center; } @media (min-width: 576px) { .cb_bierliste .beer .popup-gebinde .gebinde-wrapper .tray .image-wrapper img { max-width: 14rem; } } .cb_bierliste .beer .popup-gebinde .gebinde-wrapper .tray .text-wrapper { margin-top: 1rem; text-align: center; } @media (max-width: 575px) { .cb_bierliste .beer .popup-gebinde .gebinde-wrapper .tray .text-wrapper { font-size: 1.4rem; } } .cb_bierliste .beer .popup-gebinde .gebinde-wrapper .tray .text-wrapper p { margin-bottom: 0; } @media (max-width: 575px) { .cb_bierliste .beer .popup-gebinde .gebinde-wrapper .tray .text-wrapper p { font-size: 1.4rem; line-height: 1; } } .container-big { max-width: 1900px; margin: 0 auto; } /* ╔╗ ┬┌─┐┬─┐┌─┐┬ ┬┌┬┐┌─┐┬─┐ ╠╩╗│├┤ ├┬┘└─┐│ │ ││├┤ ├┬┘ ╚═╝┴└─┘┴└─└─┘┴─┘┴─┴┘└─┘┴└─ File: _modules/_cb_bierslider.scss Beschreibung: CSS für Bierslider und Lightbox Autor: Matthias Hauß Datum: 05.07.2016 */ .cb_logoslider { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 1rem; } .cb_logoslider .item { flex: 0 0 14%; margin: 1.5rem; box-shadow: 0 0 14px 0px rgba(0, 0, 0, 0.4); } @media (max-width: 991px) { .cb_logoslider .item { flex: 0 0 27%; } } @media (max-width: 767px) { .cb_logoslider .item { flex: 0 0 40%; } } .cb_logoslider .item a { padding: 2rem; height: 100%; display: flex; align-items: center; justify-content: center; object-fit: contain; } .cb_logoslider .item:before { content: ''; float: left; padding-top: 100%; } .cb_masonry.uses-masonry #itemContainer .masonry-item { width: 98%; } @media (min-width: 992px) { .cb_masonry.uses-masonry #itemContainer .masonry-item:nth-child(1) { margin-top: -7rem; } .cb_masonry.uses-masonry #itemContainer .masonry-item:nth-child(2) { margin-top: 3.5rem; } .cb_masonry.uses-masonry #itemContainer .masonry-item:nth-child(3) { margin-top: -3.5rem; } } @media (min-width: 576px) { .cb_masonry.uses-masonry #itemContainer .masonry-item { width: calc(50% - 25px); } } @media (min-width: 768px) { .cb_masonry.uses-masonry #itemContainer .masonry-item { width: calc(33% - 34px); } } .cb_masonry .element { margin-bottom: 2rem; } .cb_masonry .text_wrapper { background: #f9f9f9; padding: 3.5rem 2.5rem 1rem 2.5rem; } .cb_masonry .headline { color: #13205a; font-family: "zipfer_medium", Arial, sans-serif; margin-bottom: 1.5rem; } @media screen and (max-width: 767px) { .cb_masonry .headline { font-size: 18px; font-size: 1.8rem; } } @media screen and (min-width: 768px) { .cb_masonry .headline { font-size: 22px; font-size: 2.2rem; } } @media screen and (min-width: 992px) { .cb_masonry .headline { font-size: 28px; font-size: 2.8rem; } } .cb_masonry .subline { font-family: "zipfer_bold", Arial, sans-serif; } .cb_timeline .timeline-entry .content { display: flex; flex-direction: column; text-align: center; } @media (min-width: 768px) { .cb_timeline .timeline-entry .content { align-items: center; flex-direction: row; text-align: left; } } @media (min-width: 768px) { .cb_timeline .timeline-entry .content .image-wrapper, .cb_timeline .timeline-entry .content .text-wrapper { flex-basis: 50%; } } .cb_timeline .timeline-entry .content .image-wrapper { text-align: center; } @media (min-width: 768px) { .cb_timeline .timeline-entry .content .image-wrapper { padding-top: 3rem; padding-bottom: 3rem; } } .cb_timeline .timeline-entry .content .text-wrapper { margin-top: 2rem; } @media (min-width: 768px) { .cb_timeline .timeline-entry .content .text-wrapper { margin-top: 0; } } .cb_timeline .timeline-entry .content .text-wrapper h3 { margin-bottom: 0.5rem; } .cb_timeline .timeline-entry .year { color: #222; font-size: 2.4rem; font-weight: 600; padding: 1rem; text-align: center; } @media (min-width: 768px) { .cb_timeline .timeline-entry:nth-child(odd) .text-wrapper { padding-left: 5rem; } } @media (min-width: 768px) { .cb_timeline .timeline-entry:nth-child(odd) .image-wrapper { border-right: 1px solid #13205a; padding-right: 3rem; text-align: right; } } @media (min-width: 768px) { .cb_timeline .timeline-entry:nth-child(even) .content { flex-direction: row-reverse; } } @media (min-width: 768px) { .cb_timeline .timeline-entry:nth-child(even) .content .text-wrapper { padding-right: 5rem; text-align: right; } } @media (min-width: 768px) { .cb_timeline .timeline-entry:nth-child(even) .content .image-wrapper { border-left: 1px solid #13205a; padding-left: 3rem; text-align: left; } } .cb_timeline .timeline-entry:last-child .content .image-wrapper { border-left: none; border-right: none; } .cb_timeline .timeline-entry:last-child .year { padding-top: 3rem; text-transform: none; font-size: 2.8rem; } .cb_timeline .timeline-entry:first-child { margin-top: 3rem; } .cb_timeline .timeline-entry:first-child .year-wrapper { align-items: center; display: flex; justify-content: center; } .cb_timeline .timeline-entry:first-child .year-wrapper .year { display: inline-block; text-transform: uppercase; font-size: 3.6rem; } @media (min-width: 768px) { .cb_timeline .timeline-entry:first-child .year-wrapper .year { padding-bottom: 3rem; position: relative; } .cb_timeline .timeline-entry:first-child .year-wrapper .year::after { content: ""; height: 0.1rem; width: 3rem; background-color: #13205a; bottom: 0; left: 0; right: 0; position: absolute; margin: 0 auto; } } .cb_timeline .timeline-entry:first-child .image-wrapper img { padding-top: 3rem; } .cb_timeline .timeline-entry:last-child .year, .cb_timeline .timeline-entry:first-child .year { color: #13205a; font-weight: 600; } .brauereifuehrungen { margin-bottom: 100px; } .brauereifuehrungen h1 { width: 100%; text-align: center; } .brauereifuehrungen ul { text-align: left; display: inline-block; } .brauereifuehrungen ul li { text-align: left !important; } .brauereifuehrungen .fortschrittsbalken { margin-bottom: 80px; margin-top: 40px; } @media (max-width: 767px) { .brauereifuehrungen .fortschrittsbalken { background: #faf5e8; margin: 10px -15px 39px; padding: 17px; } } .brauereifuehrungen .fortschrittsbalken .step { width: 33.33%; float: left; text-align: left; } .brauereifuehrungen .fortschrittsbalken .step span { margin-bottom: 3px; text-transform: uppercase; text-align: center; display: block; font-family: "motiva-sans", Arial, sans-serif; font-weight: bold; } .brauereifuehrungen .fortschrittsbalken .step .fortschritt { height: 6px; background: #faf5e8; } .brauereifuehrungen .fortschrittsbalken .step.active .fortschritt { background: #232877; } @media (max-width: 767px) { .brauereifuehrungen .fortschrittsbalken .step { width: 100%; opacity: 0.5; } .brauereifuehrungen .fortschrittsbalken .step .fortschritt { display: none; } .brauereifuehrungen .fortschrittsbalken .step.active { opacity: 1; } } .brauereifuehrungen ::placeholder { opacity: 0.5; color: #232877; } .brauereifuehrungen .kalender { margin-bottom: 30px; position: relative; margin-top: 50px; } .brauereifuehrungen .kalender .deactivated_message { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 2; padding: 100px; color: white; font-size: 20px; line-height: 2; text-shadow: 0 0 30px black; } @media (max-width: 767px) { .brauereifuehrungen .kalender .deactivated_message { padding: 20px; font-size: 18px; line-height: 1.4; } } .brauereifuehrungen .kalender .head { font-size: 22px; font-weight: bold; color: #232877; margin-bottom: 18px; } .brauereifuehrungen .kalender .head i { font-size: 30px; font-weight: bold; padding: 0 5px; cursor: pointer; } .brauereifuehrungen .kalender .head i.fa-angle-left { font-size: 30px; cursor: pointer; border: 1px solid #232877; border-radius: 50%; width: 50px; height: 50px; padding: 8px 0 0 0; float: left; font-weight: normal; padding-right: 5px; } .brauereifuehrungen .kalender .head i.fa-angle-right { font-size: 30px; cursor: pointer; border: 1px solid #232877; border-radius: 50%; width: 50px; height: 50px; padding: 8px 0 0 0; float: right; font-weight: normal; padding-left: 5px; } .brauereifuehrungen .kalender .head .dropdownstyle { display: inline-block; padding: 4px 5px 4px 12px; position: relative; top: -7px; max-width: 50vw; } .brauereifuehrungen .kalender .head .js-month { cursor: pointer; } .brauereifuehrungen .kalender .head .js-month-dropdown i { font-size: 12px; vertical-align: top; padding-top: 5px; padding-left: 10px; } .brauereifuehrungen .kalender .head .months { display: none; position: absolute; z-index: 2; background: white; border: 1px solid #ebeff1; border-radius: 6px; padding: 11px 15px; font-size: 18px; font-weight: normal; left: 50%; transform: translateX(-50%); margin-top: 10px; box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.3); } .brauereifuehrungen .kalender .head .months.active { display: block; } .brauereifuehrungen .kalender .head .months div { cursor: pointer; font-size: 16px; text-align: left; } .brauereifuehrungen .kalender .head .months .year { pointer-events: none; cursor: initial; font-size: 12px; color: black; line-height: 1; margin-top: 8px; } .brauereifuehrungen .kalender .dates div { width: 12.5%; border-left: 1px solid #fbf1ce; float: left; min-height: 45px; text-align: left; padding: 5px 10px 0; font-size: 13px; font-weight: bold; line-height: 140%; position: relative; } .brauereifuehrungen .kalender .dates div:first-of-type { border: none; } .brauereifuehrungen .kalender .dates div.today { background: #faf5e8; } .brauereifuehrungen .kalender .dates div small { font-size: 10px; position: absolute; display: block; z-index: 1; top: 49px; padding-right: 8px; color: black; font-size: 10px; line-height: 13px; padding-top: 5px; font-weight: normal; } .brauereifuehrungen .kalender .dates div span { font-weight: normal; font-size: 11px; margin-top: -2px; display: block; } @media (max-width: 767px) { .brauereifuehrungen .kalender .dates div { width: 33.3%; } } .brauereifuehrungen .kalender .grid { position: relative; clear: both; } .brauereifuehrungen .kalender .grid .time, .brauereifuehrungen .kalender .grid .day { float: left; width: 12.5%; border-left: 1px solid #fbf1ce; } .brauereifuehrungen .kalender .grid .time:first-of-type, .brauereifuehrungen .kalender .grid .day:first-of-type { border: none; } .brauereifuehrungen .kalender .grid .time div, .brauereifuehrungen .kalender .grid .day div { height: 44px; margin-bottom: 9px; background: #faf5e8; font-size: 23px; font-weight: 300; padding-top: 9px; color: #232877; } @media (max-width: 767px) { .brauereifuehrungen .kalender .grid .time, .brauereifuehrungen .kalender .grid .day { width: 33.3%; } .brauereifuehrungen .kalender .grid .time div, .brauereifuehrungen .kalender .grid .day div { font-size: 17px; } } .brauereifuehrungen .kalender .grid .day { cursor: pointer; position: relative; } .brauereifuehrungen .kalender .grid .day div { font-size: 10px; font-weight: normal; color: black; background: #fff6d7; } .brauereifuehrungen .kalender .grid .day div.blocked { background: #faf5e8 !important; cursor: initial; color: transparent; } .brauereifuehrungen .kalender .grid .buchungen { height: 0 !important; margin: 0 !important; padding: 0 !important; } .brauereifuehrungen .kalender .grid .buchungen div { background: #232877; color: white !important; position: absolute; width: 15%; border-radius: 7px; height: 77px; width: 90%; margin: 11px 5%; top: 0px; font-size: 13px; padding-top: 18px; line-height: 130%; font-weight: bold; font-family: "motiva-sans", Arial, sans-serif; } .brauereifuehrungen .kalender .grid .buchungen div small { font-size: 12px; font-weight: normal; } @media (max-width: 1200px) { .brauereifuehrungen .kalender .grid .buchungen div { font-size: 14px; padding-top: 20px; } } @media (max-width: 991px) { .brauereifuehrungen .kalender .grid .buchungen div { font-size: 11px; padding-top: 25px; } .brauereifuehrungen .kalender .grid .buchungen div small { font-size: 9px; } } .brauereifuehrungen .kalender .grid .buchungen div.reserveGroup { cursor: initial; } .brauereifuehrungen .kalender .grid .buchungen div.single { background: #df291c; } .brauereifuehrungen .kalender .grid .buchungen div.single.active { background: #af2016; cursor: initial; } .brauereifuehrungen .kalender .grid .buchungen div.singlebooked { background: #af2016 !important; cursor: initial; } .brauereifuehrungen .kalender .grid .buchungen div.active { background: #232877; cursor: initial; } .brauereifuehrungen .kalender .grid .load { background: rgba(0, 0, 0, 0.48); position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: white; padding-top: 281px; z-index: 1; } .brauereifuehrungen .buchungsformular .pricebox { text-align: left; } .brauereifuehrungen .buchungsformular .pricebox input, .brauereifuehrungen .buchungsformular .pricebox select { border-radius: 0; background-color: #faf5e8; border: none; margin-top: 17px; padding: 12px 19px; width: 48%; margin: 7px 1%; float: left; line-height: 21px; color: #232877; } .brauereifuehrungen .buchungsformular .pricebox input.gebinput, .brauereifuehrungen .buchungsformular .pricebox select.gebinput { width: 14.667%; } @media (max-width: 767px) { .brauereifuehrungen .buchungsformular .pricebox input, .brauereifuehrungen .buchungsformular .pricebox select { width: 98%; } .brauereifuehrungen .buchungsformular .pricebox input.gebinput, .brauereifuehrungen .buchungsformular .pricebox select.gebinput { width: 31.3%; } } .brauereifuehrungen .buchungsformular .pricebox label { float: left; margin: 10px 1% 0; width: 80%; } @media (max-width: 767px) { .brauereifuehrungen .buchungsformular .pricebox label { width: 100%; } } .brauereifuehrungen .buchungsformular .pricebox h3 { margin: 7px 1%; } .brauereifuehrungen .buchungsformular .pricebox button { width: auto; margin-top: 7px; } @media (max-width: 767px) { .brauereifuehrungen .buchungsformular .pricebox button { margin-top: 0px; margin-bottom: 5px; } } .brauereifuehrungen .buchungsformular .pricebox label.check { position: relative; padding-left: 27px; margin-bottom: 6px; margin-top: 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-weight: normal; } .brauereifuehrungen .buchungsformular .pricebox label.check input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .brauereifuehrungen .buchungsformular .pricebox label.check input:checked ~ span.checkmark:after { background: black !important; display: block; } .brauereifuehrungen .buchungsformular .pricebox label.check .checkmark { position: absolute; top: 2px; left: 0; height: 20px; width: 20px; background-color: #ebeff1; border: 1px solid #acb9c5; } .brauereifuehrungen .buchungsformular .pricebox label.check .checkmark:after { content: ""; position: absolute; display: none; top: 4px; left: 4px; width: 10px; height: 10px; } .brauereifuehrungen .buchungsformular .pricebox label.check.round .checkmark { border-radius: 50%; } .brauereifuehrungen .buchungsformular .pricebox label.check.round .checkmark:after { border-radius: 50%; } .brauereifuehrungen .buchungsformular .pricebox label.check a { font-weight: bold; } .brauereifuehrungen .buchungsformular .pricebox .codeerror { width: 100%; display: block; padding: 0 1%; clear: both; color: red; } .brauereifuehrungen .buchungsformular .pricebox .codesuccess { width: 100%; display: block; padding: 0 1%; clear: both; color: #232877; font-weight: bold; } .brauereifuehrungen .buchungsformular .pricebox .couponload { display: inline-block; vertical-align: top; margin: 19px 11px; font-size: 22px; color: #232877; display: none; } .brauereifuehrungen .buchungsformular .auswahl button { width: auto; float: right; } @media (max-width: 767px) { .brauereifuehrungen .buchungsformular .auswahl button { float: none; margin-top: 11px; } } .brauereifuehrungen .pricebox { border: 1px solid #ebeff1; margin-bottom: 30px; border-radius: 8px; padding: 25px; } .brauereifuehrungen .pricebox h3 { font-size: 25px; font-weight: bold; margin-bottom: 14px; color: #232877; } .brauereifuehrungen .pricebox span { display: block; line-height: 125%; } .brauereifuehrungen .pricebox select { border-radius: 0; background-color: #faf5e8; border: none; margin-top: 17px; padding: 12px 19px; color: #232877; } .brauereifuehrungen .auswahl { background: #faf5e8; border-radius: 7px; text-align: left; padding: 28px; margin-bottom: 50px; } .brauereifuehrungen .auswahl h3 { font-size: 25px; margin-bottom: 12px; } .brauereifuehrungen .auswahl .infos { display: inline-block; } .brauereifuehrungen .auswahl .infos span { display: block; } .brauereifuehrungen .auswahl .infos span.date { font-weight: bold; color: #232877; } .brauereifuehrungen .auswahl .infos .price { margin: 0 0 8px 0; } .brauereifuehrungen .auswahl .infos .price .gesamt { color: #232877; font-weight: bold; } .brauereifuehrungen .auswahl .infos .price .gesamt td { border-top: 1px solid #bfbfbf; } .brauereifuehrungen .auswahl .infos .price td { padding: 0 12px 0 0; } .brauereifuehrungen .auswahl .infos .price td:nth-child(2) { text-align: right; } .brauereifuehrungen .auswahl .infos .price .rabatt { font-weight: bold; } .brauereifuehrungen .auswahl form { float: right; } .brauereifuehrungen .auswahl form button { width: auto; } @media (max-width: 767px) { .brauereifuehrungen .auswahl form { float: none; margin-top: 10px; } } .brauereifuehrungen table.freischalten tr:first-of-type td { font-weight: bold; } .brauereifuehrungen table.freischalten tr td { padding: 8px 10px; } .brauereifuehrungen table.freischalten tr td a i { color: green; padding: 0 8px; font-size: 21px; } .brauereifuehrungen table.freischalten tr td a:last-of-type i { color: red; } .brauereifuehrungen table.freischalten tr:nth-child(2n) td { background: #f3f5f7; } .brauereifuehrungen .notiz { position: absolute; background: white; padding: 30px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); border-radius: 6px; margin-left: 50%; transform: translateX(-50%); top: 200px; display: none; z-index: 500; } .brauereifuehrungen .notiz textarea { width: 100%; margin-bottom: 21px; padding: 4px 8px; height: 100px; } .brauereifuehrungen .notiz .js-cancel { display: inline-block; text-decoration: underline; margin-left: 15px; cursor: pointer; } .brauereifuehrungen .emailborder { width: 650px; border: 1px solid #e9ebe8; padding: 25px; text-align: center; } .brauereifuehrungen .emailborder textarea { border: none; padding: 4px 8px; background: #e3edff; width: 100%; height: 98px; } .brauereifuehrungen .formoptions { border: 1px solid #2a53a1; width: 650px; margin-bottom: 24px; border-radius: 5px; } .brauereifuehrungen .formoptions table { width: 100%; } .brauereifuehrungen .formoptions td { padding: 7px 16px; border-bottom: 1px solid #e9ebe8; } .brauereifuehrungen .formoptions td input { border: none; background: #e3ecff; padding: 6px 8px; width: 100%; } .brauereifuehrungen .formoptions td input[type="checkbox"] { width: auto; margin-right: 4px; } .cb_newsletter { margin-bottom: 3rem; } .cb_newsletter label { font-weight: 400; margin-bottom: 0; font-size: 1.6rem; } .cb_newsletter input[type="text"] { border: 0.1rem solid #ebebeb; background: white; border: none; border-radius: 0.2rem; font-size: 18px; padding: 8px; margin-bottom: 2rem; } .cb_newsletter .dsgvo { display: flex; align-items: flex-start; } .cb_newsletter .dsgvo input { margin-top: 0 !important; margin-right: 0.5rem; } .cb_newsletter .submit { position: relative; } .cb_newsletter .submit .btn { padding-left: 0 !important; padding-right: 0 !important; } .cb_newsletter .submit .btn + span::after { max-width: 69px; content: ""; background-color: #947133; background-image: linear-gradient(90deg, #947133 0%, #f6e8b6 46%, #947133 100%); left: 0; right: 0; bottom: 0; height: 0.3rem; position: absolute; } @media (min-width: 768px) { .cb_newsletter .submit .btn + span::after { max-width: 89px; } } .urtyp_bg { background: #13205a; border-top: 1px solid white; border-bottom: 1px solid white; } .urtyp_bg h1, .urtyp_bg h2, .urtyp_bg p, .urtyp_bg span, .urtyp_bg label, .urtyp_bg a { color: white; } .container.urtyp label { display: block; margin-bottom: 2px; } .container.urtyp input, .container.urtyp select { display: block; width: 100%; max-width: 430px; border: none; margin-bottom: 20px; border-radius: 4px; } .container.urtyp input[type="checkbox"], .container.urtyp select[type="checkbox"] { width: auto; display: inline-block; margin-right: 6px; } .container.urtyp input[type="file"], .container.urtyp select[type="file"] { height: 1px; opacity: 0; margin: 0; } .container.urtyp button { background: white; width: auto; padding: 11px 31px; border-radius: 3px; margin-top: 7px; color: #13205a; margin-right: 9px; vertical-align: top; touch-action: manipulation; font-weight: bold; } .container.urtyp button.js-image-bigger, .container.urtyp button.js-image-smaller { padding: 12px 0px 10px; font-size: 43px; line-height: 16px; width: 38px; text-align: center; font-weight: normal; } .container.urtyp .urtyp_container { margin-bottom: 15px; position: relative; overflow: hidden; touch-action: manipulation; } .container.urtyp .urtyp_container .textcontainer { position: absolute; width: 45%; top: 26%; right: 1%; text-align: center; color: white; transform: rotate(-9deg); font-weight: bold; font-style: italic; font-size: 58px; } @media (max-width: 580px) { .container.urtyp .urtyp_container .textcontainer { top: 24%; } } .container.urtyp .urtyp_container .textcontainer .inner { display: inline-block; position: relative; text-wrap: nowrap; vertical-align: top; } .container.urtyp .urtyp_container .textcontainer .inner.small_txt1 { font-size: 80%; } .container.urtyp .urtyp_container .textcontainer .inner.small_txt2 { font-size: 60%; } .container.urtyp .urtyp_container .textcontainer .inner.small_txt3 { font-size: 50%; } .container.urtyp .urtyp_container .textcontainer .inner.small_txt4 { font-size: 40%; } @media (max-width: 1200px) { .container.urtyp .urtyp_container .textcontainer { font-size: 46px; } } @media (max-width: 991px) { .container.urtyp .urtyp_container .textcontainer { font-size: 53px; } } @media (max-width: 620px) { .container.urtyp .urtyp_container .textcontainer { font-size: 53px; } } @media (max-width: 542px) { .container.urtyp .urtyp_container .textcontainer { font-size: 42px; } } @media (max-width: 440px) { .container.urtyp .urtyp_container .textcontainer { font-size: 30px; } } .container.urtyp .urtyp_container .imagecontainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .container.urtyp .urtyp_container .imagecontainer img { position: absolute; bottom: 0; left: 30%; width: 75%; transform: translate(-50%); max-width: initial; } .container.urtyp .urtyp_container .kontur { position: absolute; bottom: 0; left: 0; width: 59%; z-index: 1; } .container.urtyp .urtyp_container .text { position: absolute; top: 10%; right: 8%; width: 30%; z-index: 1; } .container.urtyp .urtyp_container .logo { position: absolute; bottom: 1px; right: 8%; width: 29%; z-index: 1; } .container.urtyp .urtyp_container .navigation { display: none; background: rgba(255, 255, 255, 0.4); position: absolute; top: 50%; width: 158px; height: 158px; left: 15%; z-index: 1; border-radius: 32px; opacity: 0.5; } .container.urtyp .urtyp_container .navigation:hover { opacity: 1; } .container.urtyp .urtyp_container .navigation button { position: absolute; width: 38px; height: 38px; padding: 10px 0 11px; text-align: center; margin: 0; font-weight: normal; } .container.urtyp .urtyp_container .navigation button.js-image-top { top: 10px; left: 60px; } .container.urtyp .urtyp_container .navigation button.js-image-right { top: 60px; left: 110px; } .container.urtyp .urtyp_container .navigation button.js-image-bottom { top: 110px; left: 60px; } .container.urtyp .urtyp_container .navigation button.js-image-left { top: 60px; left: 10px; } .container.urtyp input[type="text"], .container.urtyp select { padding: 10px 20px; width: 100%; } .container.urtyp ::placeholder { opacity: 0.5; } .container.urtyp .freigabebtn { background: #13205a; padding: 8px 16px; color: white; text-decoration: none; border-radius: 7px; margin-right: 11px; margin-bottom: 40px; display: inline-block; } .container.urtyp .share { margin-right: 22px; margin-top: 14px; display: inline-block; } .container.urtyp .share i { font-size: 34px; } @media (min-width: 768px) { .container.urtyp .share.share_wa { display: none; } } .loading-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(8, 10, 47, 0.5); z-index: 200; backdrop-filter: blur(5px); display: flex; color: white; display: none; } .loading-screen .loading-screen__inner { margin: auto; } .loading-screen .loading-screen__inner * { text-align: center; font-size: 20px; } .loading-screen .loading-screen__inner i { font-size: 40px; margin-bottom: 20px; } /* ┌─┐┬ ┬┌─┐┬ ┬┌─┐ └─┐│ ││ ├─┤├┤ └─┘└─┘└─┘┴ ┴└─┘ File: _modules/suche.scss Beschreibung: CSS Styles für die Suchergebnisseite Autor: Team sisu Datum: 01.02.2016 */ .search .subline { font-size: 16px; font-size: 1.6rem; font-weight: 400; } .search .search-title { font-size: 24px; font-size: 2.4rem; margin-bottom: 10px; margin-bottom: 1rem; } .search .searchform_container { background: #053170; color: white; } @media screen and (max-width: 767px) { .search .searchform_container { margin: 0px; margin-top: 30px; padding: 30px 0px; } } @media screen and (min-width: 768px) { .search .searchform_container { margin: 30px -50% 0px -50%; padding: 30px 0px; } } @media screen and (min-width: 992px) { .search .searchform_container { margin: 30px -50% 0px -50%; padding: 30px 0px; } } .search .searchform_container .container { display: table; } .search .searchform_container .container #searchform { display: table-cell; text-align: center; } .search .searchform_container .container #searchform label { min-width: 100px; text-align: left; } @media screen and (max-width: 767px) { .search .searchform_container .container #searchform label { display: none; } } @media screen and (min-width: 768px) { .search .searchform_container .container #searchform label { display: inline-block; } } @media screen and (min-width: 992px) { .search .searchform_container .container #searchform label { display: inline-block; } } .search .searchform_container .container #searchform input { border: none; background: #efefef; color: #13205a; padding: 12px 20px; padding: 1.2rem 2rem; text-indent: 0px; text-indent: 0rem; font-weight: normal !important; font: "zipfer_regular", Arial, sans-serif; } .search .searchresult_container { background: #024c90; color: white; } @media screen and (max-width: 767px) { .search .searchresult_container { margin: 0px; margin-bottom: 30px; padding: 30px 30px; } } @media screen and (min-width: 768px) { .search .searchresult_container { margin: 0px -50% 30px -50%; padding: 30px 0px; } } @media screen and (min-width: 992px) { .search .searchresult_container { margin: 0px -50% 30px -50%; padding: 30px 0px; } } .search .searchresult_container .container { display: table; } .search .searchresult_container .container .result { display: table-cell; text-align: center; } .search article { border-bottom: solid 1px #eaeaea; margin-bottom: 20px; margin-bottom: 2rem; } .search #search-nav { /*&:before{ font-family: $fontAwesome; content: "\f053\00a0\00a0\00a0"; } */ } .search #search-nav .prev-post:after { display: none; } .search #search-nav .next-post { /* &:after{ font-family: $fontAwesome; content: "\00a0\00a0\00a0\f054"; } */ } /* ┌─┐┬┌┬┐┌─┐┌┐ ┌─┐┬─┐ └─┐│ ││├┤ ├┴┐├─┤├┬┘ └─┘┴─┴┘└─┘└─┘┴ ┴┴└─ File: _modules/_hauptmenu.scss Beschreibung: CSS Styles für das Hauptmenü Autor: Team sisu Datum: 05.02.2016 */ .sidebar .categories { border: 1px solid #000; padding: 20px 20px 10px 20px; padding: 2rem 2rem 1rem 2rem; margin-bottom: 20px; margin-bottom: 2rem; } .sidebar .categories ul { margin: 0; list-style: none; } .sidebar .categories ul li { padding-bottom: 10px; padding-bottom: 1rem; } .sidebar .categories ul li a { color: #000; } .sidebar .categories ul li a.active { text-decoration: underline; } .sidebar .newsletter { border: 1px solid #000; background-color: #e1e6ea; padding: 20px; padding: 2rem; margin-bottom: 20px; margin-bottom: 2rem; margin-top: 46px; margin-top: 4.6rem; position: relative; } .sidebar .newsletter img { position: absolute; top: -35px; right: -15px; } .sidebar .newsletter h4 { font-family: "zipfer_bold", Arial, sans-serif; margin: 0; } .sidebar .newsletter span { font-style: italic; font-family: "zipfer_bold", Arial, sans-serif; } .sidebar .newsletter form { margin-top: 10px; margin-top: 1rem; } .sidebar .newsletter form input { border: 1px solid #000; padding: 10px; padding: 1rem; max-width: 170px; max-width: 17rem; float: left; } .sidebar .newsletter form input[type="submit"] { background: white; border-left: none; } .sidebar .newsletter form input[type="submit"]:hover { background: #d4dce1; } .sidebar .banner { background-color: #e1e6ea; border: 1px solid #000; padding: 20px; padding: 2rem; margin-bottom: 20px; margin-bottom: 2rem; text-align: center; } .sidebar .banner .title { font-size: 50px; font-size: 5rem; line-height: 50px; line-height: 5rem; font-family: "zipfer_bold", Arial, sans-serif; } .sidebar .banner .text { padding: 6px 0px 17px 0px; padding: 0.6rem 0rem 1.7rem 0rem; font-size: 20px; font-size: 2rem; } .sidebar .banner .btn { background: #fff; } .sidebar .banner .btn:hover { background: #d4dce1; } .sidebar .service { background-color: #e1e6ea; border: 1px solid #000; padding: 20px; padding: 2rem; margin-bottom: 20px; margin-bottom: 2rem; } .sidebar .service .links { border-top: 1px solid #000; border-bottom: 1px solid #000; margin-bottom: 20px; margin-bottom: 2rem; } .sidebar .service .links ul { margin: 10px 0px; margin: 1rem 0rem; list-style: none; } .sidebar .service .links ul li { padding: 2px 0px; padding: 0.2rem 0rem; } .sidebar .service .links ul li a { color: #000; } .sidebar .service .phone .tel { font-size: 45px; font-size: 4.5rem; float: left; } .sidebar .service .phone .number { padding-top: 12px; padding-top: 1.2rem; padding-left: 12px; padding-left: 1.2rem; float: left; } .sidebar .service .phone .number a { font-family: "zipfer_bold", Arial, sans-serif; font-size: 16px; font-size: 1.6rem; color: #000; } /* ╔═╗┬ ┬┌─┐┌─┐┌┬┐┌─┐┌┐┌┬ ┬ ╚═╗├─┤│ │├─┘│││├┤ ││││ │ ╚═╝┴ ┴└─┘┴ ┴ ┴└─┘┘└┘└─┘ File: _modules/shopmenu.scss Beschreibung: CSS Styles für das Shopmenü Autor: Matthias Hauß Datum: 19.07.2016 */ .shop_header { background-color: #f8f8f8; border-bottom: 1px solid #ebebeb; } .shop_header .shop_menu { float: left; } .shop_header .shop_menu ul { list-style: none; margin: 0; } .shop_header .shop_menu ul li { float: left; padding: 0px 16px; position: relative; } @media (max-width: 991px) { .shop_header .shop_menu ul li { padding: 0px 11px; } } @media (max-width: 767px) { .shop_header .shop_menu ul li { position: initial; } } .shop_header .shop_menu ul li a { padding: 22px 2px 12px 2px; padding: 2.2rem 0.2rem 1.2rem 0.2rem; border-bottom: 3px solid transparent; display: inline-block; color: #13205a; font-family: "zipfer_medium", Arial, sans-serif; font-size: 18px; text-transform: uppercase; } .shop_header .shop_menu ul li a.active { border-bottom: 3px solid #13205a; } .shop_header .shop_menu ul li a:hover { text-decoration: none; border-bottom: 3px solid #13205a; } @media (max-width: 991px) { .shop_header .shop_menu ul li a { font-size: 15px; } } @media (max-width: 767px) { .shop_header .shop_menu ul li a { font-size: 14px; padding: 12px 2px 2px 2px; padding: 1.2rem 0.2rem 0.2rem 0.2rem; } } .shop_header .shop_menu ul li ul { position: absolute; width: 300px; z-index: 1; background-color: #f8f8f8; border: 1px solid #ebebeb; padding: 20px 25px; display: none; } @media (max-width: 767px) { .shop_header .shop_menu ul li ul { left: 0px; width: 100%; } } .shop_header .shop_menu ul li ul li { display: block; padding: 0px; width: 100%; } .shop_header .shop_menu ul li ul li a { font-size: 14px; color: #666; padding: 1px 0px; line-height: 140%; border: none; } .shop_header .shop_menu ul li ul li a:hover { text-decoration: underline; border: none; } .shop_header .shop_menu ul li:hover ul { display: none; } .shop_header .shop_search_cart { margin-top: 12px; margin-top: 1.2rem; float: right; } @media (max-width: 767px) { .shop_header .shop_search_cart { margin-top: 10px; width: 100%; } } .shop_header .shop_search_cart .shop_search { float: left; position: relative; color: #13205a; font-family: "zipfer_regular", Arial, sans-serif; font-weight: 400; } @media (max-width: 767px) { .shop_header .shop_search_cart .shop_search { width: 100%; width: calc(100% - 130px); } } .shop_header .shop_search_cart .shop_search label { display: none; } .shop_header .shop_search_cart .shop_search input { padding: 10px 40px 10px 15px; padding: 1rem 4rem 1rem 1.5rem; border: 1px solid #ebebeb; outline: 0; border-radius: 0px; } @media (max-width: 767px) { .shop_header .shop_search_cart .shop_search input { width: 100%; padding-right: 36px; margin-bottom: 12px; } } .shop_header .shop_search_cart .shop_search button[type="submit"] { width: auto; background: none; border: none; position: absolute; right: 0px; top: 0px; font-size: 18px; padding: 9px 12px; border-left: 1px solid #ebebeb; outline: 0; } .shop_header .shop_search_cart .shop_search .fa-search { color: #666; } .shop_header .shop_search_cart .shop_search ::-webkit-input-placeholder { color: #a3a7ab; } .shop_header .shop_search_cart .shop_search :-moz-placeholder { color: #a3a7ab; } .shop_header .shop_search_cart .shop_search ::-moz-placeholder { color: #a3a7ab; } .shop_header .shop_search_cart .shop_search :-ms-input-placeholder { color: #a3a7ab; } .shop_header .shop_search_cart .shop_cart { margin-left: 10px; margin-left: 1rem; float: right; } @media (max-width: 767px) { .shop_header .shop_search_cart .shop_cart { max-width: 130px; } } .shop_header .shop_search_cart .shop_cart .cart_wrapper { height: 49px; height: 4.9rem; } .shop_header .shop_search_cart .shop_cart .cart_wrapper .cart_button { background: #fff; } .shop_header .shop_search_cart .shop_cart .cart_wrapper .cart_button span { float: left; background: #13205a; color: #fff; padding: 10px 11px 11px 11px; padding: 1rem 1.1rem 1.1rem 1.1rem; font-size: 18px; font-size: 1.8rem; } .shop_header .shop_search_cart .shop_cart .cart_wrapper .cart_button .price { float: left; padding: 9px 10px 0px 10px; padding: 0.9rem 1rem 0rem 1rem; } .shop_header .shop_search_cart .shop_cart .cart_wrapper .cart_button .price span { background: none; color: #000; padding: 0; margin: 0; font-size: 15px; font-size: 1.5rem; font-weight: normal; font-family: "zipfer_medium", Arial, sans-serif; } .shop_header .shop_search_cart .shop_cart .cart_wrapper .togglecart { width: 300px; background: white; display: none; z-index: 1; right: 0; position: absolute; padding: 20px 20px 20px 20px; padding: 2rem 2rem 2rem 2rem; border: 1px solid #d4dce1; margin-top: 11px; margin-top: 1.1rem; color: #2c373f; font-weight: 400; top: 50px; } .shop_header .shop_search_cart .shop_cart .cart_wrapper .togglecart a { color: #2c373f; font-weight: normal; } .shop_header .shop_search_cart .shop_cart .cart_wrapper .togglecart h3 { text-align: center; color: #13205a; text-transform: none; } @media screen and (max-width: 767px) { .shop_header .shop_search_cart .shop_cart .cart_wrapper .togglecart h3 { font-size: 22px; font-size: 2.2rem; } } @media screen and (min-width: 768px) { .shop_header .shop_search_cart .shop_cart .cart_wrapper .togglecart h3 { font-size: 24px; font-size: 2.4rem; } } @media screen and (min-width: 992px) { .shop_header .shop_search_cart .shop_cart .cart_wrapper .togglecart h3 { font-size: 28px; font-size: 2.8rem; } } .shop_header .shop_search_cart .shop_cart .cart_wrapper .togglecart .mini_cart_item img { display: none; } .shop_header .shop_search_cart .shop_cart .cart_wrapper .togglecart:hover { display: block; } .shop_header .shop_search_cart .shop_cart .cart_wrapper .togglecart .empty { padding-left: 0; } .shop_header .shop_search_cart .shop_cart .cart_wrapper .togglecart .buttons { margin-bottom: 0; } .shop_header .shop_search_cart .shop_cart .cart_wrapper .togglecart .buttons .button { background: white; border: 1px solid #13205a; color: #13205a; font-family: "zipfer_medium", Arial, sans-serif; } .shop_header .shop_search_cart .shop_cart .cart_wrapper .togglecart .buttons .button.checkout { background: #13205a; color: white; } @media (min-width: 768px) { .shop_header .shop_search_cart .shop_cart .cart_wrapper:hover .togglecart { display: block; } } @media (max-width: 767px) { .shop_header .shop_search_cart .shop_cart .cart_wrapper.open .togglecart { display: block; } } .woocommerce-checkout #payment { background: #f8f8f8 !important; } .woocommerce-checkout .shop_cart, .woocommerce-cart .shop_cart { display: none; } /* ╔═╗┬─┐┌─┐┌┬┐┬ ┬┌─┐┌┬┐┌─┐ ╠═╝├┬┘│ │ │││ ││ │ └─┐ ╩ ┴└─└─┘─┴┘└─┘└─┘ ┴ └─┘ File: _modules/products.scss Beschreibung: CSS Styles für Products Autor: Matthias Hauß Datum: 19.07.16 */ #wrapper .product-content .page-title { float: left; } #wrapper .product-content select.orderby { padding: 10px; padding: 1rem; border: 1px solid #d4dce1; } @media (max-width: 767px) { #wrapper .product-content select.orderby { width: 100%; } } #wrapper ul.products { margin: 0; list-style: none; } #wrapper ul.products li.product { margin: 0 3.5% 3rem 0; width: 48.2%; border: 1px solid #d4dce1; padding: 0; float: left; position: relative; clear: none; } #wrapper ul.products li.product .image_container { width: 53%; float: left; } #wrapper ul.products li.product .image_container img { margin-bottom: 0px; width: 100%; padding: 10px; } #wrapper ul.products li.product .text_container { width: 47%; float: left; padding: 20px 15px; border-left: 1px solid #d4dce1; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,efefef+100 */ background: #fff; /* Old browsers */ background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#efefef',GradientType=0); /* IE6-9 */ } #wrapper ul.products li.product .text_container h3 { color: #13205a; padding: 0px 0px 5px 0px; font-size: 15px; font-size: 1.5rem; font-family: "zipfer_medium", Arial, sans-serif; margin: 0px; line-height: 100%; } #wrapper ul.products li.product .text_container .smalldesc { font-size: 12px; color: #666; line-height: 100%; margin-top: 4px; } #wrapper ul.products li.product .text_container p.price, #wrapper ul.products li.product .text_container p.price span, #wrapper ul.products li.product .text_container span.price { color: #13205a; font-size: 25px; line-height: 100%; margin-top: 20px; margin-bottom: 15px; font-family: "zipfer_medium", Arial, sans-serif; letter-spacing: -1px; } #wrapper ul.products li.product .text_container p.price small, #wrapper ul.products li.product .text_container p.price span small, #wrapper ul.products li.product .text_container span.price small { font-size: 13px; color: #666; display: block; font-family: "zipfer_bold", Arial, sans-serif; letter-spacing: 0px; } #wrapper ul.products li.product .text_container del { display: block; } #wrapper ul.products li.product .text_container del span { font-size: 18px !important; text-decoration: line-through; } #wrapper ul.products li.product .text_container .btn { font-size: 12px; color: #13205a; padding: 3px 11px; float: left; text-align: left; text-transform: none; position: relative; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,efefef+100 */ background: #fff; /* Old browsers */ background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#efefef',GradientType=0); /* IE6-9 */ border: 1px solid #ccc; width: 100px; } #wrapper ul.products li.product .text_container .btn .buttonarrow { position: absolute; right: 7px; top: 8px; width: 9px; height: 14px; } #wrapper ul.products li.product .text_container .button { display: none; } @media (max-width: 991px) { #wrapper ul.products li.product { width: 100%; margin-right: 0px; } #wrapper ul.products li.product .image_container { width: 42%; } #wrapper ul.products li.product .text_container { width: 58%; } } @media (max-width: 767px) { #wrapper ul.products li.product { width: 100%; margin-right: 0px; } #wrapper ul.products li.product .image_container { width: 47%; } #wrapper ul.products li.product .text_container { width: 53%; } } #wrapper ul.products li.product.last { margin-right: 0; } #wrapper ul.products li.product a:hover { text-decoration: none; } #wrapper .bestellinfos a { color: #13205a; font-size: 16px; padding: 0px 8px; } #wrapper .bestellinfos a:hover { text-decoration: underline; } #wrapper .shop_single_container { /*.master-slider { .ms-view { border: 1px solid $color_shop_grey; .woocommerce-main-image { border: none; display: block; } } .ms-thumb-list { margin-top: 2px !important; .ms-thumb-frame { .ms-thumb { width: 90px !important; height: auto !important; border: 1px solid $color_shop_grey; } } .ms-thumbs-cont { margin-left: -4px; } } }*/ } #wrapper .shop_single_container .images { width: 40%; float: left; } @media (max-width: 767px) { #wrapper .shop_single_container .images { width: 100%; } } #wrapper .shop_single_container .images .woocommerce-main-image { border: 1px solid #e1e6ea; display: block; } #wrapper .shop_single_container .summary { width: 57%; float: right; } @media (max-width: 767px) { #wrapper .shop_single_container .summary { width: 100%; } } #wrapper .shop_single_container .summary .shortdesc p { font-size: 16px; line-height: 22px; color: #13205a; margin-bottom: 10px; } #wrapper .shop_single_container .summary .shortdesc { padding-bottom: 1px; border-bottom: 1px solid #d4dce1; margin-bottom: 20px; } #wrapper .shop_single_container .summary .price, #wrapper .shop_single_container .summary .price span { color: #13205a; font-size: 25px; line-height: 100%; margin-bottom: 10px; letter-spacing: -1px; } #wrapper .shop_single_container .summary .price small, #wrapper .shop_single_container .summary .price span small { font-size: 13px; color: #666; letter-spacing: 0px; } #wrapper .shop_single_container .summary del { display: block; } #wrapper .shop_single_container .summary del span { font-size: 18px !important; text-decoration: line-through; } #wrapper .shop_single_container .summary .stock { display: inline-block; padding: 2px 10px; padding: 0.2rem 1rem; color: #fff; float: right; margin-top: -6px; } #wrapper .shop_single_container .summary .stock.in-stock { background-color: #00b22d; } #wrapper .shop_single_container .summary .stock.out-of-stock { background-color: red; color: #fff; } #wrapper .shop_single_container .summary .quantity input { padding: 10px; padding: 1rem; border: 1px solid #d4dce1; margin-right: 9px; } #wrapper .shop_single_container .summary .cart button { font-size: 13px; font-weight: normal; font-family: "zipfer_bold", Arial, sans-serif; color: #13205a; padding: 13px 11px; border-radius: 0px; outline: 0; float: left; text-align: left; text-transform: none; position: relative; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,efefef+100 */ background: #fff; /* Old browsers */ background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#efefef',GradientType=0); /* IE6-9 */ border: 1px solid #ccc; width: 160px; } #wrapper .shop_single_container .summary .cart button .buttonarrow { position: absolute; right: 9px; top: 12px; width: 9px; height: 14px; } #wrapper .shop_single_container .summary .variations_form table.variations { margin-bottom: 5px; float: left; } #wrapper .shop_single_container .summary .variations_form .label { display: none; } #wrapper .shop_single_container .summary .variations_form select { padding: 9px; padding: 0.9rem; border: 1px solid #d4dce1; max-width: 250px; min-width: 0px; font-weight: 400; margin-bottom: 10px; } #wrapper .shop_single_container .summary .variations_form .woocommerce-variation-price { margin-bottom: 20px; margin-bottom: 2rem; } #wrapper .shop_single_container .summary .variations_form .woocommerce-variation-description { font-weight: 400; } #wrapper .shop_single_container .summary .shareproduct > div { float: left; border-right: 1px solid #000; padding-right: 15px; padding-right: 1.5rem; margin-right: 15px; margin-right: 1.5rem; } #wrapper .shop_single_container .summary .shareproduct > div a { color: #000; font-family: "zipfer_regular", Arial, sans-serif; } #wrapper .shop_single_container .summary .shareproduct .socialmedia { border: none; padding: 0; margin: 0; } #wrapper .shop_single_container .summary .shareproduct .socialmedia #share_icons { margin: 0; } #wrapper .shop_single_container .summary .shareproduct .socialmedia #share_icons .shariff-button { border: none; margin: 0; } #wrapper .shop_single_container .summary .shareproduct .socialmedia #share_icons .shariff-button a { height: 20px; } #wrapper .shop_single_container .summary .shareproduct .socialmedia #share_icons .shariff-button a span { font-size: 15px; line-height: 15px; } #wrapper .shop_single_container .summary .shareproduct .socialmedia #share_icons .shariff-button a .share_text { display: none; } #wrapper .shop_single_container .woocommerce-variation-availability .stock { float: none; margin-top: -10px; } #wrapper .related_products { padding-top: 10px; padding-top: 1rem; margin-bottom: 10px; margin-bottom: 1rem; } #wrapper .related_products ul.products li.product { width: 31%; margin-right: 3%; } #wrapper .related_products ul.products li.product:nth-child(3) { margin-right: 0%; } @media (max-width: 767px) { #wrapper .related_products ul.products li.product { width: 100%; margin-right: 0px; } } #wrapper .woocommerce-pagination { margin: 0px 0px 30px 0px; margin: 0rem 0rem 3rem 0rem; } #wrapper .woocommerce-pagination ul { border: none; } #wrapper .woocommerce-pagination ul li { border: 1px solid #000; margin: 0px 2px; margin: 0rem 0.2rem; } #wrapper .woocommerce-pagination ul li span, #wrapper .woocommerce-pagination ul li a { color: #000; } #wrapper .startshop .categories { margin-top: 40px; margin-top: 4rem; } #wrapper .startshop .categories a .category { border: 1px solid #000; padding: 20px; padding: 2rem; text-align: center; margin-bottom: 20px; margin-bottom: 2rem; } #wrapper .startshop .categories a .category .name { color: #000; font-family: "zipfer_bold", Arial, sans-serif; font-size: 18px; font-size: 1.8rem; } #wrapper .startshop .categories a:hover { text-decoration: none; } #wrapper .startshop .saleproducts { margin-top: 20px; margin-top: 2rem; } #wrapper .startshop .saleproducts h1 { text-align: center; padding: 60px 0px 30px 0px; } #wrapper .woocommerce-message { border-top-color: #13205a; font-weight: 400; } #wrapper .woocommerce-message:before { color: #13205a; } @media (max-width: 767px) { #wrapper .woocommerce-message .button { float: none; display: block; text-align: center; } } .woocommerce span.onsale { background: #13205a !important; } /* ╦ ╦┌─┐┬─┐┌─┐┌┐┌┬┌─┌─┐┬─┐┌┐ ╦╔═┌─┐┌─┐┌─┐┌─┐ ║║║├─┤├┬┘├┤ │││├┴┐│ │├┬┘├┴┐ ╠╩╗├─┤└─┐└─┐├┤ ╚╩╝┴ ┴┴└─└─┘┘└┘┴ ┴└─┘┴└─└─┘ ╩ ╩┴ ┴└─┘└─┘└─┘ File: _modules/warenkorb_kasse.scss Beschreibung: CSS Styles für den Warenkorb und die Kasse Autor: Matthias Hauß Datum: 25.07.2016 */ #wrapper .shop_table.cart { border-radius: 0; border: 1px solid #d4dce1; } #wrapper .shop_table.cart thead { background: #f8f8f8; } #wrapper .shop_table.cart thead th.product-thumbnail { width: 90px; width: 9rem; } #wrapper .shop_table.cart thead th.product-remove { width: 50px; width: 5rem; } #wrapper .shop_table.cart tbody tr td { border-top: 1px solid #d4dce1; padding: 10px 10px; padding: 1rem 1rem; font-weight: normal; } #wrapper .shop_table.cart tbody tr td.product-thumbnail img { width: 68px; width: 6.8rem; border: 1px solid #d4dce1; } #wrapper .shop_table.cart tbody tr td.product-name a { color: #13205a; font-size: 22px; font-size: 2.2rem; font-family: "zipfer_regular", Arial, sans-serif; font-weight: 300; } #wrapper .shop_table.cart tbody tr td.product-subtotal { font-size: 19px; color: #13205a; letter-spacing: -1px; } #wrapper .shop_table.cart tbody tr td.product-quantity input { padding: 10px; padding: 1rem; border: 1px solid #d4dce1; } #wrapper .shop_table.cart tbody tr td.actions { padding: 40px; padding: 4rem; } @media (max-width: 767px) { #wrapper .shop_table.cart tbody tr td.actions { padding: 10px; } } #wrapper .shop_table.cart tbody tr td.actions .coupon { width: 50%; } @media (max-width: 991px) { #wrapper .shop_table.cart tbody tr td.actions .coupon { width: 100%; } } #wrapper .shop_table.cart tbody tr td.actions .coupon #coupon_code { width: 100%; max-width: 250px; max-width: 25rem; padding: 13px 20px 14px; padding: 1.3rem 2rem 1.4rem; border: 1px solid #d4dce1; font-family: "zipfer_regular", Arial, sans-serif; color: #13205a; background: #f8f8f8; margin-right: 12px; margin-bottom: 10px; } #wrapper .shop_table.cart tbody tr td.actions .coupon .button { float: left; } @media (max-width: 767px) { #wrapper .shop_table.cart tbody tr td.actions .coupon .button { width: auto; padding: 9px 13px; margin-top: 5px; } } #wrapper .shop_table.cart tbody tr td.actions .button { padding: 17px 20px 13px; padding: 1.7rem 2rem 1.3rem; border: 1px solid #13205a; font-family: "zipfer_bold", Arial, sans-serif; text-transform: uppercase; color: #13205a; background: white; border-radius: 0px; font-weight: normal; } @media (max-width: 767px) { #wrapper .shop_table.cart tbody tr td.actions .button { padding: 9px 3px; font-size: 14px; } } @media (max-width: 991px) { #wrapper .cart_totals { width: 100%; } } #wrapper .cart_totals table { border: 1px solid #d4dce1; padding: 30px; padding: 3rem; border-radius: 0; background: #f8f8f8; } @media (max-width: 767px) { #wrapper .cart_totals table { padding: 6px; } } #wrapper .cart_totals table tbody tr th { border: none; } #wrapper .cart_totals table tbody tr td { border: none; text-align: right; font-weight: 400; } #wrapper .cart_totals table tbody tr.order-total th, #wrapper .cart_totals table tbody tr.order-total td { border-top: 1px solid #d4dce1; } #wrapper .cart_totals .checkout-button { background: #13205a; color: white; display: inline-block; float: right; padding: 12px 17px; font-weight: normal; border-radius: 0px; } #wrapper .cart-collaterals .cart-banner { margin-top: 55px; margin-top: 5.5rem; float: left; width: 51%; } @media (max-width: 991px) { #wrapper .cart-collaterals .cart-banner { width: 100%; } } @media (max-width: 767px) { #wrapper .cart-collaterals .cart-banner { display: none; } } #wrapper .cart-collaterals .cart-banner .banner { background: none; float: left; width: 100%; text-align: center; padding: 20px; font-size: 23px; font-size: 2.3rem; line-height: 120%; font-family: "zipfer_regular", Arial, sans-serif; font-weight: 400; } @media (max-width: 1200px) { #wrapper .cart-collaterals .cart-banner .banner .text { font-size: 20px; } #wrapper .cart-collaterals .cart-banner .banner .text a { font-size: 17px; } } #wrapper .cart-collaterals .cart-banner .banner a { font-size: 20px; font-size: 2rem; color: #000; font-weight: bold; } #wrapper .cart-collaterals .cart-banner .banner .tel { font-size: 62px; font-size: 6.2rem; padding: 20px 0px 34px 0px; padding: 2rem 0rem 3.4rem 0rem; } #wrapper .cart-collaterals .cart-banner .banner img { margin-bottom: 10px; margin-bottom: 1rem; } @media (max-width: 991px) { #wrapper .cart-collaterals .cart-banner .banner { margin: 0px; width: 100%; margin-bottom: 20px; } } @media (max-width: 767px) { #wrapper .cart-collaterals .cart-banner .banner { width: 100%; margin-bottom: 20px; } } #wrapper .woocommerce-checkout textarea { width: 100%; padding: 13px 20px 14px; padding: 1.3rem 2rem 1.4rem; border: 1px solid #d4dce1; font-family: "zipfer_regular", Arial, sans-serif; color: black; background: #f8f8f8; margin-right: 12px; height: 150px; } #wrapper .woocommerce-checkout h3 { font-family: "zipfer_medium", Arial, sans-serif; font-size: 22px; color: #13205a; } #wrapper .woocommerce-checkout .woocommerce-billing-fields, #wrapper .woocommerce-checkout .woocommerce-shipping-fields { margin-bottom: 20px; } #wrapper .woocommerce-checkout .woocommerce-billing-fields ::-webkit-input-placeholder, #wrapper .woocommerce-checkout .woocommerce-shipping-fields ::-webkit-input-placeholder { color: #999; font-weight: 300; } #wrapper .woocommerce-checkout .woocommerce-billing-fields :-moz-placeholder, #wrapper .woocommerce-checkout .woocommerce-shipping-fields :-moz-placeholder { color: #999; font-weight: 300; } #wrapper .woocommerce-checkout .woocommerce-billing-fields ::-moz-placeholder, #wrapper .woocommerce-checkout .woocommerce-shipping-fields ::-moz-placeholder { color: #999; font-weight: 300; } #wrapper .woocommerce-checkout .woocommerce-billing-fields :-ms-input-placeholder, #wrapper .woocommerce-checkout .woocommerce-shipping-fields :-ms-input-placeholder { color: #999; font-weight: 300; } #wrapper .woocommerce-checkout .woocommerce-billing-fields input, #wrapper .woocommerce-checkout .woocommerce-shipping-fields input { width: 100%; padding: 13px 20px 14px; padding: 1.3rem 2rem 1.4rem; border: 1px solid #d4dce1; font-family: "zipfer_regular", Arial, sans-serif; color: black; background: #f8f8f8; margin-right: 12px; } #wrapper .woocommerce-checkout .woocommerce-billing-fields .select2-chosen, #wrapper .woocommerce-checkout .woocommerce-shipping-fields .select2-chosen { width: 100%; padding: 7px 20px 7px; padding: 0.7rem 2rem 0.7rem; border: 1px solid #d4dce1; font-family: "zipfer_regular", Arial, sans-serif; color: black; background: #f8f8f8; margin-right: 12px; } #wrapper .woocommerce-checkout .woocommerce-billing-fields a.select2-choice, #wrapper .woocommerce-checkout .woocommerce-shipping-fields a.select2-choice { padding: 0px; border: none; } #wrapper .woocommerce-checkout .woocommerce-billing-fields #ship-to-different-address label, #wrapper .woocommerce-checkout .woocommerce-shipping-fields #ship-to-different-address label { float: right; } #wrapper .woocommerce-checkout .woocommerce-billing-fields #ship-to-different-address #ship-to-different-address-checkbox, #wrapper .woocommerce-checkout .woocommerce-shipping-fields #ship-to-different-address #ship-to-different-address-checkbox { width: auto; float: left; margin-top: 16px; } #wrapper .woocommerce-checkout .shop_table { font-weight: 400; } #wrapper .woocommerce-checkout .shop_table thead { background: #f8f8f8; } #wrapper .woocommerce-checkout #place_order { background: #13205a; color: white; display: inline-block; float: right; font-weight: normal; font-family: "zipfer_medium", Arial, sans-serif; padding: 11px 15px 9px; } @media (max-width: 340px) { #wrapper .woocommerce-checkout #place_order { font-size: 14px; } } #wrapper .woocommerce-checkout #place_order:hover { opacity: 0.9; } #wrapper form.checkout_coupon { margin-top: 0px; border: none; padding: 0px; } #wrapper form.checkout_coupon #coupon_code { width: 100%; max-width: 250px; padding: 13px 20px 14px; border: 1px solid #acb9c5; font-family: "zipfer_regular", Arial, sans-serif; color: #0352a1; background: #f8f8f8; margin-right: 12px; margin-bottom: 10px; } #wrapper form.checkout_coupon .button { padding: 17px 20px 13px; border: 1px solid #0352a1; font-family: "zipfer_regular", Arial, sans-serif; text-transform: uppercase; color: #0352a1; background: white; border-radius: 0px; } #wrapper form.checkout_coupon p.form-row { width: auto; float: left; } #wrapper .woocommerce-thankyou-order-details { font-weight: 400; } #wrapper .woocommerce-thankyou-order-details li { margin-bottom: 10px; } #wrapper .shop_table, #wrapper address { font-weight: 400; } #wrapper #payment .terms label.checkbox { font-size: 15px; font-weight: normal; font-family: zipfer_medium; } #wrapper .input-checkbox { margin: 7px 8px 0 0; } #wrapper .woocommerce-terms-and-conditions-checkbox-text { padding-left: 20px; } #wrapper .woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th { font-weight: normal !important; font-family: "zipfer_bold", Arial, sans-serif; } #wrapper .woocommerce ul#shipping_method .amount { font-weight: normal; } /* ╔╗ ┬┌─┐┬─┐┌─┐┬ ┬┌┬┐┌─┐┬─┐ ╠╩╗│├┤ ├┬┘└─┐│ │ ││├┤ ├┬┘ ╚═╝┴└─┘┴└─└─┘┴─┘┴─┴┘└─┘┴└─ File: _modules/_cb_bierslider.scss Beschreibung: CSS für Bierslider und Lightbox Autor: Matthias Hauß Datum: 05.07.2016 */ .biersliderwrapper { background: #053170; /* Old browsers */ background: -moz-linear-gradient(left, rgba(5, 49, 112, 1) 0%, rgba(0, 104, 178, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(5, 49, 112, 1) 0%, rgba(0, 104, 178, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(5, 49, 112, 1) 0%, rgba(0, 104, 178, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ opacity: 0; } .biersliderwrapper .panther { background: url('../images/panther.png') no-repeat top 25px center; } .cb_bierslider { position: relative; } .cb_bierslider .item { text-align: center; } .cb_bierslider .item .image_container { display: inline-block; } .cb_bierslider .item .image_container img { width: auto; margin: 0 auto; } .cb_bierslider .item .title { text-align: center; color: white; font-size: 15px; font-family: "zipfer_regular", Arial, sans-serif; font-family: "zipfer_bold", Arial, sans-serif; } .cb_bierslider .beer-link { display: block; } .cb_bierslider .beer-link img { transform: scale(0.8); transition: transform 0.3s; } .cb_bierslider .beer-link:hover img { transform: scale(1); } .cb_bierslider .owl-item.center .beer-link img { transform: scale(1); } .cb_bierslider .owl-stage-outer { position: relative; z-index: 100; } .cb_bierslider .owl-carousel .owl-controls { position: absolute; top: 45%; width: 100%; z-index: 99; } .cb_bierslider .owl-carousel .owl-controls .owl-nav .owl-prev, .cb_bierslider .owl-carousel .owl-controls .owl-nav .owl-next { background-repeat: no-repeat; width: 37px; width: 3.7rem; height: 62px; height: 6.2rem; font-size: 0; background-position: center center; } .cb_bierslider .owl-carousel .owl-controls .owl-nav .owl-prev { float: left; background-image: url('../images/slide_left.png'); margin-left: -40px; } .cb_bierslider .owl-carousel .owl-controls .owl-nav .owl-next { float: right; background-image: url('../images/slide_right.png'); margin-right: -40px; } /* ┌─┐┬┌┬┐┌─┐┌┐ ┌─┐┬─┐ └─┐│ ││├┤ ├┴┐├─┤├┬┘ └─┘┴─┴┘└─┘└─┘┴ ┴┴└─ File: _modules/_hauptmenu.scss Beschreibung: CSS Styles für das Hauptmenü Autor: Team sisu Datum: 05.02.2016 */ .slider-home-site { z-index: 0; } .slider-home-site .item { min-height: 45vw; } @media (max-width: 991px) { .slider-home-site .item { min-height: 55vw; } } .slider-home-site .inner.radialbg { background: #6b87b6; background: radial-gradient(circle, rgba(107, 135, 182, 1) 0%, rgba(13, 22, 62, 1) 100%); } .slider-home-site .inner .left { background-repeat: no-repeat; background-size: cover; background-position: center; min-height: 37vw; } @media (max-width: 991px) { .slider-home-site .inner .left { min-height: 47vw; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .slider-home-site .inner .left { height: 74rem; } } .slider-home-site .inner img { width: 100%; } @media (max-width: 767px) { .slider-home-site .inner { padding-bottom: 5rem; } } .slider-home-site .owl-dot-clone { position: absolute; bottom: 0; right: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 1.5rem 2rem; } .slider-home-site .owl-dot-clone .owl-dot { width: 60px; height: 5px; background-color: rgba(255, 255, 255, 0.5); display: inline-block; margin-right: 1rem; } .slider-home-site .owl-dot-clone .owl-dot.active { background-color: #fff; } .slider-home-site .owl-dot-clone .owl-dot:last-of-type { margin-right: 0; } .slider-home-site .owl-nav { display: none; } @media (min-width: 768px) { .slider-home-site .owl-nav { display: block; } } .slider-home-site .owl-nav i { color: white; font-size: 4rem; } .slider-home-site .owl-nav .owl-prev, .slider-home-site .owl-nav .owl-next { position: absolute; top: 40%; } .slider-home-site .owl-nav .owl-prev { left: 3rem; } .slider-home-site .owl-nav .owl-next { right: 3rem; } /* cpt_biere File: _cpt/_biere.scss Beschreibung: CSS Styles für News Übersicht und News Detailseite Autor: Team sisu Datum: 01.02.2016 */ .sortimentbier { border: 1px solid #d4dce1; padding-top: 50px; padding-bottom: 34px; margin-bottom: 30px; } @media (max-width: 991px) { .sortimentbier { padding-top: 0px; } } @media (max-width: 767px) { .sortimentbier { border: none; border-bottom: 1px solid #d4dce1; text-align: center; } } .sortimentbier .bild { width: 46%; float: left; } .sortimentbier .bild .image_container { box-sizing: border-box; padding: 80% 50%; background-size: contain; background-position: center center; background-repeat: no-repeat; } @media (max-width: 991px) { .sortimentbier .bild { width: 34%; } } @media (max-width: 767px) { .sortimentbier .bild { width: 100%; } } .sortimentbier .text { float: right; width: 54%; } .sortimentbier .text .title { font-family: "zipfer_regular", Arial, sans-serif; color: white; background: #13205a; font-size: 30px; padding: 16px 26px; line-height: 110%; } .sortimentbier .text .subline { color: #d4dce1; font-size: 14px; text-transform: uppercase; margin: 20px 0px; } .sortimentbier .text .beschreibung { padding-right: 55px; } @media (max-width: 767px) { .sortimentbier .text .beschreibung { padding-right: 0px; margin-top: 20px; } } @media (max-width: 991px) { .sortimentbier .text { width: 66%; } } @media (max-width: 767px) { .sortimentbier .text { width: 100%; } .sortimentbier .text .title { font-size: 25px; } .sortimentbier .text .subline { margin: 5px 0px; } } .sortimentbier .infos { margin-top: 15px; position: relative; } .sortimentbier .infos .naehrwerte { width: 46%; float: left; height: 1px; } .sortimentbier .infos .naehrwerte .btn { font-size: 15px; padding: 7px 20px; position: absolute; bottom: 0px; left: 30px; } @media (max-width: 767px) { .sortimentbier .infos .naehrwerte { width: 100%; } .sortimentbier .infos .naehrwerte .btn { position: relative; left: 0px; } } .sortimentbier .infos .stammwurze { display: inline-block; margin-right: 40px; } @media (max-width: 767px) { .sortimentbier .infos .stammwurze { width: 50%; float: right; margin: 0; margin-top: 67px; } } .sortimentbier .infos .alkohol { display: inline-block; } @media (max-width: 767px) { .sortimentbier .infos .alkohol { width: 50%; float: left; margin-top: 67px; } } .sortimentbier .infos .value { font-family: "zipfer_regular", Arial, sans-serif; font-size: 25px; color: #13205a; margin-top: 12px; margin-bottom: 6px; } .sortimentbier .infos .label { text-transform: uppercase; font-size: 12px; color: #d4dce1; } @media (min-width: 992px) { .sortimentbier.first .bild .image_container { padding: 39% 50%; } .sortimentbier.first .text .title { max-width: 390px; } .sortimentbier.first .beschreibung { padding-right: 140px; } .sortimentbier.first .infos .naehrwerte { width: 31%; } .sortimentbier.first .infos .naehrwerte .btn { left: 0px; } .sortimentbier.first .infos .stammwurze { margin-right: 60px; } } .news_entry { background: transparent; margin-bottom: 6rem; } @media (max-width: 767px) { .news_entry { margin: 0 1.5rem 4rem; } } .news_entry a { text-decoration: none; } .news_entry a:hover .image_container img { transform: scale(1.1); } .news_entry a:hover .btn { opacity: 1; } .news_entry .image_container { margin-bottom: 0rem; } @media (min-width: 992px) { .news_entry .image_container { overflow: hidden; } } .news_entry .image_container img { height: auto; width: 100%; opacity: 1; transition: transform 0.3s ease-in; } .news_entry .text_container { padding: 1.5rem 0 0; } .news_entry .text_container .date, .news_entry .text_container .category { display: none; color: #13205a; } .news_entry .text_container .date { border-right: 0.1rem solid #13205a; padding-right: 0.5rem; margin-right: 0.5rem; } .news_entry .text_container h3 { line-height: 105%; margin-top: 1.5rem; margin-bottom: 2rem; font-size: 2rem; background-color: transparent; color: #13205a; } .news_entry .text_container p { margin-bottom: 1rem; color: black; } .news_entry .btn { opacity: 0; } @media (max-width: 767px) { .news_entry .btn { opacity: 1; } } main.news-page h1 { margin-bottom: 1rem; } main.news-page.uses-masonry #itemContainer .masonry-item { width: 98%; } @media (min-width: 992px) { main.news-page.uses-masonry #itemContainer .masonry-item:nth-child(1) { margin-top: -7rem; } main.news-page.uses-masonry #itemContainer .masonry-item:nth-child(2) { margin-top: 3.5rem; } main.news-page.uses-masonry #itemContainer .masonry-item:nth-child(3) { margin-top: -3.5rem; } } @media (min-width: 576px) { main.news-page.uses-masonry #itemContainer .masonry-item { width: calc(50% - 25px); } } @media (min-width: 768px) { main.news-page.uses-masonry #itemContainer .masonry-item { width: calc(33% - 34px); } } main.news-page #itemContainer .inner { display: flex; } @media (max-width: 767px) { main.news-page #itemContainer .inner { display: block; } } main.news-page .news_entry.sidebar .text_container { padding: 0rem 2.5rem 2rem 1.5rem; } main.news-page .news_entry.sidebar .text_container h3 { margin: 0; border: none; } main.news-page .news_entry.sidebar .text_container h3 a { font-size: 1.8rem; } main.news-page .news_entry.sidebar .image_container .news-image-sidebar { padding: 34% 50%; box-sizing: border-box; background-size: cover; background-position: center center; overflow: hidden; } main.news-page .moreItemsWrapper { margin: 0 0 6rem; text-align: center; } main.news-page .moreItemsWrapper #moreItems { border: none; } main.news-page .small-category-sidebar { background: white; box-shadow: 0 0 0 40 black; padding: 2rem; margin-bottom: 8rem; } main.news-page .small-category-sidebar .category-list { justify-content: center; display: flex; list-style-type: none; margin: 0; flex-wrap: wrap; } @media (max-width: 575px) { main.news-page .small-category-sidebar .category-list { align-items: center; } } main.news-page .small-category-sidebar .category-list li { background: none; margin-bottom: 0.5rem; margin-left: 7px; margin-right: 7px; } main.news-page .small-category-sidebar .category-list li a { padding: 5px 15px; position: relative; border-radius: 4px; border: 1px solid transparent; text-decoration: none; } main.news-page .small-category-sidebar .category-list li a:hover { border: 1px solid #947133; text-decoration: none; } main.news-page .small-category-sidebar .category-list li.active a { border: 1px solid #947133; } .single-getraenk .content-header { background-repeat: no-repeat; background-size: cover; padding: 8rem 0; position: relative; } @media screen and (max-width: 767px) { .single-getraenk .content-header { margin-bottom: 80px; margin-bottom: 8rem; } } @media screen and (min-width: 768px) { .single-getraenk .content-header { margin-bottom: 90px; margin-bottom: 9rem; } } @media screen and (min-width: 992px) { .single-getraenk .content-header { margin-bottom: 100px; margin-bottom: 10rem; } } .single-getraenk .content-header .content-header-inner { display: flex; flex-wrap: wrap; justify-content: flex-end; } .single-getraenk .content-header .content-header-inner .image { width: 100%; } .single-getraenk .content-header .content-header-inner .image img { max-height: 300px; } @media (max-width: 575px) { .single-getraenk .content-header .content-header-inner .image { background-image: none !important; } } @media (min-width: 576px) { .single-getraenk .content-header .content-header-inner .image { position: absolute; bottom: -10rem; right: 52%; background-repeat: no-repeat; background-size: contain; background-position: right; width: 50%; height: 100%; min-height: 200px; } .single-getraenk .content-header .content-header-inner .image img { display: none; } } .single-getraenk .content-header .content-header-inner h1 { background-image: url('../images/zipfer_unterstreichung_white.svg'); background-size: 100% 9%; margin-left: -3rem; padding-left: 3rem; margin-bottom: 0.8em; } .single-getraenk .content-header .content-header-inner .text { width: 100%; } @media (min-width: 576px) { .single-getraenk .content-header .content-header-inner .text { width: 50%; } } .single-getraenk .content-header .content-header-inner .btn { font-size: 2.1rem; } .single-getraenk .content-header, .single-getraenk .content-header * { color: #fff; } .single-getraenk .content-header h1 { width: 100%; } .single-getraenk .content-header p { font-size: 1.8rem; } .single-getraenk .content-header .details { display: flex; text-align: center; margin-bottom: 3rem; } .single-getraenk .content-header .detail-item { font-size: 1.8rem; } .single-getraenk .content-header .detail-item:first-of-type { padding-right: 3.5rem; border-right: 1px solid #fff; } .single-getraenk .content-header .detail-item:last-of-type { padding-left: 3.5rem; } .single-getraenk .content-header .detail-item .value { line-height: 1; } @media screen and (max-width: 767px) { .single-getraenk .content-header .detail-item .value { font-size: 22px; font-size: 2.2rem; } } @media screen and (min-width: 768px) { .single-getraenk .content-header .detail-item .value { font-size: 28px; font-size: 2.8rem; } } @media screen and (min-width: 992px) { .single-getraenk .content-header .detail-item .value { font-size: 36px; font-size: 3.6rem; } } .single-getraenk .popup-zutaten, .single-getraenk .popup-naehrwerte { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background-color: rgba(0, 0, 0, 0.5); } .single-getraenk .popup-zutaten .infoBox, .single-getraenk .popup-naehrwerte .infoBox { position: relative; width: 550px; max-width: calc(100% - 30px); top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-shadow: #000 0 0 10px 0; padding: 4rem; } @media (max-width: 575px) { .single-getraenk .popup-zutaten .infoBox, .single-getraenk .popup-naehrwerte .infoBox { padding: 3rem 2rem; } } .single-getraenk .popup-zutaten .close-btn, .single-getraenk .popup-naehrwerte .close-btn { position: absolute; top: -23px; right: -23px; width: 46px; height: 46px; background-color: #13205a; border-radius: 100%; text-align: center; line-height: 49px; display: flex; justify-content: center; align-items: center; } @media (max-width: 767px) { .single-getraenk .popup-zutaten .close-btn, .single-getraenk .popup-naehrwerte .close-btn { top: -15px; right: -15px; width: 35px; height: 35px; } } .single-getraenk .popup-zutaten .close-btn svg, .single-getraenk .popup-naehrwerte .close-btn svg { fill: #fff; width: 30px; height: 30px; } @media (max-width: 767px) { .single-getraenk .popup-zutaten .close-btn svg, .single-getraenk .popup-naehrwerte .close-btn svg { width: 20px; height: 20px; } } .single-getraenk .popup-zutaten .close-btn:hover, .single-getraenk .popup-naehrwerte .close-btn:hover { cursor: pointer; } .single-getraenk .popup-zutaten .headline, .single-getraenk .popup-naehrwerte .headline { text-transform: uppercase; margin-bottom: 0; } .single-getraenk .popup-zutaten table, .single-getraenk .popup-naehrwerte table { width: 100%; } .single-getraenk .popup-zutaten table tr:nth-of-type(odd), .single-getraenk .popup-naehrwerte table tr:nth-of-type(odd) { background-color: #f9f9f9; } .single-getraenk .popup-zutaten table td, .single-getraenk .popup-naehrwerte table td { padding: 0.5rem 1rem; } .single-getraenk .popup-zutaten table td:last-of-type, .single-getraenk .popup-naehrwerte table td:last-of-type { text-align: right; } .single-getraenk .popup-zutaten .additional-info, .single-getraenk .popup-naehrwerte .additional-info { margin-top: 2rem; margin-bottom: 0; text-align: center; } .single-getraenk .popup-zutaten h4, .single-getraenk .popup-naehrwerte h4 { margin-top: 2.5rem; } .single-getraenk .popup-zutaten.active, .single-getraenk .popup-naehrwerte.active { display: block; } .newsletter-popup { background: #ebebeb; max-width: 80%; padding: 2rem; position: fixed; right: 3vw; bottom: 3rem; transition: transform 0.3s; z-index: 5; transform: translateX(150%); } @media (min-width: 768px) { .newsletter-popup { max-width: 36rem; padding: 3rem; } } .newsletter-popup.visible { transform: translateX(0); } .newsletter-popup .headline { font-size: 2.2rem; font-weight: 700; line-height: 1.1; margin-bottom: 0.5rem; text-transform: uppercase; color: #000; } @media (min-width: 768px) { .newsletter-popup .headline { font-size: 2.5rem; } } .newsletter-popup .text { font-size: 1.5rem; line-height: 1.1; } @media (min-width: 768px) { .newsletter-popup .text { font-size: 1.8rem; } } .newsletter-popup .close-btn { position: absolute; right: 1rem; top: 1rem; cursor: pointer; } .newsletter-popup .close-btn svg { fill: #000; height: 2rem; width: 2rem; } .newsletter-popup .close-text { cursor: pointer; font-size: 1.4rem; text-decoration: underline; } @media (min-width: 768px) { .newsletter-popup .close-text { font-size: 1.6rem; } } .newsletter-popup .close-text:hover { text-decoration: none; } .newsletter-popup .cb_newsletter { margin-bottom: 0; } .newsletter-popup .cb_newsletter label { font-size: 1.4rem; line-height: 1.2; } .kampagnen-popup { background: #f9f9f9; max-width: 80%; padding: 3rem; position: fixed; right: 0; bottom: 5rem; transform: translateX(100%); transition: transform 0.3s; z-index: 5; } @media (min-width: 768px) { .kampagnen-popup { max-width: 55rem; padding: 4rem; } } .kampagnen-popup.show { transform: translateX(0); } .kampagnen-popup .headline { font-size: 2.2rem; font-weight: 700; line-height: 1.1; margin-bottom: 0.5rem; text-transform: uppercase; color: #000; } @media (min-width: 768px) { .kampagnen-popup .headline { font-size: 2.5rem; } } .kampagnen-popup .text { font-size: 1.5rem; line-height: 1.1; } @media (min-width: 768px) { .kampagnen-popup .text { font-size: 1.8rem; } } .kampagnen-popup .sib-form { padding: 0; font-family: "zipfer_regular", Arial, sans-serif !important; margin: 1rem 0 0; } .kampagnen-popup .sib-form #sib-container { background-color: transparent !important; padding: 0 !important; } .kampagnen-popup .sib-form .sib-form-block { padding: 0; } .kampagnen-popup .sib-form .sib-input label { margin-bottom: 0; font-weight: 300; } .kampagnen-popup .sib-form .sib-input label::after { color: #000; } .kampagnen-popup .sib-form .sib-input input { height: 3.8rem; } .kampagnen-popup .sib-form .sib-optin label { display: flex; } .kampagnen-popup .sib-form .sib-optin label .checkbox { margin-top: 2px; } .kampagnen-popup .sib-form .sib-optin label input { display: none; width: 0; height: 0; } .kampagnen-popup .sib-form .sib-optin label .entry__label_optin { display: none; } .kampagnen-popup .sib-form .entry__choice { font-family: "zipfer_regular", Arial, sans-serif !important; text-indent: 0; padding-left: 0; } .kampagnen-popup .sib-form .entry__choice p { line-height: 1.1 !important; font-size: 1.5rem; display: block; } .kampagnen-popup .close-btn { align-items: center; background: #947133; cursor: pointer; display: flex; flex-direction: column; height: 3rem; justify-content: center; left: -3rem; position: absolute; top: 3rem; width: 3rem; } .kampagnen-popup .close-btn svg { fill: white; height: 2rem; width: 2rem; } .kampagnen-popup .close-text { cursor: pointer; font-size: 1.4rem; text-decoration: underline; } @media (min-width: 768px) { .kampagnen-popup .close-text { font-size: 1.6rem; } } .kampagnen-popup .close-text:hover { text-decoration: none; } .loginplugin { /*.btn{ &.button{ display: inline-block; @include rem('border-radius',0); @include rem('width', 15); border: 1px solid $form_color_1; background: $color_white; color: $form_color_1; font-family: $button_font; @include rem('font-size', 1.4); box-shadow: none !important; &:hover{ background-color:$grey_dark; color: $color_white; } } }*/ } .loginplugin label { width: 100%; } .loginplugin input { border-radius: 0px; border-radius: 0rem; border: 1px solid #d4dce1; background: #efefef; color: #13205a; width: 100% !important; padding: 5px 10px; padding: 0.5rem 1rem; text-indent: 0px; text-indent: 0rem; font-weight: normal !important; } .loginplugin input[type="submit"] { border-radius: 40px; border-radius: 4rem; font-family: Arial, sans-serif; font-size: 14px; font-size: 1.4rem; background: transparent; text-shadow: none; text-transform: uppercase; padding: 7px 15px; padding: 0.7rem 1.5rem; border: 1px solid #13205a; color: #13205a; display: inline-block; background-color: transparent; text-align: center; -webkit-transition: all 0.3s ease-in; /*safari and chrome */ -moz-transition: all 0.3s ease-in; /* firefox */ -o-transition: all 0.3s ease-in; /* opera */ } .loginplugin input[type="submit"]:hover { background-color: #333; color: #fff; text-decoration: none; } .loginplugin input[type="checkbox"] { width: 20px !important; /* &:before{ font-size: 12px; font-family: $fontAwesome; content: '\f096'; } &:checked{ &:before{ font-size: 12px; font-family: $fontAwesome; content: '\f046'; } } */ } .loginplugin .signup-submit input { max-width: 200px; } .loginplugin .login-submit input { max-width: 200px; } .loginplugin .lostpassword-submit input { max-width: 250px; } .loginplugin .resetpass-submit input { max-width: 200px; } /* ┌─┐┌─┐┌─┐┌┬┐┌─┐┬─┐ ├┤ │ ││ │ │ ├┤ ├┬┘ └ └─┘└─┘ ┴ └─┘┴└─ File: _modules/_footer.scss Bechreibung: Styles für den Footer Autor: Team sisu Datum: 25.02.2016 */ #footer { background-color: #13205a; color: white; padding: 3rem 0; } #footer a { color: white; } #footer ul { list-style-type: none; margin-left: 0; } #footer .bauunion-title, #footer .highlighted { font-weight: 700; margin-bottom: 2rem; } #footer .socialmedia { display: flex; margin-bottom: 3rem; } #footer .socialmedia svg { fill: white; height: 2.5rem; margin-right: 2rem; width: 2.5rem; } #footer .zipfer-contact { line-height: 1.5; text-align: right; } #footer .zipfer-contact p { line-height: 1.5; } #footer .zipfer-contact .menu { display: flex; flex-direction: column; justify-content: flex-end; } #footer .zipfer-contact .menu li { margin-left: 2rem; } #footer .zipfer-contact .menu li:first-child { margin-left: 0; } #footer .footer-logo { margin: 0 0 3rem -1rem; } #footer .last-row { display: flex; flex-direction: column-reverse; } @media (min-width: 500px) { #footer .last-row { flex-direction: row; justify-content: space-between; } } #footer .last-row .footerright { margin-bottom: 1rem; } @media (min-width: 500px) { #footer .last-row .footerright { margin-bottom: 0; } } #footer .last-row a { margin-left: 2rem; } #footer .last-row a:first-child { margin-left: 0; } /* ┌─┐┌─┐┌┐┌┌┬┐┬─┐┌─┐┌─┐┌┬┐ │ │ ││││ │ ├┬┘├─┤└─┐ │ └─┘└─┘┘└┘ ┴ ┴└─┴ ┴└─┘ ┴ File: _base/contast.scss Beschreibung: Alle Styles für kontrastreiche Seite Autor: Team sisu Datum: 16.02.2016 */ body.kontrast { -webkit-transition: color 0.3s ease-in; -moz-transition: color 0.3s ease-in; -ms-transition: color 0.3s ease-in; -o-transition: color 0.3s ease-in; transition: color 0.3s ease-in; background: #000; color: #fff; /* LINKS */ /* CTA BUTTON IM HEADER */ /* Top Menu für Barrierefreiheit */ /* Hauptmenü */ /* Buttons */ /* NEWS TEMPLATE */ /* cb_textelement */ /* cb_block_start */ /* SUCHESEITE */ /* Social Buttons */ /* COOKIE HINWEIS */ } body.kontrast a { color: #ff0; -webkit-transition: color 0.3s ease-in; -moz-transition: color 0.3s ease-in; -ms-transition: color 0.3s ease-in; -o-transition: color 0.3s ease-in; transition: color 0.3s ease-in; text-decoration: none; cursor: pointer; font-weight: normal; outline: none; } body.kontrast a:hover { text-decoration: underline; color: #0ff; } body.kontrast a:active { color: #0ff; } body.kontrast a:focus { color: #0ff; } body.kontrast .header_cta a { border: solid 1px #000 !important; color: #000 !important; background: #fff !important; } body.kontrast .header_cta a:hover { text-decoration: none; background: #000 !important; color: #fff !important; } body.kontrast .header_cta a:active { background: #000 !important; color: #fff !important; } body.kontrast .header_cta a:focus { background: #000 !important; color: #fff !important; } body.kontrast .accessibilityMenu { color: #000; } @media screen and (max-width: 767px) { body.kontrast #hauptmenu ul.sub-menu { background-color: #000; } } @media screen and (min-width: 768px) { body.kontrast #hauptmenu ul.sub-menu { background-color: #000; } } @media screen and (min-width: 992px) { body.kontrast #hauptmenu ul.sub-menu { background-color: #fff; } } @media screen and (max-width: 767px) { body.kontrast #hauptmenu ul.sub-menu li a:hover { color: #000; } } @media screen and (min-width: 768px) { body.kontrast #hauptmenu ul.sub-menu li a:hover { color: #000; } } @media screen and (min-width: 992px) { body.kontrast #hauptmenu ul.sub-menu li a:hover { color: #fff; background-color: #000; } } body.kontrast .btn { background: #fff !important; /* Überschreibe Styles aus dem Backend */ border-color: #fff !important; /* Überschreibe Styles aus dem Backend */ color: #000 !important; /* Pfeil im Button */ /* &:after { font-family: $fontAwesome; content: "\00a0\00a0\00a0\f054"; }*/ } body.kontrast .btn.white { color: #fff !important; /* Überschreibe Styles aus dem Backend */ border-color: #fff !important; /* Überschreibe Styles aus dem Backend */ } body.kontrast .btn.white:hover, body.kontrast .btn.white:active, body.kontrast .btn.white:focus { text-decoration: underline; } body.kontrast .btn:hover { background-color: #000 !important; /* Überschreibe Styles aus dem Backend */ color: #fff !important; /* Überschreibe Styles aus dem Backend */ border-color: #fff !important; /* Überschreibe Styles aus dem Backend */ text-decoration: none; } body.kontrast .btn:active { box-shadow: none; } body.kontrast .news_entry { background: #fff; color: #000; } body.kontrast .news_entry h3 { color: #000; } body.kontrast .news_entry h3 a { color: #000; } body.kontrast .cb_textelement .box_background, body.kontrast .cb_zitatelement .box_background { padding: 0px !important; /* Überschreibe Styles aus dem Backend */ background: none !important; /* Überschreibe Styles aus dem Backend */ } body.kontrast .cb_textelement .box_background .textelement_content, body.kontrast .cb_zitatelement .box_background .textelement_content { color: #fff; } body.kontrast .cb_textelement .box_background .textelement_content h1, body.kontrast .cb_zitatelement .box_background .textelement_content h1, body.kontrast .cb_textelement .box_background .textelement_content .subline, body.kontrast .cb_zitatelement .box_background .textelement_content .subline, body.kontrast .cb_textelement .box_background .textelement_content .entry-text, body.kontrast .cb_zitatelement .box_background .textelement_content .entry-text { color: #fff !important; /* Überschreibe Styles aus dem Backend */ } body.kontrast .cb_block_start .full_width { padding: 0px !important; /* Überschreibe Styles aus dem Backend */ background: none !important; /* Überschreibe Styles aus dem Backend */ } body.kontrast .searchform_container { background: #fff; color: #000; } body.kontrast .searchform_container .container #searchform input { border: solid 1px #000; color: #000; background: #fff; } body.kontrast .searchresult_container { background: #fff; border-top: solid 1px #000; color: #000; } body.kontrast #share_icons ul li a { color: #fff !important; } body.kontrast #cookiesWarning #cookiesWarningActive { background: #fff; color: #000; } body.kontrast #footer { background-color: #000; color: #fff; } body.kontrast #footer ul.footer-nav li a { color: #ff0; } body.kontrast #footer ul.footer-nav li a:hover { color: #0ff; } body.kontrast #footer ul.footer-nav li a:active { color: #0ff; } body.kontrast #footer ul.footer-nav li a:focus { color: #0ff; } body.graustufen { filter: grayscale(100%) !important; -webkit-filter: grayscale(100%) !important; -webkit-filter: grayscale(1) !important; -moz-filter: grayscale(100%) !important; -ms-filter: grayscale(100%) !important; -o-filter: grayscale(100%) !important; filter: url("data:image/svg+xml;utf8,#grayscale") !important; filter: gray !important; } .header-image { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); margin-top: -70px; margin-bottom: 60px; display: flex; background: #13205a; border-top: 1px solid white; } .header-image .inner { margin: auto; position: relative; } .header-image img { max-width: 900px; padding-top: 60px; margin: auto; } @media (max-width: 767px) { .header-image img { max-width: 100%; margin-left: -10%; } } @media (max-width: 767px) { .header-image { margin-top: -30px; } } .header-image a { position: absolute; background: red; top: 81%; left: 59%; padding: 10px 40px; color: white; text-decoration: none; font-weight: bold; border-radius: 6px; text-align: center; animation: pulse 1.5s infinite; } @media (max-width: 991px) { .header-image a { top: 84%; left: 23%; padding: 19px 40px; width: 64%; } } @media (max-width: 767px) { .header-image a { left: 13%; } } @media (max-width: 440px) { .header-image a { padding: 14px 40px; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .kampagnen-wrapper { color: white; } .kampagnen-wrapper p { color: white; } .kampagnen-wrapper table { width: 100%; } .kampagnen-wrapper table td { min-width: 60px; padding-bottom: 30px; } .kampagnen-wrapper table img { height: 60px; width: auto; } .kampagnen-wrapper .bg_white { background: white; color: #131f5a; padding: 7px 22px; border-radius: 6px; } .kampagnen-wrapper .bg_white:after { display: none; } .show-mobile { display: none !important; } @media (max-width: 991px) { .show-mobile { display: block !important; } } .show-desktop { display: block !important; } @media (max-width: 991px) { .show-desktop { display: none !important; } } .page-id-9994 p { max-width: 500px; margin: 0 auto 20px; } .page-id-10399 #wrapper section { background: #13205a; color: white; } .page-id-10399 #wrapper .container.cb { margin-top: 0; } .page-id-10399 #wrapper .container.cb .cb_picture { padding: 0; margin-left: 50%; position: relative; } .page-id-10399 #wrapper .container.cb .cb_picture img { width: 100vw; position: relative; transform: translateX(-50%); max-width: none; border-bottom: 4px solid white; } .page-id-10399 #wrapper .container.cb h1, .page-id-10399 #wrapper .container.cb h2, .page-id-10399 #wrapper .container.cb h3, .page-id-10399 #wrapper .container.cb h4 { color: white; } .page-id-10399 #wrapper .container.cb h1 { font-size: 42px; } .page-id-10399 #wrapper .container.cb p { font-size: 22px; line-height: 1.1; font-weight: bold; } .page-id-10399 #wrapper .container.cb p strong { font-size: 26px; } .page-id-10399 #wrapper .container.cb form label { font-weight: bold !important; font-size: 19px !important; } .page-id-10399 #wrapper .container.cb form label a { color: white; font-weight: bold !important; } .page-id-10399 #wrapper .container.cb form .gfield_error label { color: #f58c8c; } .page-id-10399 #wrapper .container.cb form input { background: white; border-radius: 11px; font-size: 20px !important; color: black; padding: 13px 17px 10px; } @media (max-width: 767px) { .page-id-10399 #wrapper .container.cb form input { font-size: 16px !important; color: black; padding: 9px 13px 6px; } } .page-id-10399 #wrapper .container.cb form .gfield_description { margin: 0; padding: 0; } .page-id-10399 #wrapper .container.cb form .gform_footer button { background: #6f1e1c; background: linear-gradient(90deg, rgba(150, 36, 34, 1) 0%, rgba(238, 72, 47, 1) 50%, rgba(150, 36, 34, 1) 100%); color: #f8f5dd; font-weight: bold; font-size: 26px; padding: 12px 40px 11px; border-radius: 7px; transition: all ease-out 0.2s; } .page-id-10399 #wrapper .container.cb form .gform_footer button:after { display: none; } .page-id-10399 #wrapper .container.cb form .gform_footer button:hover { background: linear-gradient(90deg, #831d1c 0%, #d23a23 50%, #7b1a18 100%); } .page-id-10399 #wrapper .container.cb .gform_validation_errors, .page-id-10399 #wrapper .container.cb .gfield_validation_message { background: rgba(255, 249, 249, 0.4) !important; border: none !important; color: white; font-weight: bold; border-radius: 9px; padding: 11px 17px; margin-bottom: 20px; } .instantview { background: #d7d7d7; min-height: 410px; margin: 10px 0 0px; overflow: hidden; border-radius: 13px; cursor: pointer; display: flex; } .instantview span { margin: auto; color: black; font-weight: bold; font-size: 20px; } #field_19_12 label { display: none; } #field_19_12 input { opacity: 0; height: 1px; margin: 0; padding: 0 !important; }