/* -----------------------------------------------------------------------------------
Basics
----------------------------------------------------------------------------------- */
/* work-sans-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Work Sans';
font-style: normal;
font-weight: 300;
src: url('../fonts/work-sans-v19-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../fonts/work-sans-v19-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* work-sans-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/work-sans-v19-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../fonts/work-sans-v19-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* work-sans-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Work Sans';
font-style: normal;
font-weight: 500;
src: url('../fonts/work-sans-v19-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../fonts/work-sans-v19-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
:root {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
i.bi {
display: inline-block;
position: relative;
margin-right: 5px;
}
i.bi:before {
display: inline-block;
width: 16px; height: 16px;
content: '';
vertical-align: -3px;
}
i.bi.lg:before {
width: 24px; height: 24px;
}
i.bi.xl:before {
width: 26px; height: 26px;
}
i.bi.bi-phone:before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
}
i.bi.bi-phone-white:before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
}
i.bi.bi-chat-white:before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
}
i.bi.bi-kontaktformular-white:before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
}
i.bi.bi-mail:before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
}
i.bi.bi-mail-white:before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
}
i.bi.bi-spotify-white:before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
}
i.bi.bi-linkedin-white:before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
}
i.bi.bi-instagram-white:before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
}
i.bi.bi-facebook-white:before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
}
i.bi.bi-link:before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
}
i.bi.bi-link-white:before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
}
i.bi.bi-play-white:before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
}
i.bi.bi-readingtime:before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
}
i.bi.bi-calendar:before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
}
* {
margin:0; padding:0;
outline:0;
}
html, body {
height: 100%; width: 100%;
}
body {
font-family: "Work Sans", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 26px; font-weight: 300; color: #000;
}
h1,h2,h3,h4 {
margin:0; padding:0;
color:#20445a; font-weight: 400;
}
h1 {
margin-bottom: 25px;
max-width: 1100px;
font-size: 24px; line-height: 34px;
}
h2 {
margin-bottom: 15px;
font-size: 22px; line-height: 32px;
}
h2.more-margin {
margin-bottom: 25px;
}
h2 span.sub-headline {
display: block;
font-size: 16px; line-height: 26px; text-transform: none;
}
h3 {
margin-bottom: 5px;
font-size: 20px; line-height: 30px;
}
h3.more-margin {
margin-bottom: 12px;
}
h3.more-margin.extra {
margin-bottom: 20px;
}
h4 {
margin-bottom: 5px;
font-size: 18px; line-height: 28px;
}
@media (max-width: 767px) {
h2 {
-webkit-hyphens: auto;
hyphens: auto;
}
}
@media (min-width: 768px) {
h1 {
font-size: 30px; line-height: 40px;
}
h2 {
font-size: 24px; line-height: 34px;
}
}
a,
a:hover,
a:active,
a:focus {
color: #20445a; text-decoration: none;
outline: none;
}
main a, main a:hover, main a:focus {
text-decoration:underline;
}
/* Fokus für Tastatur sichtbar machen */
main p a:focus-visible {
outline: 2px solid #20445a;
outline-offset: 3px;
}
@media (min-width: 768px) {
main a[href^="tel:"],
main a:hover[href^="tel:"],
main a:focus[href^="tel:"]{
text-decoration: none;
}
}
p {
margin-bottom: 30px;
}
strong {
font-weight: 500;
}
main ul, main ol {
margin: 0 0 30px 20px; padding: 0;
}
main ol {
margin: 0 0 30px 25px; padding: 0;
}
main ul ul, main ol ol {
margin: 0 0 0 20px;
}
img {
border: none;
}
.text-center {
text-align: center;
}
.small-text {
font-size: 13px; line-height: 20px;
}
.small-text.grau {
color: #555;
}
.button,
.button:hover,
.button:focus,
.button:active {
display: inline-block;
padding: 20px;
font-size: 15px; line-height: 15px; color:#fff; font-weight: 400; text-decoration: none;
background-color: #7c9ca4;
border: none;
}
/* Fokus für Tastatur sichtbar machen */
button.button:focus-visible {
outline: 2px solid #34d7ef;
}
.text-link-pfeil,
.text-link-pfeil:hover,
.text-link-pfeil:focus,
.text-link-pfeil:active {
display: inline-block;
position: relative;
margin-right: 5px;
color: #20445a; text-decoration: none;
background-color: transparent;
border: none; border-bottom: 1px solid #20445a;
}
.text-link-pfeil:after {
display: inline-block;
content: '';
background-image: url("data:image/svg+xml,");
width: 16px; height: 16px;
margin-left: 7px;
vertical-align: 0;
}
.bg-blau .text-link-pfeil,
.bg-blau .text-link-pfeil:hover,
.bg-blau .text-link-pfeil:focus,
.bg-blau .text-link-pfeil:active {
color: #fff;
border-bottom: 1px solid #fff;
}
.bg-blau .text-link-pfeil:after {
background-image: url("data:image/svg+xml,");
}
.cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px; /* Abstand zwischen den Buttons */
margin-bottom: 30px;
}
.cta-button {
flex: 1 1 calc(50% - 10px); /* 50% Breite minus Lücke */
padding: 20px;
font-size: 15px; line-height: 15px; color:#fff !important; font-weight: 400; text-align: center; text-decoration: none !important;
background-color: #7c9ca4;
white-space: nowrap; /* Verhindert Zeilenumbruch im Button-Text */
}
iframe {
margin-bottom: 30px;
}
blockquote {
margin: 0; padding: 0;
font-size: 16px;
border: none;
}
::selection {
color: #fff;
background: #7c9ca4; /* WebKit/Blink Browsers */
}
::-moz-selection {
color: #fff;
background: #7c9ca4; /* Gecko Browsers */
}
.ratio {
margin-bottom: 30px;
}
form {
margin-bottom: 40px;
}
/* Modal */
.modal-backdrop {
background-color: #eef1f2;
}
.modal-backdrop.in {
opacity: .7; }
.modal-content {
border:none;
border-radius: 0;
-webkit-box-shadow: 0 0 10px 1px rgba(34,34,34,.25);
box-shadow: 0 0 10px 1px rgba(34,34,34,.25); }
.modal-header,
.modal-footer {
border: none;
}
/* Popover */
.popover {
max-width: 380px;
font-family: "Work Sans", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 26px; font-weight: 300;
border: none; border-radius: 0;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.popover-header {
color: #20445a; font-weight: 300;
background-color: #f5f1ec;
border: none;
}
.hide {
display: none;
}
.visually-hidden-focusable {
position: absolute; top: 0; z-index: 2000;
padding: 5px;
background-color: #fff;
}
/* -----------------------------------------------------------------------------------
Container
----------------------------------------------------------------------------------- */
.container-fluid {
position: relative;
max-width: 1300px;
}
.container-fluid.xl {
max-width: 1430px;
}
.container-fluid.xl.no-padding {
max-width: 1350px;
}
.container-fluid.xxl {
max-width: 1900px;
}
.container {
max-width: 630px;
}
.container-fluid.no-padding,
.container.no-padding {
padding: 0;
}
.row.xs-space {
margin-left: -5px; margin-right: -5px; }
.row.xs-space [class^="col-"] {
padding: 0 5px;
}
.row.sm-space {
margin-left: -10px; margin-right: -10px; }
.row.sm-space [class^="col"] {
padding-left: 10px; padding-right: 10px;
}
@media (min-width: 768px) {
.container {
padding-right: 30px; padding-left: 30px;
}
.container-fluid {
padding-left: 30px; padding-right: 30px;
}
}
@media (min-width: 992px) {
.container {
padding-right: 40px; padding-left: 40px;
max-width: 800px;
}
.container-fluid {
padding-left: 40px; padding-right: 40px;
}
.container.md {
max-width: 1000px;
}
.container.lg {
max-width: 1250px;
}
.container.xl {
max-width: 1430px;
}
.row {
margin-left: -20px; margin-right: -20px; }
.row [class^="col"] {
padding-left: 20px; padding-right: 20px;
}
}
.row.no-space {
margin-left: 0; margin-right: 0; }
.row.no-space .no-space[class^="col"] {
margin-bottom: 0; padding: 0;
}
div.bg-grau {
background: #f5f1ec;
}
div.bg-blau {
background-color: #20445a !important;
}
/* -----------------------------------------------------------------------------------
Navigation
----------------------------------------------------------------------------------- */
.navbar-light.bg-light {
padding: 0;
background-color: #fff !important;
border-radius: 0;
-webkit-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.30);
box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.30); }
.navbar-light .navbar-brand img {
margin-top: 8px; margin-bottom: 8px;
max-height: 60px; width: auto;
}
.navbar-toggler {
margin-top: -10px; padding: 0;
border: none;
background: transparent !important; }
.navbar-toggler .icon-bar {
width: 29px;
height: 3px;
background-color: #000;
display: block;
transition: all 0.2s;
margin-top: 5px
}
.navbar-toggler .icon-bar.top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggler .icon-bar.middle-bar {
opacity: 0;
}
.navbar-toggler .icon-bar.bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggler.collapsed .icon-bar.top-bar {
transform: rotate(0);
}
.navbar-toggler.collapsed .icon-bar.middle-bar {
opacity: 1;
}
.navbar-toggler.collapsed .icon-bar.bottom-bar {
transform: rotate(0);
}
.navbar-light .navbar-nav a.nav-link {
font-size: 17px; color: #20445a; font-weight: 400;
outline: none;
-webkit-transition: all .1s ease;
transition: all .1s ease;
}
.navbar-light .navbar-nav a.nav-link:hover,
.navbar-light .navbar-nav a.nav-link:focus {
color: #20445a;
outline: none;
}
.navbar-light .navbar-nav a.nav-link:focus-visible {
border-bottom: 3px solid #20445a;
box-shadow: none;
}
.navbar-light .navbar-nav a.nav-link.active {
color: #20445a; outline: none; }
.dropdown-toggle::after {
content: "";
display: inline-block;
margin-left: 10px;
width: 8px; height: 8px;
border: none; border-bottom: 1px solid #20445a; border-right: 1px solid #20445a;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.navbar-light .navbar-nav .dropdown-menu {
padding: 10px 0;
border: none; border-radius: 0;
background-color: #fff; }
.navbar-light .navbar-nav .dropdown-menu a {
padding: 6px 25px;
font-size: 17px; line-height: 27px; font-weight: 400; color: #20445a; text-decoration: none;
background-color: transparent;
}
.navbar-light .navbar-nav .dropdown-menu a:hover,
.navbar-light .navbar-nav .dropdown-menu a:focus {
color: #20445a;
background-color: #fff;
}
.navbar-light .navbar-nav .dropdown-menu a:focus-visible {
color: #7c9ca4;
background-color: #fff;
}
.navbar-light .navbar-nav .dropdown-menu a.active {
color: #7c9ca4;
background-color: #fff;
}
@media (max-width:1199px) {
/* Fix: */
.navbar-collapse {
padding-bottom: 20px;
max-height: calc(100vh - 85px);
overflow-y: auto; }
.navbar-light .navbar-nav a.nav-link {
margin: 0; padding-top: 10px; padding-bottom: 10px;
font-size: 21px; }
.navbar-light .navbar-nav .dropdown-menu {
margin-bottom: 15px; padding: 0; }
.navbar-light .navbar-nav .dropdown-menu a {
font-size: 19px; line-height: 24px;
}
.navbar-light .navbar-nav .dropdown-menu .dropdown-item {
white-space: normal;
}
}
@media (min-width:768px) {
.navbar-light .navbar-brand img {
max-height: 95px; width: auto;
}
}
@media (min-width:1200px) {
.navbar-light .navbar-brand img {
margin-top: 42px;
}
.navbar-light .navbar-nav a.nav-link {
margin: 40px 0 0 25px; padding: 0 0 5px 0;
border-bottom: 3px solid #fff; }
.navbar-light .navbar-nav a.nav-link.active {
border-bottom: 3px solid #20445a; }
.navbar-light .navbar-nav .dropdown-menu {
margin-top: 0;
min-width: 350px; overflow: hidden;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
}
/* slideIn */
@keyframes slideIn {
0% {
transform: translateY(1rem);
opacity: 0;
}
100% {
transform:translateY(0rem);
opacity: 1;
}
0% {
transform: translateY(1rem);
opacity: 0;
}
}
@media (min-width: 768px) {
.slideIn {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
-webkit-animation-duration: 0.35s;
animation-duration: 0.35s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideIn;
animation-name: slideIn;
}
}
@media (max-width: 767px) {
/* headroom */
.headroom {
will-change: transform;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
}
.headroom--pinned {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.headroom--unpinned {
-webkit-transform: translateY(-34px);
transform: translateY(-34px);
}
}
/* Telefon */
nav.navbar .navbar-headline {
position: relative; z-index: 1;
display: block;
padding: 5px 0;
width: 100%;
font-size: 13px; line-height: 24px; color: #fff; text-align: right;
background-color: #20445a; }
nav.navbar .navbar-headline a {
margin-left: 20px;
color: #fff;
}
/* Tastaturfokus */
nav.navbar .navbar-headline a:focus-visible {
box-shadow: 0 0 0 4px #34d7ef;
}
nav.navbar .navbar-headline span {
margin: 0 15px;
}
nav.navbar .navbar-headline .flaggen {
display: inline-block;
margin-left: 20px; }
nav.navbar .navbar-headline .flaggen a {
margin-left: 4px;
}
@media (min-width: 1200px) {
nav.navbar .navbar-headline {
position: absolute; top: 0; }
}
/* Icon Leiste für Mobile */
nav.navbar .icon-row {
background-color: #7c9ca4; }
nav.navbar .icon-row .icon-col {
display: flex;
align-items: center;
justify-content: center;
padding-top: 3px;
height: 50px;
}
nav.navbar .icon-row .border-middle {
border-right: 1px solid #fff;
}
/* -----------------------------------------------------------------------------------
Header (Unterseite)
----------------------------------------------------------------------------------- */
header.unterseite {
position: relative;
margin: 170px auto 60px auto;
max-width: 1900px; overflow: hidden;
}
header.unterseite:after {
position: absolute; bottom: 0; left: 0; right: 0;
content: '';
height: 50%; width: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(2, 22, 35, .7)));
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(2, 22, 35, .7) 100%); }
header.unterseite img.image {
height: 100%; width: 100%;
min-height: 260px;
object-fit: cover;
}
header.unterseite img.image.ken-burns-effect {
animation: zoomOut 6s ease forwards ; }
@keyframes zoomOut {
0% {
transform: scale(1.15);
}
100% {
transform: scale(1);
}
}
header.unterseite video.header-video {
display: block;
width: 100%; height: auto;
}
header.unterseite .content-container {
position: absolute; bottom: 25px; left: 0; right: 0; z-index: 1;
width: 100%; }
header.unterseite .content-container .content {
padding: 0;
max-width: 1000px;
font-size: 19px; line-height: 29px; color: #fff; font-weight: 400; }
header.unterseite .content-container .content p.text-gross {
margin-bottom: 10px;
font-weight: 500; font-size: 25px; line-height: 35px;
}
@media (max-width: 767px) {
header.unterseite {
margin-bottom: 30px;
}
header.unterseite.textblock-mobile-ausblenden:after {
display: none; }
}
@media (min-width: 768px) {
header.unterseite {
margin-top: 150px;
}
header.unterseite img.image {
min-height: 400px; max-height: 650px;
}
header.unterseite .content-container {
bottom: 25px; }
header.unterseite .content-container .content {
padding: 0;
max-width: 1000px;
font-size: 20px; line-height: 30px; }
header.unterseite .content-container .content p.text-gross {
margin-bottom: 20px;
font-size: 32px; line-height: 42px;
}
}
@media (min-width: 992px) {
header.unterseite .content-container {
bottom: 60px; }
header.unterseite .content-container .content p.text-gross {
font-size: 37px; line-height: 47px;
}
}
/* Jameda Siegel */
header.unterseite .jameda-siegel {
position: absolute; top: 15px; right: 15px; z-index: 1000;
}
header.unterseite .jameda-siegel img {
width: 50px; height: auto;
}
@media (min-width: 768px) {
header.unterseite .jameda-siegel {
top: 20px; right: 20px; }
header.unterseite .jameda-siegel img {
width: 65px; height: auto;
}
}
@media (min-width: 992px) {
header.unterseite .jameda-siegel img {
width: 80px; height: auto;
}
}
@media (min-width: 1681px) and (min-height: 1000px) {
header.unterseite .jameda-siegel {
position: fixed; top: 170px; right: 20px;
}
}
/* -----------------------------------------------------------------------------------
Startseite
----------------------------------------------------------------------------------- */
.blog-beitraege-home {
margin-bottom: 100px;
}
/* -----------------------------------------------------------------------------------
Großes Foto + Text
----------------------------------------------------------------------------------- */
.foto-gross-text {
margin-bottom: 100px;
background-color: #f5f1ec;}
.foto-gross-text .imagebox img.image {
height: 100%; width: 100%;
object-fit: cover;
}
.foto-gross-text .row .container.textbox {
padding-top: 40px; padding-bottom: 10px;
max-width: 600px;
}
@media (min-width: 768px) {
.foto-gross-text .row .container.textbox {
}
}
@media (min-width: 992px) {
.foto-gross-text .row.rechts .imagebox {
float: right;
}
}
/* Impressionen Carousel */
.carousel-container .carousel-main-image {
margin-bottom: 10px; }
.carousel-container .carousel-main-image .carousel-cell {
margin-right: 10px;
width: 100%;
}
.carousel-container .carousel-nav .carousel-cell {
margin-right: 10px;
width: 27%; height: auto;
opacity: 1;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
}
.carousel-container .carousel-nav .carousel-cell.is-nav-selected {
opacity: 0.45;
}
@media (min-width: 1400px) {
.carousel-container .carousel-nav .carousel-cell {
width: 182px; height: 182px;
}
}
/* -----------------------------------------------------------------------------------
Foto Banner Carousel
----------------------------------------------------------------------------------- */
.foto-banner-carousel-container {
margin-bottom: 120px;
}
.foto-banner-carousel-container.bg-grau {
margin-bottom: 100px; padding: 60px 0; }
.foto-banner-carousel-container .container.einleitung {
padding-bottom: 10px;
}
.foto-banner-carousel-container .foto-banner-carousel {
margin-bottom: 40px; }
.foto-banner-carousel-container .foto-banner-carousel .carousel-cell {
margin-right: 10px;
width: 80%;
}
@media (min-width: 768px) {
.foto-banner-carousel-container .foto-banner-carousel .carousel-cell {
width: 65%;
}
}
@media (min-width: 992px) {
.foto-banner-carousel-container .foto-banner-carousel .carousel-cell {
width: 50%;
}
}
/* -----------------------------------------------------------------------------------
Ansprechpartner
----------------------------------------------------------------------------------- */
.ansprechpartner {
margin-bottom: 100px; }
.ansprechpartner .imagebox .box {
height: 100%; }
.ansprechpartner .imagebox .box img.image {
height: 100%; width: 100%;
object-fit: cover;
}
.ansprechpartner .row .textbox {
padding-top: 40px; padding-bottom: 10px;
}
.ansprechpartner .row .textbox .grosser-text {
margin-bottom: 20px;
font-size: 22px; line-height: 32px; font-weight: 400;
}
.ansprechpartner .row .textbox a.button {
margin-right: 10px;
}
/* -----------------------------------------------------------------------------------
Ansprechpartner: Delphi
----------------------------------------------------------------------------------- */
main .container-fluid.sm-width.delphi {
max-width: 1270px;
}
.ansprechpartner-delphi {
margin-bottom: 100px; padding: 60px 0 30px 0;
background-color: #f5f1ec;
}
.ansprechpartner-delphi img.img-fluid {
margin-bottom: 20px;
width: 100%; height: auto;
}
/* -----------------------------------------------------------------------------------
Text 2 Spalten
----------------------------------------------------------------------------------- */
.text-zwei-spalten {
margin-bottom: 70px;
}
/* -----------------------------------------------------------------------------------
Foto (klein) + Text
----------------------------------------------------------------------------------- */
.foto-klein-text {
margin-bottom: 70px;
}
.foto-klein-text.bg-grau {
margin-bottom: 100px; padding: 60px 0 30px 0; }
.foto-klein-text .row [class^="col"] {
margin-bottom: 40px; }
.foto-klein-text figure {
height: 100%;
background-color: #f5f1ec;
}
.foto-klein-text.bg-grau figure {
background-color: #fff; }
.foto-klein-text figure img.image {
width: 100%; height: auto;
}
.foto-klein-text figure figcaption {
padding-top: 40px; padding-bottom: 10px;
}
/* Team */
.foto-klein-text figure figcaption h3 {
margin-bottom: 20px; }
.foto-klein-text figure figcaption h3 span.position {
font-size: 17px; line-height: 27px; font-weight: 300;
}
.foto-klein-text.team .modal-body img.image {
width: 100%; height: auto;
}
/* Leitungsteam */
.foto-klein-text.leitungsteam figure figcaption h3 {
margin-bottom: 20px; }
.foto-klein-text.leitungsteam figure figcaption h3 span.position {
font-size: 17px; line-height: 27px; font-weight: 300;
}
.foto-klein-text.leitungsteam .modal-body img.image {
width: 100%; height: auto;
}
@media (min-width: 1200px) {
.foto-klein-text.leitungsteam {
margin-bottom: 80px; }
.foto-klein-text.leitungsteam figure figcaption {
padding-top: 30px; padding-bottom: 1px; }
.foto-klein-text.leitungsteam figure figcaption .container {
padding-left: 25px; padding-right: 25px;
}
}
/* -----------------------------------------------------------------------------------
Publikationen
----------------------------------------------------------------------------------- */
.publikationen {
margin-bottom: 70px;
}
.publikationen.bg-grau {
margin-bottom: 100px; padding: 60px 0 30px 0; }
.publikationen img.image {
margin: 5px 0 20px 0;
}
.publikationen span.autor {
display: block;
font-size: 13px; line-height: 23px; font-weight: 500;
}
.publikationen h2 {
margin-bottom: 20px;
}
.publikationen a.text-link,
.publikationen a.text-link:hover {
text-decoration: underline;
}
@media (max-width: 767px) {
.publikationen img.image {
margin-top: 0;
max-width: 150px;
}
}
@media (min-width: 992px) {
.text-spalte {
padding-left: 20px;
}
}
/* -----------------------------------------------------------------------------------
Blog Übersicht
----------------------------------------------------------------------------------- */
/* Article Filter */
.blog-article-filter {
margin: 10px 0 40px 0;
}
@media (max-width: 767px) {
.blog-article-filter {
background-color: #20445a; }
/* Header */
.blog-article-filter .filter-header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 15px 15px; }
.blog-article-filter .filter-header .dropdown-label {
color: #fff;
margin-right: 10px;
}
.blog-article-filter .filter-header .dropdown-selected {
font-weight: 500;
color: #fff;
flex: 1; /* Füllt Platz zwischen Label und Pfeil */
white-space: nowrap; /* Damit die Kategorie nicht umbrechen muss */
}
.blog-article-filter .filter-header .dropdown-arrow {
color: #fff;
transition: transform 0.3s;
}
/* Liste */
.blog-article-filter .filter-row ul.dropdown-list {
display: none;
margin: 0; padding: 10px 15px 20px 15px;
list-style: none;
}
.blog-article-filter .filter-row ul.dropdown-list.open {
display: block; }
.blog-article-filter .filter-row ul.dropdown-list li a {
display: block;
padding: 7px 0;
color: #fff; text-decoration: none;
text-decoration: none;
}
.blog-article-filter .filter-row ul.dropdown-list li a.active {
font-weight: 500;
}
}
@media (min-width: 768px) {
.blog-article-filter .filter-header {
display: none;
}
.blog-article-filter .filter-row {
text-align: center; }
.blog-article-filter .filter-row ul.dropdown-list {
list-style: none; margin: 0; padding: 0; }
.blog-article-filter .filter-row ul.dropdown-list li {
display: inline;
margin: 0; padding: 0; }
.blog-article-filter .filter-row ul.dropdown-list li a {
display: inline-block;
margin: 5px 5px 10px 5px; padding: 10px 20px;
font-size: 14px; line-height: 24px; font-weight: 400; color: #7c9ca4; text-decoration: none; text-transform: uppercase;
border: 1px solid #7c9ca4;
-webkit-transition: all .2s;
transition: all .2s;
}
.blog-article-filter .filter-row ul.dropdown-list li a:hover {
color: #fff;
background-color: #7c9ca4;
}
.blog-article-filter .filter-row ul.dropdown-list li a.active {
color: #fff;
background-color: #20445a;
border: 1px solid #20445a;
cursor: default;
}
}
/* Article Überblick */
.article-container [class^="col"] {
margin-bottom: 40px; }
.article-container figure {
height: 100%;
background-color: #f5f1ec;
}
.article-container.blue figure {
background-color: #eef1f2; }
.article-container figure img.image {
width: 100%; height: auto;
}
.article-container figure figcaption .container {
padding-top: 40px; padding-bottom: 10px; }
.article-container figure figcaption .container .time {
margin-bottom: -10px;
font-size: 14px; line-height: 24px;
}
.article-container figure figcaption .container .time .readingtime {
text-align: right;
}
/* Pagination */
.pagination {
--bs-pagination-border-radius: 0;
--bs-pagination-padding-x: 0;
--bs-pagination-padding-y: 0;
--bs-pagination-font-size: 16px;
--bs-pagination-color: #20445a;
--bs-pagination-hover-color: var(--bs-pagination-color);
--bs-pagination-focus-color: var(--bs-pagination-color);
--bs-pagination-focus-bg: transparent;
--bs-pagination-hover-bg: transparent;
--bs-pagination-bg: transparent;
--bs-pagination-active-color: #fff;
--bs-pagination-active-bg: #7c9ca4;
margin: 30px 0 100px 0; }
.page-link {
font-weight: 400; line-height: 35px; text-align: center;
width: 35px; height: 35px;
border: none;
}
.page-link:hover {
color: var(--bs-pagination-hover-color); text-decoration: none;
}
.page-link.active, .active > .page-link {
background-color: var(--bs-pagination-active-bg);
border-radius: var(--bs-pagination-border-radius);
}
.page-item:first-child .page-link,
.page-item:last-child .page-link {
border-radius: var(--bs-pagination-border-radius);
}
/* elated Blog Post */
.related-blog-post {
margin-bottom: 60px;
}
/* -----------------------------------------------------------------------------------
Blog Eintrag
----------------------------------------------------------------------------------- */
.date-time-container {
margin-bottom: 20px;
font-size: 14px; line-height: 24px; }
.date-time-container time {
margin-right: 20px;
}
.authors-header {
margin-bottom: 20px; }
.authors-header .author {
margin-bottom: 20px; }
.authors-header .author img.image {
border-radius: 100%;
}
.authors-header .author span {
display: block;
line-height: 20px; }
.authors-header .author span.position {
font-size: 14px; line-height: 24px; color: #999;
}
.blog-eintrag-inhaltsverzeichnis {
margin-bottom: 100px; padding: 60px 0 30px 0;
background-color: #eef1f2;
}
/* Sharing Buttons */
.sharing-buttons {
margin-bottom: 105px; }
.sharing-buttons a,
.sharing-buttons a:hover {
display: inline-block;
margin-right: 5px; }
.sharing-buttons a .sharing-button {
margin-bottom: 15px;
width: 38px; height: 38px;
text-align: center;
background-color: #20445a;
border-radius: 100%; }
.sharing-buttons a .sharing-button .icon svg {
margin-top: 10px;
width: 18px; height: 18px;
}
#kommentform {
display: grid;
grid-template-columns: 100%;
grid-template-areas: "quote" "replyHandle" "komment" "email" "author" "authorsite" "privacy" "button" "tweet";
grid-column-gap: 10px;
grid-row-gap: 10px;
margin-bottom: 90px;
}
#kommentform .replyHandleDisplay {
grid-area: replyHandle;
}
#kommentform #url {
position: relative;
left: -200vw;
height: 0;
}
#kommentform input[name=email] {
grid-area: email;
}
#kommentform input[name=author] {
grid-area: author;
}
#kommentform input[type=url] {
grid-area: authorsite;
}
#kommentform input[type=submit] {
grid-area: button;
}
#kommentform .share {
grid-area: tweet;
align-self: start;
}
#kommentform textarea {
grid-area: komment;
width: 100%;
}
#kommentform input[name=email],
#kommentform input[name=author],
#kommentform input[type=url],
#kommentform textarea {
padding: 20px 20px 20px 25px;
height: auto;
font-size: 16px; line-height: normal; color: #151515; font-weight: 300;
background-color: #fff;
border: 1px solid #20445a; border-radius:0;
-webkit-box-shadow: none;
box-shadow: none;
}
#kommentform .visible-quote {
grid-area: quote;
}
#kommentform .komment-privacy {
grid-area: privacy;
font-size: smaller;
}
#kommentform.spam-indicator {
grid-area: spamindicator;
width: 100%;
}
#kommentform .progress {
transition: width 1s, background 2s, height 0.2s;
transition-timing-function: linear;
display: inline-block;
width: 0%;
height: 5px;
background: red;
}
#kommentform .progress.orange {
background: orange;
}
#kommentform .progress.yellow {
background: yellowgreen;
}
#kommentform .progress.green {
background: green;
}
#kommentform .progress.done {
background: green;
height: 0;
}
#kommentform .form-feedback {
padding: 10px;
}
#kommentform .form-feedback.error {
background: orange;
color: white;
}
#kommentform .form-feedback.moderation-note {
background: green;
color: white;
}
#kommentform .lds-ellipsis {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
#kommentform .lds-ellipsis div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
#kommentform .sk-cube-grid {
width: 40px;
height: 40px;
margin: 0 auto;
}
#kommentform .loading-invisible {
display: none;
}
#kommentform .sk-cube-grid .sk-cube {
width: 33%;
height: 33%;
background-color: var(--color-card-text);
float: left;
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
#kommentform .sk-cube-grid .sk-cube1 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#kommentform .sk-cube-grid .sk-cube2 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#kommentform .sk-cube-grid .sk-cube3 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#kommentform .sk-cube-grid .sk-cube4 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
#kommentform .sk-cube-grid .sk-cube5 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#kommentform .sk-cube-grid .sk-cube6 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#kommentform .sk-cube-grid .sk-cube7 {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#kommentform .sk-cube-grid .sk-cube8 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
#kommentform .sk-cube-grid .sk-cube9 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#kommentsWebmentions {
/* .single-komment {
display: grid;
grid-template-columns: 20px 40px 1fr;
grid-template-areas:
'icon avatar action'
'icon avatar content';
grid-column-gap: 10px;
grid-row-gap: 10px;
line-height: 1.2;
border-bottom: 1px solid grey;
padding-bottom: 20px;
margin-bottom: 20px;
} */
}
#kommentsWebmentions h3 {
margin-bottom: 15px;
}
#kommentsWebmentions .list-reposts,
#kommentsWebmentions .list-mentions,
#kommentsWebmentions .list-likes {
display: flex;
flex-direction: row;
gap: 10px;
}
#kommentsWebmentions .list-reposts .author-action,
#kommentsWebmentions .list-mentions .author-action,
#kommentsWebmentions .list-likes .author-action {
display: none;
}
#kommentsWebmentions .list-comments .single-komment,
#kommentsWebmentions .list-replies .single-komment {
display: grid;
grid-template-columns: 20px 40px 1fr;
grid-template-areas: "icon avatar action" "icon avatar content";
grid-column-gap: 10px;
grid-row-gap: 10px;
line-height: 1.2;
border-bottom: 1px solid #7c9ca4;
padding-bottom: 20px;
margin-bottom: 40px;
}
#kommentsWebmentions .type-of {
grid-area: icon;
line-height: 40px;
}
#kommentsWebmentions .author-avatar {
grid-area: avatar;
position: relative;
}
#kommentsWebmentions .author-avatar img {
max-width: 40px;
border-radius: 3px;
}
#kommentsWebmentions .author-action {
grid-area: action;
font-weight: 500;
}
#kommentsWebmentions .mention-content {
grid-area: content;
padding-bottom: 20px;
}
#kommentsWebmentions .komment-text {
margin-top: -10px;
padding: 20;
line-height: 1.5;
}
#kommentsWebmentions .komment-text span.date {
display: block;
margin-bottom: 20px;
}
/* .splitted-komments {
.single-komment {
display: block;
}
.single-komment .author-avatar img {
max-width: 60px;
}
.single-komment .author-action,
.single-komment .type-of {
display: none;
}
.list-replies {
list-style-type: none;
padding-left: 0;
.single-komment .author-action,
.single-komment .type-of {
display: block;
}
}
.kommentReply {
display: block;
text-align: right;
}
} */
@-webkit-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
}
35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
@keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
}
35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
.share-elsewhere {
display: none;
}
/* -----------------------------------------------------------------------------------
Gesamtes Team
----------------------------------------------------------------------------------- */
.gesamtes-team-container {
margin-bottom: 90px; }
.gesamtes-team-container figure {
margin-bottom: 10px; }
.gesamtes-team-container figure img {
margin-bottom: 0;
cursor: pointer;
}
/* -----------------------------------------------------------------------------------
Impressionen
----------------------------------------------------------------------------------- */
.impressionen-container {
margin-bottom: 90px; }
.impressionen-container a.image-hover-effect .image-container {
margin-bottom: 10px;
}
/* -----------------------------------------------------------------------------------
Galerie Modul
----------------------------------------------------------------------------------- */
.galerie-container {
margin-bottom: 90px; }
.galerie-container .image-box {
margin-bottom: 40px;
}
.galerie-container .sm-space .image-box {
margin-bottom: 20px;
}
.galerie-container .image-box h3 {
padding: 20px 20px 0 20px;
text-align: center;
}
.galerie-container a.image-hover-effect .image-container {
margin-bottom: 10px;
}
/* -----------------------------------------------------------------------------------
Karriere
----------------------------------------------------------------------------------- */
/* Überblick */
.karriere-boxen {
margin-bottom: 100px; padding: 60px 0 20px 0; }
.karriere-boxen .row [class^="col"] {
margin-bottom: 40px; }
.karriere-boxen .box {
padding-top: 40px; padding-bottom: 10px;
height: 100%;
background-color: #f5f1ec;
}
.karriere-boxen.bg-grau .box {
background-color: #fff; }
.karriere-boxen .box h3 {
margin-bottom: 10px;
}
/* Stellenbeschreibung */
.stellenbeschreibung {
margin-bottom: 60px;
}
.bewerbungsformular .abschlusstext {
padding-top: 20px;
}
.drag-and-drop {
cursor: pointer;
position: relative; }
.drag-and-drop #drop-zone.dragging {
background-color: #fff;
}
.drag-and-drop #drop-zone {
padding: 20px;
text-align: center;
background-color: #fff;
border: 2px dashed #ccc;
cursor: copy; /* Ändert den Cursor, wenn über der Drop-Zone */ }
.drag-and-drop #drop-zone p {
margin: 0;
}
.drag-and-drop #drop-zone .drop-instruction {
font-size: 0.9em;
color: #777;
}
.drag-and-drop ul#uploaded-files {
list-style-type: none;
margin: 10px 0 20px 0; padding: 0; }
.drag-and-drop ul#uploaded-files li.uploaded-file {
margin: 5px 0; }
.drag-and-drop ul#uploaded-files li.uploaded-file button {
position: relative; top: 4px;
margin: 0 0 0 10px;
font-size: 1.7em; color: #000;
background: none;
border: none;
cursor: pointer;
}
.drag-and-drop #file-info {
font-weight: 500;
}
/* -----------------------------------------------------------------------------------
Image Hover Effect
----------------------------------------------------------------------------------- */
.image-hover-effect,
.image-hover-effect:hover {
overflow: hidden;
text-decoration: none;
-webkit-transform: translateY(0);
transform: translateY(0) }
.image-hover-effect .image-container,
.image-hover-effect .image-container img {
-webkit-transition: transform .3s ease-in-out;
-moz-transition: transform .3s ease-in-out;
-o-transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out;
}
.image-hover-effect .image-container {
margin-bottom: 20px;
overflow: hidden; }
.image-hover-effect .image-container img {
display: block;
margin: 0;
width: 100%; height: auto; max-width: 100%;
-webkit-transform: scale(1);
transform: scale(1)
}
.image-hover-effect:hover .image-container img {
-webkit-transform: scale(1.03);
transform: scale(1.03)
}
/* -----------------------------------------------------------------------------------
Parallax
----------------------------------------------------------------------------------- */
.parallax {
position: relative;
margin: 0 auto 100px auto;
max-width: 1900px;
color: #fff; }
.parallax .text-container {
position: absolute; left: 0; right: 0; top: 80px;
}
.parallax blockquote p {
font-weight: 500; font-size: 27px; line-height: 37px;
}
.parallax blockquote span.author {
font-size: 22px; line-height: 32px; font-weight: 300;
}
.parallax img.image {
height: 100%; width: 100%;
min-height: 300px;
object-fit: cover;
}
@media(min-width:768px) {
.parallax img.image {
min-height: 400px; max-height: 650px;
}
}
@media(min-width:992px) {
.parallax.with-text blockquote p {
font-size: 40px; line-height: 50px;
}
}
/* -----------------------------------------------------------------------------------
Textabschnitt
----------------------------------------------------------------------------------- */
.textabschnitt {
padding-bottom: 70px;
}
.textabschnitt.abstand-entfernen {
padding-bottom: 0;
}
.textabschnitt.einleitung {
padding-bottom: 40px;
}
.textabschnitt.bg-grau {
margin-bottom: 100px; padding: 60px 0 30px 0; }
.textabschnitt .embed-responsive {
margin-top: 20px; margin-bottom: 60px;
}
.textabschnitt .anmerkung-box {
position: relative;
margin-top: 60px; margin-bottom: 30px; padding-top: 20px;
font-size: 14px; line-height: 24px;
}
.textabschnitt .anmerkung-box:before {
position: absolute; top: 0;
content: '';
width: 30%; height: 1px;
background-color: #000;
}
.textabschnitt figure img {
display: block;
margin-bottom: 30px;
max-width: 100%; height: auto;
}
.textabschnitt img.img-fluid {
margin-top: 5px; margin-bottom: 30px;
}
.textabschnitt blockquote {
position: relative;
margin: 60px 0; padding: 60px 20px 30px 70px;
background-color: #eef1f2;
font-size: 19px; line-height: 29px; color: #20445a;
}
.textabschnitt.bg-grau blockquote {
background-color: #fff;
}
.textabschnitt blockquote:before {
position: absolute; top: 67px; left: 20px;
content: "";
width: 34px; height: 34px;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='100pt' height='100pt' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2320445a'%3E%3Cpath d='m2.5 52.602h21.301v4.3008c0 9-7.3008 16.398-16.398 16.398v20.301c20.199 0 36.699-16.5 36.699-36.699v-50.504h-41.602z'/%3E%3Cpath d='m55.898 6.3984v46.199h21.301v4.3008c0 9-7.3008 16.398-16.398 16.398v20.301c20.199 0 36.699-16.5 36.699-36.699v-50.5z'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover; background-repeat: no-repeat;
}
@media (min-width: 768px) {
.textabschnitt blockquote {
padding: 60px 40px 30px 160px;
}
.textabschnitt blockquote:before {
position: absolute; top: 67px; left: 80px;
width: 45px; height: 45px;
}
}
@media (min-width: 1200px) {
.textabschnitt blockquote {
margin-left: -80px; margin-right: -80px; padding-left: 180px; padding-right: 80px;
}
}
.textabschnitt .textabschnitt-image {
margin-top: 70px;
}
.textabschnitt.bg-grau .textabschnitt-image {
margin-bottom: 40px;
}
/* -----------------------------------------------------------------------------------
Proven Expert
----------------------------------------------------------------------------------- */
.proven-expert {
margin-bottom: 100px;
}
/* -----------------------------------------------------------------------------------
Module: Timeline
----------------------------------------------------------------------------------- */
/* General Styles */
.module-timeline {
margin-bottom: 80px; }
.module-timeline ul.timeline {
margin: 0; padding: 0;
width: 100%;
list-style: none; }
/* Item */
.module-timeline ul.timeline li.timeline-item {
padding-left: 40px;
position: relative;
}
.module-timeline ul.timeline li.timeline-item:last-child {
padding-bottom: 0; }
/* Info */
.module-timeline ul.timeline li.timeline-item .timeline-info {
margin: 0 0 8px 0;
font-size: 14px; line-height: 22px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap;
}
/* Marker */
.module-timeline ul.timeline li.timeline-item .timeline-marker {
position: absolute; top: 0; bottom: 0; left: 0;
width: 15px;
}
.module-timeline ul.timeline li.timeline-item .timeline-marker:before {
position: absolute; top: 4px; left: 0;
display: block;
content: "";
height: 15px; width: 15px;
background: transparent;
border: 5px solid #7c9ca4; border-radius: 100%;
}
.module-timeline ul.timeline li.timeline-item .timeline-marker:after {
position: absolute; top: 24px; bottom: 0; left: 7px;
display: block;
content: "";
width: 1px;
background: #7f7f7f;
}
.module-timeline ul.timeline li.timeline-item:last-child .timeline-marker:after {
content: none;
}
/* Content */
.module-timeline ul.timeline li.timeline-item .timeline-content-container {
padding-bottom: 40px; }
.module-timeline ul.timeline li.timeline-item .timeline-content-container .timeline-content {
padding: 40px 0;
background-color: #f5f1ec; }
.module-timeline ul.timeline li.timeline-item .timeline-content-container .timeline-content .container img {
margin-bottom: 15px;
width: 80px; height: 80px;
filter: invert(22%) sepia(40%) saturate(709%) hue-rotate(159deg) brightness(92%) contrast(91%);
}
.module-timeline ul.timeline li.timeline-item .timeline-content-container .timeline-content .container p:last-child {
margin-bottom: 0;
}
@media (max-width: 767px) {
.module-timeline ul.timeline li.timeline-item .timeline-content-container .timeline-content {
padding: 30px 10px; }
.module-timeline ul.timeline li.timeline-item .timeline-content-container .timeline-content .container img {
width: 60px; height: 60px;
}
}
/*----------------------------------------------
MOD: TIMELINE CENTERED (Optional)
----------------------------------------------*/
@media (min-width: 992px) {
.module-timeline ul.timeline.timeline-centered,
.module-timeline ul.timeline.timeline-centered li.timeline-item,
.module-timeline ul.timeline.timeline-centered li.timeline-item .timeline-info,
.module-timeline ul.timeline.timeline-centered li.timeline-item .timeline-marker,
.module-timeline ul.timeline.timeline-centered li.timeline-item .timeline-content-container {
display: block;
margin: 0; padding: 0;
}
.module-timeline ul.timeline.timeline-centered li.timeline-item {
padding-bottom: 40px;
overflow: hidden; }
.module-timeline ul.timeline.timeline-centered li.timeline-item .timeline-marker {
position: absolute; left: 50%;
margin-left: -7.5px;
}
.module-timeline ul.timeline.timeline-centered li.timeline-item .timeline-info,
.module-timeline ul.timeline.timeline-centered li.timeline-item .timeline-content-container {
width: 50%;
}
.module-timeline ul.timeline li.timeline-item .timeline-content-container .timeline-content {
padding: 40px 10px;
background-color: #f5f1ec; }
.module-timeline ul.timeline.timeline-centered > li.timeline-item:nth-child(odd) .timeline-info {
float: left;
padding-right: 30px;
text-align: right;
}
.module-timeline ul.timeline.timeline-centered > li.timeline-item:nth-child(odd) .timeline-content-container {
float: right;
padding-left: 30px;
text-align: left;
}
.module-timeline ul.timeline.timeline-centered > li.timeline-item:nth-child(even) .timeline-info {
float: right;
padding-left: 30px;
text-align: left;
}
.module-timeline ul.timeline.timeline-centered > li.timeline-item:nth-child(even) .timeline-content-container {
float: left;
padding-right: 30px;
}
}
/* -----------------------------------------------------------------------------------
Textabschnitt mit Icon
----------------------------------------------------------------------------------- */
.textabschnitt-mit-icon {
padding: 0 0 80px 0;
}
.textabschnitt-mit-icon.bg-grau {
margin-bottom: 100px;
padding: 60px 0 30px 0; }
.textabschnitt-mit-icon .icon-box img.image {
margin-bottom: 20px;
width: 160px; height: auto;
}
@media (max-width: 767px) {
.textabschnitt-mit-icon .icon-box img.image {
margin: 0 auto 25px auto;
max-width: 100px; height: auto;
}
}
/* -----------------------------------------------------------------------------------
Icon Boxen (2-4 Spalten)
----------------------------------------------------------------------------------- */
.icon-boxen {
margin-bottom: 60px;
}
.icon-boxen.bg-grau,
.icon-boxen.bg-blau {
margin-bottom: 100px; padding: 70px 0 40px 0; }
.icon-boxen.bg-blau .einleitung,
.icon-boxen.bg-blau .einleitung h2 {
color: #fff;
}
.icon-boxen .row [class^="col"] {
margin-bottom: 40px; }
.icon-boxen .box {
padding-top: 40px; padding-bottom: 10px;
height: 100%;
background-color: #f5f1ec;
}
.icon-boxen.bg-grau .box,
.icon-boxen.bg-blau .box {
background-color: #fff; }
.icon-boxen .box .icon img.image {
max-width: 52px; height: auto;
margin-bottom: 20px;
}
.icon-boxen .box.bg-blau,
.icon-boxen .box.bg-blau h3 {
color: #fff;
}
.icon-boxen .box ul {
margin-top: -20px;
}
.icon-boxen .box h3 {
margin-bottom: 20px;
}
@media (min-width: 1400px) {
.icon-boxen .box {
}
}
/* -----------------------------------------------------------------------------------
Bewertungen
----------------------------------------------------------------------------------- */
.bewertungsportale.row [class^="col"] {
margin-bottom: 40px; }
.bewertungsportale .content {
padding: 40px 15px;
height: 100%;
color: #fff; text-align: center;
}
.bewertungsportale .content.jameda {
background-color: #20445a;
}
.bewertungsportale .content.proven-expert {
background-color: #7c9ca4;
}
.bewertungsportale .content h2,
.bewertungsportale .content h3 {
margin: 0 auto 30px auto;
max-width: 200px;
font-size: 18px; line-height: 28px; color: #fff;
}
.proven-expert-siegel {
margin: 0 auto 10px auto;
width: 160px;
}
/* Google Batch */
.google-batch {
margin: 0 auto; padding: 15px;
width: 260px; overflow: hidden;
text-align: left;
background-color: #fff;
border-top: 8px solid #20445a;
border-radius: 5px; }
.google-batch .icon {
float: left;
width: 60px; overflow: hidden; }
.google-batch .icon img {
display: block;
width: 48px; height: auto;
}
.google-batch .rezensionen {
float: left;
overflow: hidden; }
.google-batch .rezensionen .bewertungen-menge {
margin: 4px 0 6px 0;
font-size: 12px; line-height: 12px;
}
.google-batch .rezensionen .bewertung-durchschnitt {
float: left;
margin-right: 10px;
font-size: 24px; line-height: 24px; color: #20445a; font-weight: 400;
}
.google-batch .rezensionen .stars {
float: left;
margin-top: 2px; }
.google-batch .rezensionen .stars .star {
display: inline-block;
width: 19px; height: 19px;
background-size: 100%; background-repeat: no-repeat; background-position: center center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffc107' class='bi bi-star' viewBox='0 0 16 16'%3E%3Cpath d='M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z'/%3E%3C/svg%3E");
}
.google-batch .rezensionen .stars .star.star-filled {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffc107' class='bi bi-star-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/%3E%3C/svg%3E");
}
.google-batch .rezensionen .stars .star.half-filled {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffc107' class='bi bi-star-fill' viewBox='0 0 16 16'%3E%3Cpath d='M5.354 5.119 7.538.792A.516.516 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.537.537 0 0 1 16 6.32a.548.548 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.52.52 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.58.58 0 0 1 .085-.302.513.513 0 0 1 .37-.245l4.898-.696zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.565.565 0 0 1 .162-.505l2.907-2.77-4.052-.576a.525.525 0 0 1-.393-.288L8.001 2.223 8 2.226v9.8z'/%3E%3C/svg%3E");
}
@media (min-width: 768px) {
.bewertungsportale .content {
padding: 40px 30px;
}
}
.bewertungen {
margin-bottom: 100px;
}
.bewertungen .bewertung {
margin-bottom: 100px;
background-color: #f5f1ec;
}
.bewertungen .bewertung .content {
margin: 0 auto; padding: 60px 20px 30px 20px;
max-width: 700px; }
.bewertungen .bewertung .content .stars {
margin-bottom: 25px;
font-weight: 400; font-size: 13px; text-transform: uppercase; }
.bewertungen .bewertung .content .stars .star {
display: inline-block;
width: 23px; height: 23px;
background-size: 100%; background-repeat: no-repeat; background-position: center center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffc107' class='bi bi-star' viewBox='0 0 16 16'%3E%3Cpath d='M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z'/%3E%3C/svg%3E");
}
.bewertungen .bewertung .content .stars .star.star-filled {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffc107' class='bi bi-star-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/%3E%3C/svg%3E");
}
.bewertungen .bewertung .content blockquote {
position: relative;
margin-bottom: 30px; padding-left: 50px;
font-style: italic; color: #20445a;
}
.bewertungen .bewertung .content blockquote:before {
position: absolute; top: 6px; left: 0;
content: "";
width: 34px; height: 34px;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='100pt' height='100pt' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2320445a'%3E%3Cpath d='m2.5 52.602h21.301v4.3008c0 9-7.3008 16.398-16.398 16.398v20.301c20.199 0 36.699-16.5 36.699-36.699v-50.504h-41.602z'/%3E%3Cpath d='m55.898 6.3984v46.199h21.301v4.3008c0 9-7.3008 16.398-16.398 16.398v20.301c20.199 0 36.699-16.5 36.699-36.699v-50.5z'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover; background-repeat: no-repeat;
}
.bewertungen .bewertung .content blockquote cite {
position: relative;
display: block;
margin-top: 25px;
font-size: 15px; font-weight: 300; color: #000; font-style: normal;
}
.bewertungen .bewertung .content blockquote cite span {
font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px;
}
@media (min-width: 768px) {
.bewertungen .bewertung .content {
padding: 60px 30px 30px 30px; }
.bewertungen .bewertung .content blockquote {
padding-left: 60px;
}
.bewertungen .bewertung .content blockquote:before {
width: 40px; height: 40px;
}
}
/* -----------------------------------------------------------------------------------
Kooperationen
----------------------------------------------------------------------------------- */
.kooperationen-container {
margin-bottom: 100px;
}
.kooperationen-container .content {
padding: 60px 15px 30px 15px;
}
.kooperationen-container .content .foto {
margin: 6px 0 20px 0;
}
.kooperationen-container .content .text {
max-width: 700px;
}
@media (max-width: 767px) {
.kooperationen-container .content .foto img.image {
width: 100%; height: auto;
}
}
@media (min-width: 768px) {
.kooperationen-container .content {
padding: 60px 30px 30px 30px;
}
}
/* -----------------------------------------------------------------------------------
FAQ
----------------------------------------------------------------------------------- */
.accordion-container {
margin-bottom: 100px; }
.accordion-container.bg-grau {
padding: 60px 0; }
.accordion-container .accordion-eintrag {
border-bottom: 1px solid #c1c8cd;
}
.accordion-container button.accordion-button {
margin: 0; padding: 20px 0;
font-size: 17px; font-weight: 400;
color: #20445a;
background-color: transparent;
}
.accordion-container button.accordion-button:not(.collapsed) {
color: #20445a;
background-color: transparent;
box-shadow: none;
}
.accordion-container button.accordion-button:not(.collapsed)::after {
background-image: var(--bs-accordion-btn-icon);
}
.accordion-container button.accordion-button:focus {
box-shadow: none;
}
.accordion-container .accordion-eintrag .content {
padding: 0
}
.newsletter {
margin-bottom: 60px; padding: 40px;
text-align: center;
background-color: #eef1f2;
}
/* -----------------------------------------------------------------------------------
Footer
----------------------------------------------------------------------------------- */
footer {
position: relative; z-index: 1000;
padding: 60px 0;
background-color: #20445a;
}
footer *,
footer a:hover {
color: #fff;
}
footer h3 {
opacity: 0.7;
}
footer .infoleiste p {
margin-bottom: 0; }
/* Fokus für Tastatur sichtbar machen */
footer .infoleiste p a:focus-visible {
color: #fff;
outline: 2px solid #34d7ef;
outline-offset: 3px;
}
footer .infoleiste [class^="col-"] {
margin-bottom: 30px;
}
/* Fokus für Tastatur sichtbar machen */
footer .infoleiste .linke-spalte a:focus-visible img {
display: inline-block;
color: #fff;
outline: 2px solid #fff;
outline-offset: 3px;
}
footer .infoleiste .linke-spalte h3 {
padding-top: 20px;
}
footer .infoleiste .newsletter-abo {
padding: 20px 15px;
text-align: left;
background-color: rgba(255, 255, 255, 0.12);
}
footer .infoleiste .newsletter-abo form {
margin-bottom: 10px;
}
@media (min-width: 768px) {
footer .infoleiste .newsletter-abo {
padding: 20px 30px;
}
}
footer .abschlussleiste {
padding-top: 30px; }
footer .abschlussleiste .linke-spalte a {
margin-right: 15px;
font-weight: 500;
}
/* Fokus für Tastatur sichtbar machen */
footer .abschlussleiste .linke-spalte a:focus-visible {
color: #fff;
outline: 2px solid #34d7ef;
outline-offset: 3px;
}
footer .abschlussleiste .linke-spalte i[class^="fa-"],
footer .abschlussleiste .linke-spalte i[class*=" fa-"] {
margin-right: 5px;
font-size: 26px;
}
@media (max-width: 767px) {
body.home footer {
margin-top: 500px;}
}
@media (min-width: 768px) {
footer {
padding: 60px 0; }
footer .abschlussleiste .rechte-spalte {
text-align: left;
}
}
@media (min-width: 992px) {
footer {
padding: 60px 0 40px 0;}
footer .abschlussleiste .rechte-spalte {
text-align: right;
}
}
/* -----------------------------------------------------------------------------------
Proven Expert
----------------------------------------------------------------------------------- */
footer .abschlussleiste .rechte-spalte .pe-richsnippets {
margin-bottom: 20px; }
footer .abschlussleiste .rechte-spalte .pe-richsnippets #pe_stars {
height: 19px;
}
footer .abschlussleiste .rechte-spalte .pe-richsnippets #pe_stars>span svg path {
fill: #c8b174 !important; stroke: #c8b174 !important;
}
footer .abschlussleiste .rechte-spalte .pe-richsnippets #pe_rating>span>.pe_u {
font-size: 13px; line-height:13px; font-weight: 400;
text-decoration: none;
display: inline-block;
vertical-align: 0;
/* erst alles abschwärzen, dann invertieren → reines Weiß */
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
@media (min-width: 768px) {
footer .abschlussleiste .rechte-spalte .pe-richsnippets {
display: inline-block;
margin-bottom: 0; margin-right: 10px;
}
}
/* -----------------------------------------------------------------------------------
Kontakt
----------------------------------------------------------------------------------- */
.kontaktformular-box {
margin-bottom: 80px; padding: 60px 0 30px 0;
}
@media (max-width: 991px) {
.kontaktformular-box .anschrift {
margin-bottom: 80px;
}
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
.kontaktformular-box .anschrift .content {
padding-left: 40px;
}
}
fieldset {
margin-bottom: 40px;
}
fieldset.datenschutz-hinweis {
margin-bottom: 0; }
fieldset.datenschutz-hinweis .form-group {
font-size: 13px; line-height: 23px;
}
.form-group {
margin-bottom: 20px; }
.form-control {
padding: 20px 20px 20px 25px;
height: auto;
font-size: 16px; line-height: normal; color: #151515; font-weight: 300;
background-color: #fff;
border: 1px solid #20445a; border-radius:0;
-webkit-box-shadow: none;
box-shadow: none;
}
.form-control-text {
font-size: 16px; line-height: normal; color: #151515; font-weight: 300;
background-color: transparent;
border: none; border-bottom: 1px solid #20445a;
}
.form-control-text.sm {
width: 50px;
}
.form-control-text.md {
width: 100px;
}
.bg-grau .form-control {
border: 1px solid #fff;
}
.form-control.error {
border: 1px solid #d74846;
}
.form-control.small {
padding: 12px 20px;
}
.form-control:focus {
border-color: #151515;
-webkit-box-shadow: none;
box-shadow: none;
}
.help-block {
display: block;
margin-top: 10px; margin-bottom: 30px; padding-left: 34px;
font-size: 14px; line-height: 24px; color: #7f7f7f;
background: url("../images/icons/question.png") no-repeat left 2px;
background-size: 22px;
}
.form-control::-moz-placeholder {
color: #000; font-weight: 300;
opacity: 1;
}
.form-control::-webkit-input-placeholder {
color: #000; font-weight: 300;
}
.form-control.error::-webkit-input-placeholder {
color: #d74846; font-weight: 300;
}
/* Custom Input File */
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
width: 100%;
font-size: 16px;
font-weight: 300;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
display: inline-block;
overflow: hidden;
padding: 17px 25px;
color: #000;
background-color: #fff;
border: 1px solid #fff;
}
.inputfile + label svg {
width: 24px;
height: 24px;
vertical-align: middle;
margin: -4px 14px 0 0;
}
.error-message {
margin-bottom: 30px; padding: 15px 20px;
color: #d74846;
background-color: #e4d6cd;
border: 1px solid #d74846;
}
.maps-container {
margin-bottom: 80px;
}
/* -----------------------------------------------------------------------------------
Zuweiser Landingpage
----------------------------------------------------------------------------------- */
.kontaktformular.zuweiser .weiterhelfen-box {
margin-bottom: 40px; padding: 30px 20px 1px 20px;
background-color: #f5f1ec;
}
/* -----------------------------------------------------------------------------------
Uniform Plugin
----------------------------------------------------------------------------------- */
.uniform__potty {
position: absolute;
left: -9999px;
}
/* -----------------------------------------------------------------------------------
Cookie Consent
----------------------------------------------------------------------------------- */
:root{
--cc-bg: #20445a;
--cc-bg-light: rgba(255, 255, 255, .2);
--cc-text: #fff;
--cc-border-radius: 0;
--cc-btn-primary-bg: var(--cc-bg);
--cc-btn-primary-text: var(--cc-text);
--cc-btn-primary-hover-bg: var(--cc-bg);
--cc-btn-secondary-bg: var(--cc-bg);
--cc-btn-secondary-text: var(--cc-text);
--cc-btn-secondary-hover-bg: var(--cc-bg);
--cc-btn-border-radius: 0;
--cc-toggle-bg-off: var(--cc-bg);
--cc-toggle-bg-on: var(--cc-bg);
--cc-toggle-bg-readonly: var(--cc-bg);
--cc-toggle-knob-bg: var(--cc-text);
--cc-toggle-knob-icon-color: var(--cc-text);
--cc-block-text: var(--cc-text);
--cc-cookie-category-block-bg: var(--cc-bg-light);
--cc-cookie-category-block-bg-hover: var(--cc-bg-light);
--cc-section-border: var(--cc-text);
--cc-cookie-table-border: var(--cc-text);
--cc-overlay-bg: rgba(0, 0, 0, .4);
--cc-webkit-scrollbar-bg: var(--cc-text);
--cc-webkit-scrollbar-bg-hover: var(--cc-text);
}
.cc_div .cc-link,
.cc_div .cc-link:hover {
border-color: var(--cc-text);
color: var(--cc-text);
}
.cc_div .c-bn {
border: 1px solid var(--cc-text);
}
#s-c-bn.c-bn {
border: none;
}
#s-c-bn {
font-size: 40px;
}
#cm.cloud {
padding: 30px;
}
/* -----------------------------------------------------------------------------------
iframemanager
----------------------------------------------------------------------------------- */
:root{
--im-color: #fff;
--im-bg: #21445a;
--im-link-color: var(--im-color);
--im-link-hover-color: var(--im-color);
--im-btn-color: var(--im-color);
--im-btn-bg: #7c9ca4;
--im-btn-hover-bg: var(--im-btn-bg);
--im-btn-active-box-shadow: none;
--im-btn-s-color: var(--im-color);
--im-btn-s-bg: var(--im-btn-bg);
--im-btn-s-hover-bg: var(--im-btn-bg);
--im-btn-s-active-bg: var(--im-btn-bg);
--im-overlay-bg: rgba(32, 68, 90, 0.85);
}
div.c-an[data-widget] {
margin-bottom: 30px;
}
div[data-service] {
font-size: 16px; font-weight: 300;
}
div[data-service] .cll .c-l-b,div[data-service] .cll .c-la-b {
padding: 20px;
font-family: "Work Sans", sans-serif; font-size: 15px; line-height: 15px; font-weight: 400; text-transform: uppercase;
border-radius: 0;
}
div[data-service] .cll .c-l-b:before {
display: none;
}
/* -----------------------------------------------------------------------------------
Fullscreen Lightbox v3.6.0 Pro
----------------------------------------------------------------------------------- */
.fslightbox-container{
background: #fff !important;
}
.fslightbox-svg-path{
fill: #000 !important;
}
.fslightbox-slide-number-container{
color: #000 !important; display: none !important;
}
.fslightbox-slash{
background: #000 !important;
}
.fslightbox-toolbar{
background: rgba(255,255,255,.65) !important;
}
.fslightbox-slide-btn{
background: rgba(35,35,35,.06) !important;
}
.fslightbox-toolbar-button:nth-child(1),
.fslightbox-toolbar-button:nth-child(2),
.fslightbox-toolbar-button:nth-child(3),
.fslightbox-toolbar-button:nth-child(4),
.fslightbox-toolbar-button:nth-child(5) {
display: none !important;
}
.fslightboxc:after {
background: none !important;
}
.fslightboxci {
color: #000 !important;
font-size: 16px !important;
}