/* Version: 05.03.2018 */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family:'Open Sans', Arial, Helvetica, sans-serif;
font-size: 100%;
color: #000;
text-decoration: none;
font-weight: normal;
word-spacing: normal;
line-height: 1.3;
background-color: #fff;
/* Hintergrundbilder werden in Chrome mit ausgedruckt */
-webkit-print-color-adjust:exact;
background-image: url(bg.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
body_2 {
font-family:'Open Sans', Arial, Helvetica, sans-serif;
font-size: 100%;
color: #000;
text-decoration: none;
font-weight: normal;
word-spacing: normal;
line-height: 1.3;
background-color: #fff;
/* Hintergrundbilder werden in Chrome mit ausgedruckt */
-webkit-print-color-adjust:exact;
background-image: url(hintergrund_haus.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
p {
margin:0;
}
p:empty {
height: 1.125rem;
}
.titel{
background-color: rgba(0,83,159, 0.6);
padding: 1rem;
}
h1 {
line-height: 1.5;
font-size: 1.5rem;
font-weight: normal;
padding: 0;
margin: 0;
color: #fff;
text-align: center;
}
h3 {
margin: 0;
line-height: 1.5;
font-size: 0.8rem;
font-weight: bold;
color: #000;
padding-bottom: 0.2rem;
}
.flex h3{ color: #fff;}
.frame-outer {
position: relative;
padding: 0;
width: 720px;
margin: 1.3rem auto;
font-size: 0.8rem;
}
.frame-outer::after {
content: "";
display: block;
clear: both;
}
.content {
padding: 2rem 6% 1.4rem 6%;
background-color: #FFF;
}
.content::after {
content: "";
display: block;
clear: both;
}
.content2 {
padding: 1rem 6% 1.6rem 6%;
background-color: #FFF;
}
.content2::after {
content: "";
display: block;
clear: both;
}
.box-left {
float: left;
width: 48%;
}
.box-right {
float: right;
width: 48%;
}
.footer {
}
.footer::after {
content: "";
display: block;
clear: both;
}
img {
max-width: 100%;
height: auto;
width: auto9;
border: 0;
vertical-align: middle;
}
a:link {
color: #000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #00539f;
}
a:active {
text-decoration: none;
color: #000;
}
ul {
margin: 0 auto 1rem 0.5rem;
padding-left: 0.5rem;
list-style-type: disc;
list-style-type: none;
}
li {
position: relative;
margin: auto;
padding: 0.1rem 0;
}
li::before {
position: absolute;
top: 0rem;
left: -0.8rem;
content: "•";
font-size: 1rem;
color: #000;
}
.flex li::before {
position: absolute;
top: 0rem;
left: -0.8rem;
content: "•";
font-size: 1rem;
color: #fff;
}
.clear {
clear: both;
font-size: 0;
line-height: 0;
}
.hide {
display: none;
}
.justifier {
text-align: justify;
}
.justifier:after {
content: "";
display: inline-block;
width: 100%;
}
p:empty {
height: 1rem;
}
.table {
display: table;
width: 100%;
/* border-collapse: collapse; */
table-layout: fixed;
/* border-spacing: 3rem; */
}
.row {
display: table-row;
}
.cell-left,
.cell-right {
display: table-cell;
vertical-align: bottom;
padding: 1rem 3%;
}
.cell-left {
border-right: 15px solid #fff;
}
.cell-right {
border-left: 15px solid #fff;
}
/* .flex {
display: table;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 1rem 0;
}
*/
.flex {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-justify-content: space-between;
justify-content: space-between;
margin: 1rem 0 1.5rem 0;
color: #fff;
}
.left {
width: 48%;
padding: 1rem 3%;
background-color: #00539f;
}
.right {
width: 48%;
padding: 1rem 3%;
background-color: #00539f;
}
.button_box {
text-align: center;
}
.button_box::after {
clear: both;
content: "";
display: block;
}
.button a {
display: inline-block;
background: #00539f;
padding: 0.6rem 2.5rem 0.6rem 2.5rem;
margin: 2rem auto;
cursor: pointer;
border: 0.1rem solid #00539f;
transition: all 140ms ease 0s;
-moz-transition: all 140ms ease 0s;
-webkit-transition: all 140ms ease 0s;
color: #fff;
}
.button a:hover {
background-position: 15px center;
background-color: #fff;
text-decoration: none;
color: #00539f;
}
#logo{text-align: center;}
.flip-card {
background-color: transparent;
width: 350px;
height: 84px;
margin-left: 19%;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
}
/* Style the back side */
.flip-card-back {
background-color: transparent;
transform: rotateY(180deg);
}
/* ------------------- Slider ------------------------- */
.slider-wrap {
max-width:780px;
width: auto;
height: auto;
position:relative;
overflow: hidden;
}
.slideshow {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.slideshow li span {
width: 100%;
height:100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: image 24s linear infinite;
animation: image 24s linear infinite;
}
@keyframes image {
0% {
opacity: 1;
transform: translateX(100%);
}
1% {
transform: translateX(0);
}
25% {
transform: translateX(0);
}
26% {
opacity: 1;
transform: translateX(-100%);
}
27% {
opacity: 0;
transform: translateX(-100%);
}
}
@-webkit-keyframes image {
0% {
opacity: 1;
transform: translateX(100%);
}
1% {
transform: translateX(0);
}
25% {
transform: translateX(0);
}
26% {
opacity: 1;
transform: translateX(-100%);
}
27% {
opacity: 0;
transform: translateX(-100%);
}
}
.slideshow li {
margin:0;
padding:0;
list-style: none;
}
.slideshow li:nth-child(1) span {
}
.slideshow li:nth-child(2) span {
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
.slideshow li:nth-child(4) span {
-webkit-animation-delay: 18s;
animation-delay: 18s;
}
ul.slideshow {
margin: 0;
}
.slider-wrap li::before{
display: none;
}
.slider-wrap ul {
margin:0;
padding-left:0px;
list-style-type: none;
list-style:none;
border-bottom:none;
border-color: #fff;
border-width: 0px;
padding-bottom:5px;
}
.refnr {}
.apply {}
/* BEGINN Slider mit 3 Bildern mit transform Animation */
.slideshow-3-bilder {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.slideshow-3-bilder li span {
width: 100%;
height:100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: image 36s linear infinite;
animation: image-3-bilder 36s linear infinite;
}
@keyframes image-3-bilder {
0% {
opacity: 1;
transform: translateX(100%);
}
1% {
transform: translateX(0);
}
33.33333% {
transform: translateX(0);
}
34.33333% {
transform: translateX(-100%);
}
100%{
transform: translateX(-100%);
opacity: 1;
}
}
@-webkit-keyframes image-3-bilder {
0% {
opacity: 1;
transform: translateX(100%);
}
1% {
transform: translateX(0);
}
33.33333% {
transform: translateX(0);
}
34.33333% {
transform: translateX(-100%);
}
100%{
transform: translateX(-100%);
opacity: 1;
}
}
.slideshow-3-bilder li {
margin:0;
padding:0;
list-style: none;
}
.slideshow-3-bilder li:nth-child(1) span {
}
.slideshow-3-bilder li:nth-child(2) span {
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
.slideshow-3-bilder li:nth-child(3) span {
-webkit-animation-delay: 24s;
animation-delay: 24s;
}
ul.slideshow-3-bilder {
margin:0;
}
.slider-wrap li::before{
display:none;
}
.slider-wrap ul {
margin:0;
padding-left:0px;
list-style-type: none;
list-style:none;
border-bottom:none;
border-color: #fff;
border-width: 0px;
padding-bottom:5px;
}
.slideshow_3 {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.slideshow_3 li span {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: image 18s linear infinite;
animation: image 18s linear infinite;
}
@keyframes image {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
5% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
opacity: 1;
}
38% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes image {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
5% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
opacity: 1;
}
38% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.slideshow_3 li {
margin:0;
padding:0;
list-style: none;
}
.slideshow_3 li:nth-child(1) span {}
.slideshow_3 li:nth-child(2) span {
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.slideshow_3 li:nth-child(3) span {
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
ul.slideshow_3 {
margin: 0;
padding-left: 0;
}
.slideshow_3 li::before {
display: none;
}
/* ENDE Slider mit 3 Bildern mit transform Animation */