/*
* MPH / M1 Kliniken AG
*/
/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Webfonts
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
/*************** WEBFONTS ***************/
/* lato-regular - latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url('../fonts/lato-v16-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Lato Regular'), local('Lato-Regular'),
url('../fonts/lato-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v16-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-700 - latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: url('../fonts/lato-v16-latin-700.eot'); /* IE9 Compat Modes */
src: local('Lato Bold'), local('Lato-Bold'),
url('../fonts/lato-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v16-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v16-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Roboto'), local('Roboto-Regular'),
url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url('../fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
src: local('Roboto Bold'), local('Roboto-Bold'),
url('../fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* Brand Colors
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* globale Variablen */
:root {
--hilite-color: #EF8005;
--hilite-dark-color: #BD6400;
--link-color: #575756;
--hover-color: #383837;
--border-hilite-color: #EF8005;
--border-hilite-off-color: #FF8C00;
--off-white-color: #F6F6F6 /* #F4F4FB */;
--light-grey-color: #ECEDED; /* all places with ededef, ededed, eceded */
--middle-grey-color: #ABACAD; /* all places with */
--text-color: #575756; /* normal text and button states */
--text-dark-color: #383837; /* active, hover states */
--black-color: #242424; /* almost black */
}
/* Brand M1 Variablen */
.brand-m1 {
--hilite-color: #EF8005;
--hilite-dark-color: #BD6400;
--link-color: #EF8005;
--hover-color: #FF8C00;
--border-hilite-color: #EF8005;
--border-hilite-off-color: #FF8C00;
}
.brand-mph {
--hilite-color: #E9540C;
--hilite-dark-color: #C64000;
--link-color: #E9540C;
--hover-color: #FF5B0C;
--border-hilite-color: #E9540C;
--border-hilite-off-color: #FF5B0C;
}
/* .brand-m1 .slidertext h1, */
/* .brand-m1 .slidertext h2, */
/* .brand-mph .slidertext h1, */
/* .brand-mph .slidertext h2 { color: #fff; } */
/* .brand-m1 h1.ce_headline:after, */
/* .brand-m1 h2.ce_headline:after { border-color: #EF8005; } */
/* .brand-mph h1.ce_headline:after, */
/* .brand-mph h2.ce_headline:after { border-color: #E9540C; } */
.brand-m1 .button { color: var(--text-color); }
.brand-m1 .button:hover,
.brand-m1 .button:focus { color: var(--black-color); }
.brand-m1 .slider-text--inner {
background: var(--hilite-color);
background: rgba(239, 128, 5, 0.9);
/* padding: 3rem; */
}
.brand-mph .bg-opaque .slider-text--inner {
background: transparent;
color: var(--text-color);
padding: 0;
}
.brand-mph .bg-white .slider-text--inner {
background: #fff;
color: var(--text-color);
}
.brand-mph .slider-text * {
color: var(--text-color);
}
.brand-mph .slider-text h1, .brand-mph .slider-text h2 {
color: var(--text-dark-color);
}
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: calc(100% - 40px);
max-width: 1440px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
@media only screen and (max-width: 549px) {
#Secondary .mod_article {
padding-left: 20px;
padding-right: 20px;
}
}
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box; }
@media only screen and (min-width: 950px) {
.container {
/* width: 85%; */
}
}
@media only screen and (min-width: 1250px) {
.container {
width: calc(100% - 60px);
}
}
@media only screen and (min-width: 550px) {
.container {}
.column,
.columns {
margin-left: 4%; }
.column:first-child,
.columns:first-child,
.column.first,
.columns.first {
margin-left: 0; }
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30.6666666667%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
font-size: 62.5%; }
body {
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
line-height: 1.6;
font-weight: 400;
font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: var(--text-color);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1000px) {
body { font-size: 1.4em; }
}
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 2rem;
font-weight: 400; }
h1 { font-size: 3.0rem; line-height: 1.2; column-span: all; }
h2 { font-size: 2.4rem; line-height: 1.25; column-span: all; }
h3 { font-size: 2.0rem; line-height: 1.4; }
h4 { font-size: 1.8rem; line-height: 1.4; }
h5 { font-size: 1.6rem; line-height: 1.5; }
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; font-weight: 400; }
h1 {color: var(--hilite-color); }
@media (max-width: 549px) {
h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
h1 { font-size: 2.6rem; }
}
@media (min-width: 1250px) {
h1 { font-size: 3.6rem; }
h2 { font-size: 2.6rem; }
h3 { font-size: 2.2rem; }
h4 { font-size: 2.0rem; }
h5 { font-size: 1.8rem; }
h6 { font-size: 1.5rem; }
}
.subtitle {
font-family: "Lato", sans-serif;
font-size: 1.6rem;
font-weight: 400;
letter-spacing: 0.05rem;
text-transform: uppercase;
}
h1.ce_headline:after,
h2.ce_headline:after {
content: '';
display: block;
margin: 1.5rem 0 1.0rem;
width: 65px;
height: 1px;
border-top: 1px solid var(--border-hilite-color);
}
p {
margin-top: 0;
}
.intro {
font-size: 1.7rem;
}
@media (min-width: 550px) {
.intro {
font-size: 1.8rem;
}
.intro + .intro {
margin-top: 4rem;
}
h1.ce_headline:after, h2.ce_headline:after {
margin: 2rem 0 1rem;
}
}
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
color: var(--text-color);
/* transition: all ease-in-out 0.2s; */
}
a:hover {
color: var(--text-dark-color); }
#main .ce_text a:not(.button) {
text-decoration: none;
border-bottom: 1px solid var(--hilite-color);
}
.mod_newsarchive h3 a { color: var(--text-color); }
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
height: 50px;
padding: 0 50px;
color: var(--text-color);
text-align: center;
font-family: "Lato", sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 50px;
letter-spacing: 0;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 2px;
border: 1px solid var(--text-color);
cursor: pointer;
box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
color: var(--black-color);
border-color: var(--black-color);
outline: 0; }
.widget-submit button {
line-height: 1;
height: auto;
}
.kontaktform .widget-submit button {
line-height: 50px;
height: 50px;
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
color: #FFF;
background-color: var(--text-color);
border-color: var(--text-color); }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
color: #FFF;
background-color: var(--black-color);
border-color: var(--black-color); }
@media ( min-width: 950px ) {
.button + .button {
margin-left: 2rem;
}
}
/* Cookie Box */
.contao-cookiebar .cc-inner {
font-size: 1.4rem !important;
}
.contao-cookiebar .cc-btn,
.cookiebar_default .cc-group .cc-detail-btn {
line-height: 1;
height: auto;
}
.brand-mph .cookiebar_default .cc-cookies > p,
.brand-mph .cookiebar_default p,
.brand-mph .cookiebar_default .cc-cookies .cc-cookie p {
font-style: normal;
font-size: 1.3rem;
}
.cookiebar_default .cc-cookies .cc-cookie .cc-cookie-info,
.cookiebar_default .cc-cookies .cc-cookie label.cookie {
font-size: 1.3rem;
}
.contao-cookiebar input + label::before { top: 4px; }
.contao-cookiebar input + label::after { top: 8px; }
/* Cookiebar adjust */
@media (max-width: 550px) {
.cookiebar_default .cc-inner {
padding: 15px;
}
.cookiebar_default .cc-group .cc-detail-btn {
line-height: 1;
height: auto;
display: block;
position: relative;
outline: 1px solid gainsboro;
margin: 5px 10px 10px;
}
.cookiebar_default .cc-group > label {
margin-right: 10px;
}
.cc-footer .cc-btn {
margin: 8px 0;
}
.cookiebar_default .cc-info > a {
display: inline-block;
padding: 8px 0;
font-size: 1.2rem;
}
}
/* Cookiebox oveleon */
.ccb-element-blocker {
font-size: 1.5rem;
line-height: 1.6;
font-weight: 400;
font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
color: var(--text-color);
}
#chart .cc-module {
text-align: center;
}
.cc-module .cc-icon {
position: relative;
width: 125px;
height: 110px;
margin: 0 auto 8px;
}
.cc-module .cc-icon::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-position: center left;
background-size: contain;
background-repeat: no-repeat;
background-image: url("/files/layout/images/cookiebar-default.png");
}
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
height: 38px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 0;
box-shadow: none;
box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid var(--text-color);
outline: 0; }
label,
legend {
display: block;
margin-bottom: .5rem;
font-weight: 700; }
fieldset {
padding: 0;
border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
display: inline; }
label > .label-body {
display: inline-block;
margin-left: .5rem;
font-weight: normal; }
.kontaktform input[type="email"],
.kontaktform input[type="number"],
.kontaktform input[type="search"],
.kontaktform input[type="text"],
.kontaktform input[type="tel"],
.kontaktform textarea {
display: block;
width: 100%;
box-sizing: border-box;
}
.kontaktform textarea {
min-height: 100px;
}
input[type="checkbox"],
input[type="radio"] {
display: inline;
}
label > .label-body {
display: inline-block;
margin-left: .5rem;
font-weight: normal;
}
.kontaktform .checkbox_container input,
.kontaktform .widget-checkbox input {
display: inline-block;
margin-right: .5rem;
margin-bottom: 0;
margin-bottom: 0;
}
.kontaktform .checkbox_container label,
.kontaktform .widget-checkbox label {
display: inline;
font-weight: 400;
text-transform: none;
}
@media screen and ( max-width: 549px ) {}
@media screen and ( min-width: 550px ) {
.kontaktform label {
/* display: none; */
display: block;
font-weight: 400;
color: #58595a;
font-size: 1.2rem;
letter-spacing: 0.05rem;
font-family: "Lato", sans-serif;
text-transform: uppercase;
}
.kontaktform .widget.full {
float: none;
clear: both;
width: 100%;
}
.kontaktform .widget.half {
display: inline-block;
width: 48%;
float: right;
box-sizing: border-box;
}
.kontaktform .widget.half.first {
margin-right: 0%;
float: left;
}
.kontaktform textarea {
min-height: 150px;
}
}
/* Google recaptcha */
.grecaptcha-badge {
z-index: 1;
bottom: 8rem !important;
}
/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
list-style: disc outside;
}
.ce_text ul, .teaser ul {
list-style: square outside;
padding-left: 0;
list-style: none;
}
.ce_text ul li, .teaser ul li {
padding-left: 25px;
background: url(../images/list-image-32.png) no-repeat left top;
background-size: 16px 16px;
}
ol {
list-style: decimal outside; }
ol, ul {
padding-left: 25px;
margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 100%; }
li {
margin-bottom: 1rem; }
ol {
counter-reset: item;
}
ol > li {
counter-increment: item;
}
ol ol > li {
display: block;
}
ol ol > li:before {
content: counters(item, ".") ". ";
margin-left: -20px;
}
ol ul {
list-style: disc;
}
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px; }
pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: pre; }
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
min-width: 50%;
line-height: 1.4;
}
th,
td {
padding: 8px 15px;
text-align: left;
border-bottom: 1px solid #E1E1E1;
vertical-align: top; }
th {
border-bottom-color: #899494; }
th:first-child,
td:first-child {
padding-left: 0; }
th:last-child,
td:last-child {
padding-right: 0; }
th.col_last,
td.col_last {
padding-right: 15px; }
/* Rating table */
.rating_table table {
width: 100%;
}
.rating_table .col_0 img {
float: left;
max-height: 40px;
vertical-align: middle;
margin-top: -10px;
margin-bottom: -10px;
margin-right: 10px;
}
@media screen and (max-width: 549px) {
.rating_table table {
font-size: 1.3rem;
table-layout: fixed;
}
.rating_table .head_0,
.rating_table .col_0 {
width: 30%;
}
.rating_table .head_3,
.rating_table .col_3 {
display: none;
}
.rating_table .col_0 a,
.rating_table .col_0 a+br {
display: none;
}
.rating_table th.col_last,
.rating_table td.col_last {
padding-right: 0;
}
}
#cap_table * {
vertical-align: middle;
}
#cap_table td,
#cap_table th {
text-align: right;
vertical-align: middle;
}
#cap_table td.col_0,
#cap_table th.head_0,
#cap_table td.foot_0 {
text-align: left;
}
#cap_table .col_0 img {
margin-top: -5px;
margin-bottom: -5px;
float: none;
}
#cap_table tbody tr.row_last td {
border-bottom-color: #899494;
}
#cap_table tfoot td {
border-bottom-color: #899494;
font-weight: bold;
}
.perf_table th {
padding-top: 20px;
}
.perf_table th::before {
content: '';
height: 12px;
width: 24px;
display: inline-block;
margin: 0 0 0 0;
background: url(../images/list-image-32.png) no-repeat left top;
background-size: contain;
}
@media only screen and (min-width: 550px) {
#table_396 .col_last { min-width: 200px; width: 35%;}
}
@media only screen and (max-width: 549px) {
th, td {
padding: 6px 5px;
}
#cap_table .col_2,
#cap_table .col_3,
#cap_table .head_2,
#cap_table .head_3,
#cap_table .foot_2,
#cap_table .foot_3 {
display: none;
}
#cap_table td img {
/*
float: none;
width: auto;
display: block;
height: auto;
max-height: none;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
*/
display: none;
}
}
/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
margin-bottom: 2.5rem; }
/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
width: 100%;
box-sizing: border-box; }
.u-max-full-width {
max-width: 100%;
box-sizing: border-box; }
.u-pull-right {
float: right; }
.u-pull-left {
float: left; }
.centered {
text-align: center;
}
figcaption {
padding: 0 0 2rem;
}
.float_below, .float_above {
max-width: 100%;
}
@media only screen and ( min-width: 550px ) {
.float_right, .float_left { max-width: 50%; }
.float_right,
.float_right figcaption, .float_right .caption { padding: 0 0 2rem 2rem; }
.float_left,
.float_left figcaption, .float_left .caption { padding: 0 2rem 2rem 0; }
}
@media only screen and ( max-width: 549px ) {
.float_right, .float_left { float: none; width: 100%; padding: 0 !important; margin: 0 0 2rem !important;}
}
.css-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: 35px;
-webkit-column-gap: 35px;
column-gap: 35px;
}
.css-columns .ce_text {
box-decoration-break: clone;
}
/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
margin-top: 3rem;
margin-bottom: 3.5rem;
border-width: 0;
border-top: 1px solid #E1E1E1;
}
@media only screen and ( max-width: 549px ) {
hr { margin: 1rem; }
}
abbr {
border-bottom: 1px dotted;
text-decoration: none;
}
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
content: "";
display: table;
clear: both; }
/* Contao Classes
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ce_download,
.ce_downloads {
margin-bottom: 2.5rem;
}
.ce_downloads ul {
list-style: none;
padding-left: 0;
}
.enclosure, #right .enclosure,
.ce_downloads, #right .ce_downloads {
margin: 0 0 3.5rem 0;
border: 0px solid var(--light-grey-color);
}
.home .ce_downloads {
margin-bottom: 0;
}
.mod_newsreader .enclosure {
margin: 3.5rem 0 0 0;
padding: 2rem 2rem;
background: var(--light-grey-color);
}
.mod_newslist .layout_compact .enclosure {
margin: 0 0 0 0;
padding: 2rem 2rem 0;
border: 1px solid #dedede;
background: #fff;
}
.mod_newsreader .enclosure::before {
content: "Downloads";
display: block;
padding: 0;
margin: 0 0 1rem;
font-size: 13px;
font-family: "Lato", sans-serif;
text-transform: uppercase;
letter-spacing: 0.05rem;
}
.mod_newsreader .enclosure p {
margin: 0 0 0.5rem;
}
.enclosure {
margin-top: 0;
overflow: auto;
}
.enclosure a,
.ce_downloads a {
color: var(--text-color);
text-decoration: none;
border-bottom: 1px solid var(--hilite-color);
}
.home .ce_downloads a .size,
#berichte .enclosure a .size { display: none; }
figure { display: table; }
figcaption, .caption {
color: var(--text-color);
font-size: 13px;
font-family: "Lato", sans-serif;
text-transform: uppercase;
display: table-caption;
caption-side: bottom;
letter-spacing: 0.05rem;
}
figure.border img,
.border figure img {
border: 1px solid #dedede;
box-sizing: border-box;
padding: 10px;
}
figure.shadow img,
.shadow figure img {
border: 0px solid #dedede;
box-sizing: border-box;
padding: 0;
box-shadow: 0 0px 15px rgba(0,0,0,.1);
margin: 15px;
max-width: calc(100% - 30px);
}
.float_right_grid figure {
box-sizing: border-box;
padding: 20px;
background: #fff;
border: 0px solid var(--light-grey-color);
}
.float_right_grid figure img {
display: block;
width: 100%;
}
@media screen and (min-width: 950px) {
.float_right_grid figure {
width: 30.6%;
}
}
.float_left figcaption,
.float_left .caption {
position: relative;
top: -15px;
}
.ce_gallery > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
}
.ce_gallery.align_top>ul {
-ms-flex-align: start;
align-items: flex-start;
}
.ce_gallery.align_bottom>ul {
-ms-flex-align: end;
align-items: flex-end;
}
.ce_gallery.align_left>ul {
-ms-flex-pack: start;
justify-content: flex-start;
}
.ce_gallery.align_right>ul {
-ms-flex-pack: end;
justify-content: flex-end;
}
.ce_gallery>ul:after {
display: block;
content: " invisible node "
flex(999 999 auto)
}
.ce_gallery>ul li {
float: none;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: 0;
padding: 5px;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.ce_gallery>ul li figure {
width: 100%;
text-align: center;
margin-bottom: 0;
}
.ce_gallery>ul.cols_1 li { -ms-flex: 0 0 100%; flex: 0 0 100%; padding: 0; }
.ce_gallery>ul.cols_2 li { -ms-flex: 0 0 50%; flex: 0 0 50%; }
.ce_gallery>ul.cols_3 li { -ms-flex: 0 1 30%; flex: 0 0 33.33%; }
.ce_gallery>ul.cols_4 li { -ms-flex: 0 0 25%; flex: 0 0 25%; }
.ce_gallery>ul.cols_5 li { -ms-flex: 0 0 19.5%; flex: 0 0 20%; }
.ce_gallery>ul.cols_6 li { -ms-flex: 0 0 15.5%; flex: 0 0 16.666%; }
.ce_gallery>ul.cols_7 li { -ms-flex: 0 0 14.0%; flex: 0 0 14.285%; }
.ce_gallery>ul.cols_8 li { -ms-flex: 0 0 11.5%; flex: 0 0 12.5%; }
.ce_gallery>ul.cols_9 li { -ms-flex: 0 0 10.5%; flex: 0 0 11.33%; }
.ce_gallery>ul.cols_10 li { -ms-flex: 0 0 9.5%; flex: 0 0 10%; }
.ce_gallery>ul.cols_11 li { -ms-flex: 0 0 9.0%; flex: 0 0 9.09%; }
.ce_gallery>ul.cols_12 li { -ms-flex: 0 0 8.0%; flex: 0 0 8.333%; }
@media only screen and (max-width: 549px) {
.ce_gallery>ul li { -ms-flex: 0 0 50% !important; flex: 0 0 50% !important; }
.ce_gallery figure { margin-bottom: 1rem; }
}
/* Akkordeon */
.ce_accordion {
position: relative;
overflow: visible;
}
.ce_accordion:last-child {
margin-bottom: 1rem;
}
.ce_accordion .toggler {
position: relative;
margin-bottom: -2px;
padding: 1.2rem 2.5rem 1.2rem 2.5rem;
border: 1px solid #dedede;
outline: none;
font-weight: bold;
cursor: pointer;
color: var(--text-color);
background: white;
}
.ce_accordion .toggler.active {
color: #e01e26;
}
.ce_accordion .accordion {
position: relative;
overflow: hidden;
/* collapse borders */
margin-bottom: -2px;
padding: 1.5rem 2.5rem;
border: 1px solid #dedede;
border-top-color: var(--light-grey-color);
background: var(--light-grey-color);
}
.ce_accordion .toggler:after {
font-size: 2rem;
font-weight: 400;
line-height: 1;
content: "+";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
position: absolute;
top: 1.3rem;
right: 2rem;
}
.ce_accordion .toggler:hover {
color: var(--text-color);
text-decoration: none;
}
.ce_accordion .toggler.ui-accordion-header-active:after {
content: "-";
}
.enclosure img, .mime_icon {
vertical-align: middle;
}
/* Images */
.grayscale img {
-webkit-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: grayscale(100%);
transition: all ease-in-out 0.5s;
}
.grayscale img:hover {
-webkit-filter: grayscale(0);
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
filter: grayscale(0);
}
.opaque img {
opacity: 0.5;
transition: all ease-in-out 0.5s;
}
.opaque img:hover {
opacity: 1;
}
.darken img {
mix-blend-mode: darken;
}
.multiply img {
mix-blend-mode: multiply;
}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}
/* Larger than tablet */
@media (min-width: 750px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {}
/* Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#wrapper {
max-width: 100vw;
overflow: hidden;
/* max-width: 1760px; */
margin: 0 auto;
box-sizing: border-box;
background: var(--off-white-color);
}
@media only screen and ( min-width: 1000px ) {
.home #wrapper, #wrapper {padding-top: 88px;}
.home #header { background-color: #fff;}
}
@media only screen and ( min-width: 1250px ) {
.home #wrapper, #wrapper {padding-top: 98px;}
}
@media only screen and ( min-width: 1680px ) {
body {
/* background: var(--light-grey-color); */
}
#wrapper {
/* border-left: 40px solid #fff; */
/* border-right: 40px solid #fff; */
}
}
#header {
background: #fff;
border-top: 3px solid var(--border-hilite-color);
}
#header .inside {
padding: 1rem 0;
}
@media ( min-width: 1000px ) {
#header {
background: #fff;
background-color: rgba(255,255,255,0.8);
box-shadow: 0 1px 15px rgba(0,0,0,.1);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
#header.stickytop {
position:fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);
box-shadow: 0 1px 15px rgba(0,0,0,.1);
}
.sticky-top + * { margin-top: 125px; }
#header .inside {
padding: 2.7rem 0 1rem;
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
}
@media only screen and ( max-width:549px ) {
#header {
/* padding: 0 2.5rem 0; */
padding: 0 2rem;
min-height: 65px;
}
#header .inside {
width: auto;
}
#logo {
max-width: 55%;
margin: 5px 0 0;
width: auto;
}
}
@media only screen and ( min-width: 550px ) {
#logo {
display: block;
max-width: 200px;
margin: 0 auto 2rem;
}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {
#logo { margin-bottom: 0; }
}
@media only screen and ( min-width: 1000px ) {
#logo {
display: inline-block;
width: 25%;
margin: 0 auto 0 0;
align-self: flex-start;
}
}
@media only screen and ( min-width: 1250px ) {
#logo {
display: inline-block;
width: 25%;
vertical-align: middle;
}
}
/* main content */
#container {
z-index: 1;
}
#left {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
float: none;
margin: 0;
padding: 2rem 0;
}
#right {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
float: none;
margin: 0;
padding: 2rem 0;
}
#main {
flex: 1 1 auto;
float: none;
margin: 0;
padding: 0;
}
#container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/* 1 Spalte */
.one-column #container {
display: block;
width: calc(100% - 40px);
max-width: 1440px;
/* width: 100%; */
/* max-width: none; */
}
.one-column #container .inside {
/* width: 85%; */
/* max-width: 1440px; */
/* margin: 0 auto; */
}
/* .one-column #main { */
/* margin: 0; */
/* } */
/* .home #main { */
/* padding: 0; */
/* } */
/* 2 Spalten */
.two-column {}
#Subcontent {
padding-top: 2rem;
}
#right {
border-top: 3px double #dedede;
padding-top: 2rem;
}
#main .mod_article {
background: #fff;
padding: 2rem;
}
.home #main .mod_article {
padding: 0;
margin-bottom: 0;
background: transparent;
}
.pressespiegel #main .mod_article {
padding: 0;
background: transparent;
}
#main .mod_article.tiles {
padding: 0rem 0 0;
background: transparent;
}
@media only screen and (max-width: 549px) {
#left, #main, #right {
/* padding: 2rem; */
}
#container {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#main {
flex-basis: 100%;
max-width: 100%;
box-sizing: border-box;
margin-top: 2rem;
}
#left { -ms-flex-order: 1; order: 1; }
#main { -ms-flex-order: 2; order: 2; }
#right { -ms-flex-order: 3; order: 3; margin-top: 2rem !important;}
.one-column #container .inside { width: 100%; }
/* .home.one-column #container .inside { width: 85%; } */
}
@media only screen and (max-width: 768px) and (orientation: landscape) {
#container {
margin-top: -2rem;
}
}
@media only screen and (min-width: 550px) {
#container {
flex-wrap: wrap;
max-width: 1440px;
}
.two-column #container { }
#left, #right, #main {
-ms-flex-negative: 1;
-ms-flex-positive: 1;
-ms-flex-preferred-size: 0px;
/* padding: 2rem 0; */
flex-shrink: 1;
flex-grow: 1;
/* outline: 1px solid blue; */
}
#main {
flex-basis: 100%;
flex-shrink: 0;
-ms-flex-negative: 1;
-ms-flex-positive: 1;
-ms-flex-preferred-size: 0px;
}
#left {
margin: 0 35px 0 0;
-ms-flex-negative: 1;
-ms-flex-positive: 1;
-ms-flex-preferred-size: auto;
}
#right {
flex-basis: 50%;
-ms-flex-negative: 1;
-ms-flex-positive: 1;
-ms-flex-preferred-size: auto;
}
/* .one-column #main { */
/* padding: 2rem 0; */
/* } */
}
@media only screen and (min-width: 550px) and ( max-width: 949px ) {
#right .inside {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-flow: row wrap;
flex-direction: row;
justify-content: space-between;
margin-left: -17.5px;
margin-right: -17.5px;
}
#right .inside > * {
flex-basis: 50%;
margin: 0 17.5px 35px 17.5px;
width: auto;
-ms-flex: 1 1 0px;
flex: 1 0px;
min-width: 180px;
flex-basis: calc(50% - 35px);
flex-shrink: 1;
flex-grow: 1;
box-sizing: border-box;
}
#right .inside .kontaktbox {
margin: 0 17.5px 35px 17.5px;
}
#right .inside .kontaktbox::before {
content: 'Kontakt';
display: block;
font-size: 2.0rem;
line-height: 1.4;
margin-top: 0;
margin-bottom: 2rem;
font-weight: 400;
}
#right .inside .news_list {
padding: 0;
}
.home #main {
padding-top: 3rem;
}
}
@media only screen and (min-width: 950px) {
#right, #Subcontent {
border-top: none;
padding-top: 0;
}
#container {
/* width: 85%; */
}
#main {
width: auto;
margin: 0;
-ms-flex: 1 0px;
flex: 1 0px;
-ms-flex-order: 2;
order: 2;
}
#left {
width: 33%;
margin: 0 35px 0 0;
-ms-flex-negative: 0;
-ms-flex-positive: 0;
-ms-flex-preferred-size: auto;
flex: 1 33%;
min-width: 180px;
max-width: 30%;
-ms-flex-order: 1;
order: 1;
}
#right {
width: 100%;
-ms-flex-negative: 1;
-ms-flex-positive: 1;
-ms-flex-preferred-size: auto;
flex: 1 100%;
flex-basis: 100%;
-ms-flex-order: 3;
order: 3;
}
/* #left, #right, #main { */
/* padding: 3rem 0; */
/* } */
.two-column #container { }
.two-column #main { margin-left: 0; }
}
@media only screen and (min-width: 950px) and ( max-width: 1249px ) {
.brand-m1 #right {
width: 30%;
-ms-flex-negative: 0;
-ms-flex-positive: 0;
-ms-flex-preferred-size: auto;
flex: 1 30%;
min-width: 180px;
max-width: 260px;
-ms-flex-order: 2;
order: 2;
margin: 0 0 0 35px;
padding: 3rem 0;
}
.home #main {
padding-top: 3rem;
}
}
@media only screen and (min-width: 1250px) {
#wrapper { }
#main {
width: auto;
margin: -3vw 35px 0 0;
/* position: relative; */
/* top: 0; */
}
.one-column #container {
width: calc(100% - 60px);
}
.home #main {
margin: 0;
top: 0;
padding: 0;
padding-top: 3vw;
}
/* .one-column #main { */
/* padding: 7rem 0; */
/* } */
/* #main .mod_article { */
/* padding: 3rem; */
/* margin-bottom: 3.5rem; */
/* } */
/* .home #main { */
/* position: relative; */
/* top: 0; */
/* padding: 0; */
/* } */
/* .home #main .mod_article { */
/* padding-left: 0; */
/* padding-right: 0; */
/* margin-bottom: 0; */
/* background: transparent; */
/* } */
.presse #main .mod_article {
background: transparent;
padding: 0;
margin-bottom: 0;
}
#left {
width: 17.5%;
-ms-flex-negative: 0;
-ms-flex-positive: 0;
-ms-flex-preferred-size: auto;
flex: 1 17.5%;
max-width: 17.5%;
margin: 0 35px 0 0;
}
#right {
width: 22.5%;
-ms-flex-negative: 0;
-ms-flex-positive: 0;
-ms-flex-preferred-size: auto;
flex-basis: 22.5%;
min-width: 150px;
max-width: 23%; /* 22.5% */
-ms-order: 3;
order: 3;
padding-top: 3rem !important;
}
}
/* Sidebar rechts */
#right .inside > div {}
#right .mod_newslist ul {
list-style: square url(../images/list-style-blue.png) outside;
}
.box-white {
background: #e9e9ea;
margin-bottom: 3.5rem;
}
.box-white.padding-m {
padding: 2rem;
}
.padding-m p:last-child {
margin-bottom: 0;
}
#right .news_teaser .layout_latest,
#right .news_list {
background: #e9e9ea;
flex-grow: 1;
}
/* Secondary */
#Secondary {
margin-top: 2rem;
}
.mod_article.fullscreen {
background: var(--light-grey-color);
}
.mod_article.fullscreen .inside {
/* width: 85%; */
max-width: 1440px;
margin: 0 auto;
padding: 2rem 0;
}
@media only screen and (min-width: 550px) {
.mod_article.fullscreen .inside {
padding: 3rem 0;
}
}
@media only screen and (min-width: 1000px) {
.mod_article.fullscreen .inside {
padding: 5rem 0;
}
#Secondary {
margin-top: 3rem;
}
}
/* subcontent */
#Subcontent {
max-width: 1440px;
/* width: 85%; */
width: calc(100% - 40px);
margin: 0 auto;
padding: 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.home #Subcontent {}
#Subcontent > .fullwidth {
width: auto;
-ms-flex: 1 1 0px;
flex: 1 0px;
flex-basis: 100%;
margin-bottom: 0 /*35px*/;
}
@media only screen and (max-width: 549px) {
#Subcontent {
width: auto;
}
}
@media only screen and (min-width: 550px) {
#Subcontent {
padding: 2rem 0 5rem 0;
}
.home #Subcontent {
padding: 3.5rem 0 0;
}
}
@media only screen and (min-width: 750px) {
.home #Subcontent {
padding-top: 0;
}
}
@media only screen and ( min-width: 950px ) {
.home #Subcontent {
/* padding: 0; */
}
.home #Subcontent,
.one-column #Subcontent { }
#Subcontent .news_teaser {
-ms-flex: 1 0px;
/* width: 100%; */
/* not necessary - default full-width */
}
.leistungen #Subcontent .news_teaser {
width: 67%; /*calc(67% - 35px)*/
flex-basis: 67%; /*calc(67% - 35px)*/
flex-grow: 1;
flex-shrink: 1;
}
}
@media only screen and ( min-width: 1250px ) {
#Subcontent {
width: calc(100% - 60px);
}
.home #Subcontent {
padding: 0;
}
.leistungen #Subcontent .news_teaser {
width: calc(75% - 35px);
flex-basis: calc(75% - 35px);
flex-grow: 1;
flex-shrink: 1;
}
}
/* Footer */
#footer {
background: #fff;
color: #666;
padding: 2rem 0;
position: relative;
}
#footer::before {
display: block;
content: '';
margin: 2rem auto;
height: 1px;
border-top: 1px solid var(--border-hilite-color);
}
@media screen and ( max-width:549px ) {
#footer { padding: 0; }
#footer .container { padding: 0; }
}
@media ( min-width: 550px ) {
#footer {
padding: 2rem 0;
margin: 2rem 0 0;
}
}
@media only screen and (min-width: 950px) {
#footer {
padding: 5rem 0;
margin: 5rem 0 0;
}
#footer::before {
margin: 5rem auto 2rem;
width: 100%;
max-width: 1480px;
position: absolute;
top: -8rem;
left: 50%;
transform: translate(-50%, 0);
}
}
@media only screen and (min-width: 1250px) {
#footer::before {
width: 90%;
}
}
#footer .copyright {}
#footer nav {
overflow: visible;
}
#footer nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#footer nav li {
display: inline;
margin: 0 5px 0 0;
padding: 0;
}
#footer nav li.last {
margin-right: 0;
}
#footer nav a,
#footer nav strong {
display: inline-block;
padding: 0.5rem 0;
font-size: 1.4rem;
color: #666;
text-decoration: none;
}
.brand-m1 #footer nav a,
.brand-m1 #footer nav strong {
color: #666;
}
#footer nav a:hover {
color: #444;
}
@media only screen and ( min-width: 550px ) {
#footer nav li {
margin: 0 2rem 0 0;
}
}
@media only screen and (min-width: 950px) {
#footer .copyright {
display: inline-block;
width: 35%;
}
#footer nav {
display: inline-block;
width: 65%;
float: right;
text-align: right;
}
#footer nav li {
margin: 0 1px;
}
#footer nav a,
#footer nav strong {
padding: 0 1rem;
}
}
/* Sprunglink */
#toTop {
width: 35px;
height: 35px;
position: absolute;
right: 0; top: 25px;
z-index: 10;
display: block;
margin: 0;
padding: 0;
border: 0px transparent;
border-radius: 1px;
text-indent: -10000px;
background: var(--light-grey-color) url("../images/up.png") center center no-repeat;
background-size: contain;
outline: 0;
cursor: pointer;
mix-blend-mode: multiply;
}
#toTop:hover {
background-color: #c8c8cf;
}
#toTop:active {
background-position: center 5px;
}
.mobile #toTop,
#toTop {
position: fixed;
top: auto;
right: 2.5rem;
bottom: 2.5rem;
opacity: 0.6;
margin: 0;
background-color: var(--light-grey-color);
color: #fff;
opacity: 0.9;
}
.mobile #toTop:hover,
#toTop:hover {
background-color: #c8c8cf;
}
@media only screen and (min-width: 950px) {
.js #toTop,
#toTop { right: 4rem; }
}
/* Hauptnavigation */
.main_nav {}
.main_nav ul {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
overflow: visible;
}
.main_nav li {
padding: 0;
margin: 0 0rem;
display: inline-block;
position: relative;
}
.main_nav a,
.main_nav strong {
padding: 0.2rem 0.5rem;
/* font-family: "Lato", sans-serif; */
/* text-transform: uppercase; */
letter-spacing: 0;
font-size: 1.5rem;
color: var(--text-color);
text-decoration: none;
}
.main_nav a:hover {
color: var(--black-color);
/* border-bottom: 1px solid var(--text-color); */
}
.main_nav .active > span,
.main_nav .trail > a {
color: var(--hilite-color);
}
.main_nav .submenu > a::after,
.main_nav .submenu > strong::after {
content: "\e800";
color: #999;
font-family: "m1-icons";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: auto;
margin: 0 5px 0 15px;
text-align: center;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.main_nav .level_2 {
position: absolute;
left: 0;
top: 4.4rem;
z-index: 3;
text-align: left;
background: #fff;
width: auto;
min-width: 225px;
max-width: 275px;
padding: 0rem 0;
border-top: 3px solid var(--border-hilite-off-color);
box-shadow: 0 2px 3px rgba(0,0,0,0.15);
visibility: hidden;
opacity: 0;
transform: translate(0, 10px);
transition: all ease-in-out 0.3s;
}
.main_nav li:hover .level_2 {
display: block;
transform: translate(0, 0);
visibility: visible;
opacity: 1;
}
.main_nav .level_2 li {
display: block;
margin-bottom: 0;
}
.main_nav .level_2 a,
.main_nav .level_2 strong {
display: block;
padding: 0.2rem 2rem;
border-bottom: 0px solid var(--light-grey-color);
text-transform: none;
line-height: 1.35;
}
.main_nav .level_2 a:hover,
.main_nav .level_2 strong:hover {
background-color: var(--light-grey-color);
}
@media only screen and ( min-width: 550px ) {
.main_nav {
display: block;
width: 100%;
overflow: visible;
}
}
@media only screen and ( min-width: 1000px ) {
.main_nav {
display: inline-block;
width: 75%;
width: calc(75% - 100px);
max-width: calc(100% - 375px);
text-align: right;
vertical-align: top;
overflow: visible;
margin-right: 2rem;
/* float: right; */
}
.main_nav a, .main_nav strong {
padding: 1rem;
display: block;
}
.main_nav .level_2 a,
.main_nav .level_2 strong {
padding: 1rem;
}
}
@media only screen and ( min-width: 1250px ) {
.main_nav {
padding-top: 1.2rem;
}
.main_nav a, .main_nav strong {
padding: 1rem 2rem;
}
.main_nav .level_2 a,
.main_nav .level_2 strong {
padding: 1rem 2rem;
}
}
/* language Sprachenwechsler */
.lang_nav {
font-size: 1.2rem;
letter-spacing: 0.05rem;
font-family: "Lato", sans-serif;
text-transform: uppercase;
}
.lang_nav ul, .lang_nav li {
margin: 0;
padding: 0;
list-style: none;
}
.lang_nav li {
display: inline-block;
padding: 0.75rem 0;
}
.lang_nav li > a,
.lang_nav li > strong {
display: inline-block;
background: transparent;
/* background: var(--light-grey-color); */
color: var(--text-color);
padding: 0.5rem 0.25rem;
margin: 0 0 0 1rem;
text-decoration: none;
font-style: normal;
font-weight: normal;
}
.lang_nav li > strong {
color: var(--text-color);
}
.lang_nav li.last:not(.first)::before {
display: inline-block;
content: ' ';
width: 1px;
height: 16px;
border-left: 1px solid var(--middle-grey-color);
vertical-align: middle;
line-height: 1;
padding: 0;
margin: 0 0 0 .5rem;
}
@media only screen and ( max-width:549px ) {
.lang_nav {
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: 4rem;
}
.lang_nav li {
padding: 0;
}
.lang_nav li > a, .lang_nav li > strong {
padding: 0.8rem;
margin: 0;
background: var(--off-white-color);
opacity: 0.9;
}
.lang_nav li > a:hover {
opacity: 1;
background: var(--light-grey-color);
}
.lang_nav li.active {
display: none;
}
.lang_nav li.last:not(.first)::before {
display: none;
}
}
@media only screen and ( min-width: 1000px ) {
.lang_nav {
display: inline-block;
width: auto;
text-align: right;
vertical-align: top;
overflow: visible;
margin: 0 0 0 0;
}
}
/* Mobile menu */
@media screen and (min-width: 768px) {
.mod_mmenu, #mmenu:not( .mm-menu ) {
display: none;
}
}
.menutoggle { display: none; flex: none; }
@media screen and (max-width: 767px) {
.menutoggle {
display: block;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
z-index: 10;
width: 3rem;
height: 3rem;
text-indent: -9999px;
font-size: 1em;
}
.menutoggle img {
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 10;
background: var(--light-grey-color);
opacity: 0.9;
padding: 5px;
}
.main_nav {
display: none;
visibility: hidden;
}
}
@media screen and (max-width: 767px) {
.menutoggle img {
background: transparent;
padding: 0;
}
}
/* Unternavigation */
.sub_nav {}
.sub_nav ul {
padding: 0;
margin: 0 0 2rem;
list-style: none;
}
.sub_nav li {
display: block;
margin-bottom: 0;
}
.sub_nav li > a,
.sub_nav li > span,
.sub_nav li > strong {
display: block;
padding: 0.8rem 2rem;
border: 0;
text-transform: none;
background: #e9e9ea /* #fff */;
color: #545454;
border-bottom: 1px solid var(--off-white-color) /* #dedede */;
text-decoration: none;
}
.sub_nav .last > * {
border-bottom: 0;
}
.sub_nav .trail a {
color: var(--hilite-dark-color);
}
.sub_nav .active span,
.sub_nav .active strong,
.sub_nav .active {
color: var(--hilite-color);
}
.sub_nav .active > span {
font-weight: bold;
}
@media only screen and ( min-width: 550px ) {
.sub_nav ul {
margin: 0 0 3.5rem 0;
}
}
/* News Categories in Subnav */
/* .mod_newscategories */
.sub_nav.mod_newscategories li.active {
display: block;
padding: 0.8rem 2rem;
border: 0;
text-transform: none;
background: #e9e9ea /* #fff */;
border-bottom: 1px solid var(--off-white-color) /* #dedede */;
text-decoration: none;
}
.sub_nav.mod_newscategories .active > strong {
display: inline;
padding: 0;
border: 0;
}
.sub_nav.mod_newscategories li img {
display: inline-block;
max-width: 24px;
vertical-align: middle;
margin: 0 1rem 0 0;
filter: grayscale(100%);
}
.sub_nav.mod_newscategories li.active img {
filter: grayscale(0%);
}
/* Nav Skiplink / Artikelnavigation */
.skip_nav {
padding: 0;
margin: 0 0 2rem;
list-style: none;
}
.skip_nav li {
margin: 0;
}
.skip_nav a {
display: block;
padding: 0.8rem 2rem;
background: #fff;
color: #545454;
border-bottom: 1px solid #dedede;
text-decoration: none;
}
.skip_nav a:focus, .skip_nav a:active { color: var(--hilite-color); }
.skip_nav .last a {
border-bottom: 0;
}
.skip_nav a::after {
float: right;
content: "\e800";
color: #999;
font-family: "m1-icons";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: auto;
margin: 0 5px;
text-align: center;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1.6;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Navigation Jahresarchiv */
.mod_newsmenu ul ul {
margin-bottom: 0px;
}
.mod_newsmenu ul ul .last a {
border-bottom: 1px solid #dedede;
}
.mod_newsmenu ul ul a,
.mod_newsmenu ul ul span {
padding-left: 30px;
}
.mod_newsmenu ul ul a::before,
.mod_newsmenu ul ul span::before {
content: "\e802";
color: #999;
font-family: "m1-icons";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: auto;
margin: 0 10px 0 0;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
/* font-size: 120%; */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Navigation Sitemap */
.mod_sitemap {}
.mod_sitemap ul {
list-style: none;
padding-left: 0;
}
.mod_sitemap ul ul {
margin-top: 0;
margin-bottom: 1.25rem;
}
.mod_sitemap li {
margin: 0;
}
.mod_sitemap .level_1 > li {
margin-bottom: 0.5rem;
}
.mod_sitemap a {
color: #666;
text-decoration: none;
}
.mod_sitemap .level_1 > li > a {
font-weight: 700;
}
.mod_sitemap .level_2 a::before {
content: "\e802";
color: #999;
font-family: "m1-icons";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: auto;
margin: 0 5px;
text-align: center;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Sub Navigation Leistungen */
.mod_customnav {}
.mod_customnav.navboxes {
max-width: 1440px;
/* width: 85%; */
width: calc(100% - 40px);
margin: 0 auto;
padding: 2rem;
}
.mod_customnav.navboxes h3::before {
content: 'Wir verbinden die 4 Elemente';
display: block;
font-size: 3.6rem;
color: #e01e26;
column-span: all;
margin-bottom: 2rem;
}
@media only screen and (max-width: 549px) {
.mod_customnav.navboxes {
/* display: none; */
padding: 0 2rem;
}
.home .mod_customnav.navboxes {
display: block;
width: auto;
padding-top: 2rem;
}
}
@media (min-width: 500px) {
.mod_customnav.navboxes {
}
}
@media (min-width: 1250px) {
.mod_customnav.navboxes {
/* padding-bottom: 3.5rem; */
width: calc(100% - 60px);
padding: 3.5rem 0;
}
}
.mod_customnav.navboxes h3 {}
.mod_customnav.navboxes ul {
list-style: none;
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
}
.mod_customnav.navboxes ul li {
margin: 0;
background: var(--light-grey-color);
width: calc(50% - 10px);
margin: 0 0 20px;
color: #fff;
background: var(--text-dark-color) no-repeat center center;
background-size: cover;
}
.button--image figure {
overflow: hidden;
position: relative;
line-height: 0;
}
.button--image figcaption {
position: absolute;
top: 2rem;
left: 2rem;
z-index: 3;
line-height: 1;
color: var(--light-grey-color);
font-size: 1.2rem;
letter-spacing: 0.05rem;
font-family: "Lato", sans-serif;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 0;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.button--image figcaption::after {
content: '';
width: 65px;
height: 1em;
display: block;
border-bottom: 1px solid #fff;
transition: all ease-in-out 0.2s;
}
.button--image a {
position: relative;
display: block;
z-index: 3;
}
.mod_customnav.navboxes ul li::after,
.button--image a::after {
content: '';
display: block;
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
background: var(--text-color);
background-color: rgba(87, 87, 86, 0.5);
mix-blend-mode: multiply;
transition: all ease-in-out 0.2s;
z-index: 1;
}
.mod_customnav.navboxes ul li:hover::after,
.button--image a:hover::after {
background-color: rgba(255, 255, 255, 0.5);
mix-blend-mode: lighten;
}
.mod_customnav.navboxes ul li a::after {
content: '';
width: 65px;
height: 1rem;
display: block;
border-bottom: 1px solid #fff;
transition: all ease-in-out 0.2s;
}
.mod_customnav.navboxes ul li a {
font-size: 1.2rem;
letter-spacing: 0.05rem;
font-family: "Lato", sans-serif;
text-transform: uppercase;
color: inherit;
text-decoration: none;
display: block;
padding: 2rem;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.mod_customnav.navboxes ul li a:hover {
color: #000;
}
.mod_customnav.navboxes ul li a:hover::after {
border-color: #000;
}
@media only screen and (max-width: 549px) {
.mod_customnav.navboxes ul li {
min-height: 100px;
}
.mod_customnav.navboxes ul li a {
padding: 1rem 2rem;
}
.mod_customnav.navboxes ul li::after {
display: none;
}
}
@media only screen and (min-width: 550px) {
.mod_customnav.navboxes ul {
margin-left: -17.5px;
margin-right: -17.5px;
margin-bottom: -35px;
}
.mod_customnav.navboxes ul li {
-ms-flex: 0 1 0px;
flex: 0 1 0px;
width: calc(50% - 35px);
margin: 0 17.5px 35px;
flex-basis: calc(50% - 35px);
position: relative;
}
.mod_customnav.navboxes ul li:before {
content: "";
float: left;
padding-top: 50% /* 100% */;
}
.mod_customnav.navboxes ul li a {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
padding: 2rem;
text-decoration: none;
z-index: 2;
}
}
@media only screen and (min-width: 950px) {
.mod_customnav.navboxes ul li {
width: calc(25% - 35px);
margin: 0 17.5px 35px;
flex-basis: calc(25% - 35px);
position: relative; /* If you want text inside of it */
}
}
@media only screen and (min-width: 1250px) {
.mod_customnav.navboxes ul { }
.mod_customnav.navboxes ul li {
/*
width: calc(16.5% - 35px);
flex-basis: calc(16.5% - 35px);
*/
width: calc(25% - 35px);
flex-basis: calc(25% - 35px);
}
.win .mod_customnav.navboxes ul li {
width:auto;
-ms-flex: 1 1 0px;
flex: 1 0px;
min-width: 180px;
flex-shrink: 1;
flex-grow: 1;
box-sizing: border-box;
}
}
/* Breadcrumb Navigation */
.mod_breadcrumb, #hero .mod_breadcrumb {
position: relative;
z-index: 2;
}
.breadcrumb, .mod_breadcrumb ul {
width: 100%;
padding: 15px 0;
margin: 0;
font-family: "Lato", sans-serif;
}
.mod_breadcrumb li {
display: inline-block;
margin: 0;
padding: 0;
font-size: 1.3rem;
color: inherit;
}
.mod_breadcrumb li a {
color: inherit;
text-decoration: none;
}
.mod_breadcrumb li::before {
content: '>';
content: '\e802';
display: inline-block;
vertical-align: middle;
color: var(--text-color);
font-family: "m1-icons";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
margin: 0 10px 0 5px;
width: auto;
text-align: center;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
position: relative;
top: -1px;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mod_breadcrumb li.active::before {
color: inherit;
}
.mod_breadcrumb li.first::before {
display: none;
}
/* Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Hero Element */
#hero {
color: var(--text-dark-color);
background-color: #fff;
min-height: 20vw;
overflow: hidden;
z-index: 0;
/* background: url('https://mph.cnetemp.de/cms/files/uploads/header/M1_%20Kliniken_banner_Unternehemen.jpg') no-repeat center top; */
/* background-size: cover; */
}
#hero .inside {
/* padding-top: 100px; */
/* min-height: 25vw; */
min-height: 20vw;
}
#hero *, #hero a {
color: var(--text-dark-color);
/*
color: #fff;
text-shadow: 0 0 15px rgba(0,0,0,0.5);
*/
}
#hero h1, #hero .mod_article.first {
position: relative;
z-index: 2;
overflow: visible;
}
@media only screen and (max-width: 749px) {
#hero {
height: 63.5vw/* 80vw */;
}
}
@media only screen and (max-width: 749px) and (orientation: landscape) {
#hero {
height: 27.5vw;
}
}
@media only screen and (min-width: 1920px) {
#hero,
#hero .inside {
max-height: 384px;
min-height: 384px;
}
}
/* Seitenbild pageimage */
.mod_pageImage {
position: absolute;
left: 50%;
top: 0;
width: 100vw;
transform: translate(-50%, 0);
z-index: 0;
}
.mod_pageImage::after {
content: '';
display: block;
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
background: var(--hilite-color);
opacity: 0.2;
/* mix-blend-mode: multiply; */
background: var(--text-color);
opacity: 0.5;
/* mix-blend-mode: luminosity; */
display: none;
}
@media only screen and (min-width: 750px) {
.mod_pageImage {
}
}
.mod_pageImage figure,
.mod_rocksolid_slider .rsts-slide-image div {
position: relative;
margin: 0;
}
.mod_pageImage figure {
width: 100%;
}
.mod_pageImage picture {
display: block;
line-height: 0;
}
.mod_pageImage img,
.mod_rocksolid_slider .rsts-slide-image img {
width: 100%;
height: auto;
}
.pageimage_title {
display: none;
}
.mod_rocksolid_slider .rsts-text {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
bottom: 3rem;
max-width: 1440px;
/* width: 85%; */
width: calc(100% - 40%);
color: #fff;
font-size: 2.2rem;
}
.mod_rocksolid_slider .rsts-text {
font-size: 1.6rem;
}
@media screen and ( max-width:549px ) {
.mod_rocksolid_slider .rsts-text { bottom: 1rem; }
}
/* Slider */
#slider {
margin: 0;
padding: 0 0 2rem;
overflow: visible;
}
#slider:after {
content: "";
display: table;
clear: both;
}
@media only screen and (max-width: 549px) {
#slider { padding: 0; }
}
@media only screen and ( min-width: 550px ) {
#slider { padding-bottom: 0;}
}
/* Rocksolid Slider */
.mod_rocksolid_slider {}
.rsts-view {
z-index: 1;
border: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: #fff;
-webkit-box-shadow: 0;
-moz-box-shadow: 0;
box-shadow: 0;
}
.rsts-slide {
max-height: 600px;
}
.mod_rocksolid_slider .ce_image figure {
display: block;
width: 100%;
padding: 0;
margin: 0;
}
.mod_rocksolid_slider .ce_image img {
display: block;
width: 100%;
height: auto;
}
.slider-text {
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
z-index: 2;
width: calc(100% - 40px);
max-width: 1440px;
margin: 0 auto;
color: #fff;
opacity: 0;
transition: all ease-in-out .3s;
}
.rsts-active .slider-text {
opacity: 1;
}
.slider-text--inner {
background: var(--text-color);
background: rgba(87, 87, 86, 0.8);
padding: 3rem;
}
.slider-text * {
color: #fff;
}
.slider-text h1, .slider-text h2 {
color: inherit;
}
.slider-text h3,
.slider-text h2 > em {
font-family: "Lato", sans-serif;
text-transform: uppercase;
font-size: 1.6rem;
font-weight: 400;
letter-spacing: 0.05rem;
margin-bottom: 1rem;
}
.slider-text h2 > em {
display: block;
font-style: normal;
}
@media only screen and (max-width: 549px) {
.slider-text {
width: auto;
bottom: 2rem;
margin: 0 2rem;
}
.slider-text.absolute {
}
.slider-text--inner {
padding: 2rem;
}
.slider-text *:last-child {
margin-bottom: 0;
}
.slider-text h1 {
margin-bottom: 1rem;
}
.slider-text h3, .slider-text h2 > em {
font-size: 1.4rem;
}
}
@media only screen and (min-width: 500px) {
.slider-text {
bottom: 2rem;
}
}
@media ( min-width: 950px) {
.slider-text {
}
}
@media ( min-width: 1250px) {
.slider-text {
width: calc(100% - 60px);
bottom: 5rem;
font-size: 1.8rem;
}
.slider-text--inner {
width: 50%;
width: calc(50% - 20px);
}
.text-right .slider-text--inner {
float: right;
}
.text-left .slider-text--inner {
float: left;
}
.slider-text h1, .slider-text h2 {
font-size: 4.3rem;
text-transform: uppercase;
letter-spacing: 0.05rem;
}
}
/* Bild-Slider */
.rsts-skin-abro-ref {
max-height: 30vw;
width: 100vw !important;
position: relative;
}
.rsts-skin-abro-ref:after {
content: '';
display: block;
height: 100%;
width: 50vw;
position: absolute;
top: 0; bottom: 0;
left: 0;
z-index: 2;
background: transparent;
background-size: auto 100%;
}
.rsts-skin-abro-ref .rsts-slide {
max-height: 30vw;
height: auto;
width: 100%;
text-align: right;
padding-left: 19vw;
}
.rsts-skin-abro-ref .rsts-slide-image div {
height: 100%;
width: auto;
}
.rsts-skin-abro-ref .rsts-slide img {
/* float: right; */
max-width: 81vw !important;
height: auto !important;
}
.rsts-nav-tabs {
z-index: 0;
top: -2px;
margin: 0;
}
.rsts-nav {
position: relative;
z-index: 1;
margin: 0;
text-align: center;
}
.rsts-nav-tabs ul {
width: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
text-align: left;
background-color: var(--text-dark-color);
}
.rsts-nav-tabs ul li {
padding: 0;
margin: 0;
-ms-flex-positive: 0;
-ms-flex-negative: 0;
width: 25%;
flex: 0 0 auto;
}
.rsts-nav-tabs ul li.rsts-nav-prev,
.rsts-nav-tabs ul li.rsts-nav-next {
display: none;
}
.rsts-nav-tabs ul li a {
background-color: var(--text-dark-color);
color: #fff;
display: block;
height: 100%;
padding: 1rem 2rem;
text-decoration: none;
}
.rsts-nav-tabs ul li .active { background-color: var(--text-dark--color); }
.rsts-prev,
.rsts-next {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
width: 55px;
transition: all ease-in-out 0.25s;
}
.rsts-prev:hover,
.rsts-next:hover {
background: rgba(0,0,0,0.15);
}
.rsts-prev { left: 0; }
.rsts-next { right: 0; }
.rsts-prev span,
.rsts-next span {
font-size: 0;
position: absolute;
top: 50%;
margin-top: -32px;
}
.rsts-next span {
right: 0;
}
.rsts-prev span:after,
.rsts-next span:after {
display: block;
height: 64px;
width: 50px;
content: '';
transition: all ease-in-out 0.25s;
opacity: 0.0;
}
.rsts-prev span:after {
background: transparent url(../images/left_arrow.svg) no-repeat 5px center;
}
.rsts-next span:after {
background: transparent url(../images/right_arrow.svg) no-repeat right center;
}
.mod_rocksolid_slider:hover span:after,
.mod_rocksolid_slider:hover span:after {
opacity: 0.3;
}
.rsts-prev:hover span:after,
.rsts-next:hover span:after {
opacity: 0.8;
}
@media only screen and (max-width:549px) {
.rsts-nav-tabs ul li {
min-width: 50%;
}
.rsts-nav-tabs ul li a {
padding: 1rem 2.75rem;
}
}
@media only screen and ( min-width: 550px ) {
.rsts-nav-tabs ul {
}
.rsts-nav-tabs ul li a {
padding: 4rem 3.5rem 3rem;
}
}
@media only screen and ( min-width: 1250px ) {
.rsts-nav-tabs ul li a { padding-top: 8rem; font-size: 2.2rem; }
}
/* Nav Bullets */
.mod_rocksolid_slider {
position: relative;
}
.rsts-nav-bullets {
position: absolute;
bottom: 2rem;
left: 50%;
z-index: 3;
transform: translate(-50%, 0);
}
.rsts-nav-bullets ul {
display: block;
list-style: none;
margin: 0; padding: 0;
text-align: center;
}
.rsts-nav-bullets li {
display: inline-block;
margin: 0 0.5em;
}
.rsts-nav-bullets li a {
display: inline-block;
width: 10px;
height: 10px;
font-size: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
outline: none;
box-sizing: border-box;
transition: .2s ease-in-out;
}
.rsts-nav-bullets .rsts-nav-prev, .rsts-nav-bullets .rsts-nav-next {
display: none;
}
.rsts-nav-bullets li.rsts-nav-item a {
background-color: rgba(255,255,255,.5);
border-radius: 50%;
}
.rsts-nav-bullets li.rsts-nav-item a:hover {
background-color: rgba(255,255,255,1);
}
.rsts-nav-bullets li.rsts-nav-item a.active {
background-color: transparent;
box-shadow: 0 0 0 2px rgba(255,255,255,1);
}
/* Nav Numbers */
.rsts-nav-numbers {}
/* Nav Thumbs */
.rsts-nav-thumbs {}
/* Aktien iframe */
.aktie-iframe {}
.aktie-iframe--mini {
margin: 0 0 3.5rem;
padding: 2rem;
background: #e9e9ea;
}
@media only screen and (min-width:1250px) {
.aktie-iframe--mini {
}
}
/* Unternehmen */
/* News */
/* News Teaser */
#main .mod_article.teaser-container {
padding: 0;
background: transparent;
margin-bottom: 0;
}
.news_teaser {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-flow: row wrap;
flex-direction: row;
justify-content: flex-start;
margin-left: -17.5px;
margin-right: -17.5px;
}
.news .news_teaser.no-padding .layout_latest {
margin-left: 0;
margin-right: 0;
}
@media only screen and (min-width: 950px) {
#main .mod_article.teaser-container {
padding-top: 2rem;
}
}
@media only screen and (min-width: 1250px) {
.news .news_teaser.border .layout_latest {
border: 1px solid #dedede;
position: relative;
}
.news .news_teaser.border .layout_latest::after {
content: "Corporate News";
color: #58595a;
font-size: 5rem;
letter-spacing: 0.05rem;
font-family: "Lato", sans-serif;
text-transform: uppercase;
font-weight: 700;
line-height: 1;
position: absolute;
bottom: -0.75rem;
right: -0.25rem;
color: #dedede;
opacity: .3;
}
}
.news_teaser > h3 {
margin-left: 17.5px;
margin-right: 17.5px;
flex: none;
display: block;
width: 100%;
}
.news_teaser .layout_latest {
position: relative;
width: auto;
-ms-flex: 1 1 0px;
flex: 1 0px;
padding: 2rem;
padding-bottom: 40px !important;
margin: 0 17.5px 35px 17.5px;
background: #fff;
border: 0px solid var(--light-grey-color);
min-width: 180px;
flex-basis: calc(100% - 35px);
flex-shrink: 1;
flex-grow: 0;
box-sizing: border-box;
}
.news_intro_teaser.news_teaser .layout_latest {
flex-grow: 1;
}
.info {
color: #58595a;
font-size: 1.2rem;
letter-spacing: 0.05rem;
font-family: "Lato", sans-serif;
text-transform: uppercase;
}
.news_teaser .info {
margin-bottom: 1.5rem;
}
.news_teaser .layout_latest h3 {
font-size: 1.6rem;
text-transform: none;
font-weight: 700;
margin-bottom: 1.5rem;
}
.news_teaser .layout_latest h3 a {
color: var(--hilite-color);
}
.news_teaser .layout_latest a {
text-decoration: none;
}
.mod_newslist .more,
.mod_newsarchive .more,
.kontaktbox .more {
margin-bottom: 0;
}
.mod_newslist .more a,
.mod_newsarchive .more a,
.kontaktbox .more a,
.ce_text .more a {
text-decoration: none;
border-bottom: 1px solid var(--hilite-color);
display: inline-block;
padding: 0;
color: #757574;
font-weight: 400;
}
#main .ce_text a:not(.button) {
}
.home .kontaktbox .ce_text {
position: relative;
}
.home .layout_latest .more,
.presse .layout_latest .more,
.home .kontaktbox .more {
position: absolute;
left: 2rem;
bottom: 2rem;
}
.news_overview .layout_latest {
border-bottom: 1px solid var(--light-grey-color);
margin-bottom: 2.5rem;
background: var(--light-grey-color);
padding: 2rem 2rem 0;
}
/* @media (max-width: 549px) { */
/* .home .layout_latest, */
/* .presse .layout_latest { */
/* position: relative; */
/* padding-bottom: 40px !important; */
/* padding: 2rem; */
/* border-width: 1px; */
/* } */
/* } */
@media only screen and (min-width: 550px) {
.news_teaser .layout_latest {
flex-basis: calc(50% - 35px);
}
.news_teaser .layout_latest > *:last-child {
margin-bottom: 0;
}
}
@media only screen and (min-width: 950px) {
.news_teaser .layout_latest {
flex-basis: calc(25% - 35px);
}
.home .news_teaser .layout_latest {
flex-basis: calc(25% - 35px);
}
.pressespiegel .news_teaser .layout_latest,
.tiles .news_teaser .layout_latest {
flex-basis: calc(33% - 35px);
/* max-width: calc(33% - 35px); */
}
}
@media only screen and (min-width: 1250px) {
.news_teaser .layout_latest {
padding: 2rem;
}
.home .layout_latest .more {
left: 2rem;
}
}
.presse .news_teaser .layout_latest {
padding-top: 0 /* 11% */ /* 23% */;
position: relative;
}
.presse .news_teaser figure {
/* position: absolute; */
display: block;
/*
top: 0;
left: 0;
right: -1px;
*/
min-width: 100%;
margin: 0 0 2rem;
z-index: 1;
line-height: 0;
}
.presse .news_teaser figure::after {
content: ' ';
display: block;
background: rgba(0,0,0,0.15);
position: absolute;
top: 0;
bottom: 0;
right: -1px;
left: 0;
z-index: 2;
display: none;
}
.presse .news_teaser figure img {
display: block;
width: 100%;
}
/* Category Image */
.presse .news_teaser .cat_image {
border-bottom: 1px solid var(--light-grey-color);
padding: 15px 0 10px;
}
.presse .news_teaser .cat_image img {
display: inline-block;
width: auto;
max-width: 38px;
}
@media only screen and (max-width: 549px) {
.news_teaser > h3 {
margin-top: 2rem;
}
}
/* News List */
.news_list {
column-width: 300px;
column-gap: 35px;
}
.news_list > .layout_simple {
margin-bottom: 1rem;
break-inside: avoid;
}
.news_list > .layout_simple.last {
margin-bottom: 2.5rem;
}
aside .news_list {
padding: 2rem;
margin: 0 0 35px;
background: inherit;
}
.news_list .info {
margin-bottom: 0;
}
.news_list a {
text-decoration: none;
}
.news_list + .ce_text.last {
display: block;
margin: 35px 0 0;
}
/* News Reader */
.mod_newsreader .layout_full,
.mod_newsreader .ce_text {
max-width: 700px;
overflow: visible;
}
.mod_newsreader .float_right {
padding: 10px;
border: 1px solid #ddd;
box-sizing: border-box;
}
.mod_newsreader figure img {
width: 100%;
}
@media only screen and (min-width: 1250px) {
.mod_newsreader .float_right {
margin-top: -15px;
margin-right: -60px;
}
}
.mod_newsreader h1 {
margin-bottom: 0.5rem;
}
.mod_newsreader h2 {
font-size: 1.8rem;
color: var(--text-color);
font-weight: 700;
}
.mod_newsreader .ce_text ul {
margin-left: 2rem;
}
.mod_newsreader .back a {
font-size: 0;
}
.mod_newsreader .back a::after {
content: "Zurück";
text-transform: uppercase;
font-family: 'Lato', sans-serif;
letter-spacing: 0.05rem;
font-size: 1.2rem;
text-decoration: none;
display: inline-block;
padding: 0.2rem 1rem;
color: #454545;
border: 1px solid #454545;
}
html[lang="en"] .mod_newsreader .back a::after {
content: "Go back";
}
/* News Archiv */
.mod_newsarchive {}
.mod_newsarchive .layout_latest {
border-bottom: 1px solid #dedede;
margin-bottom: 35px;
padding-bottom: 25px;
}
/* Referenzen */
.referenzen_list {}
.referenzen_list p { margin-bottom: 0; }
.referenzen_list .teaser { opacity: 0.75; }
.referenzen_list .teaser p { margin-bottom: 2.5rem; }
.referenzen_list .teaser ul { margin-top: 0.5rem; }
.referenzen_list .teaser li { margin-bottom: 0.5rem; }
/* Zertifikate */
.mod_newslist.zertifikate {
margin: 0;
margin-left: -17.5px;
margin-right: -17.5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.fullscreen .mod_newslist.zertifikate {}
section:not(.ce_accordion) .mod_newslist.zertifikate {
margin-bottom: 2.5rem;
padding-bottom: 2.0rem;
border-bottom: 1px solid #dedede;
}
.mod_newslist.zertifikate > h3 {
width: 100%;
margin: 2.5rem 17.5px;
}
.zertifikate .layout_latest {
display: block;
margin: 0 17.5px 35px;
flex-grow: 0;
flex-shrink: 0;
-ms-flex: 1 0px;
flex: 0 0px;
flex-basis: auto;
width: auto;
max-width: calc(25% - 35px);
min-width: 130px;
overflow: visible;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: wrap/* nowrap */;
align-content: flex-start;
}
.fullscreen .zertifikate .layout_latest {
width: auto;
max-width: calc(25% - 35px);
flex-basis: calc(25% - 35px);
}
.zertifikate .layout_latest > div {
padding: 0.5rem 0;
-ms-flex: 1 0px;
flex: 0 0px;
flex-basis: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
}
/*
.firefox.mac .zertifikate .layout_latest > div {
margin-left: 50px;
}
*/
.mod_newslist.zertifikate .info {
margin-bottom: 0.5rem;
}
.mod_newslist.zertifikate .layout_latest h3 {
font-size: 1.5rem;
font-weight: 400;
margin-bottom: 0.5rem;
}
.mod_newslist.zertifikate .enclosure {
font-size: 1.2rem;
padding: 0;
margin: 0;
border: 0;
background: transparent;
}
.mod_newslist.zertifikate figure {
overflow: visible;
margin: 0 15px 0 0;
flex: 0 0 100%/* 40% */;
flex-basis: 100%/* 40% */;
width: auto;
display: block;
}
.mod_newslist.zertifikate figure img {
box-shadow: 0 2px 3px rgba(0,0,0,0.15);
display: block;
width: 100%;
}
#main .mod_newslist.zertifikate figure img {
border: 1px solid #dedede;
}
@media only screen and (max-width: 549px) {
.zertifikate .layout_latest,
.fullscreen .zertifikate .layout_latest {
max-width: none;
/* flex-basis: calc(100% - 35px); */
flex-basis: calc(50% - 35px);
}
}
/* Zertifikate Liste */
.mod_newslist.zertifikate_list {
}
.mod_newslist.zertifikate_list .layout_simple {
}
.mod_newslist .layout_simple > *,
.mod_newslist .layout_simple .info,
.mod_newslist .layout_simple h3,
.mod_newslist .layout_simple .enclosure {
margin-bottom: 0.5rem;
}
/* Pagination */
.pagination {
flex: none;
width: 100%;
margin: 0 0 /*35px*/;
padding: 2.5rem 0 0;
font-size: 1.2rem;
letter-spacing: 0.05rem;
font-family: "Lato", sans-serif;
text-transform: uppercase;
}
.pressespiegel .pagination,
.tiles .pagination {
margin: 0 17.5px;
}
.news_list .pagination {
margin: 0 0 35px;
}
.pagination p {
margin-bottom: 1.5rem;
}
.pagination ul {
display: block;
list-style: none;
padding: 0;
}
.pagination li {
display: inline;
}
.pagination a,
.pagination span,
.pagination strong {
display: inline-block;
background: var(--light-grey-color) /*#f2f2fa*/;
color: var(--text-color);
padding: 0.5rem 1.25rem;
margin: 0 1rem 0 0;
text-decoration: none;
}
.presse .pagination a,
.presse .pagination span,
.presse .pagination strong {
background-color: #e5e5e7;
}
.pagination a:hover {
background: var(--text-color);
color: #fff;
}
.pagination .current,
.pagination span.active,
.pagination strong.active {
background: var(--text-color);
color: #fff;
}
.presse .pagination span.active,
.presse .pagination strong.active {
background: var(--hilite-color);
color: #fff;
}
.brand-m1 .pagination .current { background-color: var(--hilite-color); }
.mod_newsreader .pagination { margin: 0 0 2.5rem; }
.mod_newsreader .pagination a { margin: 0 2.5rem 0 0; }
#prevItem,
#nextItem,
.layout_full .pagination .previous,
.layout_full .pagination .next {
font-size: 0;
}
#prevItem::after,
.layout_full .pagination .previous::after {
font-size: 1.2rem;
content: "Vorheriger Artikel";
display: inline-block;
}
#nextItem::before,
.layout_full .pagination .next::before {
font-size: 1.2rem;
content: "Nächster Artikel";
display: inline-block;
}
html[lang="en"] #prevItem::after { content: "previous article"; }
html[lang="en"] #nextItem::before { content: "next article"; }
@media only screen and (max-width:549px) {
.mod_newsreader .pagination { margin: 0 0 2.5rem 0; }
.mod_newsreader .pagination { margin: 0 0 2.5rem 0; }
.mod_newsreader .pagination a { margin: 0 0.5rem 0 0; vertical-align: bottom; }
/*
#prevItem, .pagination .previous { padding: 0.5rem 2rem 0.5rem 1rem; }
#nextItem, .pagination .next { padding: 0.5rem 1rem 0.5rem 2rem }
#prevItem::after, .pagination .previous::after { content: "\00ab \2009 vor"; }
#nextItem::before, .pagination .next::before { content: "weiter \2009 \00bb "; }
html[lang="en"] #prevItem::after { content: "previous"; }
html[lang="en"] #nextItem::before { content: "next"; }
*/
}
/* Kontaktbox */
.kontaktbox {
width: calc(25% - 35px);
/* flex-basis: calc(30% - 17.5px); */
flex-basis: calc(25% - 35px);
flex-shrink: 1;
flex-grow: 1;
min-width: 150px;
/* max-width: 333px; */
max-width: calc(25% - 25.0px);
margin: 0 0 0 35px;
}
.home .kontaktbox {
height: auto;
max-width: calc(25% - 35px);
padding-bottom: 40px;
margin: 0 17.5px 35px 17.5px;
border: 0;
}
.home .kontaktbox .ce_text {
height: 100%;
margin-bottom: 0;
background: #e9e9ea;
}
#right .kontaktbox {
width: 100%;
max-width: 100%;
margin: 0;
}
.kontaktbox .ce_text {
padding: 2rem;
/* background: var(--light-grey-color); */
background: #e9e9ea;
}
.kontaktbox p {
/* margin-bottom: 2rem; */
}
.kontaktbox .ce_text > *:last-child {
margin-bottom: 0;
}
@media only screen and (max-width:549px) {
.home .kontaktbox {
display: none;
}
.kontaktbox {
max-width: none;
-ms-flex: 1 1 0px;
flex: 1 1 0px;
flex-basis: 100%;
margin: 0;
}
}
@media only screen and (min-width: 550px) {
.home .kontaktbox {
max-width: calc(50% - 35px);
flex-basis: calc(50% - 35px);
}
.kontaktbox h3 {
margin-bottom: 35px;
}
}
@media only screen and (min-width: 950px) {
.kontaktbox {
flex-basis: 33%; /*calc(33% - 17.5px)*/
}
.home .kontaktbox {
max-width: calc(25% - 35px);
flex-basis: calc(25% - 35px);
}
}
@media only screen and (min-width: 1250px) {
.kontaktbox {
flex-basis: calc(25% - 17.5px);
}
}
/* Facts */
.facts, .mod_article.fullscreen.facts {
background: #485563; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #29323c, #485563); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #29323c, #485563); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #fff;
margin: 0 0 3.5rem 0;
}
.facts * {
color: inherit;
}
.facts .flex-container {
align-items: center;
justify-content: center;
padding-top: 1rem;
}
.facts .flex-item {
padding: 0 1.5rem;
font-size: 1.2rem;
letter-spacing: 0.05rem;
font-family: "Lato", sans-serif;
text-transform: uppercase;
}
.facts .flex-item p {
margin: 0;
}
.facts .flex-item strong {
display: block;
font-weight: 700;
font-size: 3rem;
}
/* ********************************************************** */
/* Cookiebar */
.cookiebar-active #wrapper { margin-bottom: 4rem; }
.cookiebar {
background-color: var(--text-dark-color);
font-weight: 400;
font-size: 14px;
color: #e5e5e5;
padding: 15px;
box-sizing: border-box;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
text-align: left;
align-items: flex-start;
justify-content: space-between;
}
.cookiebar > * {
flex: 0 1 auto;
}
.cookiebar__text {
/* flex-basis: 50%; */
}
.cookiebar__message, .cookiebar__text {
margin-right: auto;
}
@media only screen and (min-width: 1250px) {
.cookiebar { padding: 15px 8vw; }
.cookiebar__text { flex-basis: 50%; flex-grow: 1; padding-right: 20px; }
}
.cookiebar .cookiebar__button {
line-height: 1;
height: auto;
color: var(--light-grey-color);
background-color: var(--hilite-color);
}
.cookiebar__analytics {}
/* Marketing Suite Opt-In */
.mod_cms_accept_tags.cookie-bar {
font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 13px;
text-rendering: optimizeLegibility;
background: rgba(0,0,0,0.6);
}
.mod_cms_accept_tags .info {
font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 14px;
text-transform: none;
letter-spacing: normal;
}
.mod_cms_accept_tags.cookie-bar form {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}
.mod_cms_accept_tags.cookie-bar form > .formbody,
.mod_cms_accept_tags.cookie-bar form > .tags > div {
padding: 20px;
}
.mod_cms_accept_tags.cookie-bar .info {
font: inherit;
text-transform: none;
letter-spacing: 0;
}
.mod_cms_accept_tags.cookie-bar button, .mod_cms_cookie_bar.cookie-bar button {
line-height: 1;
height: auto;
}
/* Layout Elemente */
/* Flex Container */
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-flow: row wrap;
flex-direction: row;
justify-content: space-between;
margin-left: -17.5px;
margin-right: -17.5px;
flex-wrap: wrap;
}
.flex-item {
width: auto;
-ms-flex: 1 1 0px;
flex: 1 0px;
margin: 0 17.5px 35px;
min-width: 150px;
box-sizing: border-box;
}
.flex-item.width-1-2 {
flex-basis: calc( 50% - 35px );
flex-grow: 0;
}
.flex-item.width-1-4 {
flex-basis: calc( 25% - 35px );
flex-grow: 0;
}
.flex-item.width-3-4 {
flex-basis: calc( 75% - 35px );
flex-grow: 0;
}
.flex-item.width-1-3 {
flex-basis: calc( 33.33% - 35px );
flex-grow: 0;
}
.flex-item.width-2-3 {
flex-basis: calc( 66.6667% - 35px );
flex-grow: 0;
}
.flex-item.padding {
padding: 2rem;
}
@media only screen and (max-width:549px) {
.home .flex-item { margin-bottom: 0; }
.flex-item.width-1-2,
.flex-item.width-1-4,
.flex-item.width-3-4,
.flex-item.width-1-3,
.flex-item.width-2-3 {
flex-basis: 100%;
flex-grow: 1;
}
}
@media only screen and (max-width:999px) and (min-width:550px) {
.flex-item.width-1-4 {
flex-basis: calc( 33.33% - 35px );
}
.flex-item.width-3-4 {
flex-basis: calc( 66.6667% - 35px );
}
}
@media only screen and (min-width: 1250px) {
.flex-item.padding {
/* padding: 3rem; */
}
}
.kachel-white {
background: #fff;
}
.kachel-white.width-2-3 {}
.kachel-white.width-2-3 .ce_text {
position: relative;
padding: 2rem;
}
/* @media only screen and (max-width: 549px) { */
/* .kachel-white { */
/* padding: 2rem; */
/* } */
/* .kachel-white.width-2-3 .ce_text { */
/* padding: 0; */
/* } */
/* } */
@media only screen and (min-width: 1000px) {
.kachel-white.width-2-3 .ce_text {
padding-left: calc(50% + 20px);
}
.kachel-white.width-2-3 .ce_text figure {
position: absolute;
left: 0;
top: 0; bottom: 0;
width: 50%;
overflow: hidden;
margin: 0;
padding: 0;
height: 100%;
}
.kachel-white.width-2-3 .ce_text figure img {
object-fit: cover;
min-height: 100%;
position: absolute;
}
}
.iconbox1,
.iconbox2 {
position: relative;
padding-left: 70px;
padding-top: 1.2rem;
}
.iconbox1:before,
.iconbox2:before {
position: absolute;
left: 0rem;
top: 0rem;
content: '\e800';
display: block;
background: #e01e26;
padding: 0px;
text-align: center;
font-size: 2rem;
border-radius: 50%;
line-height: 5rem;
width: 5rem;
height: 5rem;
color: #fff;
}
.iconbox2:before {
content: '\e801';
}
/* Videos */
.video-container {
width: 100%;
height: auto;
padding-top: 57%;
position: relative;
}
@media (max-width: 1249px) {
.video-container {
margin-bottom: 3.5rem;
}
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
/*sorgt dafuer, dass der zweitäußerste Container immer das Seitenverhaeltnis 16:9 behaelt */
.mejs-container {
width: 100% !important;
height: auto !important;
padding-top: 57%;
}
/* sorgt dafuer, dass das Vorschaubild und der Play-Button wieder mittig zentriert sind */
.mejs-overlay, .mejs-poster {
width: 100% !important;
height: 100% !important;
}
/* sorgt dafuer, dass das Video-Element, der übergeordnete DIV-Container vom Flash-Video
und das Flash-Video richtig skaliert werden */
.mejs-mediaelement video,
.mejs-mediaelement .me-plugin,
.mejs-mediaelement embed {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100% !important;
height: 100% !important;
}
/* responsive iframe */
.iframe-container {
position: relative;
padding-bottom: 150%;
height: 0;
overflow: hidden;
width: 100%;
height: auto;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ratio */
.iframe-container.ratio3x4 {
padding-bottom: 150%;
}
.iframe-container.ratio6x9 {
padding-bottom: 56.25%;
}