/* compiled by scssphp v0.6.2 on Mon, 29 Sep 2025 10:47:44 +0200 (0.2101s) */ /* ┌┬┐┌─┐┌─┐┌┬┐ ┌─┐┬┌─┐┬ ┬ ┌─┐┌┬┐┌┐ ┬ ┬ │ ├┤ ├─┤│││ └─┐│└─┐│ │ │ ┬│││├┴┐├─┤ ┴ └─┘┴ ┴┴ ┴ └─┘┴└─┘└─┘ └─┘┴ ┴└─┘┴ ┴ */ /* ┌┬┐┬─┐ ┬┬┌┐┌┌─┐ ││││┌┴┬┘││││└─┐ ┴ ┴┴┴ └─┴┘└┘└─┘ File: _base/_mixins.scss Beschreibung: Vorlagen zum einbinden einer oder mehrerer Deklarationen Autor: Roman Kröpl Datum: 01.02.2016 */ /* Example: @include placeholder { font-style:italic; color: white; font-weight:100; } */ /* ┌─┐┌─┐┌┐┌┌┬┐┌─┐ ├┤ │ ││││ │ └─┐ └ └─┘┘└┘ ┴ └─┘ File: _base/_fonts.scss Beshreibung: Beinhaltet alle Schriften Autor: Roman Kröpl 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: 'GFS Neohellenic'; src: url('../fonts/gfs-neohellenic/GFSNeohellenic-Regular.woff') format('woff'), url('../fonts/gfs-neohellenic/GFSNeohellenic-Regular.ttf') format('truetype'), url('../fonts/gfs-neohellenic/GFSNeohellenic-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Serif'; src: url('../fonts/notoserif/NotoSerif-Regular.woff') format('woff'), url('../fonts/notoserif/NotoSerif-Regular.ttf') format('truetype'), url('../fonts/notoserif/NotoSerif-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Mulish'; src: url('../fonts/mulish/Mulish-Regular.woff') format('woff'), url('../fonts/mulish/Mulish-Regular.ttf') format('truetype'), url('../fonts/mulish/Mulish-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Mulish Light'; src: url('../fonts/mulish/Mulish-Light.woff') format('woff'), url('../fonts/mulish/Mulish-Light.ttf') format('truetype'), url('../fonts/mulish/Mulish-Light.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } /* ┬ ┬┌─┐┬─┐┬┌─┐┌┐ ┬ ┌─┐┌┐┌ └┐┌┘├─┤├┬┘│├─┤├┴┐│ ├┤ │││ └┘ ┴ ┴┴└─┴┴ ┴└─┘┴─┘└─┘┘└┘ File: _base/_variables.scss Beschreibung: verwendete Variablen Autor: Roman Kröpl 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 ================ */ /* Button */ /* Hauptmenü Verwendet in: hauptmenu.scss */ /* Footer Verwendet in: _footer.scss */ /* Formulare Verwendet in: _formular.scss */ /* Farbe für Tabellen Verwendet in: _cb_tabelle.scss */ /* Cookiehinweis Verwendet in: _cookiehinweis.scss */ /* ┬─┐┌─┐┌─┐┌─┐┌┬┐ ├┬┘├┤ └─┐├┤ │ ┴└─└─┘└─┘└─┘ ┴ File: _base/_reset.scss Beschreibung: Reset default browser styles Autor: Roman Kröpl 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: 'Mulish', Arial, sans-serif; font-weight: 400; color: #3f3f51; overflow-x: hidden; width: 100%; text-align: left; background-color: #fff; background-position: top center; background-repeat: no-repeat; font-size: 16px; /* Wartungsmodus */ } body.wartungsmodus { text-align: center; } body.wartungsmodus #content { margin-top: 100px; margin-top: 10rem; } * { 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: #26388b; -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; } a:hover { text-decoration: underline; color: #26388b; } a:active { color: #26388b; } a:focus { color: #26388b; } input::-ms-clear { display: none; } 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: #f5f5f5; color: #00619f; font-family: monospace, 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; } 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-left: 18px; } 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; } /* ┬ ┬┌─┐┬ ┌─┐┌─┐┬─┐ ├─┤├┤ │ ├─┘├┤ ├┬┘ ┴ ┴└─┘┴─┘┴ └─┘┴└─ File: _base/_helper.scss Beschreibung: hilfreiche CSS Klassen Autor: Roman Kröpl 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: Roman Kröpl 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: Roman Kröpl 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: Roman Kröpl Datum: 01.02.2016 */ header#header { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cca842+0,fce498+100 */ background: #f2e6ce; -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%; z-index: 200; padding: 0px; padding: 0rem; /* kleinere Darstellung wenn man nach unten scrollt */ } header#header .searchicon { position: absolute; top: 57px; left: 25px; z-index: 200; -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 .searchicon a { display: inline-block; width: 24px; height: 24px; } header#header .searchicon i { font-size: 20px; color: #26388b; } @media (max-width: 1100px) { header#header .searchicon { display: none; } } header#header .socialicons { position: absolute; top: 57px; right: 25px; z-index: 200; -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 { display: inline-block; width: 24px; height: 24px; } header#header .socialicons .searchiconright { display: none; } header#header .socialicons i { font-size: 20px; color: #26388b; padding: 0px 5px; } @media (max-width: 1100px) { header#header .socialicons { width: 25px; text-align: center; top: 46px; } header#header .socialicons a i { font-size: 18px; font-weight: 400; } header#header .socialicons .searchiconright { display: inline-block; } } @media (max-width: 991px) { header#header .socialicons { display: none; } } 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 .goldborder { background: none; } header#header.menu-opened .logowrapper { display: none; } @media screen and (max-width: 767px) { header#header { position: absolute; height: 60px; } } @media screen and (min-width: 768px) { header#header { position: fixed; height: auto; } } @media screen and (min-width: 992px) { header#header { position: fixed; height: auto; } } header#header .logowrapper { float: left; height: 195px; width: 195px; margin-bottom: -60px; margin-top: 5px; -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 (max-width: 991px) { header#header .logowrapper { left: 0%; margin-left: 0px; text-align: left; height: 100px; width: 100px; } } @media (max-width: 767px) { header#header .logowrapper { height: 73px; width: 73px; } } header#header #logo { display: inline-block; z-index: 1000; position: relative; -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; height: 100%; width: 100%; } 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; max-height: 100%; } 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; } @media screen and (max-width: 767px) { header#header .navbar { margin: 10px 0px 0px 0px; margin: 1rem 0rem 0rem 0rem; } } @media screen and (min-width: 768px) { header#header .navbar { margin: 18px 0px 0px 0px; margin: 1.8rem 0rem 0rem 0rem; } } @media screen and (min-width: 992px) { header#header .navbar { margin: 0px 0px 0px 0px; margin: 0rem 0rem 0rem 0rem; } } header#header .burgericon { position: relative; z-index: 10; } @media (max-width: 1024px) { header#header .burgericon { float: right; margin-right: 1.5rem; } } header#header.smaller #mainnav { margin-top: 0px; } header#header.smaller .headerrow { height: 15px; } header#header.smaller .navbar { margin: 0px 0px 0px 0px; margin: 0rem 0rem 0rem 0rem; } header#header.smaller .logowrapper { margin-bottom: -35px; height: 100px; width: 100px; } header#header.smaller .logowrapper a { height: 100px; } header#header.smaller #hauptmenu ul li a, header#header.smaller #hauptmenu ul li button { padding: 22px 13px; } @media (max-width: 1200px) { header#header.smaller #hauptmenu ul li a, header#header.smaller #hauptmenu ul li button { padding: 22px 7px; } } @media (max-width: 1100px) { header#header.smaller #hauptmenu ul li a, header#header.smaller #hauptmenu ul li button { font-size: 17px; } } @media (max-width: 991px) { header#header.smaller #hauptmenu ul li a, header#header.smaller #hauptmenu ul li button { padding: 16px 50px; font-size: 16px; } } header#header.smaller #hauptmenu ul li ul li a { padding: 10px 20px; padding: 1rem 2rem; } header#header.smaller .searchicon { top: 19px; } header#header.smaller .socialicons { top: 19px; } @media (max-width: 1400px) { header#header.smaller .socialicons { opacity: 0; } } @media (max-width: 991px) { header#header.smaller .logowrapper { height: 70px; width: 70px; } header#header.smaller .navbar { margin-top: 7px; } header#header.smaller .burgermenu { margin-top: -58px; } header#header.smaller #hauptmenu { margin-top: 65px; } header#header.smaller.menu-opened #hauptmenu { margin-top: 90px; } header#header.smaller.menu-opened .burgermenu { margin-top: -70px; } } /* ┬ ┬┌─┐┌─┐┌┬┐┌─┐┬─┐ ┌─┐┌┬┐┌─┐ ├─┤├┤ ├─┤ ││├┤ ├┬┘ │ │ ├─┤ ┴ ┴└─┘┴ ┴─┴┘└─┘┴└─ └─┘ ┴ ┴ ┴ File: _modules/header_cta.scss Beschreibung: CSS Styles für die CTA im sticky Header Autor: Roman Kröpl 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: Roman Kröpl 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: #3f3f51; } .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: #3f3f51; } .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: #2c373f; font-family: "Mulish", 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: Roman Kröpl 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 */ /* Hauptnavigation */ #hauptmenu { margin: 0px; margin: 0rem; padding: 0px; padding: 0rem; border: 0; list-style: none; line-height: 1; display: block; position: relative; font-family: "OpenSans Bold", Arial, sans-serif; z-index: 1; /* Mobiles Burger-Icon */ } @media screen and (max-width: 767px) { #hauptmenu { width: 100%; float: none; margin-top: 0px; } } @media screen and (min-width: 768px) { #hauptmenu { width: 100%; float: none; margin-top: 0px; } } @media screen and (min-width: 992px) { #hauptmenu { margin-top: 0px; } } #hauptmenu:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #hauptmenu ul.sub-menu { display: none; } #hauptmenu .burgermenu { cursor: pointer; position: absolute; width: 30px; height: 25px; right: 0px; top: 10px; z-index: 1001; /* Burger Icon geöffnet */ } @media screen and (max-width: 767px) { #hauptmenu .burgermenu { display: block; } } @media screen and (min-width: 768px) { #hauptmenu .burgermenu { display: block; margin-top: -70px; } } @media screen and (min-width: 992px) { #hauptmenu .burgermenu { display: none; margin-top: 0px; } } #hauptmenu .burgermenu.navTrigger { width: 30px; height: 25px; } #hauptmenu .burgermenu.navTrigger i { background-color: white; border-radius: 1px; border-radius: 0.1rem; content: ''; display: block; width: 100%; height: 4px; } #hauptmenu .burgermenu.navTrigger i:nth-child(1) { -webkit-animation: outT 0.8s backwards; animation: outT 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } #hauptmenu .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; } #hauptmenu .burgermenu.navTrigger i:nth-child(3) { -webkit-animation: outBtm 0.8s backwards; animation: outBtm 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } #hauptmenu .burgermenu.navTrigger.active i:nth-child(1) { -webkit-animation: inT 0.8s forwards; animation: inT 0.8s forwards; } #hauptmenu .burgermenu.navTrigger.active i:nth-child(2) { -webkit-animation: inM 0.8s forwards; animation: inM 0.8s forwards; } #hauptmenu .burgermenu.navTrigger.active i:nth-child(3) { -webkit-animation: inBtm 0.8s forwards; animation: inBtm 0.8s forwards; } #hauptmenu .burgermenu.menu-opened i { background-color: #fff; } #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: 992px) { #hauptmenu ul { display: flex; width: auto; justify-content: center; } } #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 #fff; height: 40px; 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: 992px) { #hauptmenu ul .submenu-button { display: none; } } #hauptmenu ul .submenu-button.submenu-opened { background: #fff; } #hauptmenu ul .submenu-button.submenu-opened:before { display: none; } #hauptmenu ul .submenu-button.submenu-opened:after { background: rgba(0, 0, 0, 0.9); } #hauptmenu ul .submenu-button:after { position: absolute; top: 19px; right: 19px; width: 8px; height: 2px; background: #fff; 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: 992px) { #hauptmenu ul .submenu-button:after { display: none; } } #hauptmenu ul .submenu-button:before { position: absolute; top: 16px; right: 22px; width: 2px; height: 8px; background: #fff; 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: 992px) { #hauptmenu ul .submenu-button:before { display: none; } } #hauptmenu ul li { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: flex; align-items: center; position: relative; -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; float: left; /* 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 #fff; } } @media screen and (min-width: 768px) { #hauptmenu ul li { width: 100%; border-top: 1px solid #fff; } } @media screen and (min-width: 992px) { #hauptmenu ul li { width: inherit; border-top: none; } } #hauptmenu ul li.hide { display: none !important; } @media screen and (max-width: 767px) { #hauptmenu ul li.search a { font-size: 14px; font-size: 1.4rem; padding: 16px 50px; padding: 1.6rem 5rem; } #hauptmenu ul li.search a:before { display: none; } } @media screen and (min-width: 768px) { #hauptmenu ul li.search a { font-size: 14px; font-size: 1.4rem; padding: 16px 50px; padding: 1.6rem 5rem; } #hauptmenu ul li.search a:before { display: none; } } @media screen and (min-width: 992px) { #hauptmenu ul li.search a { font-size: 0px; font-size: 0rem; padding: 19px 0px 19px 0px; padding: 1.9rem 0rem 1.9rem 0rem; } #hauptmenu ul li.search a:before { content: '\f002'; font-family: "FontAwesome", Arial, sans-serif; font-size: 12px; font-size: 1.2rem; display: block; } } #hauptmenu ul li.leftmg { margin-left: 15px; } @media (max-width: 1290px) { #hauptmenu ul li.leftmg { margin-left: 74px; } } @media (max-width: 1200px) { #hauptmenu ul li.leftmg { margin-left: 29px; } } @media (max-width: 991px) { #hauptmenu ul li.leftmg { margin-left: 0px; } } #hauptmenu ul li.rightmg { margin-right: 23px; } @media (max-width: 1290px) { #hauptmenu ul li.rightmg { margin-right: 78px; } } @media (max-width: 1200px) { #hauptmenu ul li.rightmg { margin-right: 30px; } } @media (max-width: 991px) { #hauptmenu ul li.rightmg { margin-right: 0px; } } #hauptmenu ul li a, #hauptmenu ul li button { -webkit-transition: padding 0.25s ease-in-out; -moz-transition: padding 0.25s ease-in-out; -ms-transition: padding 0.25s ease-in-out; -o-transition: padding 0.25s ease-in-out; transition: padding 0.25s ease-in-out; margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; font-weight: 700; font-size: 16px; font-size: 1.6rem; letter-spacing: 1px; text-decoration: none; padding: 42px 17px; } @media (max-width: 1290px) { #hauptmenu ul li a, #hauptmenu ul li button { padding: 42px 8px; } } @media (max-width: 1200px) { #hauptmenu ul li a, #hauptmenu ul li button { padding: 37px 7px; font-size: 15px; } } @media (max-width: 991px) { #hauptmenu ul li a, #hauptmenu ul li button { padding: 16px 50px; font-size: 16px; } } @media screen and (max-width: 767px) { #hauptmenu ul li a, #hauptmenu ul li button { color: #fff; text-align: center; } } @media screen and (min-width: 768px) { #hauptmenu ul li a, #hauptmenu ul li button { color: #fff; text-align: center; } } @media screen and (min-width: 992px) { #hauptmenu ul li a, #hauptmenu ul li button { color: #26388b; text-align: left; } } #hauptmenu ul li a.fa:before, #hauptmenu ul li button.fa:before { margin-right: 5px; margin-right: 0.5rem; } @media (max-width: 991px) { #hauptmenu ul li:hover > a, #hauptmenu ul li.open > a, #hauptmenu ul li:hover button, #hauptmenu ul li.open button { color: #2c373f !important; background-color: white; } } @media screen and (min-width: 992px) { #hauptmenu ul li:hover > a, #hauptmenu ul li.open > a, #hauptmenu ul li:hover button, #hauptmenu ul li.open button { color: #26388b; text-decoration: underline; } } @media (min-width: 991px) { #hauptmenu ul li:hover > ul.sub-menu, #hauptmenu ul li.open > ul.sub-menu { display: block; opacity: 1; top: 100%; } } #hauptmenu ul li.has-sub { /* Hover Status für + Symbol => wird zu - */ } #hauptmenu ul li.has-sub:hover > a:before, #hauptmenu ul li.has-sub.open > a:before { top: 23px; height: 0; } #hauptmenu ul li:hover > ul, #hauptmenu ul li.open > ul { opacity: 1; -ms-filter: "progid:DXImageTra nsform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); top: auto; } @media (max-width: 991px) { #hauptmenu ul li:hover > ul, #hauptmenu ul li.open > ul { color: #2c373f !important; background-color: white; } } @media screen and (min-width: 992px) { #hauptmenu ul li:hover > ul, #hauptmenu ul li.open > ul { background: #26388b; padding: 16px 6px; } } #hauptmenu ul li.current-menu-item > a, #hauptmenu ul li.current-menu-parent > a { color: #26388b; text-decoration: underline; } @media screen and (max-width: 767px) { #hauptmenu ul li.current-menu-item button, #hauptmenu ul li.current-menu-parent button { color: #fff; } } @media screen and (min-width: 768px) { #hauptmenu ul li.current-menu-item button, #hauptmenu ul li.current-menu-parent button { color: #fff; } } @media screen and (min-width: 992px) { #hauptmenu ul li.current-menu-item button, #hauptmenu ul li.current-menu-parent button { color: #26388b; text-decoration: underline; } } #hauptmenu ul li.current-menu-item ul.sub-menu li a, #hauptmenu ul li.current-menu-parent ul.sub-menu li a { color: #fff; } #hauptmenu ul li ul { /* SubSubmenu + Button in der mobilen Navigation */ } @media screen and (min-width: 992px) { #hauptmenu ul li ul { position: absolute; opacity: 0; -ms-filter: "progid:DXImageTra nsform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); top: -9999em; } } #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 { width: 100%; /* 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, #hauptmenu ul li ul li .open { -webkit-transition: color 0.25s ease-in-out; -moz-transition: color 0.25s ease-in-out; -ms-transition: color 0.25s ease-in-out; -o-transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out; } @media (max-width: 991px) { #hauptmenu ul li ul li:hover, #hauptmenu ul li ul li .open { color: #2c373f !important; background-color: white; } } @media screen and (min-width: 992px) { #hauptmenu ul li ul li:hover, #hauptmenu ul li ul li .open { 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: #fff; } } @media screen and (min-width: 768px) { #hauptmenu ul li ul li.has-sub:hover > a { background: #fff; } } @media screen and (min-width: 992px) { #hauptmenu ul li ul li.has-sub:hover > a { background: transparent; } } #hauptmenu ul li ul li a { min-width: 210px; padding: 10px 20px; padding: 1rem 2rem; 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: #fff; } } @media screen and (min-width: 768px) { #hauptmenu ul li ul li a { border-bottom: none; color: #fff; } } @media screen and (min-width: 992px) { #hauptmenu ul li ul li a { border-bottom: none; color: #fff; } } @media (max-width: 991px) { #hauptmenu ul li ul li a:hover { color: #2c373f !important; } } @media screen and (min-width: 992px) { #hauptmenu ul li ul li a:hover { background: transparent; color: #fff; } } @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: 992px) { #hauptmenu ul li ul li ul { margin-left: 100%; top: 0; } } /* 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: Roman Kröpl Datum: 01.02.2016 */ /* Wenn der Header fix positioniert wird, dann benötigt der main-container einen Abstand oben */ #main-container { margin-top: 140px; margin-top: 14rem; overflow: hidden; } @media (max-width: 991px) { #main-container { margin-top: 90px; } } @media (max-width: 767px) { #main-container { margin-top: 60px; } } /* Headlines */ h1, h2, h3, h4 { text-transform: inherit; margin: 0px 0px 20px 0px; margin: 0rem 0rem 2rem 0rem; } h1 { font-family: 'Noto Serif', Arial, sans-serif; color: #26388b; } @media screen and (max-width: 767px) { h1 { font-size: 30px; font-size: 3rem; } } @media screen and (min-width: 768px) { h1 { font-size: 34px; font-size: 3.4rem; } } @media screen and (min-width: 992px) { h1 { font-size: 45px; font-size: 4.5rem; } } h2 { font-family: 'Noto Serif', Arial, sans-serif; color: #26388b; } @media screen and (max-width: 767px) { h2 { font-size: 26px; font-size: 2.6rem; } } @media screen and (min-width: 768px) { h2 { font-size: 28px; font-size: 2.8rem; } } @media screen and (min-width: 992px) { h2 { font-size: 40px; font-size: 4rem; } } h3 { font-family: 'Noto Serif', Arial, sans-serif; color: #26388b; } @media screen and (max-width: 767px) { h3 { font-size: 22px; font-size: 2.2rem; } } @media screen and (min-width: 768px) { h3 { font-size: 24px; font-size: 2.4rem; } } @media screen and (min-width: 992px) { h3 { font-size: 35px; font-size: 3.5rem; } } h4 { font-family: 'Mulish', Arial, sans-serif; color: #26388b; } @media screen and (max-width: 767px) { h4 { font-size: 18px; font-size: 1.8rem; } } @media screen and (min-width: 768px) { h4 { font-size: 20px; font-size: 2rem; } } @media screen and (min-width: 992px) { h4 { font-size: 24px; font-size: 2.4rem; } } h5 { font-family: 'Mulish', Arial, sans-serif; color: #26388b; } h6 { font-family: 'Mulish', Arial, sans-serif; color: #26388b; } p { margin: 0px 0px 20px 0px; margin: 0rem 0rem 2rem 0rem; font-size: 16px; font-size: 1.6rem; line-height: 22px; line-height: 2.2rem; font-weight: 400; } /* Buttons */ .btn { border-radius: 0px; border-radius: 0rem; font-family: 'Mulish', Arial, sans-serif; font-size: 18px; font-size: 1.8rem; background: #26388b; text-shadow: none; padding: 15px 44px 17px 44px; padding: 1.5rem 4.4rem 1.7rem 4.4rem; border: none; color: white !important; display: inline-block; text-align: center; cursor: pointer; font-weight: 300; line-height: 100%; -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 */ } @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 { opacity: 0.8; text-decoration: none; color: white; } .btn:active { box-shadow: none; } #wrapper { width: 100%; margin: 0 auto; overflow-x: hidden; } #wrapper .container.cb { margin-top: 60px; margin-top: 6rem; } #wrapper .container.cb2 { margin-top: 40px; margin-top: 4rem; } #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 img { width: 100% !important; height: auto !important; margin-top: 0px !important; } #wrapper .ms-slide-layers { width: 100%; height: 100%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+30,0.06+42,0.65+100 */ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.06) 42%, rgba(0, 0, 0, 0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.06) 42%, rgba(0, 0, 0, 0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.06) 42%, rgba(0, 0, 0, 0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', 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: 'Noto Serif', Arial, sans-serif !important; font-size: 69px !important; top: auto !important; bottom: 19% !important; } @media (max-width: 1200px) { #wrapper .ms-slide-layers .ms-layer.headline { font-size: 50px !important; bottom: 25% !important; } } @media (max-width: 767px) { #wrapper .ms-slide-layers .ms-layer.headline { font-size: 18px !important; bottom: 30% !important; } } #wrapper .ms-slide-layers .ms-layer.subline { font-family: 'Mulish', Arial, sans-serif !important; font-weight: normal !important; font-size: 30px !important; bottom: 11% !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 .full_width h2 { color: white; margin-bottom: 10px; } #wrapper .full_width p { color: white; } #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: #26388b; margin-bottom: 20px; } #wrapper .socialbox .socialheader i { color: #acbbc6; margin-right: 10px; } .sisu-cookie-notice > .text p { font-size: 1.5rem !important; } .alter_overlay { display: none; position: fixed; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.8); z-index: 10000; } .alter_overlay .alter_container { width: 100%; max-width: 970px; margin: 30px auto 0px auto; background: #f2e6ce; } .alter_overlay .alter_container img { width: 150px; } .alter_overlay .alter_container .title { font-size: 35px !important; color: #26388b; font-family: 'Noto Serif', Arial, sans-serif; line-height: 100%; margin-top: 32px; margin-bottom: 37px; } .alter_overlay .alter_container .subtext { font-size: 19px; color: #26388b; font-family: 'Noto Serif', Arial, sans-serif; margin-bottom: 24px; } .alter_overlay .alter_container .gebform { display: inline-block; } .alter_overlay .alter_container .gebform input[type="number"]::-webkit-outer-spin-button, .alter_overlay .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 input { width: 120px; color: #26388b; text-align: center; font-size: 24px; padding: 14px 0px 11px 0px; margin: 0px 7px; border: none; outline: 0; font-family: 'Mulish', Arial, sans-serif; float: left; } .alter_overlay .alter_container ::-webkit-input-placeholder { color: #26388b; } .alter_overlay .alter_container :-moz-placeholder { color: #26388b; } .alter_overlay .alter_container ::-moz-placeholder { color: #26388b; } .alter_overlay .alter_container :-ms-input-placeholder { color: #26388b; } .alter_overlay .alter_container .formbtn { text-align: center; border: 2px solid white; border-radius: 4px; color: white; padding: 15px 52px; font-family: 'Mulish', Arial, sans-serif; background: #26388b; cursor: pointer; margin-top: 2px; margin-left: 15px; width: auto; } .alter_overlay .alter_container .formbtn:hover { opacity: 0.8; } .alter_overlay .alter_container .privacy { color: #26388b; margin-bottom: 53px; text-transform: uppercase; font-size: 12px; line-height: 130%; } .alter_overlay .alter_container .privacy p { color: #26388b; text-transform: uppercase; font-size: 12px; line-height: 130%; } .alter_overlay .alter_container .privacy a { color: #26388b; text-decoration: underline; } .alter_overlay .alter_container .privacy a:hover { text-decoration: none; } .alter_overlay .alter_container .alter_error { height: 33px; margin-top: 10px; margin-bottom: 10px; color: white; } .alter_overlay .alter_container .formentry button { font-size: 2rem; text-align: center; } .alter_overlay .alter_container fieldset { border: none; margin-bottom: 2rem; } .alter_overlay .alter_container fieldset .formentry label { color: #26388b; } .alter_overlay .alter_container fieldset .formentry input { width: auto; cursor: pointer; height: 24px; } @media screen and (max-width: 767px) { .alter_overlay .alter_container fieldset .formentry { margin-bottom: 1rem; } } .alter_overlay .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 .alter_container fieldset .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #fff; border-radius: 50%; border: 1px solid #26388b; } .alter_overlay .alter_container fieldset .checkmark:after { content: ""; position: absolute; display: none; } .alter_overlay .alter_container fieldset .formentry input:checked ~ .checkmark:after { display: block; } .alter_overlay .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); } @media (max-width: 1200px) { .alter_overlay .alter_container { margin-top: 30px; } } @media (max-width: 991px) { .alter_overlay .alter_container { margin-top: 0px; } } @media (max-width: 767px) { .alter_overlay .alter_container { padding: 12px; } .alter_overlay .alter_container .overlaylogo { margin-top: 18px; } .alter_overlay .alter_container .title { font-size: 31px; margin-top: 30px; margin-bottom: 17px; } .alter_overlay .alter_container .subtext { font-size: 15px; } .alter_overlay .alter_container input { width: 76px; float: none; } .alter_overlay .alter_container .formbtn { display: inline-block; float: none; margin-top: 30px; margin-left: 0px; } .alter_overlay .alter_container .alter_error { margin-top: 15px; margin-bottom: 4px; } } .alter_overlay .alter_container .askAge { max-width: 62vw !important; } @media (max-width: 600px) { .alter_overlay .alter_container .askAge { max-width: 100% !important; } } @media screen and (max-width: 767px) { .alter_overlay { position: absolute; } } .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: -46px; } .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; } .goldborder { background-image: url("../images/goldrand.png"); background-position: bottom center; background-repeat: repeat-x; } .fancybox-skin { background: white; } .page-id-4445 .container .textelement_content ol li, .page-id-4447 .container .textelement_content ol li { margin-bottom: 2rem; } .page-id-4445 .container .textelement_content ol li ol, .page-id-4447 .container .textelement_content ol li ol, .page-id-4445 .container .textelement_content ol li ul, .page-id-4447 .container .textelement_content ol li ul { margin-left: 2rem; } .page-id-4445 .container .textelement_content ol li ol li, .page-id-4447 .container .textelement_content ol li ol li, .page-id-4445 .container .textelement_content ol li ul li, .page-id-4447 .container .textelement_content ol li ul li { margin-bottom: 1rem; } .page-id-4777 .cb_picture img { width: unset; max-width: 120px; } #header { background: transparent; } @media (max-width: 768px) { #header { padding-top: 0; } } #header #hauptmenu ul li.menu-item-has-children { padding: 30px 17px; color: #26388b; font-weight: bold; } #header #hauptmenu ul li.menu-item-has-children > button::after { content: url('data:image/svg+xml; utf8, '); height: 1.3rem; width: 1.5rem; position: absolute; right: -3rem; } @media (min-width: 1200px) { #header #hauptmenu ul li.menu-item-has-children > button::after { right: -0.1rem; } } #header #hauptmenu ul li.menu-item-has-children > a { /*@media (max-width: 1400px) { padding: 42px 8px; } @media (max-width: 1200px) { padding: 40px 7px; font-size: 15px; } @media (max-width: 991px) { padding: 16px 50px; font-size: 16px; }*/ } @media (min-width: 1200px) { #header #hauptmenu ul li.menu-item-has-children > a { padding: 42px 15px 10px; } } @media (min-width: 1401px) { #header #hauptmenu ul li.menu-item-has-children > a { padding: 51px 15px 10px; } } #header .socialicons { top: 50px; } @media (max-width: 1024px) { #header .socialicons { top: 35px; } } #header .logowrapper { padding-top: 1.5rem; } /* ┌─┐┌┐ ┬┌┬┐┌─┐┌┬┐ │ ├┴┐ │ │ ├┤ │││ └─┘└─┘ ┴ ┴ └─┘┴ ┴ 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: Roman Kröpl Datum: 01.02.2016 */ @media screen and (max-width: 767px) { .cb_item { margin-bottom: 20px; margin-bottom: 2rem; } } @media screen and (min-width: 768px) { .cb_item { margin-bottom: 20px; margin-bottom: 2rem; } } @media screen and (min-width: 992px) { .cb_item { margin-bottom: 40px; margin-bottom: 4rem; } } .cb_item.nomargin { margin: 0; } .cb_item ul.row { list-style: none; } /* ┌─┐┌┐ ┌┐ ┬ ┌─┐┌─┐┬┌─ ┌─┐┌┬┐┌─┐┬─┐┌┬┐ │ ├┴┐ ├┴┐│ │ ││ ├┴┐ └─┐ │ ├─┤├┬┘ │ └─┘└─┘ └─┘┴─┘└─┘└─┘┴ ┴ └─┘ ┴ ┴ ┴┴└─ ┴ File: _modules/_cb_block_start.scss Beschreibung: Style für Content Block Start und Accordion Autor: Roman Kröpl Datum: 01.02.2016 */ .cb_block_start, .cb_accordion_start { /* ┌─┐┌─┐┌─┐┌─┐┬─┐┌┬┐┬┌─┐┌┐┌ ├─┤│ │ │ │├┬┘ ││││ ││││ ┴ ┴└─┘└─┘└─┘┴└──┴┘┴└─┘┘└┘ */ } @media screen and (max-width: 767px) { .cb_block_start .full_width, .cb_accordion_start .full_width { margin: 0px -15px 0px -15px; margin: 0rem -1.5rem 0rem -1.5rem; } } @media screen and (min-width: 768px) { .cb_block_start .full_width, .cb_accordion_start .full_width { margin: 0px -50% 0px -50%; } } @media screen and (min-width: 992px) { .cb_block_start .full_width, .cb_accordion_start .full_width { margin: 0px -50% 0px -50%; } } .cb_block_start .nomarginbottom, .cb_accordion_start .nomarginbottom { margin-bottom: -40px; } @media (max-width: 767px) { .cb_block_start .nomarginbottom, .cb_accordion_start .nomarginbottom { margin-bottom: -20px; } } .cb_block_start .panther, .cb_accordion_start .panther { padding-top: 50px; padding-bottom: 20px; } .cb_block_start .toggler, .cb_accordion_start .toggler { font-family: "OpenSans Bold", Arial, sans-serif; margin-bottom: 10px; margin-bottom: 1rem; padding: 8px 20px; padding: 0.8rem 2rem; border-bottom: none; background-color: #f9ecc3; color: #26388b; background-image: url('../images/acc_arrow_down.png'); background-position: right 10px center; background-repeat: no-repeat; } .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_accordion_start { margin-bottom: 0px; } /* ┌─┐┌┐ ┌─┐┌─┐┬─┐┌┬┐┬ ┬┬ ┌─┐┬─┐ │ ├┴┐ ├┤ │ │├┬┘││││ ││ ├─┤├┬┘ └─┘└─┘ └ └─┘┴└─┴ ┴└─┘┴─┘┴ ┴┴└─ File: _modules/_cb_formular.scss Beschreibung: Alle Styles für die Formulare Autor: Roman Kröpl Datum: 01.02.2016 */ form { margin: 0; } fieldset { border: 1px solid #d4dcd1; 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 #d4dcd1; } textarea { overflow: auto; vertical-align: top; } 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_confirmation_wrapper { text-align: center; } .gform_confirmation_wrapper .gform_confirmation_message { font-weight: bold; } .gform_wrapper { max-width: 100% !important; } .gform_wrapper .gform_heading { display: none; } .gform_wrapper ul li { list-style: none; } .gform_wrapper ul li.gfield { clear: none !important; width: 49%; float: left; /*form error*/ } @media (max-width: 767px) { .gform_wrapper ul li.gfield { width: 100%; } } .gform_wrapper ul li.gfield:nth-child(2n) { float: right; } .gform_wrapper ul li.gfield:last-of-type, .gform_wrapper ul li.gfield.message { width: 100%; } .gform_wrapper ul li.gfield.gfield_error { 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; padding: 0 1px; } .gform_wrapper ul li.gfield.gfield_error input { outline: 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 { margin-bottom: 25px; color: #c70000; } .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 { border-radius: 0px; border-radius: 0rem; border: 1px solid #d4dcd1; background: #ebeff1; 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: 13px 20px; padding: 1.3rem 2rem; } .gform_wrapper ul li .ginput_container input:focus, .gform_wrapper ul li .ginput_container textarea:focus, .gform_wrapper ul li .ginput_container select:focus { outline: none; border: 1px solid #3f3f51 !important; box-shadow: none; } .gform_wrapper ul li .ginput_container .gfield-choice-input:focus { outline: auto; } .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; cursor: pointer; } .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 input, .gform_wrapper .gform_body textarea, .gform_wrapper .gform_body select { background: #ebeff1; border: 1px solid #d4dcd1 !important; padding: 13px; padding: 1.3rem; border-radius: 0px; border-radius: 0rem; } .gform_wrapper .gform_body input[type='tel'], .gform_wrapper .gform_body input[type='email'] { width: 100%; } .gform_wrapper .gform_body select, .gform_wrapper .gform_body option { cursor: pointer; } .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_body ul li.nolabel span { display: none; } .gform_wrapper .gform_body .gchoice { display: flex; align-items: center; gap: 10px; } .gform_wrapper .gform_body .gchoice input { width: 24px; height: 24px; margin: 0; } .gform_wrapper .gform_body .gchoice label { margin: 0; } .gform_wrapper .gform_footer { padding: 0px; padding: 0rem; margin: 0px; margin: 0rem; } .gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer button.button { border-radius: 0px; border-radius: 0rem; font-family: "Mulish", Arial, sans-serif; font-size: 18px; font-size: 1.8rem; line-height: 24px; line-height: 2.4rem; background: #f29400; text-shadow: none; padding: 13px 43px; padding: 1.3rem 4.3rem; border: none; color: #26388b !important; display: inline-block; text-align: center; cursor: pointer; font-weight: 400; -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 */ width: auto; float: right; } .gform_wrapper .gform_footer input.button:hover, .gform_wrapper .gform_footer button.button:hover { opacity: 0.8; text-decoration: none; color: white; } ::-webkit-input-placeholder { color: #2c373f; font-weight: normal !important; } :-moz-placeholder { color: #2c373f; font-weight: normal !important; } ::-moz-placeholder { color: #2c373f; font-weight: normal !important; } :-ms-input-placeholder { color: #2c373f; font-weight: normal !important; } .gfield_select { border-radius: 0px; border-radius: 0rem; border: 1px solid #d4dcd1; background: none; color: #2c373f; width: 100% !important; } .gfield_label { font-weight: bold; } .gform_button { border: 2px #2c373f solid; padding: 7px 20px; padding: 0.7rem 2rem; font-family: "Mulish", Arial, sans-serif; color: #2c373f; 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; } #field_10_10 { width: 100%; } /* NEWSLETTER BOX */ .newsletter .gform_confirmation_wrapper, .newsletter form { max-width: 500px; width: 100%; margin: 0 auto; } /* ┌─┐┌┐ ┌─┐┌─┐┌─┐┌─┐┬ ┌─┐ ┌┬┐┌─┐┌─┐ │ ├┴┐ │ ┬│ ││ ││ ┬│ ├┤ │││├─┤├─┘ └─┘└─┘ └─┘└─┘└─┘└─┘┴─┘└─┘ ┴ ┴┴ ┴┴ File: _modules/_cb_google_map.scss Beschreibung: Styles für die Google Map Autor: Roman Kröpl Datum: 01.02.2016 */ .map { width: 100%; height: 400px; height: 40rem; border: #acb9c5 solid 1px; margin: 0px; margin: 0rem; } /* ┌─┐┌┐ ┌─┐┬┌┬┐┌─┐┌┬┐┌─┐┬ ┌─┐┌┬┐┌─┐┌┐┌┌┬┐ │ ├┴┐ ┌─┘│ │ ├─┤ │ ├┤ │ ├┤ │││├┤ │││ │ └─┘└─┘ └─┘┴ ┴ ┴ ┴ ┴ └─┘┴─┘└─┘┴ ┴└─┘┘└┘ ┴ File: _modules/_cb_zitatelement.scss Beschreibung: CSS Styles für das Zitatelement Autor: Roman Kröpl 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 .quotebox_content { text-align: center; } .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%; } } /* ┌─┐┌┐ ┌┬┐┌─┐─┐ ┬┌┬┐┌─┐┬ ┌─┐┌┬┐┌─┐┌┐┌┌┬┐ │ ├┴┐ │ ├┤ ┌┴┬┘ │ ├┤ │ ├┤ │││├┤ │││ │ └─┘└─┘ ┴ └─┘┴ └─ ┴ └─┘┴─┘└─┘┴ ┴└─┘┘└┘ ┴ File: _modules/_cb_textelement.scss Beschreibung: CSS Styles für Textelemente Autor: Roman Kröpl Datum: 01.02.2016 */ .cb_textelement { margin-bottom: 10px; /* Text alighnment is set in Wordpress Content Box Element */ } .cb_textelement .container { max-width: 100%; } .cb_textelement .subline { text-transform: uppercase; color: #acbbc6; margin-bottom: 15px; margin-bottom: 1.5rem; font-size: 12px; } .cb_textelement .entry-text { line-height: 20px; line-height: 2rem; } .cb_textelement .entry-text p a { text-decoration: underline; padding: 2px 0; } .cb_textelement .entry-text p a:hover { text-decoration: none; } .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.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 .box_background { background-size: cover !important; } @media screen and (max-width: 767px) { .cb_textelement .box_background.full_width { margin: 0px; margin: 0rem; } } @media screen and (min-width: 768px) { .cb_textelement .box_background.full_width { margin: 0px -50% 0px -50%; } } @media screen and (min-width: 992px) { .cb_textelement .box_background.full_width { margin: 0px -50% 0px -50%; } } .cb_textelement .text_button > a:focus { color: #fff; } /* ┌─┐┌┬┐ ┌┐ ┬┬ ┌┬┐┌─┐┬─┐┌─┐┌─┐┬ ┌─┐┬─┐┬┌─┐ │ ││ ├┴┐││ ││├┤ ├┬┘│ ┬├─┤│ ├┤ ├┬┘│├┤ └─┘─┴┘ └─┘┴┴─┘─┴┘└─┘┴└─└─┘┴ ┴┴─┘└─┘┴└─┴└─┘ File: _modules/_cb_bildergalerie.scss Beschreibung: CSS Styles für Bildergalerie Vorschaubilder Autor: Roman Kröpl 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); } /* ┌─┐┌┬┐ ┬┌─┐┌─┐┌┐┌┌─┐ │ ││ ││ │ ││││└─┐ └─┘─┴┘ ┴└─┘└─┘┘└┘└─┘ File: _modules/_cb_icons.scss Beschreibung: CSS Styles für Icons (Iconset) Autor: Roman Kröpl Datum: 01.02.2016 */ .cb_iconset .cb_icons .iconitem .image_container { margin-bottom: 15px; margin-bottom: 1.5rem; } .cb_iconset .cb_icons .iconitem .image_container img { margin: 0 auto; -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; } .cb_iconset .cb_icons .iconitem .image_container .fa { font-size: 60px; font-size: 6rem; color: #333; } .cb_iconset .cb_icons .iconitem .headline { font-family: 'Mulish', Arial, sans-serif; font-weight: 700; font-size: 25px; color: white; margin-bottom: 20px; } .cb_iconset .cb_icons .iconitem .headline a { font-family: 'Mulish', Arial, sans-serif; font-weight: 700; font-size: 25px; color: white; margin-bottom: 20px; } .cb_iconset .cb_icons .iconitem .morelink { font-size: 14px; color: #acbac5; } .cb_iconset .cb_icons .iconitem:hover img { -moz-transition: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .home .cb_icons .image_container { text-align: center; } /* ┌─┐┌┐ ┌─┐┬┌─┐┌┬┐┬ ┬┬─┐┌─┐ │ ├┴┐ ├─┘││ │ │ │├┬┘├┤ └─┘└─┘ ┴ ┴└─┘ ┴ └─┘┴└─└─┘ File: _modules/_cb_picture.scss Beschreibung: Styles für Bild-Element Erstellt von: Roman Kröpl 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 p { margin-bottom: 7px; } .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: #ebeff1 !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 #d4dcd1 !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 #d4dcd1 !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 #d4dcd1 !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: #3f3f51 !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: #2c373f; 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: #2c373f !important; border: none !important; } .cb_tabelle ul.pagination li:hover a { color: #fff !important; } .cb_tabelle ul.pagination li.active { background: #2c373f !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; } .brauereifuehrungen { margin-top: 170px; margin-bottom: 80px; } .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::after { content: ''; display: block; clear: both; } .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: #26388b; } @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: #26388b; } .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: #26388b; margin-bottom: 18px; display: flex; justify-content: space-between; } .brauereifuehrungen .kalender .head > button { width: auto; } .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 #26388b; border-radius: 50%; width: 50px; height: 50px; padding: 8px 0 0 0; float: left; font-weight: normal; padding-right: 5px; text-align: center; } .brauereifuehrungen .kalender .head i.fa-angle-right { font-size: 30px; cursor: pointer; border: 1px solid #26388b; border-radius: 50%; width: 50px; height: 50px; padding: 8px 0 0 0; float: right; font-weight: normal; padding-left: 5px; text-align: center; } .brauereifuehrungen .kalender .head .dropdownstyle { flex: 1; display: flex; width: 100%; justify-content: center; padding: 4px 5px 4px 12px; position: relative; top: -7px; max-width: 50vw; } .brauereifuehrungen .kalender .head .dropdownstyle button { width: auto; } .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::after { content: ''; display: block; 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: #26388b; } @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: #26388b; color: white !important; position: absolute; width: 15%; border-radius: 7px; height: 63px; width: 90%; margin: 11px 5%; top: 0px; font-size: 13px; padding-top: 15px; line-height: 130%; font-weight: bold; font-family: "motiva-sans", Arial, sans-serif; z-index: 1; } .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: #f62323; } .brauereifuehrungen .kalender .grid .buchungen div.single.active { background: #ae1616; cursor: initial; } .brauereifuehrungen .kalender .grid .buchungen div.singlebooked { background: #26388b !important; cursor: initial; } .brauereifuehrungen .kalender .grid .buchungen div.active { background: #0d194f; 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, .brauereifuehrungen .second_group { text-align: left; } .brauereifuehrungen .buchungsformular .pricebox input, .brauereifuehrungen .second_group input, .brauereifuehrungen .buchungsformular .pricebox select, .brauereifuehrungen .second_group select, .brauereifuehrungen .buchungsformular .pricebox textarea, .brauereifuehrungen .second_group textarea { 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: #26388b; } .brauereifuehrungen .buchungsformular .pricebox input.gebinput, .brauereifuehrungen .second_group input.gebinput, .brauereifuehrungen .buchungsformular .pricebox select.gebinput, .brauereifuehrungen .second_group select.gebinput, .brauereifuehrungen .buchungsformular .pricebox textarea.gebinput, .brauereifuehrungen .second_group textarea.gebinput { width: 14.667%; } @media (max-width: 767px) { .brauereifuehrungen .buchungsformular .pricebox input, .brauereifuehrungen .second_group input, .brauereifuehrungen .buchungsformular .pricebox select, .brauereifuehrungen .second_group select, .brauereifuehrungen .buchungsformular .pricebox textarea, .brauereifuehrungen .second_group textarea { width: 98%; } .brauereifuehrungen .buchungsformular .pricebox input.gebinput, .brauereifuehrungen .second_group input.gebinput, .brauereifuehrungen .buchungsformular .pricebox select.gebinput, .brauereifuehrungen .second_group select.gebinput, .brauereifuehrungen .buchungsformular .pricebox textarea.gebinput, .brauereifuehrungen .second_group textarea.gebinput { width: 31.3%; } } .brauereifuehrungen .buchungsformular .pricebox label, .brauereifuehrungen .second_group label { float: left; margin: 10px 1% 0; width: 95%; } @media (max-width: 767px) { .brauereifuehrungen .buchungsformular .pricebox label, .brauereifuehrungen .second_group label { width: 100%; } } .brauereifuehrungen .buchungsformular .pricebox h3, .brauereifuehrungen .second_group h3 { margin: 7px 1%; } .brauereifuehrungen .buchungsformular .pricebox button, .brauereifuehrungen .second_group button { width: auto; margin-top: 7px; } @media (max-width: 767px) { .brauereifuehrungen .buchungsformular .pricebox button, .brauereifuehrungen .second_group button { margin-top: 0px; margin-bottom: 5px; } } .brauereifuehrungen .buchungsformular .pricebox label.check, .brauereifuehrungen .second_group 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, .brauereifuehrungen .second_group label.check input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .brauereifuehrungen .buchungsformular .pricebox label.check input:checked ~ span.checkmark:after, .brauereifuehrungen .second_group label.check input:checked ~ span.checkmark:after { background: black !important; display: block; } .brauereifuehrungen .buchungsformular .pricebox label.check .checkmark, .brauereifuehrungen .second_group label.check .checkmark { position: absolute; top: 2px; left: 0; height: 24px; width: 24px; background-color: #ebeff1; border: 1px solid #acb9c5; } .brauereifuehrungen .buchungsformular .pricebox label.check .checkmark:after, .brauereifuehrungen .second_group label.check .checkmark:after { content: ""; position: absolute; display: none; top: 4px; left: 4px; width: 10px; height: 10px; } .brauereifuehrungen .buchungsformular .pricebox label.check.round .checkmark, .brauereifuehrungen .second_group label.check.round .checkmark { border-radius: 50%; } .brauereifuehrungen .buchungsformular .pricebox label.check.round .checkmark:after, .brauereifuehrungen .second_group label.check.round .checkmark:after { border-radius: 50%; } .brauereifuehrungen .buchungsformular .pricebox label.check a, .brauereifuehrungen .second_group label.check a { font-weight: bold; } .brauereifuehrungen .buchungsformular .pricebox .codeerror, .brauereifuehrungen .second_group .codeerror { width: 100%; display: block; padding: 0 1%; clear: both; color: red; } .brauereifuehrungen .buchungsformular .pricebox .codesuccess, .brauereifuehrungen .second_group .codesuccess { width: 100%; display: block; padding: 0 1%; clear: both; color: #26388b; font-weight: bold; } .brauereifuehrungen .buchungsformular .pricebox .couponload, .brauereifuehrungen .second_group .couponload { display: inline-block; vertical-align: top; margin: 19px 11px; font-size: 22px; color: #26388b; display: none; } .brauereifuehrungen .buchungsformular input:focus, .brauereifuehrungen .buchungsformular select:focus, .brauereifuehrungen .buchungsformular textarea:focus { outline: none; border: 1px solid #26388b; } .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::after { content: ""; display: block; clear: both; } .brauereifuehrungen .pricebox h3 { font-size: 25px; font-weight: bold; margin-bottom: 14px; color: #26388b; } .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: #26388b; } .brauereifuehrungen .auswahl { background: #faf5e8; border-radius: 7px; text-align: left; padding: 28px; } .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: #26388b; } .brauereifuehrungen .auswahl .infos .price, .brauereifuehrungen .auswahl .infos .price-second { margin: 0 0 8px 0; } .brauereifuehrungen .auswahl .infos .price .gesamt, .brauereifuehrungen .auswahl .infos .price-second .gesamt { color: #26388b; font-weight: bold; } .brauereifuehrungen .auswahl .infos .price .gesamt td, .brauereifuehrungen .auswahl .infos .price-second .gesamt td { border-top: 1px solid #bfbfbf; } .brauereifuehrungen .auswahl .infos .price td, .brauereifuehrungen .auswahl .infos .price-second td { padding: 0 12px 0 0; } .brauereifuehrungen .auswahl .infos .price td:nth-child(2), .brauereifuehrungen .auswahl .infos .price-second td:nth-child(2) { text-align: right; } .brauereifuehrungen .auswahl .infos .price .rabatt, .brauereifuehrungen .auswahl .infos .price-second .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; } .text-center { text-align: center; } .hidden { display: none; } .left { text-align: left; } /* ┌─┐┬ ┬┌─┐┬ ┬┌─┐ └─┐│ ││ ├─┤├┤ └─┘└─┘└─┘┴ ┴└─┘ File: _modules/suche.scss Beschreibung: CSS Styles für die Suchergebnisseite Autor: Roman Kröpl 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: #cda943; color: white; } .search .searchform_container ::-webkit-input-placeholder { opacity: 0.5; } .search .searchform_container :-moz-placeholder { opacity: 0.5; } .search .searchform_container ::-moz-placeholder { opacity: 0.5; } .search .searchform_container :-ms-input-placeholder { opacity: 0.5; } @media screen and (max-width: 767px) { .search .searchform_container { margin: 0px -15px; 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; color: #26388b; } @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: #2c373f; padding: 12px 20px; padding: 1.2rem 2rem; text-indent: 0px; text-indent: 0rem; font-weight: normal !important; font: 'Mulish', Arial, sans-serif; margin-bottom: 10px; } .search .searchform_container .container #searchform input:focus { outline: 2px solid #000; } .search .searchresult_container { background: #dcbc5f; color: white; } @media screen and (max-width: 767px) { .search .searchresult_container { margin: 0px -15px; 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; color: #26388b; } .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: Roman Kröpl 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: #ececfb; 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: "OpenSans Bold", Arial, sans-serif; margin: 0; } .sidebar .newsletter span { font-style: italic; font-family: "OpenSans 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: #acb9c5; } .sidebar .banner { background-color: #ececfb; 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: "OpenSans 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: #acb9c5; } .sidebar .service { background-color: #ececfb; 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: "OpenSans Bold", Arial, sans-serif; font-size: 16px; font-size: 1.6rem; color: #000; } /* ╔╗ ┬┌─┐┬─┐┌─┐┬ ┬┌┬┐┌─┐┬─┐ ╠╩╗│├┤ ├┬┘└─┐│ │ ││├┤ ├┬┘ ╚═╝┴└─┘┴└─└─┘┴─┘┴─┴┘└─┘┴└─ File: _modules/_cb_bierslider.scss Beschreibung: CSS für Bierslider und Lightbox Autor: Matthias Hauß Datum: 05.07.2016 */ .biersliderwrapper { background: #26388b !important; opacity: 0; } .biersliderwrapper .panther { background: url(../images/bierbg.png) no-repeat center center; } .cb_bierslider { padding: 0 55px; margin-top: 30px; 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: 'Mulish', Arial, sans-serif; font-weight: 700; } .cb_bierslider .item > a { display: inline-block; } .cb_bierslider .owl-stage-outer { position: relative; z-index: 100; } @media (min-width: 1200px) { .cb_bierslider .owl-carousel { width: 80%; margin: 0 auto; } } .cb_bierslider .owl-carousel .owl-controls { position: absolute; top: 45%; width: 100%; z-index: 99; } @media (min-width: 600px) { .cb_bierslider .owl-carousel .owl-controls { display: none; } } .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: _cpt/_news.scss Beschreibung: CSS Styles für News Übersicht und News Detailseite Autor: Roman Kröpl Datum: 01.02.2016 */ .news_entry { border: 1px solid #d4dce1; margin-bottom: 20px; margin-bottom: 2rem; position: relative; background: white; } .news_entry .image_container { margin-bottom: 0px; margin-bottom: 0rem; overflow: hidden; } .news_entry .image_container img { height: auto; width: 100%; 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; } .news_entry .text_container { padding: 30px 30px 60px 30px; padding: 3rem 3rem 6rem 3rem; } @media (max-width: 991px) { .news_entry .text_container { padding: 20px 15px 60px 15px; padding: 2rem 1.5rem 6rem 1.5rem; } } .news_entry h2 { line-height: 130%; margin-bottom: 10px; margin-bottom: 1rem; font-size: 25px; font-size: 2.5rem; background-color: transparent; text-transform: inherit; color: #26388b; font-family: 'Mulish', Arial, sans-serif; font-weight: 300; } @media (max-width: 1200px) { .news_entry h2 { font-size: 22px; } } .news_entry h2 a { color: #26388b; } .news_entry h2 a:hover { text-decoration: none; color: #26388b; } .news_entry .btn { position: absolute; bottom: 20px; left: 30px; font-size: 16px; font-size: 1.6rem; padding: 11px 17px 13px 17px; padding: 1.1rem 1.7rem 1.3rem 1.7rem; } .news_entry .btn:focus { color: #fff !important; } .news_entry p { color: #3f3f51 !important; } @media (max-width: 991px) { .news_entry p { font-size: 14px; } } .news_entry:hover img { opacity: 0.8; -ms-filter: "progid:DXImageTra nsform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transition: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } @media (min-width: 768px) { .news_entry.long .image_container { width: 50%; float: left; height: 100%; } .news_entry.long .image_container img { min-height: 100%; width: auto; max-width: initial; min-width: 100%; } .news_entry.long .text_container { width: 50%; float: left; padding: 15px 20px; } .news_entry.long .text_container h3 { font-size: 21px; } .news_entry.long .btn { position: relative; bottom: 0px; left: 0px; } } /* ┌─┐┌─┐┬┌┬┐┌─┐┌┐┌┌┐┌┌─┐┬ ┬┬┌─┐┌─┐┌┬┐┬┌─┐┌┐┌ └─┐├┤ │ │ ├┤ ││││││├─┤└┐┌┘││ ┬├─┤ │ ││ ││││ └─┘└─┘┴ ┴ └─┘┘└┘┘└┘┴ ┴ └┘ ┴└─┘┴ ┴ ┴ ┴└─┘┘└┘ */ .pagination_container { position: relative; margin-bottom: 30px; margin-bottom: 3rem; clear: both; } .pagination_container .sisu_paging { margin: 0 20% 0 20%; width: 60%; } .pagination_container .sisu_paging ul.sisu_pagination { width: 80%; list-style: none; padding: 0px; text-align: center; margin: 0 auto; } .pagination_container .sisu_paging ul li { margin: 0px; margin: 0px 5px; margin: 0rem 0.5rem; margin-bottom: 7px; margin-bottom: 0.7rem; text-align: center; font-size: 16px; font-size: 1.6rem; display: inline-block; } .pagination_container .sisu_paging ul li a { color: #201f1f; text-decoration: none; padding: 6px 10px; padding: 0.6rem 1rem; border: 1px solid #000; } .pagination_container .sisu_paging ul li:hover a, .pagination_container .sisu_paging ul li.active a { background: #eaeaea; color: #333 !important; } .pagination_container a.prev, .pagination_container a.next { top: 0px; position: absolute; color: #666 !important; text-decoration: underline; } .pagination_container a.prev:hover, .pagination_container a.next:hover { text-decoration: none; color: #eaeaea !important; } .pagination_container a.prev { left: 0px; } .pagination_container a.next { right: 0px; } /* cpt_biere File: _cpt/_biere.scss Beschreibung: CSS Styles für News Übersicht und News Detailseite Autor: Roman Kröpl 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: 'Mulish', Arial, sans-serif; color: white; background: #26388b; font-size: 30px; padding: 16px 26px; line-height: 111%; } .sortimentbier .text .title.smaller { margin-left: 55px; } .sortimentbier .text .subline { color: #acb9c5; 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 .text.max_width { width: 100%; } .sortimentbier .text.max_width .beschreibung { padding: 0 55px; } .sortimentbier .infos { width: 100%; margin-top: 25px; display: flex; flex-flow: column wrap; } .sortimentbier .infos .accordion { width: 100%; } .sortimentbier .infos .accordion + .accordion { margin-top: 1rem; } .sortimentbier .infos button { font-weight: 700; color: white; display: flex; background: #26388b; width: calc(100% - 140px); margin: 0; } .sortimentbier .infos button[aria-expanded="true"] i { transform: scaleY(-1); } @media (max-width: 767px) { .sortimentbier .infos button { width: 80%; margin: 0 auto; } } .sortimentbier .infos i { font-style: normal; margin-left: auto; line-height: 1; transition: transform 0.3s ease-in-out; } .sortimentbier .infos i svg { width: 2rem; height: 2rem; fill: white; } .sortimentbier .infos .toggletext { width: calc(100% - 140px); } .sortimentbier .infos .toggletext .cb_trennlinie { margin: 20px 0; padding: 0; } .sortimentbier .infos .toggletext .cb_trennlinie .trennlinie { width: 100%; height: 1px; background-color: #26388b; } @media (max-width: 767px) { .sortimentbier .infos .toggletext { width: 80%; margin: 0 auto; } } .sortimentbier .infos .naehrwert-tabelle table { width: 100%; border: 1px solid #26388b; } .sortimentbier .infos .naehrwert-tabelle table caption { color: #3f3f51; padding-bottom: 15px; padding-top: 0; } @media (max-width: 767px) { .sortimentbier .infos .naehrwert-tabelle table caption { text-align: center; } } .sortimentbier .infos .naehrwert-tabelle table th, .sortimentbier .infos .naehrwert-tabelle table td { padding: 10px 15px 0; } .sortimentbier .infos .naehrwert-tabelle table th { font-weight: normal; background: transparent; } .sortimentbier .infos .naehrwert-tabelle table td { text-align: right; border-left: 1px solid #26388b; } .sortimentbier .infos .naehrwert-tabelle table tr:last-of-type th, .sortimentbier .infos .naehrwert-tabelle table tr:last-of-type td { padding: 10px 15px 10px; } .sortimentbier .halb-breite-infos { width: 80%; margin: 0 auto; } .sortimentbier .halb-breite-infos button { width: 100%; } .sortimentbier .halb-breite-infos .toggletext { width: 90%; margin: 0 auto; } .sortimentbier .halb-breite-infos .naehrwert-tabelle { padding: 0; } .sortimentbier .more-info { display: flex; width: 75%; justify-content: flex-end; margin-top: 30px; gap: 20px; } @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 .btn { left: 0px; } .sortimentbier.first .infos .stammwurze { margin-right: 60px; } } /* ┌┐┌┌─┐┬ ┬┌─┐┬ ┌─┐┌┬┐┌┬┐┌─┐┬─┐ │││├┤ │││└─┐│ ├┤ │ │ ├┤ ├┬┘ ┘└┘└─┘└┴┘└─┘┴─┘└─┘ ┴ ┴ └─┘┴└─ File: _modules/_newsletter.scss Beschreibung: Alle Styles für die Newslettersysteme ( mailchimp | cleverreach ) Autor: Roman Kröpl Datum: 22.02.2016 */ /* ┌─┐┬ ┌─┐┬ ┬┌─┐┬─┐┬─┐┌─┐┌─┐┌─┐┬ ┬ │ │ ├┤ └┐┌┘├┤ ├┬┘├┬┘├┤ ├─┤│ ├─┤ └─┘┴─┘└─┘ └┘ └─┘┴└─┴└─└─┘┴ ┴└─┘┴ ┴ */ .cr_form { /* Subscribe Button */ } .cr_form .cr_ipe_item { /* email input field */ } @media screen and (max-width: 767px) { .cr_form .cr_ipe_item { float: none; margin-right: 0px; margin-right: 0rem; } } @media screen and (min-width: 768px) { .cr_form .cr_ipe_item { float: left; margin-right: 15px; margin-right: 1.5rem; } } @media screen and (min-width: 992px) { .cr_form .cr_ipe_item { float: left; margin-right: 15px; margin-right: 1.5rem; } } @media screen and (max-width: 767px) { .cr_form .cr_ipe_item.musthave { width: 100%; } } @media screen and (min-width: 768px) { .cr_form .cr_ipe_item.musthave { width: 335px; } } @media screen and (min-width: 992px) { .cr_form .cr_ipe_item.musthave { width: 335px; } } .cr_form .cr_ipe_item.musthave input[type='text'] { border-radius: 0px; border-radius: 0rem; border: 1px solid #acb9c5; background: #fff; color: #2c373f; width: 100% !important; padding: 6px 10px; padding: 0.6rem 1rem; text-indent: 0px; text-indent: 0rem; font-weight: normal !important; } .cr_form .submit_container { margin-right: 0px; margin-right: 0rem; text-align: center; } @media screen and (max-width: 767px) { .cr_form .submit_container { margin-top: 15px; margin-top: 1.5rem; } } @media screen and (min-width: 768px) { .cr_form .submit_container { margin-top: 0px; margin-top: 0rem; } } @media screen and (min-width: 992px) { .cr_form .submit_container { margin-top: 0px; margin-top: 0rem; } } .cr_form .submit_container .cr_button { text-shadow: none; text-transform: uppercase; -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 */ text-align: center; display: inline-block; border-radius: 0px; border-radius: 0rem; width: 150px; width: 15rem; border: 1px solid #f66e00; background: #fff; color: #f66e00; padding: 7px 15px 6px 15px; padding: 0.7rem 1.5rem 0.6rem 1.5rem; font-family: "Mulish", Arial, sans-serif; font-size: 14px; font-size: 1.4rem; box-shadow: none !important; } .cr_form .submit_container .cr_button:hover { background-color: #f66e00; color: #fff; } /* ┌┬┐┌─┐┬┬ ┌─┐┬ ┬┬┌┬┐┌─┐ │││├─┤││ │ ├─┤││││├─┘ ┴ ┴┴ ┴┴┴─┘└─┘┴ ┴┴┴ ┴┴ */ #mc-embedded-subscribe-form { /* Subscribe Button */ } #mc-embedded-subscribe-form .mc-field-group { /* E-Mail Feld */ } @media screen and (max-width: 767px) { #mc-embedded-subscribe-form .mc-field-group { float: none; margin-right: 0px; margin-right: 0rem; width: 100%; } } @media screen and (min-width: 768px) { #mc-embedded-subscribe-form .mc-field-group { float: left; margin-right: 15px; margin-right: 1.5rem; width: 335px; } } @media screen and (min-width: 992px) { #mc-embedded-subscribe-form .mc-field-group { float: left; margin-right: 15px; margin-right: 1.5rem; width: 335px; } } #mc-embedded-subscribe-form .mc-field-group label { display: none; } #mc-embedded-subscribe-form .mc-field-group input[type='email'] { border-radius: 0px; border-radius: 0rem; border: 1px solid #acb9c5; background: #fff; color: #2c373f; width: 100% !important; padding: 6px 10px; padding: 0.6rem 1rem; text-indent: 0px; text-indent: 0rem; font-weight: normal !important; } #mc-embedded-subscribe-form #mc-embedded-subscribe { text-shadow: none; text-transform: uppercase; -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 */ text-align: center; display: inline-block; border-radius: 0px; border-radius: 0rem; width: 150px; width: 15rem; border: 1px solid #e85c41; background: #fff; color: #e85c41; padding: 7px 15px 6px 15px; padding: 0.7rem 1.5rem 0.6rem 1.5rem; font-family: "Mulish", Arial, sans-serif; font-size: 14px; font-size: 1.4rem; box-shadow: none !important; } #mc-embedded-subscribe-form #mc-embedded-subscribe:hover { background-color: #e85c41; color: #fff; } @media screen and (max-width: 767px) { #mc-embedded-subscribe-form #mc-embedded-subscribe { display: block; margin: 0 auto; margin-top: 15px; margin-top: 1.5rem; } } @media screen and (min-width: 768px) { #mc-embedded-subscribe-form #mc-embedded-subscribe { margin-top: 0px; margin-top: 0rem; } } @media screen and (min-width: 992px) { #mc-embedded-subscribe-form #mc-embedded-subscribe { margin-top: 0px; margin-top: 0rem; } } .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 #acb9c5; background: #efefef; color: #2c373f; 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: "Mulish", 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 #26388b; color: #26388b; 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: Roman Kröpl Datum: 25.02.2016 */ #footer { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cca842+0,fce498+100 */ background: #f2e6ce; width: 100%; color: #2c373f; padding: 40px 0px; padding: 4rem 0rem; } @media (max-width: 767px) { #footer { text-align: center; } } #footer.cookiehinweis { margin-bottom: 50px; } #footer .headline { color: #26388b; font-family: 'Noto Serif', Arial, sans-serif; font-size: 26px; margin-bottom: 2rem; } #footer p, #footer a { margin: 0px; margin: 0rem; padding: 0px; padding: 0rem; } #footer .socialbtn { margin-bottom: 10px; } #footer .socialbtn a { color: #26388b; text-decoration: underline; padding: 2px 0; } #footer .socialbtn span { color: #26388b; display: inline-block; } #footer .socialbtn img { margin-right: 15px; margin-bottom: 5px; } #footer .whiteline { height: 1px; background: #26388b; margin-bottom: 3px; } #footer .footerline { color: #26388b; font-size: 14px; } #footer .footerline a { color: #26388b; font-size: 14px; padding-right: 6px; text-transform: uppercase; padding: 4px 0; } #footer .footerline .footerleft { float: left; } #footer .footerline .footerright { float: right; } @media (max-width: 767px) { #footer .footerline .footerright { float: left; } } #footer .centered { display: table; margin: 0 auto; width: 100%; text-align: center; } #footer ul.footer-nav { list-style-type: none; margin-bottom: 0px; margin-bottom: 0rem; margin: 0; } #footer ul.footer-nav li { list-style: none; } #footer ul.footer-nav li.current-menu-item a { color: #26388b; text-decoration: none; font-weight: bold; } #footer ul.footer-nav li a { display: inline-block; color: #26388b; text-transform: inherit !important; text-decoration: none; padding: 3px 0px; padding: 0.3rem 0rem; } #footer ul.footer-nav li a:first-child { padding-right: 8px; padding-right: 0.8rem; } #footer ul.footer-nav li a:hover { text-decoration: underline; color: #26388b; } #footer ul.footer-nav li a:active { color: #26388b; } .menu-footer ul { text-align: right; } .menu-footer ul li { display: inline-block; } .menu-footer ul li a { font-size: 8px; font-size: 0.8rem; text-transform: uppercase; font-family: "OpenSans Light", Arial, sans-serif; } /* ┌─┐┌─┐┌┐┌┌┬┐┬─┐┌─┐┌─┐┌┬┐ │ │ ││││ │ ├┬┘├─┤└─┐ │ └─┘└─┘┘└┘ ┴ ┴└─┴ ┴└─┘ ┴ File: _base/contast.scss Beschreibung: Alle Styles für kontrastreiche Seite Autor: Roman Kröpl 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; } /* 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(0rem) rotate(0deg); } 50% { -webkit-transform: translateY(0.9rem) rotate(0deg); } 100% { -webkit-transform: translateY(0.9rem) rotate(135deg); } } @keyframes inT { 0% { transform: translateY(0rem) rotate(0deg); } 50% { transform: translateY(0.9rem) rotate(0deg); } 100% { transform: translateY(0.9rem) rotate(135deg); } } @-webkit-keyframes outT { 0% { -webkit-transform: translateY(0rem) rotate(0deg); } 50% { -webkit-transform: translateY(0.9rem) rotate(0deg); } 100% { -webkit-transform: translateY(0.9rem) rotate(135deg); } } @keyframes outT { 0% { transform: translateY(0rem) rotate(0deg); } 50% { transform: translateY(0.9rem) rotate(0deg); } 100% { transform: translateY(0.9rem) rotate(135deg); } } @-webkit-keyframes inBtm { 0% { -webkit-transform: translateY(0rem) rotate(0deg); } 50% { -webkit-transform: translateY(-0.9rem) rotate(0deg); } 100% { -webkit-transform: translateY(-0.9rem) rotate(135deg); } } @keyframes inBtm { 0% { transform: translateY(0rem) rotate(0deg); } 50% { transform: translateY(-0.9rem) rotate(0deg); } 100% { transform: translateY(-0.9rem) rotate(135deg); } } @-webkit-keyframes outBtm { 0% { -webkit-transform: translateY(0rem) rotate(0deg); } 50% { -webkit-transform: translateY(-0.9rem) rotate(0deg); } 100% { -webkit-transform: translateY(-0.9rem) rotate(135deg); } } @keyframes outBtm { 0% { transform: translateY(0rem) rotate(0deg); } 50% { transform: translateY(-0.9rem) rotate(0deg); } 100% { transform: translateY(-0.9rem) rotate(135deg); } } .burgermenu-background { display: none; } .burgericon { margin-top: 20px; margin-left: auto; cursor: pointer; width: 3rem; z-index: 999; background-color: transparent; border: none; box-sizing: border-box; box-shadow: none; outline: none; padding: 0; } @media (min-width: 991px) { .burgericon { display: none; } } .burgericon:focus-visible { box-shadow: #fff 0px 0px 0px 4px !important; outline: 2px solid #111 !important; outline-offset: 4px !important; border-radius: 2px !important; } .burgericon i { background-color: #26388b; border-radius: 0.1rem; outline: 1px solid transparent; content: ''; display: block; width: 100%; height: 0.4rem; } .burgericon i:nth-child(1) { -webkit-animation: outT 0.8s backwards; animation: outT 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } .burgericon i:nth-child(2) { margin: 0.5rem 0; -webkit-animation: outM 0.8s backwards; animation: outM 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } .burgericon i:nth-child(3) { -webkit-animation: outBtm 0.8s backwards; animation: outBtm 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } body.mobilemenu-open #wrapper main, body.mobilemenu-open #wrapper footer { display: none; } body.mobilemenu-open #wrapper .mobilemenu-background { display: block; position: fixed; width: 100%; height: 100%; background: #26388b; z-index: 4; } body.mobilemenu-open #wrapper header { background: #26388b !important; } body.mobilemenu-open #wrapper header .container { width: 100%; background: transparent; border-bottom: none; position: absolute; margin: auto; flex-wrap: nowrap; flex-direction: column; justify-content: flex-start !important; overflow: auto; top: 0; } body.mobilemenu-open #wrapper header .container > .row { max-width: 750px; margin-left: auto; margin-right: auto; } @media (min-width: 992px) { body.mobilemenu-open #wrapper header .container > .row { max-width: 970px; } } body.mobilemenu-open #wrapper header .container #logo { top: -1px; } body.mobilemenu-open #wrapper header .container .col { display: flex; flex-direction: column; } @media (max-width: 767px) { body.mobilemenu-open #wrapper header .container .col { padding: 0; } } body.mobilemenu-open #wrapper header .container .logo-wrapper img { margin: auto; } body.mobilemenu-open #wrapper header .container .navbar { margin-top: 40px; } body.mobilemenu-open #wrapper .burgericon { order: -1; margin: 20px 0; } body.mobilemenu-open #wrapper .burgericon i { background-color: white; } body.mobilemenu-open #wrapper .burgericon i:nth-child(1) { -webkit-animation: inT 0.8s forwards; animation: inT 0.8s forwards; } body.mobilemenu-open #wrapper .burgericon i:nth-child(2) { -webkit-animation: inM 0.8s forwards; animation: inM 0.8s forwards; } body.mobilemenu-open #wrapper .burgericon i:nth-child(3) { -webkit-animation: inBtm 0.8s forwards; animation: inBtm 0.8s forwards; } body.mobilemenu-open #wrapper .menus-wrapper { flex-basis: 100%; margin-top: 5rem; } body.mobilemenu-open #wrapper #hauptmenu { margin-top: 30px; } body.mobilemenu-open #wrapper #hauptmenu a[aria-current=true], body.mobilemenu-open #wrapper #hauptmenu button[aria-current=true] { color: white; } body.mobilemenu-open #wrapper #hauptmenu > ul { display: flex !important; flex-flow: column nowrap; width: 100%; } body.mobilemenu-open #wrapper #hauptmenu > ul li { position: relative; padding: 0; display: block; } body.mobilemenu-open #wrapper #hauptmenu > ul li a, body.mobilemenu-open #wrapper #hauptmenu > ul li button { color: white; border-bottom: none; padding-top: 1.2rem; padding-bottom: 1.2rem; padding-right: 4.5rem; width: 100%; } body.mobilemenu-open #wrapper #hauptmenu > ul li.current-menu-item, body.mobilemenu-open #wrapper #hauptmenu > ul li.current-menu-parent, body.mobilemenu-open #wrapper #hauptmenu > ul li.current-menu-ancestor { border-bottom: 5px solid #26388b; } body.mobilemenu-open #wrapper #hauptmenu > ul li.current-menu-item > a, body.mobilemenu-open #wrapper #hauptmenu > ul li.current-menu-parent > a, body.mobilemenu-open #wrapper #hauptmenu > ul li.current-menu-ancestor > a, body.mobilemenu-open #wrapper #hauptmenu > ul li.current-menu-item button, body.mobilemenu-open #wrapper #hauptmenu > ul li.current-menu-parent button, body.mobilemenu-open #wrapper #hauptmenu > ul li.current-menu-ancestor button { color: black; background-color: white; } body.mobilemenu-open #wrapper #hauptmenu > ul li.current-menu-item + li, body.mobilemenu-open #wrapper #hauptmenu > ul li.current-menu-parent + li, body.mobilemenu-open #wrapper #hauptmenu > ul li.current-menu-ancestor + li { border-top: none; } body.mobilemenu-open #wrapper #hauptmenu > ul li.open button::before { fill: black; filter: brightness(0); } body.mobilemenu-open #wrapper #hauptmenu > ul ul.sub-menu { font-size: 1.8rem; margin-bottom: 1rem; } body.mobilemenu-open #wrapper #hauptmenu > ul ul.sub-menu a, body.mobilemenu-open #wrapper #hauptmenu > ul ul.sub-menu button { padding: 1rem 0; } body.mobilemenu-open #wrapper #hauptmenu > ul .menu-item-has-children.open > ul.sub-menu { display: block; position: static; opacity: 1; margin-top: 0; margin-left: 1.5rem; margin-right: 1.5rem; width: auto; border: none; background: transparent; } body.mobilemenu-open #wrapper #hauptmenu > ul .submenu-button-style { width: 100%; position: relative; } body.mobilemenu-open #wrapper #hauptmenu ul li.menu-item-has-children > button::after { content: url('data:image/svg+xml; utf8, '); right: 1rem; } body.mobilemenu-open #wrapper #hauptmenu ul li.current-menu-parent button::after, body.mobilemenu-open #wrapper #hauptmenu ul li.current-menu-parent button:focus::after { content: url('data:image/svg+xml; utf8, '); } body.mobilemenu-open #wrapper #hauptmenu ul li.current-menu-item > a { color: #26388b !important; } .header_slider { background-color: #26388b; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; padding: 0 3.5rem 0 5rem; justify-content: space-between; width: 100%; } @media (min-width: 768px) { .header_slider { height: 100vh; min-height: 70rem; } } @media (min-width: 1200px) { .header_slider { padding-left: 15rem; padding-right: 0; min-height: 85rem; } } @media (min-width: 1600px) { .header_slider { min-height: 100rem; } } .header_slider .slides-outer { padding-right: 0; margin-right: 15px; } .header_slider > .row { width: 100%; } @media (min-width: 1800px) { .header_slider .offset-wrapper { padding-left: 8%; } } .header_slider .slide-item { position: relative; margin-bottom: 3rem; box-shadow: 6px 6px 16px -3px black; } @media (min-width: 576px) { .header_slider .slide-item { margin-bottom: 0; } } .header_slider .slide-item a { display: block; } .header_slider .slide-item:hover .image-wrapper video, .header_slider .slide-item:hover .image-wrapper img { transform: scale(1.05); } .header_slider .slide-item:hover .text-wrapper::before { top: 20%; } .header_slider .slide-item .stop-animation .icon { top: 1rem; z-index: 99; } .header_slider .owl-stage-outer { padding-bottom: 6rem; } .header_slider .owl-stage { padding-left: 0 !important; } .header_slider .fix-text-wrapper { margin: 14rem 0 3rem; max-width: 80%; } @media (min-width: 768px) { .header_slider .fix-text-wrapper { margin: 8rem 5rem 3rem; display: flex; flex-direction: column; justify-content: center; height: 100%; margin: 0; max-width: unset; } } .header_slider .image-wrapper { position: relative; overflow: hidden; padding-bottom: 175%; } @media (min-width: 2200px) { .header_slider .image-wrapper { padding-bottom: 170%; } } .header_slider .image-wrapper img, .header_slider .image-wrapper video { height: 100%; object-fit: cover; opacity: 1; position: absolute; width: 100%; transition: transform 0.3s; top: 0; left: 0; } .header_slider .header-owl-carousel { overflow: hidden; margin-top: 3rem; margin-bottom: 3rem; list-style-type: none; } @media (min-width: 768px) { .header_slider .header-owl-carousel { max-width: 103vw; display: flex; justify-content: flex-end; margin-bottom: 0; padding: 15px 0; } } .header_slider .text-wrapper { position: absolute; z-index: 3; bottom: 0; padding: 3rem 2rem 2rem; left: 0; right: 0; top: 0; display: flex; flex-direction: column; justify-content: flex-end; } .header_slider .text-wrapper::before { background-image: linear-gradient(180deg, transparent 0%, #000 95%, #000 100%); content: ""; position: absolute; bottom: 0; left: 0; right: 0; top: 50%; z-index: 2; transition: top 0.3s; } .header_slider .text-wrapper .topline, .header_slider .text-wrapper .headline { position: relative; z-index: 4; } .header_slider .text-wrapper .topline { text-transform: uppercase; color: white; font-size: 1.4rem; } .header_slider .text-wrapper .headline { width: 90%; color: white; font-size: 1.7rem; line-height: 1.1; hyphens: auto; } @media (min-width: 768px) { .header_slider .text-wrapper .headline { font-size: 2.4rem; } } .header_slider .text-wrapper svg { position: absolute; z-index: 3; right: 2rem; bottom: 2.5rem; } .header_slider h1 { color: white; line-height: 1; } .header_slider .btn:active, .header_slider .btn:hover, .header_slider .btn:focus { background-color: #26388b !important; border-color: #26388b !important; box-shadow: none !important; }