/* compiled by scssphp v0.6.2 on Thu, 23 Mar 2017 17:23:44 +0100 (1.1002s) */ /* ┌┬┐┌─┐┌─┐┌┬┐ ┌─┐┬┌─┐┬ ┬ ┌─┐┌┬┐┌┐ ┬ ┬ │ ├┤ ├─┤│││ └─┐│└─┐│ │ │ ┬│││├┴┐├─┤ ┴ └─┘┴ ┴┴ ┴ └─┘┴└─┘└─┘ └─┘┴ ┴└─┘┴ ┴ */ /* ┌┬┐┬─┐ ┬┬┌┐┌┌─┐ ││││┌┴┬┘││││└─┐ ┴ ┴┴┴ └─┴┘└┘└─┘ 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: 'Gotham Bold'; src: url('../fonts/GOTHAM-BOLD.TTF') format('truetype'); src: url('../fonts/Gotham-Bold.otf') format('opentype'); } @font-face { font-family: 'Gotham Medium'; src: url('../fonts/Gotham-Book.otf') format('opentype'); } @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; } /* ┬ ┬┌─┐┬─┐┬┌─┐┌┐ ┬ ┌─┐┌┐┌ └┐┌┘├─┤├┬┘│├─┤├┴┐│ ├┤ │││ └┘ ┴ ┴┴└─┴┴ ┴└─┘┴─┘└─┘┘└┘ 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 ================ */ /* Hauptmenü Verwendet in: hauptmenu.scss */ /* Footer Verwendet in: _footer.scss */ /* Formulare Verwendet in: _cookiehinweis.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: 'Gotham Medium', Arial, sans-serif; color: #1b1b1b; overflow-x: hidden; width: 100%; text-align: left; background-color: #f4f4f2; background-position: top center; background-repeat: no-repeat; /* 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; } ::-webkit-input-placeholder { color: #d1d1d1; } :-moz-placeholder { color: #d1d1d1; } ::-moz-placeholder { color: #d1d1d1; } :-ms-input-placeholder { color: #d1d1d1; } /* LINKS */ a { color: #0e0e1e; -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: #0e0e1e; } a:active { color: #0e0e1e; } a:focus { color: #0e0e1e; } input::-ms-clear { display: none; } b, strong { color: #0e0e1e; } 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; margin: 0px 0px 17px 17px; margin: 0rem 0rem 1.7rem 1.7rem; } /* Listenelemente */ ul { list-style-type: square; margin: 0px 0px 20px 20px; margin: 0rem 0rem 2rem 2rem; } 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; } /* ┬ ┬┌─┐┬ ┌─┐┌─┐┬─┐ ├─┤├┤ │ ├─┘├┤ ├┬┘ ┴ ┴└─┘┴─┘┴ └─┘┴└─ 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 { background: white; -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; border-bottom: 1px solid #d1d1d1; width: 100%; z-index: 200; padding: 0px; padding: 0rem; /* kleinere Darstellung wenn man nach unten scrollt */ } 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; } @media screen and (max-width: 767px) { header#header { position: absolute; } } @media screen and (min-width: 768px) { header#header { position: fixed; } } @media screen and (min-width: 992px) { header#header { position: fixed; } } header#header #logo { float: left; display: block; z-index: 1000; position: relative; /* -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; */ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (max-width: 767px) { header#header #logo { margin: 0px; margin: 0rem; } } @media screen and (min-width: 768px) { header#header #logo { margin: 0px; margin: 0rem; } } @media screen and (min-width: 992px) { header#header #logo { margin: 0px; margin: 0rem; } } header#header #logo img { /* -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; */ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (max-width: 767px) { header#header #logo img { max-height: 60px; max-height: 6rem; } } @media screen and (min-width: 768px) { header#header #logo img { max-height: 100px; max-height: 10rem; } } @media screen and (min-width: 992px) { header#header #logo img { max-height: 100px; max-height: 10rem; } } header#header .nav.navbar-nav { float: right; } header#header .navbar { /* -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; */ -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: 30px 0px 0px 0px; margin: 3rem 0rem 0rem 0rem; } } @media screen and (min-width: 992px) { header#header .navbar { margin: 0px 0px 0px 0px; margin: 0rem 0rem 0rem 0rem; } } header#header.smaller .navbar { margin: 0px 0px 0px 0px; margin: 0rem 0rem 0rem 0rem; } header#header.smaller #logo { margin: 5px 0px 0px 0px; margin: 0.5rem 0rem 0rem 0rem; margin: 5px 0px 0px 0px; margin: 0.5rem 0rem 0rem 0rem; } header#header.smaller #logo img { max-height: 40px; max-height: 4rem; } header#header.smaller #hauptmenu ul li a { padding: 17px 14px; padding: 1.7rem 1.4rem; } /* ┬ ┬┌─┐┌─┐┌┬┐┌─┐┬─┐ ┌─┐┌┬┐┌─┐ ├─┤├┤ ├─┤ ││├┤ ├┬┘ │ │ ├─┤ ┴ ┴└─┘┴ ┴─┴┘└─┘┴└─ └─┘ ┴ ┴ ┴ 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: #444; } .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: #444; } .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: #1b1b1b; font-family: Arial, sans-serif; font-size: 14px; font-size: 1.4rem; box-shadow: none !important; } .topnav .loginstatus .layer form#login_form .fields input:hover { background-color: #3a3a3a; color: #fff; } .topnav .loginstatus .layer form#login_form a { padding: 5px; padding: 0.5rem; background: #ccc; text-transform: uppercase; } .topnav .loginstatus .layer form#login_form a:hover { background-color: #3a3a3a; color: #fff; } .topnav .loginstatus:hover { -webkit-border-radius: 6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px; -ms-border-radius: 6px 6px 0px 0px; -o-border-radius: 6px 6px 0px 0px; border-radius: 6px 6px 0px 0px; } .topnav .loginstatus:hover .layer { display: block; } .smaller .topnav { display: none; } /* ┌─┐┌─┐┌─┐┌─┐┌─┐┌─┐┬┌┐ ┬┬ ┬┌┬┐┬ ┬ ┌┬┐┌─┐┌┐┌┬ ┬ ├─┤│ │ ├┤ └─┐└─┐│├┴┐││ │ │ └┬┘ │││├┤ ││││ │ ┴ ┴└─┘└─┘└─┘└─┘└─┘┴└─┘┴┴─┘┴ ┴ ┴ ┴ ┴└─┘┘└┘└─┘ File: _modules/accessibilitymenu.scss Beschreibung: Menu für Barrierefreiheit Autor: 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: Roman Kröpl Datum: 01.02.2016 */ /* Layer der sich über die gesamte Seite legt, wenn das Mobile Menü geöffnet ist */ .mobile_menu_background { display: none; position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 4; } .mobile_menu_background.menu-opened { display: block; } /* Hauptnavigation */ #hauptmenu { margin: 0px; margin: 0rem; padding: 0px; padding: 0rem; border: 0; list-style: none; line-height: 1; display: block; position: relative; font-family: 'Gotham Bold', Arial, sans-serif; z-index: 1; /* Mobiles Burger-Icon */ } @media screen and (max-width: 767px) { #hauptmenu { width: 100%; float: none; } } @media screen and (min-width: 768px) { #hauptmenu { float: none; } } @media screen and (min-width: 992px) { #hauptmenu { float: right; display: inline-block; } } #hauptmenu:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #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; } } @media screen and (min-width: 992px) { #hauptmenu .burgermenu { display: none; } } #hauptmenu .burgermenu.navTrigger { width: 30px; height: 25px; margin-right: 20px; } #hauptmenu .burgermenu.navTrigger i { background-color: #1b1b1b; 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: block; width: auto; } } #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: 46px; 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: 22px; 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: 19px; 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: block; position: relative; 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; } } @media screen and (max-width: 767px) { #hauptmenu ul li.search { border-bottom: 1px solid white; } } @media screen and (min-width: 768px) { #hauptmenu ul li.search { border-bottom: 1px solid white; } } @media screen and (max-width: 767px) { #hauptmenu ul li.search a { font-size: 14px; font-size: 1.4rem; } #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; } #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; } #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 a { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; border-left: 1px solid #d1d1d1; font-size: 14px; font-size: 1.4rem; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; } @media screen and (max-width: 767px) { #hauptmenu ul li a { padding: 16px 50px; padding: 1.6rem 5rem; color: #fff; text-align: center; } } @media screen and (min-width: 768px) { #hauptmenu ul li a { padding: 16px 50px; padding: 1.6rem 5rem; color: #fff; text-align: center; } } @media screen and (min-width: 992px) { #hauptmenu ul li a { padding: 43px 14px; padding: 4.3rem 1.4rem; color: #1b1b1b; text-align: left; } } @media (max-width: 1305px) { #hauptmenu ul li a { padding: 16px 14px; padding: 1.6rem 1.4rem; } } #hauptmenu ul li a.fa:before { margin-right: 5px; margin-right: 0.5rem; } #hauptmenu ul li:hover > a { -webkit-transition: background 0.3s; -moz-transition: background 0.3s; -ms-transition: background 0.3s; -o-transition: background 0.3s; transition: background 0.3s; } @media screen and (max-width: 767px) { #hauptmenu ul li:hover > a { color: #fff; } } @media screen and (min-width: 768px) { #hauptmenu ul li:hover > a { color: #fff; } } @media screen and (min-width: 992px) { #hauptmenu ul li:hover > a { color: #333; background: #eee; } } #hauptmenu ul li.has-sub { /* Hover Status für + Symbol => wird zu - */ } #hauptmenu ul li.has-sub:hover > a:before { top: 23px; height: 0; } #hauptmenu ul li:hover > ul { left: auto; } @media screen and (max-width: 767px) { #hauptmenu ul li:hover > ul { background: transparent; } } @media screen and (min-width: 768px) { #hauptmenu ul li:hover > ul { background: transparent; } } @media screen and (min-width: 992px) { #hauptmenu ul li:hover > ul { background: white; border-top: 1px solid #d1d1d1; } } #hauptmenu ul li#menu-item-2770:hover ul { left: inherit; right: 0; } @media screen and (max-width: 767px) { #hauptmenu ul li.current-menu-item > a, #hauptmenu ul li.current-menu-parent > a { color: #fff; } } @media screen and (min-width: 768px) { #hauptmenu ul li.current-menu-item > a, #hauptmenu ul li.current-menu-parent > a { color: #fff; } } @media screen and (min-width: 992px) { #hauptmenu ul li.current-menu-item > a, #hauptmenu ul li.current-menu-parent > a { color: #0e0e1e; } } @media screen and (min-width: 992px) { #hauptmenu ul li.current-menu-item > a, #hauptmenu ul li.current-menu-parent > a { background: #eee; } } #hauptmenu ul li ul { /* SubSubmenu + Button in der mobilen Navigation */ } @media screen and (min-width: 992px) { #hauptmenu ul li ul { position: absolute; left: -9999px; } } #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%; background: rgba(255, 255, 255, 0.2); /* Fügt ein + Symbol zum Submenu hinzu, wenn es weitere Submenüelemente gibt */ /* Style für SubSubmenü */ } @media screen and (max-width: 767px) { #hauptmenu ul li ul li:hover { background: transparent; } } @media screen and (min-width: 768px) { #hauptmenu ul li ul li:hover { background: transparent; } } @media screen and (min-width: 992px) { #hauptmenu ul li ul li:hover { background: transparent; } } #hauptmenu ul li ul li.has-sub:hover { /* wird benötigt, wenn es weitere Submenüs gibt */ } #hauptmenu ul li ul li.has-sub:hover > a:before { top: 17px; height: 0; } @media screen and (max-width: 767px) { #hauptmenu ul li ul li.has-sub:hover > a { background: #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: white; } } #hauptmenu ul li ul li a { min-width: 200px; padding: 10px 20px; padding: 1rem 2rem; font-size: 12px; font-size: 1.2rem; line-height: 14px; /* 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: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; color: #0e0e1e; } } @media screen and (max-width: 767px) { #hauptmenu ul li ul li a:hover { background: #fff; color: #1b1b1b; } } @media screen and (min-width: 768px) { #hauptmenu ul li ul li a:hover { background: #fff; color: #1b1b1b; } } @media screen and (min-width: 992px) { #hauptmenu ul li ul li a:hover { background: #eee; color: #0e0e1e; } } @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 { background-color: #f4f4f2; overflow: hidden; } @media screen and (max-width: 767px) { #main-container { margin-top: 60px; margin-top: 6rem; } } @media screen and (min-width: 768px) { #main-container { margin-top: 98px; margin-top: 9.8rem; } } @media screen and (min-width: 992px) { #main-container { margin-top: 99px; margin-top: 9.9rem; } } @media (max-width: 1305px) and (min-width: 991px) { #main-container { margin-top: 144px; margin-top: 14.4rem; } } /* Headlines */ h1, h2, h3, h4, .h1, .h2, .h3, .h4 { text-transform: inherit; margin: 0px 0px 20px 0px; margin: 0rem 0rem 2rem 0rem; color: #0e0e1e; } h1, .h1 { font-family: 'Gotham Bold', Arial, sans-serif; text-transform: uppercase; } @media screen and (max-width: 767px) { h1, .h1 { font-size: 25px; font-size: 2.5rem; margin: 10px 0px 10px 0px; margin: 1rem 0rem 1rem 0rem; } } @media screen and (min-width: 768px) { h1, .h1 { font-size: 30px; font-size: 3rem; margin: 20px 0px 15px 0px; margin: 2rem 0rem 1.5rem 0rem; } } @media screen and (min-width: 992px) { h1, .h1 { font-size: 32px; font-size: 3.2rem; margin: 30px 0px 20px 0px; margin: 3rem 0rem 2rem 0rem; } } h1.headline, .h1.headline { margin-bottom: 5px; margin-bottom: 0.5rem; margin-top: 7px; margin-top: 0.7rem; } h2, .h2 { font-family: 'Gotham Medium', Arial, sans-serif; text-transform: uppercase; margin-top: 15px; margin-top: 1.5rem; } @media screen and (max-width: 767px) { h2, .h2 { font-size: 18px; font-size: 1.8rem; } } @media screen and (min-width: 768px) { h2, .h2 { font-size: 20px; font-size: 2rem; } } @media screen and (min-width: 992px) { h2, .h2 { font-size: 22px; font-size: 2.2rem; } } h2.headline, .h2.headline { margin-left: 15px; border-bottom: 1px solid #d1d1d1; display: inline-block; padding-bottom: 7px; font-size: 17px; font-size: 1.7rem; } h2.subline, .h2.subline { margin-bottom: 25px; margin-bottom: 2.5rem; margin-top: 10px; margin-top: 1rem; } h3, .h3 { font-family: 'Gotham Bold', Arial, sans-serif; line-height: 130%; } @media screen and (max-width: 767px) { h3, .h3 { font-size: 16px; font-size: 1.6rem; } } @media screen and (min-width: 768px) { h3, .h3 { font-size: 17px; font-size: 1.7rem; } } @media screen and (min-width: 992px) { h3, .h3 { font-size: 18px; font-size: 1.8rem; } } h3.headline, .h3.headline { margin-left: 15px; border-bottom: 1px solid #d1d1d1; display: inline-block; padding-bottom: 7px; } h4, .h4 { font-family: "OpenSans Regular", Arial, sans-serif; } @media screen and (max-width: 767px) { h4, .h4 { font-size: 18px; font-size: 1.8rem; } } @media screen and (min-width: 768px) { h4, .h4 { font-size: 20px; font-size: 2rem; } } @media screen and (min-width: 992px) { h4, .h4 { font-size: 24px; font-size: 2.4rem; } } p { margin: 0px 0px 20px 0px; margin: 0rem 0rem 2rem 0rem; font-size: 15px; font-size: 1.5rem; line-height: 23px; line-height: 2.3rem; color: #555; } /* Buttons */ .btn { font-family: 'Gotham Bold', Arial, sans-serif; font-size: 14px; font-size: 1.4rem; background: #e13c1b; text-shadow: none; text-transform: uppercase; padding: 7px 15px; padding: 0.7rem 1.5rem; color: #fff; display: inline-block; text-align: center; cursor: pointer; border: none; border-radius: 0; } .btn.white { color: #fff; border-color: #fff; } .btn.white:hover, .btn.white:active, .btn.white:focus { text-decoration: underline; } .btn:hover { opacity: 0.9; color: white; text-decoration: none; } .btn:active { box-shadow: none; } #wrapper { width: 100%; margin: 0 auto; overflow-x: hidden; } #wrapper .container.cb { margin-top: 30px; margin-top: 3rem; } #wrapper input[type="text"], #wrapper input[type="email"] { background: white; border: 1px solid #d1d1d1; padding: 10px 20px; padding: 1rem 2rem; width: 100%; outline: none; margin-bottom: 20px; margin-bottom: 2rem; border-radius: 0; } #wrapper input[type="text"]:focus, #wrapper input[type="email"]:focus { border-color: grey; } .temp_table { background: white; padding: 20px; display: none; } .temp_table td { text-align: center; padding: 1px 6px; } .temp_table tr.line_bottom { border-bottom: 1px solid lightgrey; } .temp_table tr.line_bottom td { padding-bottom: 7px; } .temp_table .pt15 { padding-top: 15px; } .temp_table .line_right { border-right: 1px solid lightgrey; } @media (min-width: 992px) { .temp_table.desktop { display: table-cell; } } @media (max-width: 767px) and (min-width: 651px) { .temp_table.desktop { display: table-cell; } } .temp_table.mobile .month td { padding-top: 5px; } @media (max-width: 991px) and (min-width: 768px) { .temp_table.mobile { display: table-cell; } } @media (max-width: 650px) { .temp_table.mobile { display: table-cell; } } @media (max-width: 396px) { .temp_table.mobile { padding: 10px; } } @media (max-width: 359px) { .temp_table.mobile { padding: 0px; } } @media (max-width: 430px) { .temp_table.mobile td { padding: 1px 5px; } } @media (max-width: 414px) { .temp_table.mobile td { padding: 1px 4px; } } @media (max-width: 396px) { .temp_table.mobile td { padding: 1px 3px; } } @media (max-width: 359px) { .temp_table.mobile td { padding: 1px 2px; } } @media (max-width: 329px) { .temp_table.mobile td { padding: 1px 1px; } } .temp_table.vusa_hovertable { padding: 0; display: inline-block; } .temp_table.vusa_hovertable td { border: 1px solid #d1d1d1; } .temp_table.vusa_hovertable tr:hover { background: #eee; } @media (max-width: 500px) { .temp_table.vusa_hovertable { margin: 0px -15px; margin: 0rem -1.5rem; } .temp_table.vusa_hovertable.smallerfont { font-size: 12px; } } .postid-3117 .right_col .similar_posts, .postid-3121 .right_col .similar_posts { display: none; } .postid-3117 iframe { height: 776px; width: 100%; border: none; } @media (max-width: 991px) { .postid-3117 iframe { height: 1065px; } } @media (max-width: 520px) { .postid-3117 iframe { height: 1085px; } } @media (max-width: 390px) { .postid-3117 iframe { height: 1085px; } } /* |-------------------------------------------------------------------------- | UItoTop jQuery Plugin 1.2 | http://www.mattvarone.com/web-design/uitotop-jquery-plugin/ |-------------------------------------------------------------------------- */ #top-link { display: none; position: fixed; right: 5px; bottom: 5px; color: black; font-weight: bold; text-decoration: none; border: none; background: url('../images/ui.totop.png'); padding: 10px; width: 51px; height: 51px; } @media (max-width: 767px) { .page-template-tpl_categories .npxs, .home .npxs { padding: 0; } .page-template-tpl_categories .npxs .news_entry .image_container, .home .npxs .news_entry .image_container { width: 32%; float: left; padding: 10px; padding: 1rem; } .page-template-tpl_categories .npxs .news_entry .text_container, .home .npxs .news_entry .text_container { padding: 5px; padding: 0.5rem; padding-left: 34%; } .page-template-tpl_categories .npxs .news_entry .text_container .category, .home .npxs .news_entry .text_container .category { margin-bottom: 10px; margin-bottom: 1rem; } .page-template-tpl_categories .npxs .news_entry .text_container p, .home .npxs .news_entry .text_container p { display: none; } .page-template-tpl_categories .npxs .news_entry .text_container time, .home .npxs .news_entry .text_container time { display: none; } .page-template-tpl_categories .npxs .news_entry .text_container h3, .home .npxs .news_entry .text_container h3 { margin-bottom: 10px; margin-bottom: 1rem; } } @media (max-width: 767px) { .firstbox .image_container { width: 100% !important; float: none !important; padding: 10px 15px !important; } .firstbox .text_container { padding: 5px 15px 10px 15px !important; } } #sitemapmenu ul li ul { margin-left: 20px; } #sitemapmenu ul li ul li ul { margin-left: 20px; } #sitemapmenu ul li ul li ul li ul { margin-left: 20px; } /* ┌─┐┌┐ ┬┌┬┐┌─┐┌┬┐ │ ├┴┐ │ │ ├┤ │││ └─┘└─┘ ┴ ┴ └─┘┴ ┴ 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: 0px; margin-bottom: 0rem; } } @media screen and (min-width: 992px) { .cb_item { margin-bottom: 0px; margin-bottom: 0rem; } } .cb_html { margin-bottom: 20px; margin-bottom: 2rem; } .cb_youtube_video { margin-bottom: 20px; margin-bottom: 2rem; } /* ┌─┐┌┐ ┌┐ ┬ ┌─┐┌─┐┬┌─ ┌─┐┌┬┐┌─┐┬─┐┌┬┐ │ ├┴┐ ├┴┐│ │ ││ ├┴┐ └─┐ │ ├─┤├┬┘ │ └─┘└─┘ └─┘┴─┘└─┘└─┘┴ ┴ └─┘ ┴ ┴ ┴┴└─ ┴ 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 { /* ┌─┐┌─┐┌─┐┌─┐┬─┐┌┬┐┬┌─┐┌┐┌ ├─┤│ │ │ │├┬┘ ││││ ││││ ┴ ┴└─┘└─┘└─┘┴└──┴┘┴└─┘┘└┘ */ } @media screen and (max-width: 767px) { .cb_block_start .full_width { margin: 0px; margin: 0rem; } } @media screen and (min-width: 768px) { .cb_block_start .full_width { margin: 0px -50% 0px -50%; } } @media screen and (min-width: 992px) { .cb_block_start .full_width { margin: 0px -50% 0px -50%; } } .cb_block_start .toggler { font-family: "OpenSans Bold", Arial, sans-serif; padding-bottom: 15px; padding-bottom: 1.5rem; border-top: 1px solid #d1d1d1; border-left: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; cursor: pointer; background-image: url('../images/acc_arrow_open.png'); background-position: left 13px top 14px; background-repeat: no-repeat; } .cb_block_start .toggler h4 { margin: 0; padding: 10px 0px 0px 40px; padding: 1rem 0rem 0rem 4rem; } .cb_block_start .toggler.active { background-image: url('../images/acc_arrow_close.png'); } .cb_block_start .toggletext .cb_item { border-left: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; } .cb_block_start.last { border-bottom: none; } /* ┌─┐┌┐ ┌─┐┌─┐┬─┐┌┬┐┬ ┬┬ ┌─┐┬─┐ │ ├┴┐ ├┤ │ │├┬┘││││ ││ ├─┤├┬┘ └─┘└─┘ └ └─┘┴└─┴ ┴└─┘┴─┘┴ ┴┴└─ 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 #c0c0c0; margin: 0px 2px; margin: 0rem 0.2rem; padding: 3.5px 6.25px 7.5px; padding: 0.35rem 0.625rem 0.75rem; } legend { border: 0; padding: 0; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; max-width: 100%; vertical-align: baseline; } button, 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: 270px; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input[type=text], textarea, select { outline: none; border: 1px solid #ccc; } textarea { overflow: auto; vertical-align: top; } pre { background-color: #fff; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; padding: 0px; padding: 0rem; margin: 0px; margin: 0rem; } .gform_wrapper { max-width: 100% !important; } .gform_wrapper .gform_heading { display: none; } .gform_wrapper ul li { list-style: none; } .gform_wrapper ul li.gfield { clear: none !important; /*form error*/ } .gform_wrapper ul li.gfield.gfield_error { width: 100% !important; background: none !important; border: none !important; } .gform_wrapper ul li.gfield.gfield_error.gfield_contains_required { margin-bottom: 0px; margin-bottom: 0rem; } .gform_wrapper ul li.gfield.gfield_error.gfield_contains_required div.ginput_container { max-width: 100% !important; margin-left: 0px; margin-left: 0rem; } .gform_wrapper ul li.gfield.gfield_error input[type=text] { border: solid 1px #f00 !important; } .gform_wrapper ul li.gfield.gfield_error.col-md-4 { width: 33.33333% !important; } .gform_wrapper ul li.gfield.gfield_error.col-md-5 { width: 41.66667% !important; } .gform_wrapper ul li.gfield.gfield_error.col-md-8 { width: 66.66667% !important; } .gform_wrapper ul li .validation_message { display: none !important; } .gform_wrapper ul li .ginput_container { margin-top: 0px; margin-top: 0rem; margin-bottom: 3px; margin-bottom: 0.3rem; } .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 #ccc; color: #1b1b1b; width: 100% !important; padding: 5px 10px; padding: 0.5rem 1rem; text-indent: 0px; text-indent: 0rem; font-weight: normal !important; } .gform_wrapper ul li .ginput_container textarea { height: auto; padding: 5px 10px; padding: 0.5rem 1rem; } .gform_wrapper .gform_validation_container { display: none; } .gform_wrapper .validation_error { border-top: none !important; border-bottom: none !important; color: #f00 !important; } .gform_wrapper.gf_browser_chrome ul.gform_fields li.gfield select { margin-left: 0px; margin-left: 0rem; width: 100%; } .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: #fff; border: 1px solid #ccc !important; padding: 10px 20px; padding: 1rem 2rem; border-radius: 0px; border-radius: 0rem; margin-bottom: 20px; margin-bottom: 2rem; } .gform_wrapper .gform_body ul { list-style: none !important; padding: 0px; padding: 0rem; margin: 0px; margin: 0rem; } .gform_wrapper .gform_body ul li.show-label label { display: block !important; } .gform_wrapper .gform_footer { padding: 0px; padding: 0rem; margin: 0px; margin: 0rem; } .gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer button.button { font-family: 'Gotham Bold', Arial, sans-serif; font-size: 14px; font-size: 1.4rem; background: #e13c1b; text-shadow: none; text-transform: uppercase; padding: 7px 15px; padding: 0.7rem 1.5rem; color: #fff; display: inline-block; text-align: center; cursor: pointer; border: none; border-radius: 0; width: auto; } .gform_wrapper .gform_footer input.button.white, .gform_wrapper .gform_footer button.button.white { color: #fff; border-color: #fff; } .gform_wrapper .gform_footer input.button.white:hover, .gform_wrapper .gform_footer button.button.white:hover, .gform_wrapper .gform_footer input.button.white:active, .gform_wrapper .gform_footer button.button.white:active, .gform_wrapper .gform_footer input.button.white:focus, .gform_wrapper .gform_footer button.button.white:focus { text-decoration: underline; } .gform_wrapper .gform_footer input.button:hover, .gform_wrapper .gform_footer button.button:hover { opacity: 0.9; color: white; text-decoration: none; } .gform_wrapper .gform_footer input.button:active, .gform_wrapper .gform_footer button.button:active { box-shadow: none; } .gfield_select { border-radius: 0px; border-radius: 0rem; border: 1px solid #ccc; background: none; color: #1b1b1b; width: 100% !important; } .gfield_label { font-weight: bold; } .gform_button { border: 2px #1b1b1b solid; padding: 7px 20px; padding: 0.7rem 2rem; font-family: Arial, sans-serif; color: #1b1b1b; text-transform: uppercase; font-size: 15px; font-size: 1.5rem; background-color: transparent; border-radius: 0px; border-radius: 0rem; } .gform_button:hover { color: #fff; background-color: #fff; } /* NEWSLETTER BOX */ .newsletter .gform_confirmation_wrapper, .newsletter form { max-width: 500px; width: 100%; margin: 0 auto; } .gchoice_8_1_0 { width: 75px; float: left; } .gchoice_8_1_0 input { margin-right: 5px; } .gchoice_8_1_1 input { margin-right: 5px; } #gform_submit_button_8 { border: none; border-radius: none; background: #e13c1b; color: white; font-family: 'Gotham Bold', Arial, sans-serif; margin-top: 10px; margin-top: 1rem; } .formular_wrapper { padding: 20px !important; } .ginput_container_radio { margin-top: 10px !important; margin-bottom: 10px !important; } input[type="radio"] { margin-right: 6px !important; } .ginput_recaptcha { margin-bottom: 20px !important; } .gfield_checkbox label { max-width: 90%; padding-left: 5px; } /* ┌─┐┌┐ ┌─┐┌─┐┌─┐┌─┐┬ ┌─┐ ┌┬┐┌─┐┌─┐ │ ├┴┐ │ ┬│ ││ ││ ┬│ ├┤ │││├─┤├─┘ └─┘└─┘ └─┘└─┘└─┘└─┘┴─┘└─┘ ┴ ┴┴ ┴┴ 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: #ccc 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 */ .cb_zitatelement { margin-bottom: 20px; margin-bottom: 2rem; } .cb_zitatelement .zitat { border-top: 6px solid #0e0e1e; border-bottom: 1px solid #d1d1d1; padding: 12px 8px 0px 8px; padding: 1.2rem 0.8rem 0rem 0.8rem; } .cb_zitatelement .zitat p { font-family: 'Gotham Medium', Arial, sans-serif; font-size: 18px; font-size: 1.8rem; color: black; font-weight: bold; } /* ┌─┐┌┐ ┌┬┐┌─┐─┐ ┬┌┬┐┌─┐┬ ┌─┐┌┬┐┌─┐┌┐┌┌┬┐ │ ├┴┐ │ ├┤ ┌┴┬┘ │ ├┤ │ ├┤ │││├┤ │││ │ └─┘└─┘ ┴ └─┘┴ └─ ┴ └─┘┴─┘└─┘┴ ┴└─┘┘└┘ ┴ File: _modules/_cb_textelement.scss Beschreibung: CSS Styles für Textelemente Autor: Roman Kröpl Datum: 01.02.2016 */ .cb_textelement { /* Text alighnment is set in Wordpress Content Box Element */ } .cb_textelement .container { max-width: 100%; } .cb_textelement .subline { text-transform: uppercase; color: #1b1b1b; margin-bottom: 15px; margin-bottom: 1.5rem; } .cb_textelement .entry-text { line-height: 20px; line-height: 2rem; } .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 .myanchor { padding-top: 60px; padding-top: 6rem; margin-top: -60px; margin-top: -6rem; } .cb_textelement a { text-decoration: underline; } /* ┌─┐┌┬┐ ┌┐ ┬┬ ┌┬┐┌─┐┬─┐┌─┐┌─┐┬ ┌─┐┬─┐┬┌─┐ │ ││ ├┴┐││ ││├┤ ├┬┘│ ┬├─┤│ ├┤ ├┬┘│├┤ └─┘─┴┘ └─┘┴┴─┘─┴┘└─┘┴└─└─┘┴ ┴┴─┘└─┘┴└─┴└─┘ 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: #000; } .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 { background: #333; background: rgba(0, 0, 0, 0.8); } .gallery li:hover a img { opacity: 0.6; -ms-filter: "progid:DXImageTra nsform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); -moz-transition: scale(1.03); -webkit-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03); } /* ┌─┐┌┬┐ ┬┌─┐┌─┐┌┐┌┌─┐ │ ││ ││ │ ││││└─┐ └─┘─┴┘ ┴└─┘└─┘┘└┘└─┘ File: _modules/_cb_icons.scss Beschreibung: CSS Styles für Icons (Iconset) Autor: Roman Kröpl Datum: 01.02.2016 */ .cb_iconset { width: 80%; margin: 0 auto; } .cb_iconset .cb_icons .iconitem { text-align: center; } .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 img:hover { opacity: 0.6; -ms-filter: "progid:DXImageTra nsform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); -moz-transition: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .cb_iconset .cb_icons .iconitem .image_container .fa { font-size: 60px; font-size: 6rem; color: #333; } .cb_iconset .cb_icons .iconitem p:last-child { margin-bottom: 0px; margin-bottom: 0rem; } /* ┌─┐┌┐ ┌─┐┬┌─┐┌┬┐┬ ┬┬─┐┌─┐ │ ├┴┐ ├─┘││ │ │ │├┬┘├┤ └─┘└─┘ ┴ ┴└─┘ ┴ └─┘┴└─└─┘ 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/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; } .search .search-title { font-size: 24px; font-size: 2.4rem; margin-bottom: 10px; margin-bottom: 1rem; } .search .searchform_container { background: #ccc; } @media screen and (max-width: 767px) { .search .searchform_container { margin: 0px; margin-top: 30px; padding: 30px 0px; } } @media screen and (min-width: 768px) { .search .searchform_container { margin: 30px -50% 0px -50%; padding: 30px 0px; } } @media screen and (min-width: 992px) { .search .searchform_container { margin: 30px -50% 0px -50%; padding: 30px 0px; } } .search .searchform_container .container { display: table; } .search .searchform_container .container #searchform { display: table-cell; text-align: center; } .search .searchform_container .container #searchform label { min-width: 100px; text-align: left; } @media screen and (max-width: 767px) { .search .searchform_container .container #searchform label { display: none; } } @media screen and (min-width: 768px) { .search .searchform_container .container #searchform label { display: inline-block; } } @media screen and (min-width: 992px) { .search .searchform_container .container #searchform label { display: inline-block; } } .search .searchform_container .container #searchform input { border: 1px solid #ccc; background: #efefef; color: #1b1b1b; padding: 5px 10px; padding: 0.5rem 1rem; text-indent: 0px; text-indent: 0rem; font-weight: normal !important; } .search .searchresult_container { background: #e5e5e5; } @media screen and (max-width: 767px) { .search .searchresult_container { margin: 0px; margin-bottom: 30px; padding: 30px 30px; } } @media screen and (min-width: 768px) { .search .searchresult_container { margin: 0px -50% 30px -50%; padding: 30px 0px; } } @media screen and (min-width: 992px) { .search .searchresult_container { margin: 0px -50% 30px -50%; padding: 30px 0px; } } .search .searchresult_container .container { display: table; } .search .searchresult_container .container .result { display: table-cell; text-align: center; } .search article { border-bottom: solid 1px #eaeaea; margin-bottom: 20px; margin-bottom: 2rem; } .search #search-nav { /*&:before{ font-family: $fontAwesome; content: "\f053\00a0\00a0\00a0"; } */ } .search #search-nav .prev-post:after { display: none; } .search #search-nav .next-post { /* &:after{ font-family: $fontAwesome; content: "\00a0\00a0\00a0\f054"; } */ } /* ┌─┐┬┌┬┐┌─┐┌┐ ┌─┐┬─┐ └─┐│ ││├┤ ├┴┐├─┤├┬┘ └─┘┴─┴┘└─┘└─┘┴ ┴┴└─ File: _modules/_hauptmenu.scss Beschreibung: CSS Styles für das Hauptmenü Autor: Roman Kröpl Datum: 05.02.2016 */ .sidebar .widget { margin: 0px 0px 20px 0px; margin: 0rem 0rem 2rem 0rem; /* Sidebar Headline */ } /* ╔═╗┬┌┐┌┌─┐┬ ┌─┐ ╚═╗│││││ ┬│ ├┤ ╚═╝┴┘└┘└─┘┴─┘└─┘ File: _modules/single.scss Beschreibung: CSS Styles für die Singleseite Autor: Matthias Hauß Datum: 17.03.2016 */ .single .single_slider { margin-bottom: 30px; margin-bottom: 3rem; overflow: hidden; } @media screen and (max-width: 767px) { .single .single_slider { height: 150px; height: 15rem; } } @media screen and (min-width: 768px) { .single .single_slider { height: 300px; height: 30rem; } } @media screen and (min-width: 992px) { .single .single_slider { height: 500px; height: 50rem; } } .single .single_slider .slider-item { width: 100%; background-size: cover; background-position: center center; } @media screen and (max-width: 767px) { .single .single_slider .slider-item { height: 150px; height: 15rem; } } @media screen and (min-width: 768px) { .single .single_slider .slider-item { height: 300px; height: 30rem; } } @media screen and (min-width: 992px) { .single .single_slider .slider-item { height: 500px; height: 50rem; } } .single .category, .single .time { color: #999; float: left; padding-right: 4px; padding-right: 0.4rem; } .single .social_share_bar { display: inline-block; } /* ╦═╗┬┌─┐┬ ┬┌┬┐ ╔═╗┬┌┬┐┌─┐┌┐ ┌─┐┬─┐ ╠╦╝││ ┬├─┤ │ ╚═╗│ ││├┤ ├┴┐├─┤├┬┘ ╩╚═┴└─┘┴ ┴ ┴ ╚═╝┴─┴┘└─┘└─┘┴ ┴┴└─ File: _modules/right_sidebar.scss Beschreibung: CSS Styles für die rechte Spalte Autor: Matthias Hauß Datum: 18.03.2016 */ .right_col .search input[type="text"] { width: 65% !important; float: left; } .right_col .search input[type="submit"] { width: 33% !important; float: right; height: 43px; } @media screen and (min-width: 768px) and (max-width: 991px) { .right_col .search input[type="text"] { width: 58% !important; } .right_col .search input[type="submit"] { width: 41% !important; } } .right_col .banner { margin-top: 20px; margin-top: 2rem; } .right_col .banner img { width: 100%; } .right_col .similar_posts { margin-top: 20px; margin-top: 2rem; } .right_col .similar_entry { border: none; background-color: white; padding: 10px; padding: 1rem; } .right_col .similar_entry .text_container { border: none; padding: 0px 10px; padding: 0rem 1rem; } /* ╔═╗┬─┐┌─┐┌─┐┌─┐┌─┐┬┌─┌┬┐┌─┐ ╠═╝├┬┘│ │└─┐├─┘├┤ ├┴┐ │ ├┤ ╩ ┴└─└─┘└─┘┴ └─┘┴ ┴ ┴ └─┘ File: _modules/prospekte.scss Beschreibung: CSS Styles für Prospekte Autor: Matthias Hauß Datum: 23.03.2016 */ .prospekte { background: #eee; } @media screen and (max-width: 767px) { .prospekte { padding: 10px; padding: 1rem; } } @media screen and (min-width: 768px) { .prospekte { padding: 20px; padding: 2rem; } } @media screen and (min-width: 992px) { .prospekte { padding: 30px; padding: 3rem; } } .prospekte input { float: left; } .prospekte input[type="text"], .prospekte input[type="email"] { padding: 6px 13px !important; } .prospekte .cover { margin: 10px; margin: 1rem; width: 50px; width: 5rem; float: left; } .prospekte .bezeichnung { float: left; } .prospekte label.fullwidth { display: block; } @media (max-width: 767px) { .prospekte label.fullwidth { clear: both; } } .prospekte label.radios label { margin: 4px 13px 7px 0px; margin: 0.4rem 1.3rem 0.7rem 0rem; } .prospekte label.radios label input { margin-right: 5px; margin-right: 0.5rem; } /* ╔═╗┌─┐┌┐┌┌┬┐┌─┐┌┐┌┌┬┐┌─┐┬ ┬┌┬┐┌─┐┬─┐ ║ │ ││││ │ ├┤ │││ │ └─┐│ │ ││├┤ ├┬┘ ╚═╝└─┘┘└┘ ┴ └─┘┘└┘ ┴ └─┘┴─┘┴─┴┘└─┘┴└─ File: _modules/contentslider.scss Beschreibung: CSS Styles für den Contentslider Autor: Matthias Hauß Datum: 08.04.2016 */ .contentslider { background: #0f0f1f; margin: 20px 0px 40px 0px; margin: 2rem 0rem 4rem 0rem; } @media (max-width: 767px) { .contentslider { margin: 20px 0px 60px 0px; margin: 2rem 0rem 6rem 0rem; } } .contentslider .flexslider { padding: 40px 0px; padding: 4rem 0rem; margin: 0; background: none; border: none; } .contentslider .flexslider .subtitle { color: white; font-family: 'Gotham Bold', Arial, sans-serif; font-size: 22px; font-size: 2.2rem; padding-bottom: 13px; padding-bottom: 1.3rem; border-bottom: 2px solid #d1d1d1; display: inline-block; text-transform: uppercase; } .contentslider .flexslider .category { padding-top: 50px; padding-top: 5rem; color: #bababa; font-size: 14px; font-size: 1.4rem; font-family: 'Gotham Medium', Arial, sans-serif; text-transform: uppercase; } @media (max-width: 767px) { .contentslider .flexslider .category { padding-top: 20px; padding-top: 2rem; } } .contentslider .flexslider .headline { padding-top: 20px; padding-top: 2rem; color: white; font-size: 36px; font-size: 3.6rem; line-height: 50px; line-height: 5rem; font-family: 'Gotham Bold', Arial, sans-serif; text-transform: uppercase; } @media (max-width: 767px) { .contentslider .flexslider .headline { font-size: 26px; font-size: 2.6rem; line-height: 40px; line-height: 4rem; } } .contentslider .flexslider .btn { margin: 20px 0px; margin: 2rem 0rem; background: none; color: white; border: 1px solid #555; } .contentslider .flexslider .btn:hover { background: white; border-color: white; color: #0f0f1f; } .contentslider .flexslider .cs_bild { box-sizing: border-boxed; padding: 30% 50%; background-position: center center; background-size: cover; } .contentslider .container { position: relative; } @media (max-width: 1330px) { .contentslider .container { width: 90%; margin: 0 5%; } } .contentslider .container .custom-navigation .navelement { width: 24px; height: 44px; display: block; position: absolute; top: 50%; margin-top: -22px; background-size: 100% 100%; } @media (max-width: 767px) { .contentslider .container .custom-navigation .navelement { width: 15px; height: 35px; } } .contentslider .container .custom-navigation .navelement.flex-next { right: -60px; background-image: url('../images/slide_right.png'); } @media (max-width: 1330px) { .contentslider .container .custom-navigation .navelement.flex-next { right: -30px; } } @media (max-width: 750px) { .contentslider .container .custom-navigation .navelement.flex-next { right: -12px; } } .contentslider .container .custom-navigation .navelement.flex-prev { left: -60px; background-image: url('../images/slide_left.png'); } @media (max-width: 1330px) { .contentslider .container .custom-navigation .navelement.flex-prev { left: -30px; } } @media (max-width: 750px) { .contentslider .container .custom-navigation .navelement.flex-prev { left: -12px; } } /* ┌─┐┌─┐┌┬┐ ┌┐┌┌─┐┬ ┬┌─┐ │ ├─┘ │ │││├┤ │││└─┐ └─┘┴ ┴ ┘└┘└─┘└┴┘└─┘ File: _cpt/_news.scss Beschreibung: CSS Styles für News Übersicht und News Detailseite Autor: Roman Kröpl Datum: 01.02.2016 */ .news { margin-top: 30px; } .news h2 { margin-top: 10px; } .news_entry { margin-bottom: 20px; margin-bottom: 2rem; border: none; background-color: white; position: relative; } .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: 15px; padding: 1.5rem; } .news_entry .text_container h3.xstop { padding-top: 9px; } .news_entry .text_container p { color: #555; margin-bottom: 30px; } .news_entry .text_container time a { color: #999; position: absolute; bottom: 10px; } .news_entry .text_container .category { color: #555; border-bottom: 1px solid #555; display: inline-block; text-transform: uppercase; font-family: 'Gotham Medium', Arial, sans-serif; font-size: 12px; font-size: 1.2rem; margin-bottom: 20px; margin-bottom: 2rem; } .news_entry .text_container .xstime { display: block !important; } .news_entry .text_container .teasertextbtb p { display: block !important; } .news_entry:hover img { opacity: 0.8; -ms-filter: "progid:DXImageTra nsform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -ms-transition: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03); } .right_col .news_entry { padding-bottom: 20px; padding-bottom: 2rem; margin: 0; } .right_col .news_entry p { margin-bottom: 20px; } @media (max-width: 991px) { .right_col .news_entry img { margin-bottom: 10px; margin-bottom: 1rem; } } .right_col .news_entry .category { border: none; margin-bottom: 0; color: #999; } /* ┌─┐┌─┐┬┌┬┐┌─┐┌┐┌┌┐┌┌─┐┬ ┬┬┌─┐┌─┐┌┬┐┬┌─┐┌┐┌ └─┐├┤ │ │ ├┤ ││││││├─┤└┐┌┘││ ┬├─┤ │ ││ ││││ └─┘└─┘┴ ┴ └─┘┘└┘┘└┘┴ ┴ └┘ ┴└─┘┴ ┴ ┴ ┴└─┘┘└┘ */ .pagination_container { position: relative; margin-top: 20px; margin-top: 2rem; 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; margin: 0rem; margin-bottom: 7px; margin-bottom: 0.7rem; text-align: center; font-size: 16px; font-size: 1.6rem; display: inline; } .pagination_container .sisu_paging ul li a { color: #201f1f; text-decoration: none; padding: 6px 10px; padding: 0.6rem 1rem; } .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; } /* ┌┐┌┌─┐┬ ┬┌─┐┬ ┌─┐┌┬┐┌┬┐┌─┐┬─┐ │││├┤ │││└─┐│ ├┤ │ │ ├┤ ├┬┘ ┘└┘└─┘└┴┘└─┘┴─┘└─┘ ┴ ┴ └─┘┴└─ 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 #ccc; background: #fff; color: #1b1b1b; 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: 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 #ccc; background: #fff; color: #1b1b1b; 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: 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 #ccc; background: #efefef; color: #1b1b1b; width: 100% !important; padding: 5px 10px; padding: 0.5rem 1rem; text-indent: 0px; text-indent: 0rem; font-weight: normal !important; } .loginplugin input[type="submit"] { border-radius: 40px; border-radius: 4rem; font-family: Arial, sans-serif; font-size: 14px; font-size: 1.4rem; background: transparent; text-shadow: none; text-transform: uppercase; padding: 7px 15px; padding: 0.7rem 1.5rem; border: 1px solid #1b1b1b; color: #1b1b1b; 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 { width: 100%; padding: 50px 0px 15px 0px; padding: 5rem 0rem 1.5rem 0rem; margin-top: 50px; margin-top: 5rem; border: 1px solid #d1d1d1; background-color: #f4f4f2; } #footer .footer-wrapper { text-align: center; } #footer .footer-wrapper .footerlogo { padding-bottom: 15px; padding-bottom: 1.5rem; max-height: 110px; max-height: 11rem; } #footer .footer-wrapper .social_icons { display: inline-block; } #footer .footer-wrapper .social_icons .social_icon { height: 52px; height: 5.2rem; width: 52px; width: 5.2rem; margin: 0px 10px; margin: 0rem 1rem; float: left; } @media screen and (max-width: 767px) { #footer .footer-wrapper .social_icons .social_icon { height: 32px; height: 3.2rem; width: 32px; width: 3.2rem; margin: 0px 5px; margin: 0rem 0.5rem; } } #footer .footer-wrapper .social_icons .social_icon:hover { opacity: 0.8; } #footer .footer-wrapper .social_icons .social_icon.fb { background-image: url('../images/social_buttons/fb.png'); background-size: cover; } #footer .footer-wrapper .social_icons .social_icon.tw { background-image: url('../images/social_buttons/tw.png'); background-size: cover; } #footer .footer-wrapper .social_icons .social_icon.pin { background-image: url('../images/social_buttons/pin.png'); background-size: cover; } #footer .footer-wrapper .social_icons .social_icon.yt { background-image: url('../images/social_buttons/yt.png'); background-size: cover; } #footer .footer-wrapper .social_icons .social_icon.th { background-image: url('../images/social_buttons/th.png'); background-size: cover; } #footer .footer-wrapper .social_icons .social_icon.in { background-image: url('../images/social_buttons/in.png'); background-size: cover; } #footer .footer-wrapper .links { font-family: 'Gotham Medium', Arial, sans-serif; font-size: 12px; font-size: 1.2rem; padding: 15px 0px 8px 0px; padding: 1.5rem 0rem 0.8rem 0rem; display: inline-block; color: #0e0e1e; } #footer .footer-wrapper .links .link { float: left; } #footer .footer-wrapper .links .link a { padding: 0px 20px; padding: 0rem 2rem; border-right: 1px solid #0e0e1e; color: #0e0e1e; } #footer .footer-wrapper .links .link:last-child a { border: none; } #footer .footer-wrapper .copyright { font-family: 'Gotham Medium', Arial, sans-serif; font-size: 12px; font-size: 1.2rem; color: #d1d1d1; padding-bottom: 50px; padding-bottom: 5rem; } #footer .line { height: 1px; background: #d1d1d1; margin: 0px 15px 20px 15px; margin: 0rem 1.5rem 2rem 1.5rem; } #footer .border { border: none; background-color: white; padding: 15px; padding: 1.5rem; } #footer .npr { padding-right: 0; } @media (min-width: 991px) { #footer .newsletter_text p { margin-bottom: 56px; margin-bottom: 5.6rem; } } @media (min-width: 1200px) { #footer .newsletter_text p { margin-bottom: 12px; margin-bottom: 1.2rem; } } #footer .cta_wrapper { margin-bottom: 40px; margin-bottom: 4rem; } #footer .cta_wrapper img { display: block; margin: 0 auto; max-height: 115px; } #footer.cookiehinweis { margin-bottom: 50px; } /* ┌─┐┌─┐┌┐┌┌┬┐┬─┐┌─┐┌─┐┌┬┐ │ │ ││││ │ ├┬┘├─┤└─┐ │ └─┘└─┘┘└┘ ┴ ┴└─┴ ┴└─┘ ┴ 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; }