html,
button,
input,
select,
textarea {
color: #333;
}
body {
font-size: 15px;
line-height: 21px;
background-color: #063258;
}
body#start {
background-color: #001526;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #dadada;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* allgemeine Definitionen */
body {
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:focus{
outline: none;
}
a.freistehend {
display: inline-block;
font-weight: bold;
padding-left: 24px;
margin: 12px 32px 2px 0;
background: url(../img/symbole.png) no-repeat 0 2px;
}
a.freistehend.mehr {
background: url(../img/symbole.png) no-repeat 0 -98px;
}
a.freistehend.weniger {
background: url(../img/symbole.png) no-repeat 0 -1198px;
}
a.freistehend.zurueck {
background: url(../img/symbole.png) no-repeat 0 -1248px;
}
a.textlink, a.nicEdit-textlink {
white-space: nowrap;
font-weight: bold;
padding-left: 13px;
background: url(../img/symbole.png) no-repeat 3px -496px;
}
a.pdf {
display: inline-block;
font-weight: bold;
padding-left: 24px;
margin: 12px 32px 2px 0;
background: url(../img/symbole.png) no-repeat 0 -1848px;
}
a.sf {
display: inline-block;
font-size: 14px;
font-weight:bold;
color:#666;
padding: 6px 18px 5px 18px;
margin: 12px 18px 2px 0;
background-color: #fff;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
a.sf:hover {
text-decoration:none;
color:#555;
background-color: #f5f5f5;
border-color: #ddd;
}
a.sf.dunkel {
color:#fff;
background-color: #063258;
border: 1px solid #063258;
}
a.sf.dunkel:hover {
color:#666;
background-color: #fff;
border-color: #ccc;
}
/* tel-Links nicht hervorheben */
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover {
text-decoration: none;
color: #333;
cursor: default;
font-size: 12px;
}
a.deeplink {
width: 14px;
height: 14px;
text-decoration: none;
display: none;
background: url(../img/symbole.png) no-repeat 0 -2250px;
float: right;
}
.deeplink_zeigen:hover .deeplink {
display: inline-block;
}
ul, ol, li, p {
list-style-type: none
}
ul, ol, li, p {
margin: 0;
padding: 0;
}
p + p,
div.p + p,
div.p {
margin: 14px 0 0 0;
padding: 0;
}
.verdeckt {
display: none;
}
.inline {
display: inline;
}
.block {
display: block;
}
.reduzieren p {
margin: 14px 0 0 0;
padding: 0;
}
#modal {
background-color:black;
position:fixed;
width:100%;
height:100%;
opacity: 0.50;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50);
z-index:99;
display:none;
}
#customer-login, #customer-register, #customer-forgotpw, #customer-resetpw {
position:absolute;
width: 330px;
/*height: 360px;*/
padding:25px;
background-color: #f6f6f6;
top:40%;
left:50%;
margin-left:-190px;
margin-top:-205px;
z-index:100;
font-size:13px;
color: #666666;
display:none;
}
#supra-ebene .close, #supra-ebene .close, #supra-ebene .close, #supra-ebene .close {
display:block;
position:absolute;
right:-18px;
top:-18px;
width:37px;
height:37px;
/*background-image: url('../img/gtk_cancel.png');*/
background: url(../img/symbole.png) repeat-x 0 -2349px;
}
#customer-login form, #customer-register form, #customer-forgotpw form, #customer-resetpw form {
margin:0px;
padding:0px;
}
#customer-login td, #customer-register td, #customer-forgotpw td, #customer-resetpw td {
padding-right: 10px;
}
#customer-login input[type="text"], #customer-login input[type="password"],
#customer-register input[type="text"], #customer-register input[type="password"],
#customer-forgotpw input[type="text"],
#customer-resetpw input[type="password"] {
width:220px;
border:1px solid lightgray;
background-color: white;
}
#customer-login input[type="button"].login-btn, #customer-login .reg-link,
#customer-register input[type="button"].register-btn,
#customer-forgotpw input[type="button"].forgotpw-btn,
#customer-forgotpw input[type="button"].register-btn,
#customer-resetpw input[type="button"].resetpw-btn{
background-color: #003366 !important;
width:320px !important;
height: 40px !important;
margin:auto !important;
color: white !important;
font-size:16px !important;
font-weight: bold !important;
border:none;
}
#customer-login .reg-link {
background-color:white !important;
color: #666 !important;
display:block;
text-align:center;
padding-top:8px;
height: 32px !important;
}
#customer-login .forgot-pw-link {
font-size:11px;
color: #063257;
}
.ku {
white-space: nowrap;
}
.versalien {
font-size: 15px;
text-transform: uppercase;
margin: 0 0 6px 0;
}
.box {
padding: 11px 6px 16px 10px;
margin-bottom: 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.box.grau {
background-color: #fbfbfb;
}
.inhaltsmodul .box,
.inhaltsmodul .inlinebox {
padding: 15px 19px 18px 19px;
margin-top: 15px;
background-color: #f4f4f4;
border: 1px solid #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.inhaltsmodul .inlinebox {
overflow: auto;
}
h1 {
font-size: 17px;
line-height: 24px;
font-weight: bold;
border-bottom: 1px solid #565656;
padding: 0 0 8px 0;
margin: 6px 0 10px 0;
}
h3 {
font-size: 15px;
line-height: 21px;
font-weight: bold;
margin: 24px 0 0 0;
}
h3 + img,
h3 + iframe {
margin: 14px 0 4px 0;
}
img + h3 {
margin: 14px 0 0 0;
}
h3 + p {
margin: -1px 0 0 0;
}
h1 + h3 {
margin: 0 0 0 0;
}
h4 {
font-size: 15px;
line-height: 20px;
font-weight: bold;
padding: 0 0 2px 0;
margin: 6px 0 6px 0;
}
h5 {
font-size: 13px;
line-height: 23px;
font-weight: bold;
margin: 0 0 3px 0;
}
.hinweis {
font-size: 13px;
line-height: 15px;
color: #999;
}
.touchscroll {
overflow: auto;
}
.touchscroll.nurx {
overflow-x: auto;
overflow-y: visible;
}
.touchscroll.nury {
overflow-x: visible;
overflow-y: auto;
}
.scrollbar {
/* Anweisungen zur Kennzeichnung, dass gescrollt werden kann (für mobile Geräte, die keine Scrollleiste zeigen */
}
/* der Wordpress-Editor kann in die ULs keine Klasse einfügen, daher zusätzlich zu UL.liste auch alle ULs innerhalb
von .inhaltsmodul entsprechend formatieren */
ul.liste,
.inhaltsmodul ul {
overflow: auto; /* damit die Listen floaten, ohne dass die Aufzählungspunkte ungefloatet bleiben */
list-style-type: disc;
margin: 7px 0 14px 0;
}
ul.liste.reduziert {
max-width: 85%;
}
ul.liste li,
.inhaltsmodul ul li {
list-style-type: disc;
margin: 0 0 6px 20px; /* links muss etwas mehr Margin sein, als es für linksbündige Ausrichtung nötig wäre, weil der Chrome sonst in Verbindung mit overflow:auto die Aufzählungspunkte links beschneidet */
}
ol.liste,
.inhaltsmodul ol {
overflow: auto; /* damit die Listen floaten, ohne dass die Aufzählungspunkte ungefloatet bleiben */
list-style-type: decimal;
margin: 7px 0 14px 0;
}
ol.liste.reduziert {
max-width: 85%;
}
ol.liste li,
.inhaltsmodul ol li {
list-style-type: decimal;
margin: 0 0 6px 25px; /* links muss etwas mehr Margin sein, als es für linksbündige Ausrichtung nötig wäre, weil der Chrome sonst in Verbindung mit overflow:auto die Ziffern links beschneidet */
padding-left: 5px;
}
.inhaltsmodul ul.buttons {
list-style: none;
display: flex;
justify-content: center;
gap: 1rem
}
.inhaltsmodul ul.buttons.alignleft {
justify-content: flex-start;
}
.inhaltsmodul ul.buttons li {
list-style: none;
margin: 0
}
.inhaltsmodul ul.buttons li a {
background-color: #00345e;
color: #fff;
padding: 6px 12px;
border-radius: 3px;
display: block
}
/* für die UL-Elemente, die innerhalb von .inhaltsmodul für andere Zwecke verwendet werden, die Formatierung wieder entfernen */
.galerie ul,
.galerie ul li,
.slider ul,
.slider ul li,
.slidernavigation ul,
.slidernavigation ul li,
.filterleiste ul,
.filterleiste ul li,
.seitenleiste ul,
.seitenleiste ul li {
overflow: visible;
list-style-type: none;
margin: 0;
}
iframe {
border: none;
margin: 0;
padding: 0;
}
img.rahmen,
div.bild.rahmen img {
border: 1px solid #e5e5e5;
}
/* bei kleinen Auflösungen nicht umfließen, außer Miniformate mit reduzierter Breite */
img.anpassen,
div.bild.anpassen,
div.bild.anpassen img {
max-width: 100%;
}
img.rahmen.anpassen,
div.bild.rahmen.anpassen,
div.bild.rahmen.anpassen img {
max-width: 99%;
}
img.voll,
div.bild.voll {
margin: 8px 0 16px 0;
}
img.links,
div.bild.links {
float: none;
display:block;
margin: 6px 0 10px 0;
}
img.rechts,
div.bild.rechts {
float: none;
display:block;
margin: 6px 0 10px 0;
}
img.mini.links,
div.bild.mini.links {
float: left;
/* max-width: 120px; */
max-width: 25%;
margin: 6px 15px 10px 0;
}
img.mini.rechts,
div.bild.mini.rechts {
float: right;
/* max-width: 120px; */
max-width: 25%;
margin: 6px 0 10px 15px;
}
div.bild.mini.links img,
div.bild.mini.rechts img {
/* max-width: 120px; */
max-width: 100%;
}
img.midi.links,
div.bild.midi.links {
}
img.midi.rechts,
div.bild.midi.rechts {
}
div.bild.mini.links img,
div.bild.mini.rechts img,
div.bild.midi.links img,
div.bild.midi.rechts img {
max-width: 100% !important;
}
.bu {
font-size: 14px;
line-height: 18px;
color: #666;
font-style: italic;
margin: 8px 0 0 0;
}
.kleiner {
font-size: 13px;
}
.abstandoben {
margin-top: 10px;
}
.abstandunten {
margin-bottom: 10px;
}
.grosserabstandoben {
margin-top: 25px;
}
.grosserabstandunten {
margin-bottom: 25px;
}
img.ap {
float: left;
width: 70px;
height: 90px;
margin: 3px 10px 10px 0;
border: 1px solid #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
option.waehlen,
option.vorwaehlen {
color: #999;
}
/* Accordion */
.accordion {
margin: 24px 0 20px 0;
}
.accordion .accordion {
margin: 24px 20px 20px 20px;
}
.accordion_titel {
cursor:pointer;
color:#5b5b5b;
font-weight: bold;
padding: 11px 10px 11px 31px;
margin-bottom: 5px;
border: 1px solid #e5e5e5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #fff url(../img/accordion_pfeil.png) no-repeat 13px 16px;
}
.accordion_titel.active {
color:#fff;
border: 1px solid #063258;
background: #063258 url(../img/accordion_pfeil.png) no-repeat 12px -80px;
}
.accordion_inhalt {
padding: 5px 0 20px 0;
}
.accordion_inhalt:after {
content: " "; /* 1 */
display: table; /* 2 */
clear: both;
}
.accordion a.freistehend.mehr {
margin: 12px 22px 2px 0;
}
/* Galerie */
.galerie {
margin-top: 18px;
width: 100%;
position: relative;
}
.galerie ul li {
list-style-type: none;
margin: 0;
}
.galerie .miniaturen {
display: none;
padding: 17px 15px 17px 15px;
}
.galerie .miniaturen li {
padding: 0 10px 0 10px;
min-width: 50px; /* minimum width of the image (min width + border) */
width: 160px;
height: 140px;
text-align: center;
}
.galerie .miniaturen img {
border: 1px solid #f4f4f4;
max-width: 160px;
max-height: 140px;
cursor: pointer;
}
.galerie .miniaturen .active img {
border: 1px solid #b5b5b5;
}
.galerie .grossansichten {
position: relative;
overflow:hidden;
}
.galerie .grossansichten img {
width: 100%;
height: auto;
}
.galerie .grossansichten ul li {
position: relative;
display: none;
}
.galerie .grossansichten ul li:first-child {
display: block;
}
.galerie .grossansichten ul li div {
padding: 6px 12px 12px 12px;
background-color: #f4f4f4;
border: 1px solid #f4f4f4;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.galerie .elastislide-wrapper {
position: relative;
margin: 0 auto;
padding: 18px 60px 18px 50px;
background-color: #f4f4f4;
border: 1px solid #f4f4f4;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.galerie .elastislide-wrapper.elastislide-loading {
background-image: url(../img/loading.gif);
background-repeat: no-repeat;
background-position: center center;
}
.galerie .elastislide-carousel {
overflow: hidden;
position: relative;
}
.galerie .elastislide-carousel ul {
position: relative;
display: block;
list-style-type: none;
padding: 0;
margin: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
transition-property: -webkit-transform;
transition-property: -moz-transform;
transition-property: -o-transform;
transition-property: -ms-transform;
transition-property: transform;
transition-duration: 200ms;
}
.galerie .elastislide-horizontal ul {
white-space: nowrap;
}
.galerie .elastislide-carousel ul li {
margin: 0;
-webkit-backface-visibility: hidden;
}
.galerie .elastislide-horizontal ul li {
height: 100%;
display: inline-block;
}
.galerie .elastislide-carousel ul li a {
display: inline-block;
width: 100%;
}
.galerie .elastislide-carousel ul li a img {
display: block;
max-width: 100%;
}
/* Links-/Rechts-Pfeile */
.galerie .elastislide-wrapper nav span {
position: absolute;
width: 35px;
height: 32px;
background: #fff url(../img/symbole.png) no-repeat 13px -890px;
border: 1px solid #d5d5d5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
text-indent: -9000px;
cursor: pointer;
}
.galerie .elastislide-wrapper nav span:hover {
border: 1px solid #b5b5b5;
}
.galerie .elastislide-wrapper nav span.disabled {
display: none;
}
.galerie .elastislide-horizontal nav span {
top: 50%;
left: 10px;
margin-top: -16px;
}
.galerie .elastislide-horizontal nav span.elastislide-next {
left: auto;
right: 17px;
background-position: 14px -990px;
}
.galerie .elastislide-horizontal.elastislide-loading {
background-image: url(../img/loading.gif);
}
select.galerieauswahl {
display: inline-block;
margin: 12px 32px 2px 0;
}
/* Teasermodule */
.teasermodul {
}
.teasermodul + .teasermodul {
margin-top: 24px;
}
.teasermodul.spalten .justify {
-webkit-hyphens: auto;
-webkit-hyphenate-limit-chars: 8 4 4;
-webkit-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: 8 4 4;
-ms-hyphenate-limit-lines: 2;
hyphens: auto;
hyphenate-limit-chars: 8 4 4;
hyphenate-limit-lines: 2;
}
.teasermodul .spalte33,
.teasermodul .spalte66,
.teasermodul .spalte50 {
background-color: #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.teasermodul .spalte33 {
width: 217px;
margin: 0 0 24px 0;
}
.teasermodul .spalte50 {
width: 100%;
margin: 0 0 24px 0;
}
.teasermodul .spalte66 {
width: 100%;
margin: 0 0 24px 0;
}
.teasermodul .bildteaser {
/* border: 1px solid #f4f4f4;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px; */
}
.teasermodul .bildteaser img {
width: 100%;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.teasermodul .text {
font-size: 15px;
line-height: 20px;
padding: 11px 10px 15px 12px;
/* background-color: #f4f4f4; */
}
.teasermodul .bildteaser .text {
/* border: 1px solid #f4f4f4;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; */
}
.teasermodul :not(.bildteaser) .text {
padding-top: 8px;
/* border: 1px solid #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; */
}
.teasermodul a.freistehend {
margin: 6px 24px 0 0;
}
.teasermodul .text a.textlink {
font-size: 13px;
line-height: 18px;
background-position: 1px -496px;
}
.teasermodul .spalte33 a.freistehend,
.teasermodul .spalte33 a.pdf,
.teasermodul .spalte50 a.freistehend,
.teasermodul .spalte50 a.pdf {
margin: 6px 0 0 0;
}
.teasermodul h3 {
font-size: 16px;
line-height: 23px;
/* margin: 0 0 2px 0;
padding: 0;
background: url(../img/symbole.png) repeat-x 0 -1084px; */
border-bottom: 1px solid #d9d9d9;
padding: 0 0 6px 0;
margin: 0 0 8px 0;
}
.teasermodul h3 span {
/* padding: 0 16px 0 0;
background-color: #f4f4f4; */
}
.teasermodul h4 {
font-size: 15px;
line-height: 19px;
margin: 0 0 2px 0;
padding: 0;
}
.teasermodul .apdaten {
display: block;
margin: 15px 0 0 80px;
}
.teasermodul img.ap {
margin-top: 8px;
border: 1px solid #f4f4f4;
}
.teasermodul .text .ap_position {
font-size: 13px;
line-height: 15px;
font-weight: bold;
color: #999;
margin: 0 0 5px 0;
}
/* Pressemitteilungen */
.presse_jahr {
margin: 0 0 14px 0;
}
/* allgemeine Slider (Ansprechpartner, Dokumente) */
.slider {
}
.slider .vorwahl {
padding-top: 14px;
text-align: center;
}
.slider .vorwahl select {
display: block;
}
.slider .vorwahl ul {
display: none;
}
.slider .elementedaten {
display: none;
}
.slider .elemente li {
padding: 10px 0 10px 0;
font-size: 13px;
display: block;
float: none;
clear:both;
}
.slider .elemente li .apdaten {
font-size: 12px;
line-height: 18px;
max-width: 180px;
display: inline-block;
}
.slider .elemente li b,
.slider .elemente li .freistehend {
font-size: 15px;
}
.slider .elemente li b {
display: inline-block;
width: 175px;
min-height: 40px; /* Mindesthöhe damit es bei zweizeiligen Einträgen keinen Höhenversatz zu anderen Slider-Elementen gibt */
line-height: 18px;
}
.slider .elemente li .name b {
min-height: 0; /* falls das b in einem Element .name eingeschlossen ist, entfällt die Mindesthöhe, da die schon bei .name vorhanden ist */
}
.slider .elemente li a.textlink {
background-position: 1px -497px;
}
.slider .elemente li .name {
font-size:15px;
line-height: 18px;
margin-bottom: 5px;
}
.slider .hinweis,
.slider .ap_position {
font-size: 13px;
line-height: 15px;
color: #999;
margin: 0 0 0 0;
}
.slider .ap_position {
font-weight: bold;
}
.slider a.freistehend {
margin-top: 2px;
}
.slider .pdf {
min-height: 75px;
padding-left: 78px;
/* background: url(../img/symbole.png) no-repeat 0 -1950px; */
}
.slider .pdf:before {
content: ""; /* notwendig, damit das Pseudo-Element sichtbar wird */
background: url(../img/symbole.png) no-repeat 0 -1950px;
/* Grafikgröße im Sprite */
width: 65px;
height: 75px;
/* Positionierung */
float: left;
margin-left: -78px;
}
/* Tabellen */
.tabelle {
}
.tabelle tr {
background-color: #f4f4f4;
border-bottom: 2px solid #fff;
}
.tabelle tr:nth-child(odd) {
background-color:#e9e9e9;
border-bottom: none;
}
.tabelle tr:nth-child(even) {
background-color:#f4f4f4;
border-bottom: none;
}
.tabelle tr.ueberschrift {
color: #fff;
background-color: #063258;
border-bottom: 3px solid #fff;
}
.tabelle th {
text-align: left;
font-size: 16px;
font-weight: bold;
padding: 10px 15px 10px 15px;
}
.tabelle td {
min-width: 170px;
text-align: left;
vertical-align: top;
font-size: 15px;
border-left: 2px solid #fff;
padding: 10px 15px 10px 15px;
}
.tabelle td:first-child {
border-left: none;
}
/* Formulare: allgemeine Definitionen */
form {
padding: 18px 20px 18px 20px;
background-color: #f4f4f4;
border: 1px solid #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form .spalte {
width: 100%;
margin: 0 0 10px 0;
}
form .ueberschrift {
font-weight: bold;
margin-bottom: 6px;
}
form .bezeichnung {
margin-bottom: 6px;
}
form label.checkbox {
display: block;
padding-left: 30px;
text-indent: -18px;
}
form label.label_required {
color: #000;
}
form label.label_required:after {
content: "*";
}
form .voll input,
form .voll textarea,
form .voll select,
form .spalte input,
form .spalte textarea,
form .spalte select {
width: 100%;
}
form .klein {
max-width: 90px;
}
form .mittel {
max-width: 120px;
}
form input[type=radio],
form input[type=checkbox] {
width: auto;
}
form .voll textarea.flach {
height: 85px;
}
form .voll textarea.mittel {
height: 200px;
}
form .voll textarea.hoch {
height: 400px;
}
form .spalte textarea.flach {
height: 85px;
}
form .spalte textarea.mittel {
height: 160px;
}
form .spalte textarea.hoch {
height: 275px;
}
form input[type="submit"] {
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
background: none !important;
outline: none !important;
color: transparent !important;
font-size: 0 !important;
}
form h3 {
font-size: 17px;
line-height: 22px;
margin: 0 0 2px 0;
padding: 0;
background: url(../img/symbole.png) repeat-x 0 -1084px;
}
form h3 span {
padding: 0 16px 0 0;
background-color: #f4f4f4;
}
.error {
color: #d32828;
}
/* Schnellsuche */
.schnellsuche {
display: none;
z-index: +1;
width: 207px;
padding: 15px 0 15px 13px;
background-color: #fafafa;
border: 1px solid #a8a8a8;
-webkit-border-radius: 3px;
-webkit-border-top-right-radius: 0;
-moz-border-radius: 3px;
-moz-border-radius-topright: 0;
border-radius: 3px;
border-top-right-radius: 0;
background-color: rgb(255,255,255);
background-color: rgba(255,255,255,.9);
}
.schnellsuche div {
white-space: nowrap;
}
.schnellsuche .eingabefeld {
float: left;
border: 1px solid #e3e3e3;
width: 154px;
height: 31px;
background-color: #fff;
}
.schnellsuche input {
width: 140px;
padding: 4px 5px 0 5px;
border: none;
background: none;
outline: none;
}
.schnellsuche .schaltflaeche {
display: inline-block;
text-indent: -100000px;
border: 1px solid #e3e3e3;
width: 34px;
height: 31px;
background: #fff url(../img/symbole.png) no-repeat 8px -1393px;
}
/* Menü-Ebene */
.menueebene {
display: none;
z-index: 9999 !important;
width: 310px;
margin-left: 15px; /* die Ebene wird rechtsbündig an der Schaltfläche positioniert, bei kleinen Auflösungen soll sie ganz rechts stehen, daher links den Margin geben, den die SF rechts vom Rand entfernt ist */
background-color: #fff;
border: 4px solid #063258;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.menueebene .menuesuche {
padding: 15px 0 15px 13px;
background-color: #fff;
border: none;
}
.menueebene .menuesuche div {
white-space: nowrap;
}
.menueebene .menuesuche .eingabefeld {
float: left;
border: 1px solid #e3e3e3;
width: 248px;
height: 31px;
background-color: #fff;
}
.menueebene .menuesuche input {
width: 234px;
padding: 4px 5px 0 5px;
border: none;
background: none;
outline: none;
}
.menueebene .menuesuche .schaltflaeche {
display: inline-block;
text-indent: -100000px;
border: 1px solid #e3e3e3;
width: 34px;
height: 31px;
background: #fff url(../img/symbole.png) no-repeat 8px -1393px;
}
.menueebene ul {
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
}
.menueebene li {
border-top: 1px solid #ddd;
}
.menueebene li a {
display: block;
font-weight: bold;
padding: 5px 10px 3px 10px;
color: #7f7f7f;
}
.menueebene li.hervorgehoben a {
background-color: #f4f4f4;
color: #0c3d66;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.menueebene li.active a {
color: #063258;
}
/* Suche */
.suchergebnisse {
margin-top: 40px;
}
.suchergebnisse p {
margin-bottom: 6px;
}
.suchergebnisse a.url {
display: block;
font-weight: bold;
padding-left: 13px;
background: url(../img/symbole.png) no-repeat 3px -493px;
hyphens: auto
}
.treffer {
color: #1a4a92;
}
/* Seitenleisten */
.seitenleiste {
padding: 15px 15px 10px 15px;
margin-top: 25px;
background-color: #f4f4f4;
border: 1px solid #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.seitenleiste ul {
display: inline-block;
white-space: nowrap;
}
.seitenleiste ul li {
display: inline-block;
}
/* .seitenleiste ul li.grossansicht,
.seitenleiste ul li.grossansicht {
display: none;
} */
.seitenleiste ul li a,
.seitenleiste ul li span {
display: inline-block;
min-width: 32px;
height: 27px;
margin-right: 2px;
padding: 5px 0 0 0;
text-align: center;
color: #2e2e2e;
background-color: #fff;
border: 1px solid #dcdcdc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.seitenleiste ul li.zurueck a,
.seitenleiste ul li.zurueck span,
.seitenleiste ul li.weiter a,
.seitenleiste ul li.weiter span {
text-indent: -10000px;
background: #fff url(../img/symbole.png) no-repeat 11px -890px;
}
.seitenleiste ul li.weiter a,
.seitenleiste ul li.weiter span {
background-position: 13px -990px;
}
.seitenleiste ul li a:hover {
text-decoration: none;
border: 1px solid #b5b5b5;
}
.seitenleiste ul li.active a {
color: #fff;
border: 1px solid #063258;
background-color: #063258;
}
.seitenleiste ul li span {
color: #888;
}
/* Filterleisten */
.filterleiste {
width: 100%;
position: relative;
/* overflow:hidden; */
/* padding: 15px 15px 10px 15px; */
margin-top: 25px;
background-color: #f4f4f4;
border: 1px solid #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/* text-align: center; */
}
.filterleiste ul {
display: none;
padding: 17px 15px 17px 15px;
}
.filterleiste ul li {
list-style-type: none;
margin: 0;
min-width: 39px; /* minimum width of content (min width + border) */
height: 34px;
}
.filterleiste ul li span {
display: block;
width: 32px;
height: 28px;
padding: 4px 0 0 0;
margin-right: 5px;
text-align: center;
color: #2e2e2e;
background-color: #fff;
border: 1px solid #dcdcdc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
.filterleiste ul li span:hover {
text-decoration: none;
border: 1px solid #b5b5b5;
}
.filterleiste ul li.active span {
color: #fff;
border: 1px solid #063258;
background-color: #063258;
}
.filterleiste ul li.disabled span {
color: #bbb;
cursor: default;
}
.filterleiste ul li.disabled span:hover {
border: 1px solid #dcdcdc;
}
.filterleiste .elastislide-wrapper {
position: relative;
margin: 0 auto;
padding: 15px 65px 15px 65px;
background-color: #f4f4f4;
border: 1px solid #f4f4f4;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.filterleiste .elastislide-wrapper.elastislide-loading {
background-image: url(../img/loading.gif);
background-repeat: no-repeat;
background-position: center center;
}
.filterleiste .elastislide-carousel {
overflow: hidden;
position: relative;
}
.filterleiste .elastislide-carousel ul {
position: relative;
display: block;
list-style-type: none;
padding: 0;
margin: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
transition-property: -webkit-transform;
transition-property: -moz-transform;
transition-property: -o-transform;
transition-property: -ms-transform;
transition-property: transform;
transition-duration: 200ms;
}
.filterleiste .elastislide-horizontal ul {
white-space: nowrap;
}
.filterleiste .elastislide-carousel ul li {
-webkit-backface-visibility: hidden;
}
.filterleiste .elastislide-horizontal ul li {
/* height: 100%; */
display: inline-block;
}
/* Links-/Rechts-Pfeile */
.filterleiste .elastislide-wrapper nav span {
position: absolute;
width: 32px;
height: 32px;
top:15px;
background: #fff url(../img/symbole.png) no-repeat 11px -890px;
border: 1px solid #d5d5d5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
text-indent: -9000px;
cursor: pointer;
}
.filterleiste .elastislide-wrapper nav span:hover {
border: 1px solid #b5b5b5;
}
.filterleiste .elastislide-wrapper nav span.disabled {
display: none;
}
.filterleiste .elastislide-horizontal nav span {
left: 15px;
}
.filterleiste .elastislide-horizontal nav span.elastislide-next {
left: auto;
right: 15px;
background-position: 14px -990px;
}
.filterleiste .elastislide-horizontal.elastislide-loading {
background-image: url(../img/loading.gif);
}
/* iFrame-Einbindung von Vimeo */
.vimeovideo,
.youtubevideo {
overflow: hidden;
width: 100%;
min-height:230px;
}
/* Google-Maps iFrame */
.gmaps {
position: relative;
padding-bottom: 60%;
height: 0;
overflow: hidden;
}
.gmaps.links,
.gmaps.rechts {
margin: 20px 0 20px 0;
}
.gmaps div,
.gmaps iframe {
position: absolute;
width: 100%;
height: 100%;
}
/* Audioplayer */
.audioplayer {
margin: 6px 0 6px 0;
}
.jp-audio {
display: inline-block;
float: left;
border:1px solid #d6d6d6;
background-color:#fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.no-touch .jp-audio.klein {
min-width: 80px;
}
.jp-audio.klein {
min-width: 40px;
}
.no-touch .jp-audio.gross {
min-width: 322px;
}
.jp-audio.gross {
min-width: 280px;
}
.jp-gui {
position: relative;
width:100%;
height: 29px;
}
/* Bedienelmente */
.jp-volcontrol {
float: left;
width: 33px;
height: 27px;
padding: 2px 0 0 8px;
border-right: 1px solid #d6d6d6;
}
.jp-playcontrol{
float: left;
width: 32px;
padding: 3px 0 0 6px;
}
.jp-play,
.jp-pause,
.jp-mute,
.jp-unmute {
width:25px;
height:25px;
display: block;
cursor: pointer;
}
.jp-play {
background: url("../img/jplayer_skin.png") -7px -9px no-repeat;
}
.jp-play:hover {
background: url("../img/jplayer_skin.png") -47px -9px no-repeat;
}
.jp-pause {
background: url("../img/jplayer_skin.png") -7px -50px no-repeat;
display: none;
}
.jp-pause:hover {
background: url("../img/jplayer_skin.png") -48px -50px no-repeat;
}
.jp-mute {
margin-left: 1px;
background: url("../img/jplayer_skin.png") -90px -175px no-repeat;
}
.jp-mute:hover {
background: url("../img/jplayer_skin.png") -131px -175px no-repeat;
}
.jp-unmute {
margin-left: 1px;
background: url("../img/jplayer_skin.png") -8px -175px no-repeat;
display: none;
}
.jp-unmute:hover {
background: url("../img/jplayer_skin.png") -49px -175px no-repeat;
}
.jp-volume-bar {
display: none;
overflow:hidden;
background: url("../img/jplayer_skin.png") 0 -320px repeat-x;
width:26px;
height:18px;
margin-top: 5px;
cursor: pointer;
}
.jp-volume-bar-value {
background: url("../img/jplayer_skin.png") 0 -300px repeat-x;
width:0px;
height:18px;
}
/* Fortschrittsbalken */
.jp-progress {
float: left;
overflow:hidden;
width:239px;
height:27px;
padding: 1px;
border-right: 1px solid #d6d6d6;
}
.jp-seek-bar {
background: url("../img/jplayer_skin.png") 0 -210px repeat-x;
width:0px;
height:100%;
cursor: pointer;
}
.jp-play-bar {
background: url("../img/jplayer_skin.png") 0 -250px repeat-x ;
width:0px;
height:100%;
}
/* The seeking class is added/removed inside jPlayer */
.jp-seeking-bg {
background: url("../img/loadingbar.gif");
}
.jp-current-time,
.jp-duration {
float: left;
padding: 5px 8px 0 8px;
color: #fff;
font-weight: bold;
line-height: 20px;
text-shadow: 0 0 3px #09345a;
filter:dropshadow(color:#09345a, offx=1, offy=1);
}
.jp-duration {
float: right;
}
/* sonstiges */
.jp-jplayer audio,
.jp-jplayer {
width:0px;
height:0px;
}
.jp-textline {
display: inline-block;
padding: 5px 0 0 12px;
font-weight: bold;
}
.jp-audio.gross .jp-mute,
.jp-audio.gross .jp-unmute {
display: none !important;
}
.jp-audio.klein .jp-volume-bar,
.jp-audio.klein .jp-progress {
display: none !important;
}
.jp-audio.auto .jp-progress {
display: none;
}
.jp-audio.auto .verbergen {
display: none !important;
}
/* fehlende Unterstützung */
.jp-no-solution {
padding:5px;
background-color:#f5f5f5;
border:2px solid #09345a;
display:none;
}
.jp-no-solution span {
display:block;
text-align:center;
font-weight:bold;
}
/* Definitionen für alle Größen sowie Vorgaben für Bildschirme mit maximal 479px Breite */
.seitencontainer {
background-color: #fff;
}
/* Kopfbereich */
header {
margin: 0 0 12px 0;
}
header.kopf {
padding: 10px 15px 0 15px;
}
header.kopf .logo {
float: left;
margin-top: 2px;
width: 109px;
height: 39px;
background: url(../img/wdr_mediagroup_mobil.png) no-repeat left top;
}
header.kopf nav {
float: right;
margin-top: 12px;
display:inline-block;
}
header.kopf nav .nav-1,
header.kopf nav .nav-2 {
display: none;
}
header.kopf nav .menueoeffner {
margin-left: 20px;
float: left;
}
header.kopf nav .menueoeffner li.suche {
display: none;
}
header.kopf nav .menueoeffner li.menue {
width: 37px;
height: 34px;
margin-top: -5px;
margin-left: 20px;
border: 1px solid #bdbdbd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #fff url(../img/symbole.png) no-repeat 8px -1491px;
cursor: pointer;
}
header.kopf nav .menueoeffner li.menue.active {
border: 1px solid #063258;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background: #063258 url(../img/symbole.png) no-repeat 8px -1591px;
}
header.kopf nav .menueoeffner li.menue span {
display: none;
padding: 6px 10px 0 40px;
white-space: nowrap;
font-weight: bold;
color: #666;
}
header.kopf nav .menueoeffner li.menue.active span {
color: #fff;
}
/* Slidernavigation (Ebene 2 und 3) (nur hohe Auflösung) */
.slidernavigation {
display: none;
}
.slidernavigation .elementedaten {
display: none;
}
/* Auswahlnavigation (Ebene 2 und 3) (nur niedrige Auflösung) */
.auswahlnavigation nav {
padding: 0 15px 40px 15px;
border-top: 4px solid #063258;
}
.auswahlnavigation .bezeichnung {
font-weight: bold;
font-size: 15px;
color: #063258;
padding: 10px 0 5px 0;
}
.auswahlnavigation .bezeichnung label {
color: #666;
}
.auswahlnavigation select {
width: 100%;
font-size: 18px;
}
/* Unternavigation (Ebene 4) */
nav.ebene4 {
display:none;
}
/* Teaser */
.teaser {
overflow: hidden;
width: 100%;
height: auto;
z-index: 0;
position: relative; /* notwendig, damit abdeckung-o und abdeckung-u trotz absolute in der Box bleiben */
}
.teaser .container {
max-width: 1440px;
margin: 0 auto;
z-index: 1;
position: relative;
}
.teaser .slidesjs-container,
.teaser .slidesjs-control {
min-height: 270px;
height: auto;
margin: 0 0 20px 0;
}
.teaser .datencontainer {
display: none !important;
}
.teaser .slidesjs-container:has(> .slidesjs-control > .slide.imgFit),
.teaser .slidesjs-control:has(> .slide.imgFit){
min-height: 0
}
.teaser .slide {
display:block;
position: absolute;
width:100%;
}
.teaser .slide.active {
display: block;
}
.teaser .slide.active:first-child:last-child {
left: 0 !important;
}
.teaser .slide.imgFit {
}
.teaser .slide.imgFit img {
height: 100%;
max-width: none;
object-fit: cover;
width: 100%;
object-position: right;
}
.teaser .abdeckung-o {
display: none;
width: 100%;
z-index: 999;
position: absolute;
}
.teaser .abdeckung-o {
height: 22px;
background: url(../img/abdecker_teaser_o.png) no-repeat left bottom;
}
.teaser .slidesjs-pagination {
text-align: right;
position: absolute;
top: 10px;
right: 15px;
margin: 0 0 20px 14px;
z-index: 1000;
}
.teaser .slidesjs-pagination li {
display: inline-block;
width: 12px;
height: 12px;
background-color: #fff;
margin: 1px;
border: 1px solid #dadada;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
.teaser .slidesjs-pagination li.active {
background-color: #063258;
border: 1px solid #063258;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
opacity: 1; /* Webkit und Opera */
-moz-opacity: 1; /* Mozilla Browser */
filter:alpha(opacity=100); /* Internet Explorer */
}
.teaser .slidesjs-pagination li a {
display: block;
width: 100%;
height: 100%;
text-indent: 10000px !important;
}
.teaser .slidehg {
max-width: 100%;
}
.teaser .text {
position: relative;
margin: 20px 0 0 13px;
/* background-color: #fff; */
}
.teaser .video .text {
margin: 20px 15px 0 13px;
}
.teaser .text h1 {
color:#063258;
font-size: 16px;
line-height: 20px;
margin: 0 0 6px 0;
border-bottom: none;
}
.teaser .text h3 {
color:#666;
font-size: 16px;
line-height: 20px;
margin: 0;
}
.teaser .text a.freistehend {
color: #666;
}
.teaser .text .video {
position: relative;
float: right;
max-width: 100px;
max-height: 75px;
margin: 5px 0 15px 15px;
cursor: pointer;
}
.teaser .text .video:before {
content: '';
position: absolute;
z-index: +1;
width: 100%;
height: 100%;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABK1JREFUeNrsm21MW1UYx3vO7b29LSQDJBLWFkKgHcQPJnOZ+7BFNocfSpg6dC9xU8eATKaGwSIvrsNNdGYwxwQ1m4nug2QvcZlTidHMbGI0uKjRbIkvIdAWcZ3QWUzXe3vbe67n3pHo1MSa9N6eG86TNCSENPDL8zvP/zn0AoTQnRZa/yjr/FeJorilOEgZ/HtRMBQMBUPBUDAUDAVDwVAwFAwFQ8HoWQAABb8omL9BsZz+6Atb5PeYCkehYP4sNHjiw0Jf477Syz8FIYaDzNI9uquUY+ctly5dcd7btL9ieOQzHn9LNgMcYw5fB5+auT6Xt6XrSNWuvuMFNwRRJl0tw6YSx7HIyljZgTfPeWpbXnT/MDlNtFqGjmsIgcJitT4du+xa3dDjHR4ZJVYtw3MMZqBwObwcno0u2to1WNnWf7wgFidPrewEPEVTS2YYyB1+46x33dMvua+MT91UiyZfVS2ocLkO5cLn37lqmvZVnP3kSx63FBFq6Z980+gfzsHL1yLRvI3tL1d1HH47X0hIKNtq6Q1GScoyY0njT2RZFsmY0cGj73hrdx5wjofCIJtTS/eOkaSUPd2ftTIM4nLsWK1v3TXN+z1nzo/Z1PScDThEbteqWoHpX/M3th2q9A+dzJdSKcOnFrHXDurUwqcz3zt00lu384BrfCpsMVItou9j8DhHrINXPh79xl29rcfz3sWvbEYFQuIvqlSFVLWmr84WPNx+qGrP4IlFSQPUMs0NHsdzsowQ98Krp5bUt/Y7g7/MaFNrwYPR1MKBEKsF3j8/VrJm+3PlI6Nfc0CnQGi6O19NrVy7PDEVvu3B1r7K3mNn8qRkKuNwzHkZru5aNk0tu39geEl9W//i7yd+Bpk8d0z9XwI1EAKWgR+cu+h+690LuTeRZei9zQxGEiUmJ9ce7/JvmmzbWhdTFAUuaDBIUUAqJkCPt2T26N4dwdXL71A/Q8hgMJYFCwYfLFBOJtF638rJwe7tM4tvL8A8FCbjmppKnYTE4C083tv+aOCZx++fgxBADEWXGGwKMFgQkLwhwIoKd2SgY1uwdtXSRKbVMR2YFFYHiQlUV7MiONTdeK2kuBDpDYV4MOrU4XlO7Hhq88Telg1zEGjqGBIxSAUDJEGEpe7iyGt7GkO+VUtFI7rEUDDgf4YuTR1BVHxrVwRf6WwIl7uLFKOhGAEGYBXimE5eWupIScbGWoXO1kcC3Y3roxxrNUwd4zsmjf1FmzqxOCwrc/420NkQWFe9TMxGlxB1xmjqJBJKTfWy0Ov+5nC5qwjpEdhMBQarAxkrI3U9sWHS3/xQ1M5zIFvqEAFGTavJeMLqdBbODj3bFHpgzXIh2+pkHQxCeAEURct999wVOtLZcLWyzCmTBsVwMOquY4FA3N1UH3z+yU3XeY6FpKiTNTA4sDEuZ1H04K4tgc2+lQKJXWIoGDx1gCUmMNVr7w4e69kR9pQWy6RDMSTgsQxMtjTX/9i3+7GIg6Cp85+/+Pzjxbo9Rat+amG+SyDpXfKX4nQHM598gYmgaGB0P2P0umHTu+hDFhQMBUPBUDAUDAVDwVAwFAwFs6BL3ZXUXYajKG7dff8QYAD3ueRtxzo72AAAAABJRU5ErkJggg==') no-repeat center center;
}
/* Die Klassen g1, g2 und g3 dienen dazu, per JS zu erkennen, welche Media-Query greift.
Es wird nicht per JS die Fensterbreite ermittelt, um kleine Abweichungen durch
Rundungsdifferenzen auszuschließen und um die Fehleranfälligkeit bei Änderungen
zu reduzieren (es müsste sonst immer CSS und JS angepasst werden) */
.teaser .g1, .teaser .g2, .teaser .g3 { position: absolute; height: 0; display: none; }
.teaser .g1 { display: block; }
/* supra-Ebene */
#supra-ebene {
display:none;
z-index: 60001;
width: 361px;
margin: 30px auto 30px auto;
padding: 30px;
background: #f6f6f6;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.75);
box-shadow: 0 0 5px rgba(0,0,0,0.75);
}
#supra-video {
display:none;
z-index: 50001;
width: 80%;
margin: 50px auto 50px auto;
padding: 0 0 45% 0;
color: #fff;
background: #000;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.75);
box-shadow: 0 0 5px rgba(0,0,0,0.75);
}
#supra-video iframe {
position: absolute;
border: none;
width: 100%;
height: 100%;
}
#supra-fond {
display: none;
z-index: 50000;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000;
}
#supra-kundenlogin {
display: none;
}
#supra-ebene form {
padding: 0;
}
#supra-ebene .fehler {
color: #d32828;
margin: 10px 0 10px 0;
}
/* Envira-Gallery: zusätzliche Anpassungen */
#envirabox-buttons a.btnDownload {
border-left: 1px solid #111;
width: 120px;
background-image: url('../img/envira_zusaetze.png');
background-position: 5px 0;
}
#envirabox-buttons a.btnClose {
width: 38px !important;
}
/* Aufteilung Inhaltsbereich */
.hauptspalte {
}
.nebenspalte {
margin: 30px 0 10px 0;
}
/* Hauptspalte */
.inhaltsabschnitt {
}
.abschnittsschalter {
cursor:pointer;
color:#5b5b5b;
font-weight: bold;
padding: 15px 10px 15px 34px;
margin-bottom: 5px;
border-top: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
background: #fff url(../img/accordion_pfeil.png) no-repeat 15px 20px;
}
.abschnittsschalter.active {
color:#fff;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
background: #063258 url(../img/accordion_pfeil.png) no-repeat 15px -77px;
}
.abschnittsinhalt {
padding: 15px 15px 0 15px;
}
.inhaltsmodul {
padding-bottom: 35px;
}
.inhaltsmodul.teasermodule {
padding-bottom: 11px;
}
.inhaltsmodul.grau {
padding: 20px 16px 20px 16px;
margin-bottom: 35px;
background-color: #f4f4f4;
border: 1px solid #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.inhaltsmodul.grau h1 {
font-size: 16px;
line-height: 23px;
margin: 0 0 2px 0;
padding: 0;
border-bottom: none;
background: url(../img/symbole.png) repeat-x 0 -1084px;
}
.inhaltsmodul.grau h1 span {
padding: 0 16px 0 0;
background-color: #f4f4f4;
}
/* Nebenspalte */
.nebenabschnitt {
margin-bottom: 20px;
}
.nebenspalte .box {
font-size: 15px;
line-height: 20px;
}
.nebenspalte .box h5 {
font-size: 15px;
line-height: 22px;
border-bottom: 1px solid #dadada;
padding: 0 0 6px 0;
margin: 0 0 10px 0;
}
.nebenspalte .box h6 {
font-size: 15px;
line-height: 20px;
margin: 0 0 4px 0;
}
.nebenspalte .box p + h5,
.nebenspalte .box p + h6 {
margin: 24px 0 10px 0;
}
.nebenspalte .box p + p {
margin: 12px 0 0 0;
padding: 0;
}
.nebenspalte .box form {
margin: 0;
padding: 0;
background: none;
border: none;
}
.nebenspalte .box .eingabefeld {
margin: 4px 10px 12px 0;
}
.nebenspalte .box .eingabefeld input {
width:100%;
}
.nebenspalte .box span.pfeld {
float: right;
color: #999;
font-size: 13px;
padding: 0 4px 0 0;
}
.nebenspalte .box a.freistehend {
display: block;
font-size: 15px;
margin: 5px 0 10px 0;
background-position: 0 1px;
}
.nebenspalte img.ap {
border: 1px solid #fbfbfb;
}
.nebenspalte .box.ap {
font-size: 13px;
line-height: 18px;
}
.nebenspalte .box a.ap {
display: inline-block;
margin-top: 4px;
font-size: 13px;
line-height: 21px;
}
.nebenspalte .box.ap a.textlink {
font-size: 13px;
line-height: 18px;
background-position: 1px -495px;
}
.nebenspalte .box .ap_position {
font-weight: bold;
color: #999;
margin: 0 0 5px 0;
}
.nebenspalte .box.randlos {
overflow:hidden;
}
.nebenspalte .box.randlos img {
margin-bottom: 10px;
width: 200px;
}
/* Fussspuren */
.fussspuren {
display: none;
}
/* Funktionsleiste */
/* Leiste direkt im Inhaltsabschnitt */
.abschnittsinhalt > .funktionsleiste {
display: none;
}
/* Leiste am Ende des Inhaltsblockes */
.inhalt > .funktionsleiste {
display: block;
}
.funktionsleiste {
margin: 15px 15px 16px 15px;
padding: 11px 0 0 0;
border-top: 1px solid #cecece;
}
.funktionsleiste li {
float: left;
font-size: 12px;
margin-right:10px;
}
.funktionsleiste li:not(:last-child):after {
content: "|";
margin-left: 10px;
color: #d5d5d5;
}
.funktionsleiste a {
color: #063258;
font-weight: bold;
}
.funktionsleiste a.drucken {
display: inline;
padding: 2px 0 2px 26px;
background: url(../img/symbole.png) no-repeat 0 -199px;
}
.funktionsleiste a.senden {
padding: 2px 0 2px 21px;
background: url(../img/symbole.png) no-repeat 0 -296px;
}
.funktionsleiste a.lesezeichen {
padding: 2px 0 2px 20px;
background: url(../img/symbole.png) no-repeat 0 -397px;
}
.funktionsleiste a .linkedin {
margin-top: -2px;
margin-right: 3px
}
/* Abbinder */
.abbinder {
padding: 40px 0 0 0;
background: url(../img/abdecker_abbinder.png) no-repeat center top;
}
.abbinder .container {
padding: 0 15px 50px 15px;
font-size: 15px;
line-height: 20px;
color: #fff;
background-color: #063258;
}
.abbinder .spalte {
max-width: 305px;
margin: 0 0 30px 0;
display: none;
}
.abbinder h4 {
margin-bottom: 0;
}
.abbinder img {
display:block;
max-width:100%;
margin: 1px 0 6px 0;
border: 1px solid #063258;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.abbinder p {
margin-bottom: 8px;
}
.abbinder a.freistehend {
display: inline-block;
font-weight: bold;
color: #fff;
padding-left: 13px;
margin: 0 24px 2px 0;
background: url(../img/symbole.png) no-repeat 2px -696px;
}
.abbinder a.sf {
font-size: 13px;
font-weight:bold;
color:#333;
padding: 3px 16px 3px 16px;
background-color: #fcfcfc;
border: 1px solid #ebebeb;
}
.abbinder a.sf:hover {
text-decoration:none;
background-color: #e5e5e5;
border-color: #ddd;
}
/* Fußzeile */
/* Fußzeile soll nicht mehr ein-/aufklappbar sein */
/*.fusszeile {
height: 54px;
width: 100%;
overflow:hidden;
position:relative;
margin: -54px 0 0 0;
background: url(../img/abdecker_fusszeile_anfasser.png) no-repeat center top;
}
.fusszeile.offen {
height: auto;
}
.fusszeile .anfasser {
width: 68px;
height: 40px;
margin: 0 auto;
cursor: pointer;
}*/
/* auf der Startseite Fusszeile nicht aufklappbar zeigen, weil durch die geringe Höhe die Fußzeile nicht immer am Seitenende ist (leerer Abschnitt bis zum Browserrand) */
/*#start .fusszeile {
height: auto;
padding-top: 30px;
background: url(../img/abdecker_fusszeile.png) no-repeat center top;
}
#start .fusszeile .anfasser {
display: none;
}*/
.fusszeile {
position:relative;
padding-top: 30px;
margin: -74px 0 0 0;
background: url(../img/abdecker_fusszeile.png) no-repeat center top;
}
.fusszeile .anfasser {
display: none;
}
.fusszeile nav {
padding: 39px 15px 20px 15px;
font-size: 14px;
line-height: 24px;
color: #fff;
}
.fusszeile .spalte {
margin: 0 0 30px 0;
}
.fusszeile h5 {
padding: 6px 0 6px 0;
margin-bottom: 7px;
border-top: 1px solid #334455;
border-bottom: 1px solid #345;
}
.fusszeile a {
color: #fff;
}
.fusszeile p a {
display: block;
}
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
}
.collapse {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
.collapse.in {
height: auto;
}
.ladeblinker {
text-align: center;
margin-top: 80px;
margin-bottom: 80px;
-webkit-animation: blink 1000ms linear infinite;
animation: blink 1000ms linear infinite;
}
@-webkit-keyframes blink {
from { opacity: 1; }
50% { opacity: 0.2; }
to { opacity: 1; }
}
@keyframes blink {
from { opacity: 1; }
50% { opacity: 0.2; }
to { opacity: 1; }
}
/* ==========================================================================
Media Queries
========================================================================== */
@media only screen and (max-width: 480px){
.menueebene {
box-sizing: border-box;
width: 100%;
left: 0 !important;
margin-left: 0;
}
}
@media only screen and (min-width: 481px) and (max-width: 599px) {
/* allgemeine Definitionen */
h1 {
font-size: 18px;
line-height: 24px;
padding: 0 0 9px 0;
}
h3 {
font-size: 16px;
line-height: 21px;
}
h4 {
font-size: 16px;
line-height: 27px;
}
/* mittlere linksbündige oder rechtsbündige Bilder umfließen (mit reduzierter Breite) */
img.midi.links,
div.bild.midi.links {
float: left;
/* max-width: 200px; */
max-width: 40%;
margin: 6px 15px 10px 0;
}
img.midi.rechts,
div.bild.midi.rechts {
float: right;
/* max-width: 200px; */
max-width: 40%;
margin: 6px 0 10px 15px;
}
div.bild.midi.links img,
div.bild.midi.rechts img {
/* max-width: 200px; */
max-width: 40%;
}
/* Teasermodule */
.teasermodul.spalten {
margin-right: -3%;
}
.teasermodul .spalte33 {
float: left;
width: 46.5%;
margin: 0 3% 24px 0;
}
.teasermodul .spalte50 {
width: 97%;
margin: 0 3% 24px 0;
}
.teasermodul .spalte66 {
width: 97%;
margin: 0 3% 24px 0;
}
.teasermodul .bildteaser img {
width: 100%;
}
/* iFrame-Einbindung von Vimeo */
.vimeovideo,
.youtubevideo {
overflow: hidden;
width: 100%;
min-height:300px;
}
/* Kopfbereich */
header.kopf nav {
margin-top: 12px;
}
header.kopf nav .menueoeffner li.menue {
width: auto;
}
header.kopf nav .menueoeffner li.menue span {
display: inline-block;
}
/* Teaser */
.teaser .slidesjs-container,
.teaser .slidesjs-control {
min-height: 300px;
}
.teaser .text h3 {
font-size: 15px;
line-height: 20px;
}
/* Nebenspalte */
.nebenspalte .box a.freistehend {
display: inline-block;
float: left;
min-width: 40%;
margin: 5px 18px 10px 0;
}
} /* Ende 480px */
@media only screen and (min-width: 600px) {
/* allgemeine Definitionen */
body {
font-size: 15px;
line-height: 24px;
}
.inhaltsmodul .box,
.inhaltsmodul .inlinebox {
line-height: 23px;
}
h1 {
font-size: 20px;
line-height: 27px;
padding: 0 0 12px 0;
margin: 6px 0 9px 0;
}
h3 {
font-size: 16px;
line-height: 24px;
}
/* mittlere Bilder ab jetzt umfließen */
img.links,
img.midi.links,
div.bild.links,
div.bild.midi.links {
float: left;
margin: 6px 15px 10px 0;
}
img.rechts,
img.midi.rechts,
div.bild.rechts,
div.bild.midi.rechts {
float: right;
margin: 6px 0 10px 15px;
}
img.mini.links,
img.mini.rechts,
div.bild.mini.links,
div.bild.mini.rechts {
max-width: 25%;
}
img.midi.links,
img.midi.rechts,
div.bild.midi.links,
div.bild.midi.rechts {
max-width: 40%;
}
/* Teasermodule */
.teasermodul.spalten {
/* margin-right: -3%; /* deaktiviert: führt im Mobile Chrome zu einem scrollbaren Bereich am rechten Rand, statt nur die Boxen bis nach rechts zu positionieren */
}
.teasermodul .spalte33 {
float: left;
width: 46.5%;
margin: 0 3% 24px 0;
}
.teasermodul .spalte50 {
width: 344px;
margin: 0 0 24px 0;
}
.teasermodul .spalte66 {
width: 97%;
margin: 0 3% 24px 0;
}
.teasermodul .bildteaser img {
width: 100%;
}
/* allgemeine Slider (Ansprechpartner, Dokumente) */
.slider {
position: relative;
min-height: 200px;
}
.slider .vorwahl select {
display: none;
}
.slider .vorwahl ul {
display: inline-block;
}
.slider .vorwahl ul li {
margin-right: 9px;
float: left;
}
.slider .vorwahl ul li:not(:last-child):after {
content: "|";
margin-left: 10px;
color: #d5d5d5;
}
.slider .vorwahl a {
color: #666;
font-weight: bold;
}
.slider .vorwahl .active a {
color: #063258;
}
.slider .elemente {
display: none;
}
.slider .elemente li {
list-style-type: none;
margin: 0;
padding: 0 4px 0 4px;
/* width: 260px !important; */
height: 140px;
}
.slider li.slide {
width: 261px !important;
}
.slider .elastislide-wrapper {
position: relative;
margin: 9px 50px 0 50px;
padding: 20px 12px 20px 12px;
background-color: #fff;
border: 1px solid #d4d4d4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.slider .elastislide-wrapper.elastislide-loading {
background-image: url(../img/loading.gif);
background-repeat: no-repeat;
background-position: center center;
}
.slider .elastislide-carousel {
overflow: hidden;
position: relative;
}
.slider .elastislide-carousel ul {
position: relative;
display: block;
list-style-type: none;
padding: 0;
margin: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
transition-property: -webkit-transform;
transition-property: -moz-transform;
transition-property: -o-transform;
transition-property: -ms-transform;
transition-property: transform;
transition-duration: 200ms;
}
.slider .elastislide-horizontal ul {
white-space: nowrap;
}
.slider .elastislide-horizontal ul li * {
white-space: normal;
}
.slider .elastislide-carousel ul li {
margin: 0;
-webkit-backface-visibility: hidden;
}
.slider .elastislide-horizontal ul li {
height: 100%;
display: inline-block;
vertical-align: top;
}
/* Links-/Rechts-Pfeile */
.slider .elastislide-wrapper nav span {
position: absolute;
width: 35px;
height: 32px;
background: #fff url(../img/symbole.png) no-repeat 13px -890px;
border: 1px solid #d5d5d5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
text-indent: -9000px;
cursor: pointer;
}
.slider .elastislide-wrapper nav span:hover {
border: 1px solid #b5b5b5;
}
.slider .elastislide-wrapper nav span.disabled {
display: none;
}
.slider .elastislide-horizontal nav span {
top: 50%;
left: -50px;
margin-top: -16px;
}
.slider .elastislide-horizontal nav span.elastislide-next {
left: auto;
right: -50px;
background-position: 14px -990px;
}
.slider .elastislide-horizontal.elastislide-loading {
background-image: url(../img/loading.gif);
}
/* Menü-Ebene */
.menueebene {
margin-left: 0; /* in kleineren Auflösungen wird links Margin hinzugefügt, um die Ebene etwas nach rechts von der Schaltfläche zu versetzen, ab 600 soll wieder bündig positioniert werden */
}
/* Seitenleiste */
.seitenleiste li.zurueck a,
.seitenleiste li.zurueck span,
.seitenleiste li.weiter a,
.seitenleiste li.weiter span {
/* padding: 5px 10px 0 10px; */
background-image: none;
text-indent: 0;
}
/* iFrame-Einbindung von Vimeo */
.vimeovideo,
.youtubevideo {
overflow: hidden;
width: 100%;
min-height:280px;
}
/* Kopfbereich */
header {
margin: 0;
}
header.kopf {
padding-left: 20px;
height: 85px;
overflow: visible;
position: relative;
z-index: +1;
}
header.kopf .logo {
float: left;
margin-top: 4px;
width: 145px;
height: 51px;
background: url(../img/wdr_mediagroup.png) no-repeat left top;
}
header.kopf nav {
margin-top: 18px;
}
header.kopf nav .menueoeffner {
margin-left: 10px;
}
header.kopf nav .menueoeffner li.menue {
width: auto;
}
header.kopf nav .menueoeffner li.menue span {
display: inline-block;
}
/* Slidernavigation und Auswahlnavigation (Ebene 2 und 3) */
.slidernavigation {
display:block;
position:relative;
margin-top: -40px;
height: 303px;
background: url(../img/abdecker_bereichsnavigation_gekuerzt_dunkler.png) no-repeat center top;
}
/* Abstand korrigieren, wenn kein Topteaser vorhanden ist (Slidernavigation folgt direkt auf Auswahlnavigation) */
.auswahlnavigation + .slidernavigation {
margin-top: 0;
}
/* der Teaserabdecker wird platziert, wenn keine Slidernavigation vorhanden ist */
.teaserabdecker {
display:block;
position:relative;
margin-top: -40px;
margin-bottom: 40px;
height: 73px;
background: url(../img/abdecker_teaser_u_ohne_nav.png) no-repeat center top;
}
.slidernavigation .ebene2 {
padding-top: 74px;
text-align: center;
}
.slidernavigation .ebene2 ul {
display: inline-block;
margin-bottom: -8px !important;
}
.slidernavigation .ebene2 li {
margin-right: 9px;
float: left;
}
.slidernavigation .ebene2 li:not(:last-child):after {
content: "|";
margin-left: 10px;
color: #d5d5d5;
}
.slidernavigation .ebene2 a {
display: inline-block;
/* width: 100%;
height: 100%; */
padding: 6px 0 6px 0;
color: #666;
font-weight: bold;
}
.slidernavigation .ebene2 .active a {
padding: 6px 12px 6px 12px;
color: #063258;
background-color: #fff;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.slidernavigation .ebene3 {
position: relative;
height: 102px;
padding: 17px 15px 17px 15px;
background-color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.slidernavigation .ebene3 .elemente {
display: none;
}
.slidernavigation .ebene3 .elemente li {
list-style-type: none;
margin: 0;
width: 137px;
height: 102px;
}
.slidernavigation .ebene3 a {
position: relative;
display: block;
width: 115px;
height: 100px;
margin: 0 10px 0 10px;
overflow: hidden;
border: 1px solid #eee;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-position: 0 0;
}
.slidernavigation .ebene3 a:hover {
border: 1px solid #bbb;
background-position: 0 -150px;
}
.slidernavigation .ebene3 .active a {
border: 1px solid #fff;
background-position: 0 -300px;
}
.slidernavigation .ebene3 .elemente a span {
position: absolute;
top: -1000px;
}
.slidernavigation .ebene3 .elastislide-wrapper {
position: relative;
margin: 0 50px 0 50px;
}
.slidernavigation .ebene3 .elastislide-wrapper.elastislide-loading {
background-image: url(../img/loading.gif);
background-repeat: no-repeat;
background-position: center center;
}
.slidernavigation .ebene3 .elastislide-carousel {
overflow: hidden;
position: relative;
}
.slidernavigation .ebene3 .elastislide-carousel ul {
position: relative;
display: block;
list-style-type: none;
padding: 0;
margin: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
transition-property: -webkit-transform;
transition-property: -moz-transform;
transition-property: -o-transform;
transition-property: -ms-transform;
transition-property: transform;
transition-duration: 200ms;
}
.slidernavigation .ebene3 .elastislide-horizontal ul {
white-space: nowrap;
text-align: center;
}
.slidernavigation .ebene3 .elastislide-carousel ul li {
margin: 0;
-webkit-backface-visibility: hidden;
}
.slidernavigation .ebene3 .elastislide-horizontal ul li {
height: 100%;
display: inline-block;
vertical-align: top;
}
/* Links-/Rechts-Pfeile */
.slidernavigation .ebene3 .elastislide-wrapper nav span {
position: absolute;
width: 35px;
height: 32px;
background: #fff url(../img/symbole.png) no-repeat 13px -890px;
border: 1px solid #d5d5d5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
text-indent: -9000px;
cursor: pointer;
}
.slidernavigation .ebene3 .elastislide-wrapper nav span:hover {
border: 1px solid #b5b5b5;
}
.slidernavigation .elastislide-wrapper nav span.disabled,
.slidernavigation .elastislide-wrapper nav span.disabled:hover {
display: none;
/* cursor: default; */
/*border: 1px solid #d5d5d5;*/
/* opacity: 0.35; */ /* Webkit und Opera */
/* -moz-opacity: 0.35; */ /* Mozilla Browser */
/* filter:alpha(opacity=35); */ /* Internet Explorer */
}
.slidernavigation .ebene3 .elastislide-horizontal nav span {
top: 50px;
left: -50px;
margin-top: -16px;
}
.slidernavigation .ebene3 .elastislide-horizontal nav span.elastislide-next {
left: auto;
right: -50px;
background-position: 14px -990px;
}
.slidernavigation .ebene3 .elastislide-horizontal.elastislide-loading {
background-image: url(../img/loading.gif);
}
/* Auswahlnavigation (Ebene 2 und 3) (niedrige Auflösung) */
.auswahlnavigation {
display: none;
}
/* Unternavigation (Ebene 4) */
nav.ebene4 {
display:block;
}
nav.ebene4 ul {
margin-bottom: 20px;
}
nav.ebene4 li {
display: table;
width: 100%;
margin-bottom: 5px;
}
nav.ebene4 li:last-child {
margin-bottom: 0;
}
nav.ebene4 a {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 48px;
padding: 1px 6px 0 11px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
line-height: 18px;
font-weight: bold;
color: #5b5b5b;
}
nav.ebene4 a.betont {
color: #fff;
background-color: #BC2F2F;
border: 1px solid #9A2727;
}
nav.ebene4 a:hover {
background-color: #f5f5f5;
border-color: #e5e5e5;
text-decoration: none;
}
nav.ebene4 a.betont:hover {
background-color: #AF2B2B;
border-color: #9F2928;
}
nav.ebene4 .active a {
color: #ffffff;
background-color: #063258;
border-color: #063258;
}
/* Teaser */
.teaser {
margin-top: 40px;
}
.teaser.initialisiert {
margin-top: -38px;
}
.teaser .slidesjs-container,
.teaser .slidesjs-control {
height: auto;
min-height: 0;
margin: 0;
}
.teaser .slide {
height: 280px;
}
.teaser .abdeckung-o {
display: block;
height: 52px;
background-position: center top;
}
.teaser .slidesjs-pagination {
position: relative;
top: auto;
right: auto;
text-align:right;
margin: -70px 15px 37px auto; /* Rand oben - 33px Höhe = Rand unten */
}
.teaser .slidesjs-pagination li {
width: 27px;
height: 24px;
margin: 3px;
border: 1px solid #fff;
box-shadow: 0 0 3px #666;
opacity: 0.65; /* Webkit und Opera */
-moz-opacity: 0.65; /* Mozilla Browser */
filter:alpha(opacity=65); /* Internet Explorer */
}
.teaser .slidehg {
position: absolute;
max-width: 100%;
}
.teaser .text {
margin: 10% 45% 0 20px;
background-color: transparent;
}
.teaser .video .text {
margin: 10% 0 0 20px;
}
.teaser .text .ueberschrift {
padding: 10px 20px 10px 20px;
background-color: rgba(255,255,255,.7);
}
.teaser .text.weiss .ueberschrift {
background-color: rgba(6,50,88,.7);
}
.teaser .video .text .ueberschrift {
margin-left: 41.4%;
}
.teaser .text h1 {
font-size: 20px;
line-height: 25px;
display: block;
margin: 0;
padding: 0;
}
.teaser .text h3 {
color:#063258;
font-size: 15px;
line-height: 16px;
display: block;
margin: 0;
padding: 0;
}
.teaser .text.weiss h1,
.teaser .text.weiss h3 {
color: #fff;
}
.teaser .text h1 span,
.teaser .text h3 span {
position: static;
}
/* ab jetzt die freistehenden Links im Teaser als Schaltflächen darstellen */
.teaser .text a.freistehend {
display: inline-block;
font-size: 14px;
font-weight:bold;
color:#666;
padding: 4px 14px 3px 14px;
margin: 18px 18px 2px 0;
background: none;
background-color: #fff;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.teaser .text a.freistehend:hover {
text-decoration:none;
color:#555;
background-color: #f5f5f5;
border-color: #ddd;
}
.teaser .video .text a.freistehend {
margin-left: -20px;
margin-right: 38px;
}
.teaser .text .video {
float: left;
max-width: 30%;
max-height: 150px;
padding-right: 20px;
margin: -5px 20px 300px 0; /* Abstand unten damit Text/Schaltflächen nicht unters Bild laufen */
}
.teaser .g1, .teaser .g2, .teaser .g3 { display: none; }
.teaser .g2 { display: block; }
/* Aufteilung Inhaltsbereich */
.inhalt {
min-height: 600px;
}
.hauptspalte {
width: 68%; /* eigentlich 68.6%, aber Reserve um Probleme zu umgehen / 412px bei 600 */
margin-left: 3.33%; /* 20px bei 600 */
float:right;
}
/* Leiste direkt unter der Hauptspalte */
.abschnittsinhalt > .funktionsleiste {
display: block;
}
/* Leiste am Ende des Inhaltsblockes */
.inhalt > .funktionsleiste {
display: none;
}
.nebenspalte {
width: 28%; /* 168px bei 600 */
float:left;
margin: 0;
}
/* Hauptspalte */
.inhaltsabschnitt {
margin-bottom: 80px;
}
.abschnittsschalter {
display: none;
}
.abschnittsinhalt {
padding: 0;
}
.inhaltsmodul.grau h1 {
font-size: 20px;
line-height: 27px;
margin: 6px 0 12px 0;
padding: 0 0 5px 0;
background: none;
border-bottom: 1px solid #565656;
}
.inhaltsmodul.grau h1 span {
padding: 0;
background-color: inherit;
}
.inhalt.stellenanzeige .inhaltsmodul {
-webkit-hyphens: auto;
-webkit-hyphenate-limit-chars: 8 4 4;
-webkit-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: 8 4 4;
-ms-hyphenate-limit-lines: 2;
hyphens: auto;
hyphenate-limit-chars: 8 4 4;
hyphenate-limit-lines: 2;
padding-bottom: 15px
}
.inhalt.stellenanzeige .inhaltsmodul .spalten {
display: flex
}
.inhalt.stellenanzeige .inhaltsmodul .spalten.teasermodul .spalte50 {
margin-bottom: 12px
}
/* Nebenspalte */
.nebenspalte img.ap + p,
.nebenspalte img.ap + div {
clear: both;
}
.nebenspalte .box.randlos img {
margin: 0 -16px 10px -10px;
width: 115%;
}
/* Fussspuren */
.fussspuren {
display: block;
color: #999;
font-weight: bold;
margin-bottom: 10px;
}
.fussspuren li {
float: left;
font-size: 11px;
line-height: 16px;
margin-right: 6px;
}
/* .fussspuren li:not(:last-child):after { */
.fussspuren li:not(.nav4_bc):after {
content: ">";
margin-left: 6px;
font-weight: bold;
color: #999;
}
.fussspuren li.active:after {
content: none;
}
.fussspuren a {
color: #999;
font-weight: bold;
}
.fussspuren .active a,
.fussspuren .nav4_bc a {
color: #063258;
}
.fussspuren .nav4_bc {
display: none;
}
.ohnespalten .fussspuren {
margin-left: 230px;
}
.ohnespalten .nav4_bc {
display: list-item;
}
/* Funktionsleiste */
.funktionsleiste {
margin: 15px 15px 16px 0;
padding: 11px 0 0 0;
}
/* Abbinder */
/* Anpassung für Startseite */
#start .abbinder {
/* z-index: 2000; */
position:relative;
margin-top: -40px;
background: url(../img/abdecker_abbinder_start_schraeg.png) repeat-y center top;
}
/* wenn Abbinder direkt auf Abbinder folgt (kein Teaser und keine Slidernavigation vorhanden) */
.auswahlnavigation + .abbinder {
margin-top: 0 !important;
background: url(../img/abdecker_abbinder.png) repeat-y center top !important;
}
.abbinder .container {
padding: 15px 0 80px 0;
font-size: 14px;
line-height: 18px;
}
.abbinder .spalte {
float: left;
width: 32%; /* 193px bei 600 */
margin: 0 0 0 1.66%; /* 10px bei 600 */
}
.abbinder .spalte:first-child {
margin: 0;
}
/* Fußzeile */
.fusszeile {
margin: -54px 0 0 0;
}
.fusszeile nav {
padding: 39px 0 20px 20px;
font-size: 14px;
line-height: 24px;
color: #fff;
}
.fusszeile .spalte {
float: left;
width: 175px;
min-height: 160px;
margin: 0 20px 35px 0;
}
.fusszeile .spalte:last-child {
margin: 0 0 35px 0;
}
.fusszeile h5 {
padding: 6px 0 6px 0;
margin-bottom: 7px;
border-top: 1px solid #334455;
border-bottom: 1px solid #345;
}
.fusszeile a {
color: #fff;
}
.fusszeile p a {
display: block;
}
} /* Ende 600px */
@media only screen and (min-width: 768px) {
/* allgemeine Definitionen */
body {
font-size: 16px;
line-height: 24px;
}
.inhaltsmodul .box,
.inhaltsmodul .inlinebox {
font-size: 16px;
line-height: 23px;
}
h1 {
font-size: 27px;
line-height: 27px;
padding: 0 0 14px 0;
margin: 6px 0 9px 0;
}
h3 {
font-size: 16px;
line-height: 24px;
}
h4 {
font-size: 15px;
line-height: 24px;
}
img.anpassen,
div.bild.anpassen,
div.bild.anpassen img {
width: auto;
max-width: 100%;
}
img.rahmen.anpassen,
div.bild.rahmen.anpassen,
div.bild.rahmen.anpassen img {
max-width: 99%;
}
img.links,
img.midi.links,
div.bild.links,
div.bild.midi.links {
float: left;
margin: 6px 15px 10px 0;
}
img.rechts,
img.midi.rechts,
div.bild.rechts,
div.bild.midi.rechts {
float: right;
margin: 6px 0 10px 15px;
}
img.mini.links,
img.mini.rechts,
div.bild.mini.links,
div.bild.mini.rechts {
max-width: 25%;
}
img.midi.links,
img.midi.rechts,
div.bild.midi.links,
div.bild.midi.rechts {
max-width: 40%;
}
.bu {
font-size: 15px;
line-height: 20px;
}
.kleiner {
font-size: 14px;
}
.abstandoben {
margin-top: 12px;
}
.abstandunten {
margin-bottom: 12px;
}
.grosserabstandoben {
margin-top: 36px;
}
.grosserabstandunten {
margin-bottom: 36px;
}
/* Galerie */
.galerie .elastislide-wrapper {
padding: 18px 70px 18px 60px;
}
.galerie .grossansichten li div {
background-color: rgba(255, 255, 255, 0.7) !important;
width: 100%;
position: absolute;
bottom: 0;
padding: 20px 20px 20px 20px;
}
.galerie .grossansichten li p {
width: 75%;
}
/* Teasermodule */
.teasermodul.spalten {
margin-right: -35px;
}
.teasermodul .spalte33 {
float: left;
width: 217px;
margin: 0 35px 24px 0;
}
.teasermodul .spalte50 {
float: left;
width: 344px;
margin: 0 35px 24px 0;
}
.teasermodul .spalte66 {
float: left;
width: 471px;
margin: 0 35px 24px 0;
}
.teasermodul .bildteaser img {
width: auto;
}
/* allgemeine Slider (Ansprechpartner, Dokumente) */
.slider .elemente {
font-size: 15px;
/* line-height: 15px; */
}
/* Tabellen */
.tabelle {
width: 100%;
}
.tabelle td {
min-width: 0;
}
/* Pressemitteilungen */
.presse_jahr {
float:right;
margin: -50px 0 0 0;
}
/* Formulare: allgemeine Definitionen */
form .voll {
float:left;
width: 96%;
margin: 0 4% 10px 0;
}
form .spalte {
float:left;
width: 46%;
margin: 0 4% 10px 0;
}
/* Menü-Ebene */
.menueebene li:not(.reduziert) {
display: none;
}
/* iFrame-Einbindung von Vimeo */
.vimeovideo,
.youtubevideo {
overflow: hidden;
width: 100%;
min-height:380px;
}
/* Kopfbereich */
header.kopf nav {
float: right;
margin-top: 22px;
display: inline-block;
}
header.kopf nav .menueoeffner li.menue {
width: 37px;
}
header.kopf nav .menueoeffner li.menue span {
display: none;
}
/* Hauptnavigation */
header.kopf nav .nav-1 {
display: inline-block;
float: left;
}
header.kopf nav .nav-1 a {
color: #666;
font-size: 15px;
font-weight: bold;
}
header.kopf nav .nav-1 li {
margin-right: 6px;
}
header.kopf nav .nav-1 li:not(:last-child):after {
content: "|";
margin-left: 7px;
color: #d5d5d5;
}
header.kopf nav .nav-1 li:last-child {
margin-right: 0;
}
header.kopf nav .nav-2 {
display: none;
}
header.kopf nav li {
float: left;
}
header.kopf nav .active a {
color: #063258;
}
/* Unternavigation (Ebene 4) */
nav.ebene4 a {
font-size: 16px;
}
/* Teaser */
.teaser {
margin-top: 40px;
}
.teaser.initialisiert {
margin-top: -20px;
}
.teaser .slide {
height: 340px;
}
.teaser .text {
margin: 10% 48% 0 20px;
}
.teaser .video .text {
margin: 10% 0 0 20px;
}
.teaser .text h1 {
font-size: 26px;
line-height: 32px;
}
.teaser .text h3 {
font-size: 16px;
line-height: 25px;
}
.teaser .text .video {
max-width: 30%;
max-height: 200px;
margin: -5px 50px 200px 0;
}
/* Aufteilung Inhaltsbereich */
.hauptspalte {
width: 73%; /* eigentlich 73.7%, aber Reserve um Probleme zu umgehen / 566px bei 768 */
margin-left: 2.6%; /* 20px bei 768 */
}
.nebenspalte {
width: 23%; /* 182px bei 768 */
max-width: 202px;
}
/* Abbinder */
.abbinder .container {
font-size: 15px;
}
.abbinder .spalte {
width: 31.5%; /* 242px bei 768 */
margin: 0 0 0 2.6%; /* 20px bei 768 */
}
/* Fußzeile */
.fusszeile nav {
width: 600px;
margin: 0 auto;
padding: 39px 0 20px 20px;
font-size: 14px;
line-height: 24px;
color: #fff;
}
} /* Ende 768px */
@media only screen and (min-width: 960px) {
/* allgemeine Definitionen */
h4 {
font-size: 16px;
line-height: 22px;
}
img.mini.links,
img.mini.rechts,
div.bild.mini.links,
div.bild.mini.rechts {
max-width: 200px;
}
img.midi.links,
img.midi.rechts,
div.bild.midi.links,
div.bild.midi.rechts {
max-width: 330px;
}
/* das mobile Obst kann einen Hintergrund im Body nicht zentrieren, daher
kann der Hintergrund nicht in den body */
.seitencontainer {
background: #fff url(../img/hintergrund_seite.png) repeat-y center top;
}
/* iFrame-Einbindung von Vimeo */
.vimeovideo,
.youtubevideo {
overflow: hidden;
width: 100%;
min-height:410px;
}
.gmapsfloat .links {
width: 49%;
float: left;
}
.gmapsfloat .rechts {
width: 49%;
float: right;
}
.gmaps.links,
.gmaps.rechts {
width: 49%;
padding-bottom: 40%;
}
.gmaps.links {
float: left;
margin: 0 2% 0 0;
}
.gmaps.rechts {
float: right;
margin: 0 0 0 2%;
}
/* Kopfbereich */
header.kopf {
width: 960px;
padding: 0;
margin: 0 auto;
}
header.kopf .logo {
margin-top: 34px;
}
header.kopf nav {
margin-top: 42px;
/* margin-left: 55px; */
margin-right: 0;
}
/* Hauptnavigation */
header.kopf nav .nav-1 li {
margin-right: 10px;
}
header.kopf nav .nav-1 li:not(:last-child):after {
margin-left: 11px;
}
header.kopf nav .nav-2 {
display: inline-block;
float: left;
margin-left: 32px;
}
header.kopf nav .nav-2 a {
color: #666;
font-size: 14px;
font-weight: normal;
}
header.kopf nav .nav-2 li {
margin-right: 5px;
}
header.kopf nav .menueoeffner {
margin-left: 20px;
}
header.kopf nav .menueoeffner li.suche {
display: inline-block;
width: 32px;
height: 29px;
margin-top: -3px;
border: 1px solid #bdbdbd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #fff url(../img/symbole.png) no-repeat 8px -1393px;
cursor: pointer;
}
header.kopf nav .menueoeffner li.suche.active {
border: 1px solid #063258;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background: #063258 url(../img/symbole.png) no-repeat -42px -1393px;
}
header.kopf nav .menueoeffner li.menue {
display: none;
}
/* header.kopf nav .nav-2 li.trenner:after { */
header.kopf nav .nav-2 li:not(:last-child):after {
content: "|";
margin-left: 5px;
color: #d5d5d5;
}
header.kopf nav .nav-2 li:last-child {
margin-right: 0;
}
/* Slidernavigation und Auswahlnavigation (Ebene 2 und 3) */
.slidernavigation > nav {
width: 960px;
margin: 0 auto;
}
/* die Kopfzeile rückt in dieser Auflösung 30px nach unten und normalerweise wird das
vom Teaser kompensiert; wenn dieser jedoch fehlt, muss die Slidernavigation etwas nach unten */
.auswahlnavigation + .slidernavigation {
margin-top: 30px;
}
/* Teaser */
.teaser {
margin-top: 70px;
}
.teaser.initialisiert {
margin-top: -5px;
}
.teaser .slide {
height: 375px;
}
.teaser .slidesjs-pagination {
width: 960px;
margin: -70px auto 37px auto;
}
.teaser .slidehg {
width: 120%;
max-width: 120%;
}
.teaser .text {
width: 485px;
margin: 7% auto 0 auto;
padding: 0 475px 0 0;
}
.teaser .video .text {
width: 960px;
margin: 7% auto 0 auto;
padding: 0 0 0 0;
}
.teaser .text h1 {
font-size: 27px;
line-height: 32px;
}
.teaser .text h3 {
font-size: 16px;
line-height: 22px;
}
.teaser .text .video {
max-width: 25%;
max-height: 150px;
margin: -5px 75px 200px 0;
}
.teaser .g1, .teaser .g2, .teaser .g3 { display: none; }
.teaser .g3 { display: block; }
/* Aufteilung Inhaltsbereich */
.inhalt {
width: 960px;
padding: 0;
margin: 0 auto;
}
.hauptspalte {
width: 730px;
margin-left: 28px;
}
.nebenspalte {
width: 202px;
}
.nebenspalte .box.randlos img {
width: 200px;
}
/* Abbinder */
.abbinder .container {
width: 960px;
margin: 0 auto;
line-height: 20px;
}
.abbinder .spalte {
width: 300px;
margin: 0 0 0 28px;
}
/* Fußzeile */
.fusszeile nav {
width: 960px;
padding: 39px 0 20px 0;
}
} /* Ende 960px */
@media only screen and (min-width: 1200px) {
.teaser .slide {
height: 375px;
}
.teaser .slidesjs-pagination {
margin: -70px auto 37px auto;
}
.teaser .slidehg {
width: 100%;
max-width: 100%;
}
.teaser .text {
width: 520px;
padding: 0 440px 0 0;
}
.teaser .text h1 {
font-size: 29px;
line-height: 34px;
}
.teaser .text h3 {
font-size: 18px;
line-height: 25px;
}
.teaser .text .video {
max-width: 320px;
max-height: 200px;
}
} /* Ende 1200px */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 100%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
/* text-decoration: underline; */ /* keine Linie, da diese Linie auch beim ergänzten :after-content erscheint und dort nicht entfernt werden kann. Diese Linie beeinträchtigt aber die Lesbarkeit der URL */
}
a[href]:after {
content: " (" attr(href) ")";
font-weight: normal !important;
font-size: 10px !important;
word-wrap: break-word;
color: #666;
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
.kopf a:after,
.fussspuren a:after,
a[href^="javascript:"]:after,
a[href^=""]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 1.5cm 1cm 1.5cm 2cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
header nav,
header form,
header .menueebene,
.auswahlnavigation,
.teaser,
.slidernavigation,
.abschnittsschalter,
.funktionsleiste,
nav.ebene4,
.filterleiste,
.seitenleiste,
.jp-jplayer,
.jp-audio,
.teasermodul img,
.abbinder,
.fusszeile {
display:none !important;
}
.verdeckt {
display: inline !important;
}
div.verdeckt,
/* .slider .elemente li, */ /* doch nicht alle AP/Dokument auflisten, da viele mehrfach vorhanden sind */
.slider img.ap,
.teasermodul img.ap,
.accordion_inhalt {
display: block !important;
}
header.kopf {
padding: 0;
}
header .logo .visuallyhidden {
display: block;
height: auto;
width: auto;
overflow: visible;
margin: auto;
clip: auto;
font-size: 24px;
}
a.freistehend {
display: block;
padding-left: 0;
background: none;
}
a.textlink {
white-space: normal;
padding-left: 0;
background-image: none;
}
a.pdf {
display: block;
padding-left: 0;
background-image: none;
}
a.freistehend.mehr,
a.freistehend.weniger,
a.freistehend.zurueck {
display: none;
}
.abschnittsinhalt {
padding: 0 0 60px 0;
}
img.links,
div.bild.links {
float: left;
margin: 6px 15px 10px 0;
}
img.rechts,
div.bild.rechts {
float: right;
margin: 6px 0 10px 15px;
}
img.mini,
div.bild.mini,
div.bild.mini img {
width: 40mm;
max-width: 40mm;
}
img.midi,
div.bild.midi,
div.bild.midi img {
width: 80mm;
max-width: 80mm;
}
img.voll,
div.bild.voll,
div.bild.voll img {
float: left;
margin: 6px 15px 15px 0;
width: 120mm;
max-width: 120mm;
}
.fussspuren {
display: block;
font-weight: bold;
margin-bottom: 10px;
}
.fussspuren li {
float: left;
font-size: 11px;
line-height: 16px;
margin-right: 6px;
}
/* .fussspuren li:not(:last-child):after { */
.fussspuren li:not(.nav4_bc):after {
content: ">";
margin-left: 6px;
font-weight: bold;
}
.fussspuren li.active:after {
content: none;
}
.fussspuren a {
font-weight: bold;
}
.fussspuren .nav4_bc {
display: none;
}
.ohnespalten .nav4_bc {
display: list-item;
}
.slider .elemente li p {
padding-left: 0;
}
.teasermodul .spalte33,
.teasermodul .spalte50,
.teasermodul .spalte66 {
float: none;
width: 100%;
height: auto !important;
margin: 0 0 30px 0;
}
.teasermodul .text {
padding: 0;
height: auto !important;
}
.accordion_titel {
border: 1px solid #000 !important;
}
}