@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");
.block-kacheln {
margin-top: 5rem;
display: flex;
flex-wrap: wrap;
}
.block-kacheln h2 {
width: 100%;
}
.block-kacheln > .reihe4 {
width: 33.333%;
overflow: hidden;
padding: 1rem 1rem 2rem 1rem;
height: 65vh;
}
.block-kacheln > .reihe4 .content {
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
position: relative;
height: 100%;
text-decoration: none !important;
display: block;
}
.block-kacheln > .reihe4 .bild {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
transform: scale(1);
transition: 0.7s ease-in-out all;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.block-kacheln > .reihe4 .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #3d444b;
opacity: 0.3;
transition: 0.7s ease-in-out all;
}
.block-kacheln > .reihe4 .text-container {
color: white !important;
text-decoration: none !important;
padding: 1.5rem;
position: absolute;
bottom: 0;
z-index: 5;
transition: 0.7s ease-in-out all;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.block-kacheln > .reihe4 .text-container .titel {
font-size: 2rem;
font-weight: bolder;
padding-bottom: 1rem;
}
.block-kacheln > .reihe4 .text-container .lines {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.block-kacheln > .reihe4 .text-container .lines span {
background-color: white;
position: absolute;
height: 2px;
width: 0;
transition: 0.7s ease all;
}
.block-kacheln > .reihe4 .text-container .lines span:nth-of-type(even) {
height: 0;
width: 2px;
}
.block-kacheln > .reihe4 .text-container .lines span:nth-of-type(1) {
top: 1rem;
left: 50%;
transform: translateX(-50%);
}
.block-kacheln > .reihe4 .text-container .lines span:nth-of-type(2) {
left: 1rem;
top: 50%;
transform: translateY(-50%);
}
.block-kacheln > .reihe4 .text-container .lines span:nth-of-type(3) {
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
}
.block-kacheln > .reihe4 .text-container .lines span:nth-of-type(4) {
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
.block-kacheln > .reihe4 .text-container .the_text {
transition: 0.7s ease-in-out all;
overflow: hidden;
max-height: 200px !important;
flex: 0;
}
.block-kacheln > .reihe4:hover .bild {
transform: scale(1.1);
}
.block-kacheln > .reihe4:hover .bild::after {
top: 0;
}
.block-kacheln > .reihe4:hover .overlay {
opacity: 0.7;
}
.block-kacheln > .reihe4:hover .text-container .lines span {
width: calc(100% - 1rem);
}
.block-kacheln > .reihe4:hover .text-container .lines span:nth-of-type(even) {
height: calc(100% - 1rem);
width: 2px;
}
.block-kacheln > .reihe4:hover .text-container .the_text {
flex: 1;
}
.block-kacheln > .reihe4:nth-of-type(even) .overlay {
background: #afca0b;
}
.block-kacheln > .reihe4:last-of-type .overlay {
background: #f5a800;
}
@media screen and (max-width: 1000px) {
.block-kacheln > .reihe4 {
width: 50%;
}
}
@media screen and (max-width: 700px) {
.block-kacheln > .reihe4 {
width: 100%;
height: 50vh;
}
.block-kacheln > .reihe4 .bild {
transform: scale(1.1);
}
.block-kacheln > .reihe4 .bild::after {
top: 0;
}
.block-kacheln > .reihe4 .overlay {
opacity: 0.7;
}
.block-kacheln > .reihe4 .text-container .lines span {
width: calc(100% - 1rem);
}
.block-kacheln > .reihe4 .text-container .lines span:nth-of-type(even) {
height: calc(100% - 1rem);
width: 2px;
}
.block-kacheln > .reihe4 .text-container .the_text {
flex: 1;
}
}
.block-kacheln .reihe {
text-decoration: none;
display: flex;
min-height: 25rem;
background-color: #3d444b;
}
.block-kacheln .reihe::before {
display: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.block-kacheln .reihe {
height: 25rem !important;
}
}
.block-kacheln .reihe .bildcontainer {
width: 60%;
min-height: 25rem;
}
.block-kacheln .reihe .bildcontainer .bild {
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (max-width: 700px) {
.block-kacheln .reihe .bildcontainer {
min-height: 19rem;
}
}
.block-kacheln .reihe .text-container {
width: 40%;
color: white;
padding: 2.5rem;
}
.block-kacheln .reihe .text-container .titel {
position: relative;
width: 100%;
height: 100%;
transition: 0.5s ease all;
}
.block-kacheln .reihe .text-container .titel #Ebene_1 {
position: absolute;
width: 55%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 10rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.block-kacheln .reihe .text-container .titel .text {
font-weight: 300;
font-size: 1.5rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.block-kacheln .reihe .text-container .line {
margin-top: 1rem;
margin-bottom: 1rem;
}
.block-kacheln .reihe .text-container .line #Linie {
height: 0;
opacity: 0;
transition: 0.5s ease all;
}
.block-kacheln .reihe .text-container .the_text {
height: 0;
opacity: 0;
transition: 0.4s ease all;
}
.block-kacheln .reihe:nth-of-type(even) {
flex-direction: row-reverse;
background-color: #afca0b;
}
.block-kacheln .reihe:last-of-type {
background-color: #f5a800;
}
.block-kacheln .reihe:hover {
text-decoration: none;
}
.block-kacheln .reihe:hover .text-container .titel {
height: 5rem;
}
.block-kacheln .reihe:hover .text-container .line #Linie {
height: 80px;
opacity: 1;
}
.block-kacheln .reihe:hover .text-container .the_text {
height: 100%;
opacity: 1;
}
@media screen and (min-width: 2000px) {
.block-kacheln .reihe {
min-height: 32rem;
}
.block-kacheln .reihe .text-container {
padding: 5rem;
}
.block-kacheln .reihe .text-container .titel .text {
font-size: 2rem !important;
}
.block-kacheln .reihe:hover .line {
margin-top: 2rem;
}
}
@media screen and (max-width: 600px) {
.block-kacheln .reihe {
flex-direction: column !important;
}
.block-kacheln .reihe .bildcontainer {
width: 100%;
}
.block-kacheln .reihe .bildcontainer .bild {
padding-bottom: 65%;
}
.block-kacheln .reihe .text-container {
width: 100%;
}
.block-kacheln .reihe .text-container .titel {
height: 5rem;
}
.block-kacheln .reihe .text-container .titel #Ebene_1 {
width: 75%;
}
.block-kacheln .reihe .text-container .titel .text {
font-size: 1.4rem;
}
.block-kacheln .reihe .text-container .line #Linie {
height: 80px;
opacity: 1;
}
.block-kacheln .reihe .text-container .the_text {
height: 100%;
opacity: 1;
}
}
.block-kachelnneu {
display: flex;
flex-wrap: wrap;
}
.block-kachelnneu h2 {
width: 100%;
}
.block-kachelnneu > .reihe {
width: 50%;
overflow: hidden;
position: relative;
height: 33vh;
display: block;
color: white;
text-decoration: none;
}
.block-kachelnneu > .reihe .bild {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transform: scale(1.4);
transition: 0.7s ease all;
}
.block-kachelnneu > .reihe .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(61, 68, 75, 0.3);
transition: 0.7s ease all;
}
.block-kachelnneu > .reihe .text-container {
position: relative;
text-align: center;
padding: 2.5rem;
height: 100%;
}
.block-kachelnneu > .reihe .text-container .titel {
font-size: 2rem;
font-weight: bolder;
margin-bottom: 1rem;
transition: 0.7s ease all;
transform: translate3d(0, 6vh, 0px);
margin-top: 5vh;
}
.block-kachelnneu > .reihe .text-container .the_text {
transition: 0.7s ease all;
transform: translate3d(0, 20px, 0);
opacity: 0;
}
.block-kachelnneu > .reihe .text-container .lines {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.block-kachelnneu > .reihe .text-container .lines span {
background-color: white;
position: absolute;
height: 2px;
width: 0;
transition: 0.7s ease all;
}
.block-kachelnneu > .reihe .text-container .lines span:nth-of-type(even) {
height: 0;
width: 2px;
}
.block-kachelnneu > .reihe .text-container .lines span:nth-of-type(1) {
top: 1rem;
left: 50%;
transform: translateX(-50%);
}
.block-kachelnneu > .reihe .text-container .lines span:nth-of-type(2) {
left: 1rem;
top: 50%;
transform: translateY(-50%);
}
.block-kachelnneu > .reihe .text-container .lines span:nth-of-type(3) {
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
}
.block-kachelnneu > .reihe .text-container .lines span:nth-of-type(4) {
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
.block-kachelnneu > .reihe:hover .overlay {
background-color: rgba(61, 68, 75, 0.8);
}
.block-kachelnneu > .reihe:hover .bild {
transform: scale(1);
}
.block-kachelnneu > .reihe:hover .text-container .titel {
transform: translate3d(0, 0, 0px);
}
.block-kachelnneu > .reihe:hover .text-container .lines span {
width: calc(100% - 1rem);
}
.block-kachelnneu > .reihe:hover .text-container .lines span:nth-of-type(even) {
height: calc(100% - 1rem);
width: 2px;
}
.block-kachelnneu > .reihe:hover .text-container .the_text {
transform: translate3d(0, 0, 0);
opacity: 1;
}
@media screen and (max-width: 700px) {
.block-kachelnneu > .reihe {
width: 100%;
height: 50vh;
}
.block-kachelnneu > .reihe .text-container .titel {
transform: translate3d(0, 12vh, 0);
}
}
.block-kachelnneu > .reihe2 {
width: 33.333%;
overflow: hidden;
padding: 1rem 1rem 2rem 1rem;
height: 65vh;
}
.block-kachelnneu > .reihe2 .content {
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
position: relative;
height: 100%;
text-decoration: none !important;
display: block;
}
.block-kachelnneu > .reihe2 .bild {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
transform: scale(1);
transition: 0.7s ease-in-out all;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.block-kachelnneu > .reihe2 .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(0deg, #3d444b 0%, rgba(253, 187, 45, 0) 100%);
transition: 0.7s ease-in-out all;
}
.block-kachelnneu > .reihe2 .text-container {
color: white !important;
text-decoration: none !important;
padding: 1rem;
position: absolute;
bottom: 0;
z-index: 5;
transition: 0.7s ease-in-out all;
}
.block-kachelnneu > .reihe2 .text-container .titel {
font-size: 2rem;
font-weight: bolder;
padding-bottom: 1rem;
}
.block-kachelnneu > .reihe2 .text-container .the_text {
transition: 0.7s ease-in-out all;
overflow: hidden;
max-height: 300px;
}
.block-kachelnneu > .reihe2:hover .bild {
transform: scale(1.1);
}
.block-kachelnneu > .reihe2:hover .bild::after {
top: 0;
}
.block-kachelnneu > .reihe2:hover .overlay {
top: 100%;
}
.block-kachelnneu > .reihe2:hover .text-container .the_text {
height: 0 !important;
}
@media screen and (max-width: 1000px) {
.block-kachelnneu > .reihe2 {
width: 50%;
}
}
@media screen and (max-width: 700px) {
.block-kachelnneu > .reihe2 {
width: 100%;
height: 50vh;
}
}
.block-kachelnneu > .reihe3 {
width: 33.333%;
overflow: hidden;
padding: 1rem 1rem 2rem 1rem;
height: 65vh;
}
.block-kachelnneu > .reihe3 .content {
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
position: relative;
height: 100%;
text-decoration: none !important;
display: block;
}
.block-kachelnneu > .reihe3 .bild {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
transform: scale(1);
transition: 0.7s ease-in-out all;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.block-kachelnneu > .reihe3 .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(0deg, #3d444b 0%, rgba(253, 187, 45, 0) 100%);
transition: 0.7s ease-in-out all;
}
.block-kachelnneu > .reihe3 .text-container {
color: white !important;
text-decoration: none !important;
padding: 1rem;
position: absolute;
bottom: 0;
z-index: 5;
transition: 0.7s ease-in-out all;
}
.block-kachelnneu > .reihe3 .text-container .titel {
font-size: 2rem;
font-weight: bolder;
padding-bottom: 1rem;
}
.block-kachelnneu > .reihe3 .text-container .the_text {
transition: 0.7s ease-in-out all;
overflow: hidden;
max-height: 300px;
}
.block-kachelnneu > .reihe3:hover .bild {
transform: scale(1.1);
}
.block-kachelnneu > .reihe3:hover .bild::after {
top: 0;
}
.block-kachelnneu > .reihe3:hover .overlay {
top: 100%;
}
.block-kachelnneu > .reihe3:hover .text-container .the_text {
height: 0 !important;
}
.block-kachelnneu > .reihe3:nth-of-type(even) .overlay {
background: linear-gradient(0deg, #afca0b 0%, rgba(253, 187, 45, 0) 100%);
}
.block-kachelnneu > .reihe3:last-of-type .overlay {
background: linear-gradient(0deg, #f5a800 0%, rgba(253, 187, 45, 0) 100%);
}
@media screen and (max-width: 1000px) {
.block-kachelnneu > .reihe3 {
width: 50%;
}
}
@media screen and (max-width: 700px) {
.block-kachelnneu > .reihe3 {
width: 100%;
height: 50vh;
}
}
.block-kachelnneu > .reihe4 {
width: 33.333%;
overflow: hidden;
padding: 1rem 1rem 2rem 1rem;
height: 65vh;
}
.block-kachelnneu > .reihe4 .content {
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
position: relative;
height: 100%;
text-decoration: none !important;
display: block;
}
.block-kachelnneu > .reihe4 .bild {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
transform: scale(1);
transition: 0.7s ease-in-out all;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.block-kachelnneu > .reihe4 .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #3d444b;
opacity: 0.3;
transition: 0.7s ease-in-out all;
}
.block-kachelnneu > .reihe4 .text-container {
color: white !important;
text-decoration: none !important;
padding: 1.5rem;
position: absolute;
bottom: 0;
z-index: 5;
transition: 0.7s ease-in-out all;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.block-kachelnneu > .reihe4 .text-container .titel {
font-size: 2rem;
font-weight: bolder;
padding-bottom: 1rem;
}
.block-kachelnneu > .reihe4 .text-container .lines {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.block-kachelnneu > .reihe4 .text-container .lines span {
background-color: white;
position: absolute;
height: 2px;
width: 0;
transition: 0.7s ease all;
}
.block-kachelnneu > .reihe4 .text-container .lines span:nth-of-type(even) {
height: 0;
width: 2px;
}
.block-kachelnneu > .reihe4 .text-container .lines span:nth-of-type(1) {
top: 1rem;
left: 50%;
transform: translateX(-50%);
}
.block-kachelnneu > .reihe4 .text-container .lines span:nth-of-type(2) {
left: 1rem;
top: 50%;
transform: translateY(-50%);
}
.block-kachelnneu > .reihe4 .text-container .lines span:nth-of-type(3) {
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
}
.block-kachelnneu > .reihe4 .text-container .lines span:nth-of-type(4) {
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
.block-kachelnneu > .reihe4 .text-container .the_text {
transition: 0.7s ease-in-out all;
overflow: hidden;
max-height: 200px !important;
flex: 0;
}
.block-kachelnneu > .reihe4:hover .bild {
transform: scale(1.1);
}
.block-kachelnneu > .reihe4:hover .bild::after {
top: 0;
}
.block-kachelnneu > .reihe4:hover .overlay {
opacity: 0.7;
}
.block-kachelnneu > .reihe4:hover .text-container .lines span {
width: calc(100% - 1rem);
}
.block-kachelnneu > .reihe4:hover .text-container .lines span:nth-of-type(even) {
height: calc(100% - 1rem);
width: 2px;
}
.block-kachelnneu > .reihe4:hover .text-container .the_text {
flex: 1;
}
.block-kachelnneu > .reihe4:nth-of-type(even) .overlay {
background: #afca0b;
}
.block-kachelnneu > .reihe4:last-of-type .overlay {
background: #f5a800;
}
@media screen and (max-width: 1000px) {
.block-kachelnneu > .reihe4 {
width: 50%;
}
}
@media screen and (max-width: 700px) {
.block-kachelnneu > .reihe4 {
width: 100%;
height: 50vh;
}
.block-kachelnneu > .reihe4 .bild {
transform: scale(1.1);
}
.block-kachelnneu > .reihe4 .bild::after {
top: 0;
}
.block-kachelnneu > .reihe4 .overlay {
opacity: 0.7;
}
.block-kachelnneu > .reihe4 .text-container .lines span {
width: calc(100% - 1rem);
}
.block-kachelnneu > .reihe4 .text-container .lines span:nth-of-type(even) {
height: calc(100% - 1rem);
width: 2px;
}
.block-kachelnneu > .reihe4 .text-container .the_text {
flex: 1;
}
}
.block-kachelnneu:last-child .overlay {
background: #f5a800;
}
.block-news {
background-color: #ededed;
}
.block-news .content {
width: 90%;
margin-left: auto;
margin-right: auto;
padding-top: 3rem;
padding-bottom: 3rem;
}
.block-news .content h2 {
margin-bottom: 1.5rem;
}
.block-news .content .beitrag {
padding: 0 2rem;
color: #3d444b;
}
.block-news .content .beitrag .image {
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: auto;
padding-bottom: 56%;
}
.block-news .content .beitrag .meta {
border-bottom: 1px solid rgba(175, 202, 11, 0.6);
margin: 0.5rem 0;
}
.block-news .content .beitrag .meta .tags ul {
display: flex;
padding-left: 0;
list-style-type: none;
margin-bottom: 0;
justify-content: center;
}
.block-news .content .beitrag .meta .tags li {
padding-right: 5px;
}
.block-news .content .beitrag .meta .tags li a {
pointer-events: none;
color: #afca0b;
text-decoration: none;
}
.block-news .content .beitrag .meta .tags li a::before {
content: "#";
display: initial;
background: none;
height: auto;
width: auto;
}
.block-news .content .beitrag .content {
margin-bottom: 0.5rem;
}
.block-news .content .beitrag .content h4 {
color: #afca0b;
}
.block-news .content .beitrag .content .excerpt {
font-size: 1.25rem;
font-weight: 300;
}
.block-news .content .beitrag .content .excerpt p {
margin-bottom: 0;
}
.block-news .content .beitrag a {
padding-top: 0.5rem;
color: #afca0b;
text-decoration: underline;
}
.block-news .content .beitrag a:hover {
color: #afca0b;
}
.block-news .content .custom-arrow {
position: absolute;
top: 50%;
color: #afca0b;
transform: translateY(-50%);
z-index: 1;
cursor: pointer;
font-size: 1.5rem;
}
.block-news .content .custom-arrow.custom-arrow-left {
left: 14px;
transition: 0.3s ease;
}
.block-news .content .custom-arrow.custom-arrow-right {
right: 14px;
transition: 0.3s ease;
}
.block-button {
margin-bottom: 11rem;
height: 100%;
width: 100%;
}
.block-button .button {
display: block;
position: relative;
}
.block-button .button::before {
display: none;
}
.block-button .button .text {
position: absolute;
z-index: 1;
top: 1.5rem;
left: 51%;
color: white;
font-size: 2rem;
transform: translateX(-50%);
}
.block-button .button #Button_blatt {
position: absolute;
max-width: 27rem;
left: 50%;
transform: translateX(-50%);
height: 7rem;
width: 100%;
background-size: contain;
background-repeat: no-repeat;
}
.block-team .reihe {
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: row;
}
.block-team .reihe .person {
width: 23%;
margin: 3rem 0.5rem;
position: relative;
}
.block-team .reihe .person .bild {
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding-bottom: 100%;
}
.block-team .reihe .person .name {
position: absolute;
left: 0;
right: 0;
transform: translateY(-46%);
}
.block-team .reihe .person .name .text {
position: absolute;
top: 46%;
width: 100%;
left: 52%;
transform: translate(-50%, -50%);
font-size: 1.25rem;
color: white;
line-height: 1.2;
}
.block-team .reihe .person .name .text .funktion {
font-weight: 100;
font-size: 1.15rem;
}
.block-team .reihe .person .name .mailsig {
color: white;
font-weight: bold;
position: absolute;
bottom: 2.5rem;
right: 2rem;
text-decoration: none;
}
@media screen and (max-width: 1550px) {
.block-team .reihe .person {
width: 29%;
}
}
@media screen and (max-width: 1150px) {
.block-team .reihe .person {
width: 40%;
}
}
@media screen and (max-width: 800px) {
.block-team .reihe .person {
width: 75%;
}
.block-team .reihe .person .name .text {
font-size: 1.15rem;
}
.block-team .reihe .person .name .text .funktion {
font-size: 0.8rem;
}
.block-team .reihe .person .name .mailsig {
bottom: 38%;
right: 1.75rem;
}
}
.block-events {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.block-events .event {
width: 25%;
cursor: pointer;
}
.block-events .event .image {
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 0;
padding-bottom: 51%;
}
.block-events .event .bottom {
height: 17rem;
padding: 1rem;
text-align: left;
display: flex;
flex-direction: column;
transition: all ease 0.2s;
}
.block-events .event .bottom .title {
color: #afca0b;
font-size: 1.8rem;
font-weight: 400;
transition: all ease 0.2s;
}
.block-events .event .bottom .datum {
font-size: 1.25rem;
transition: all ease 0.2s;
}
.block-events .event .bottom .ort {
color: #6b7783;
transition: all ease 0.2s;
}
.block-events .event .bottom a {
margin-top: auto;
transition: all ease 0.2s;
}
.block-events .event:nth-of-type(odd) {
background-color: #eaeaea;
}
.block-events .event:nth-of-type(even) {
background-color: #e5e5e5;
}
.block-events .event:hover .bottom {
background-color: #afca0b;
}
.block-events .event:hover .bottom .title, .block-events .event:hover .bottom a, .block-events .event:hover .bottom .datum, .block-events .event:hover .bottom .ort {
color: white;
}
@media screen and (max-width: 1350px) {
.block-events .event {
width: 33.333%;
}
}
@media screen and (max-width: 850px) {
.block-events .event {
width: 50%;
}
}
@media screen and (max-width: 630px) {
.block-events .event {
width: 100%;
}
}
.modal-event .modal-dialog {
margin-top: 6rem;
}
.modal-event .modal-dialog .modal-content {
border: none;
border-radius: 0;
background-color: transparent;
}
.modal-event .modal-dialog .modal-content .modal-header {
border: none;
border-radius: 0;
background-color: #afca0b;
margin-bottom: 1rem;
color: white;
}
.modal-event .modal-dialog .modal-content .modal-header h5 {
font-size: 2.2rem;
}
.modal-event .modal-dialog .modal-content .modal-header .close {
margin: 0;
}
.modal-event .modal-dialog .modal-content .modal-header .close span {
opacity: 1;
color: white;
}
.modal-event .modal-dialog .modal-content .modal-body {
border: none;
background-color: white;
padding: 1rem;
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.modal-event .modal-dialog .modal-content .modal-body .text {
margin-bottom: 1rem;
text-align: left;
}
.modal-event .modal-dialog .modal-content .modal-body .text p {
margin-bottom: 0;
}
.modal-event .modal-dialog .modal-content .modal-body .text .datum {
font-size: 1.25rem;
color: #afca0b;
}
.modal-event .modal-dialog .modal-content .modal-body .text .liste ul {
list-style-type: none;
padding: 0;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.modal-event .modal-dialog .modal-content .modal-body .text .liste ul li {
margin-right: 1rem;
font-weight: 300;
}
@media screen and (max-width: 800px) {
.modal-event .modal-dialog .modal-content .modal-body .text .liste ul {
flex-direction: column;
}
}
.modal-event .modal-dialog .modal-content .modal-body .text ul {
padding: 0;
}
.modal-event .modal-dialog .modal-content .modal-body .text li {
font-weight: 300;
}
.modal-event .modal-dialog .modal-content .modal-body .text h2 {
font-size: 2rem;
}
.modal-event .modal-dialog .modal-content .modal-body .right {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
}
.modal-event .modal-dialog .modal-content .modal-body .right form {
margin-top: 1rem;
}
.modal-event .modal-dialog .modal-content .modal-body .right form input:focus, .modal-event .modal-dialog .modal-content .modal-body .right form select:focus {
border-color: #d3f216;
box-shadow: 0 0 0 0.2rem rgba(253, 195, 0, 0.25);
}
.modal-event .modal-dialog .modal-content .modal-body .right form .button {
padding: 0.5rem 1rem;
margin-left: auto;
background-color: #afca0b;
color: white;
border: none;
cursor: pointer;
border-radius: 0;
}
.modal-event .modal-dialog .modal-content .modal-body .bild .image {
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
max-width: 900px;
padding-bottom: 51%;
margin-left: auto;
height: auto;
}
@media screen and (max-width: 1200px) {
.modal-event .modal-dialog .modal-content .modal-body {
flex-direction: column;
}
.modal-event .modal-dialog .modal-content .modal-body .right {
width: 100%;
}
}
.modal-event .modal-dialog .modal-footer {
border: none;
padding: 0;
border-top: none;
}
.modal-event .modal-dialog .modal-footer button {
padding: 0.5rem 1rem;
margin-left: auto;
background-color: #afca0b;
color: white;
border: none;
cursor: pointer;
border-radius: 0;
}
@media screen and (min-width: 2000px) {
.modal-event .modal-dialog {
max-width: 70%;
}
}
@media screen and (min-width: 576px) {
.modal-event .modal-dialog {
max-width: 80%;
}
}
@media screen and (max-width: 800px) {
.modal-event .modal-dialog .modal-content .modal-body .unten {
display: flex;
flex-direction: column;
justify-content: center;
}
.modal-event .modal-dialog .modal-content .modal-body .unten .anmeldung {
width: 100%;
margin-right: 0;
}
.modal-event .modal-dialog .modal-content .modal-body .unten .bilder {
width: 100%;
margin-top: 1rem;
}
.modal-event .modal-dialog .modal-content .modal-body .unten .bilder .image {
padding-bottom: 60%;
}
}
.block-referenzen .content {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: row;
}
@media screen and (max-width: 900px) {
.block-referenzen .content {
padding-left: 1rem;
padding-right: 1rem;
}
}
@media screen and (min-width: 1600px) {
.block-referenzen .content {
max-width: 1200px;
}
}
@media screen and (min-width: 2000px) {
.block-referenzen .content {
max-width: 1600px;
}
}
.block-referenzen .content .referenz {
width: 50%;
padding: 0 2rem;
margin-bottom: 2rem;
}
.block-referenzen .content .referenz .oben .slider .twenty20 {
margin-bottom: 0;
}
.block-referenzen .content .referenz .oben .slider .twenty20, .block-referenzen .content .referenz .oben .slider .twentytwenty-wrapper, .block-referenzen .content .referenz .oben .slider .twentytwenty-container, .block-referenzen .content .referenz .oben .slider img {
height: 100%;
}
.block-referenzen .content .referenz .oben .slider .item {
height: 20rem;
display: block;
}
.block-referenzen .content .referenz .oben .slider .item .img {
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
}
.block-referenzen .content .referenz .oben .slider .custom-arrow {
position: absolute;
top: 50%;
color: #afca0b;
transform: translateY(-50%);
z-index: 1;
cursor: pointer;
font-size: 1.5rem;
}
.block-referenzen .content .referenz .oben .slider .custom-arrow.custom-arrow-left {
left: -1.5rem;
transition: 0.3s ease;
}
.block-referenzen .content .referenz .oben .slider .custom-arrow.custom-arrow-right {
right: -1.5rem;
transition: 0.3s ease;
}
.block-referenzen .content .referenz .unten {
color: #3d444b;
}
.block-referenzen .content .referenz .unten .title {
color: #afca0b;
font-size: 2rem;
font-weight: 300;
}
@media screen and (min-width: 2000px) {
.block-referenzen .content .referenz .oben .slider .item {
height: 30rem;
}
}
@media screen and (max-width: 1150px) {
.block-referenzen .content .referenz {
width: 100%;
}
.block-referenzen .content .referenz .oben .slider .item {
height: 35rem;
}
}
@media screen and (max-width: 800px) {
.block-referenzen .content .referenz .oben .slider .item {
height: auto;
}
.block-referenzen .content .referenz .oben .slider .item img {
height: auto;
}
}
.block-impressionen {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 900px) {
.block-impressionen {
padding-left: 1rem;
padding-right: 1rem;
}
}
@media screen and (min-width: 1600px) {
.block-impressionen {
max-width: 1200px;
}
}
@media screen and (min-width: 2000px) {
.block-impressionen {
max-width: 1600px;
}
}
.block-impressionen .hidden .vorschau { width: calc(100% - 6rem);
margin-left: auto;
margin-right: auto;
}
.block-impressionen .hidden .vorschau .slick-slide {
margin: 0.25rem;
}
.block-impressionen .hidden .vorschau .pics {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding-bottom: 75%;
margin: 0.25rem;
display: block;
}
.block-impressionen .hidden .vorschau .arrow-container {
position: absolute;
width: 7rem;
top: 0;
z-index: 1;
transition: all ease 0.6s;
cursor: pointer;
opacity: 1;
height: calc(100% - 6px);
}
.block-impressionen .hidden .vorschau .arrow-container.cont-left {
left: 0;
}
.block-impressionen .hidden .vorschau .arrow-container.cont-right {
right: 0;
}
.block-impressionen .hidden .vorschau .arrow-container .custom {
display: block !important;
position: absolute;
top: 50%;
width: 5rem;
height: 5rem;
transform: translateY(-50%);
}
.block-impressionen .hidden .vorschau .arrow-container .custom::after {
position: absolute;
width: 2rem;
height: 2rem;
content: "";
top: 50%;
left: 50%;
border-right: 3px solid #afca0b;
border-bottom: 3px solid #afca0b;
transition: 0.3s ease;
}
.block-impressionen .hidden .vorschau .arrow-container .custom.custom-next {
right: -4rem;
}
.block-impressionen .hidden .vorschau .arrow-container .custom.custom-next::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.block-impressionen .hidden .vorschau .arrow-container .custom.custom-prev {
z-index: 1;
left: -4rem;
right: auto;
}
.block-impressionen .hidden .vorschau .arrow-container .custom.custom-prev::after {
transform: translate(-50%, -50%) rotate(135deg);
}
.block-geschichte {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 900px) {
.block-geschichte {
padding-left: 1rem;
padding-right: 1rem;
}
}
@media screen and (min-width: 1600px) {
.block-geschichte {
max-width: 1200px;
}
}
@media screen and (min-width: 2000px) {
.block-geschichte {
max-width: 1600px;
}
}
.block-geschichte .zeitstrahl {
position: relative;
margin-top: 100px;
}
.block-geschichte .zeitstrahl .linevertical {
position: absolute;
width: 1px;
height: 100%;
left: 50%;
border-left: 5px dotted #3d444b;
transform: translateX(-50%);
top: 0;
}
.block-geschichte .zeitstrahl .box {
position: relative;
margin-top: -150px;
}
.block-geschichte .zeitstrahl .box .jahr {
width: 10rem;
height: 3rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
line-height: 2.75rem;
color: white;
font-size: 1.25rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.block-geschichte .zeitstrahl .box .eintrag {
width: 50%;
position: relative;
}
.block-geschichte .zeitstrahl .box .eintrag .horizline {
width: 100%;
position: absolute;
right: 0;
top: 50%;
border-bottom: 5px dotted #3d444b;
z-index: -1;
}
.block-geschichte .zeitstrahl .box .eintrag .body {
width: 70%;
background-color: white;
}
.block-geschichte .zeitstrahl .box .eintrag .body .text {
padding: 1rem;
}
.block-geschichte .zeitstrahl .box .eintrag .body .bild img {
width: 100%;
}
.block-geschichte .zeitstrahl .box .eintrag .galerie .slides .slick-slide img {
max-width: 100%;
}
.block-geschichte .zeitstrahl .box .eintrag .galerie .captions .caption {
padding: 1rem;
}
.block-geschichte .zeitstrahl .box .eintrag .galerie .arrow-container {
position: absolute;
width: 15rem;
top: 0;
z-index: 1;
transition: all ease 0.6s;
cursor: pointer;
opacity: 0;
height: calc(100% - 6px);
}
.block-geschichte .zeitstrahl .box .eintrag .galerie .arrow-container.cont-left {
left: 0;
background: linear-gradient(to right, rgba(78, 85, 92, 0.8) 0%, rgba(125, 185, 232, 0) 100%);
}
.block-geschichte .zeitstrahl .box .eintrag .galerie .arrow-container.cont-right {
right: 0;
background: linear-gradient(to right, rgba(30, 87, 153, 0) 0%, rgba(30, 87, 153, 0.01) 1%, rgba(78, 85, 92, 0.8) 100%);
}
.block-geschichte .zeitstrahl .box .eintrag .galerie .arrow-container .custom {
display: block !important;
position: absolute;
right: 0;
top: 50%;
width: 5rem;
height: 5rem;
transform: translateY(-50%);
}
.block-geschichte .zeitstrahl .box .eintrag .galerie .arrow-container .custom::after {
position: absolute;
width: 2rem;
height: 2rem;
content: "";
top: 50%;
left: 50%;
border-right: 3px solid #afca0b;
border-bottom: 3px solid #afca0b;
transition: 0.3s ease;
}
.block-geschichte .zeitstrahl .box .eintrag .galerie .arrow-container .custom.custom-next::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.block-geschichte .zeitstrahl .box .eintrag .galerie .arrow-container .custom.custom-prev {
z-index: 1;
left: 0;
right: auto;
}
.block-geschichte .zeitstrahl .box .eintrag .galerie .arrow-container .custom.custom-prev::after {
transform: translate(-50%, -50%) rotate(135deg);
}
.block-geschichte .zeitstrahl .box .eintrag .galerie:hover .arrow-container {
opacity: 1;
}
.block-geschichte .zeitstrahl .box .eintrag .galerie:hover .arrow-container.cont-left {
left: 0;
}
.block-geschichte .zeitstrahl .box .eintrag .galerie:hover .arrow-container.cont-right {
right: 0;
}
.block-geschichte .zeitstrahl .box:nth-child(odd) .eintrag {
margin-left: auto;
}
.block-geschichte .zeitstrahl .box:nth-child(odd) .eintrag .body {
margin-left: auto;
}
.block-geschichte .slick-slide img {
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 1000px) {
.block-geschichte .zeitstrahl {
position: relative;
}
.block-geschichte .zeitstrahl .linevertical {
top: -7rem;
}
.block-geschichte .zeitstrahl .box {
margin-top: 0;
}
.block-geschichte .zeitstrahl .box .jahr {
top: -4rem;
}
.block-geschichte .zeitstrahl .box .eintrag {
margin-top: 8rem;
width: 100%;
}
.block-geschichte .zeitstrahl .box .eintrag .body {
width: 100%;
}
}
.block-adressen {
max-width: 1200px;
margin: auto;
}
.block-adressen .kp-address-list {
display: flex;
flex-wrap: wrap;
}
.block-adressen .kp-address-list > .kp-address-block {
width: calc(33.333% - 10px);
margin: 5px;
}
@media (max-width: 900px) {
.block-adressen .kp-address-list > .kp-address-block {
width: calc(50% - 10px);
}
}
@media (max-width: 600px) {
.block-adressen .kp-address-list > .kp-address-block {
width: 100%;
}
}
.block-adressen .kp-address-block {
text-align: left;
}
.block-adressen .kp-address-block > .title {
background-color: #afca0b;
color: white;
padding: 0.25rem;
font-size: 1.5rem;
}
.block-adressen .kp-address-block > * {
padding: 0.25rem;
}
.block-adressen .kp-address-block > .tel, .block-adressen .kp-address-block > .fax, .block-adressen .kp-address-block > .mail {
background-color: #ededed;
color: #3d444b;
font-size: 1.25rem;
}
.block-adressen .kp-address-block > .tel a, .block-adressen .kp-address-block > .fax a, .block-adressen .kp-address-block > .mail a {
color: #3d444b;
text-decoration: none;
}