@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: regular;
src: url('https://www.steffenkirchner.de/webfonts/nunito-sans-v15-latin-regular.woff2') format('woff2'),
url('https://www.steffenkirchner.de/webfonts/nunito-sans-v15-latin-regular.woff') format('woff'),
url('https://www.steffenkirchner.de/webfonts/nunito-sans-v15-latin-regular.ttf') format('truetype');
}

@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 900;
src: url('https://www.steffenkirchner.de/webfonts/nunito-sans-v15-latin-900.woff2') format('woff2'),
url('https://www.steffenkirchner.de/webfonts/nunito-sans-v15-latin-900.woff') format('woff'),
url('https://www.steffenkirchner.de/webfonts/nunito-sans-v15-latin-900.ttf') format('truetype');
}

@font-face {
font-family: 'Takota';
font-style: normal;
font-weight: normal;
src: url('https://www.steffenkirchner.de/webfonts/takota.woff') format('woff'),
url('https://www.steffenkirchner.de/webfonts/takota.svg') format('svg');
}

/**************************************************************************************/

html {
}

body {
margin: 0;
padding: 0;
font-family: 'Nunito Sans', sans-serif;
font-size: 3.8vw;
line-height: 1.4em;
font-weight: 300;
text-align: center;
color: #232A56;
background-color: #FFFFFF;
}

body.nofade .fade {
opacity: 1 !important;
transform: translateY(0) !important;
}

h1, h2, h3, .hltab {
margin: 0;
padding: 0;
font-family: 'Nunito Sans', sans-serif;
font-size: 7.5vw;
line-height: 1.2em;
font-weight: 900;
margin-top: 30px;
margin-bottom: 20px;
text-align: center;
color: #232A56;
hyphens: auto;
}

h1.start {
display: none;
}

h2.hlstartbild {
font-weight: 700;
font-size: 5.0vw;
line-height: 1.2em;
margin: 0;
margin-left: -10px;
padding: 0;
color: #FFFFFF;
}

h2.hlbgblau {
margin-top: 0;
}

h2.hlbggelb {
margin-top: 0;
}

h2.hlhand {
font-size: 6.0vw;
line-height: 1.2em;
font-family: 'Takota';
margin-top: 0;
}

h2.hlteaser, h3.hlteaser {
font-size: 6.0vw;
line-height: 1.3em;
font-weight: 900;
margin: 0;
padding: 0;
width: 80%;
color: #FFFFFF;
text-transform: uppercase;
hyphens: auto;
}

.hlteasertext {
display: block;
margin-top: 20px;
font-size: 1.3vw;
line-height: 1.4em;
font-weight: normal;
text-transform: none;
hyphens: none;
}

h3.hltab, .hltab {
margin-top: 10px;
margin-bottom: 10px;
}

h3.hltabbg {
font-size: 4.5vw;
line-height: 1.3em;
color: #FFFFFF;
margin-top: 30px;
margin-bottom: 20px;
}

h3.hltext {
font-size: 100%;
font-weight: 900;
margin-top: 10px;
margin-bottom: 10px;
}

h3.hltext2 {
font-size: 100%;
font-weight: 300;
margin-top: 10px;
margin-bottom: 10px;
}

h3.hltextleft {
font-size: 100%;
line-height: 1.4em;
font-weight: 900;
margin: 0;
padding: 0;
text-align: left;
}

a {
color: #232A56;
text-decoration: none;
transition: all .2s ease-out;
font-weight: 900;
}

a:hover {
color: #9AA5CB;
text-decoration: none;
}

strong {
font-weight: 900;
}

img {
border: none;
}

.imgsize, .imgsizelazy {
max-width: 100%;
height: auto;
}

#container img {
display: block;
}

.imgsizemax {
width: 100%;
height: auto;
display: block;
}

.imgsizehalf {
max-width: 50%;
height: auto;
margin-left: auto;
margin-right: auto;
}

.imgrund {
width: 150px;
height: 150px;
border-radius: 150px 150px 150px 150px;
display: block;
margin-bottom: 20px;
border: 2px solid #F9C524;
}

.imgstern {
position: relative;
width: 157.5px;
height: 150px;
clip-path: polygon( 50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

.imgborder {
border-radius: 20px;
}

.imgsizemax {
width: 100%;
height: auto;
}

.imgcenter {
margin-left: auto;
margin-right: auto;
}

.imgdesktop {
display: none;
}

video {
display: block;
margin: 0 auto;
max-width: 100% !important;
height: auto !important;
}

input.nlinput {
font-family: 'Nunito Sans', sans-serif;
font-size: 100%;
color: #232A56;
border: 1px solid #232A56;
box-sizing: border-box;
padding: 10px 3%;
border-radius: 10px;
width: 60%;
margin-bottom: 15px;
}

ul.liste {
list-style-type: disc;
list-style-position: outside;
padding: 0;
margin-left: 20px;
text-align: left;
}

ul.liste li {
padding-left: 10px;
}

#clear {
clear: both;
}

.wehinweis {
display: none;
}

/**************************************************************************************/

#container {
margin: 0em auto;
width: 90%;
}

.fade {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.6s ease-out 0.3s, transform 0.6s ease-out 0.3s;
}

.fade.visible {
opacity: 1;
transform: translateY(0);
}

@media print {
.fade {
opacity: 1 !important;
transform: translateY(0) !important;
}
}

/**************************************************************************************/

#startbild {
padding-top: 60px;
position: relative;
text-align: center;
}

#startbildcontent {
position: absolute;
top: 54%;
left: 5%;
transform: translateY(-50%);
width: 90%;
text-align: center;
font-size: 3.6vw;
line-height: 1.4em;
color: #FFFFFF;
}

#startbildbg {
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 100%;
background: rgb(35,42,86);
background: linear-gradient(0deg, rgba(35,42,86,1) 0%, rgba(35,42,86,0) 100%);
transition: all .2s ease-out;
z-index: 2;
}

/**************************************************************************************/

#headerbild {
padding-top: 60px;
}

.headerbild {
display: none;
}

.margtop, .margtop2 {
margin-top: 30px;
}

#btn {
margin-top: 30px;
text-align: center;
}

.btn {
display: inline-block;
background-color: #F9C524;
padding: 15px 25px;
text-decoration: none;
transition: all .2s ease-out;
color: #232A56;
text-transform: uppercase;
font-weight: normal;
border-radius: 10px;
line-height: 1.0em;
border: none;
cursor: pointer;
position: relative;
animation-name: btnmove;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}

@keyframes btnmove {
0% {left: 0}
1% {left: -3px}
2% {left: 5px}
3% {left: -8px}
4% {left: 8px}
5% {left: -5px}
6% {left: 3px}
7% {left: 0}
}

.btn:hover {
color: #FFFFFF;
background-color: #232A56;
transform: scale(1.1);
}

#bgblau {
background-color: #E1E0F2;
background: url(https://www.steffenkirchner.de/img/layout/bgblau.jpg) no-repeat top right; 
background-size: cover;
padding: 20px 0;
}

#bggelb {
background: rgb(254,247,228);
background: linear-gradient(90deg, rgba(254,247,228,1.0) 0%, rgba(254,247,228,0.0) 100%);
padding: 30px 0;
}

#teaserimg, #imgwelle {
position: relative;
}

#teaserbg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: all .2s ease-out;
background: rgba(35,42,86, 0.70);
display: flex;
align-items: center;
justify-content: center;
}

#teaserimg:hover #teaserbg {
background: rgba(35,42,86, 0.95);
}

#imgwellelayer {
position: absolute;
top: 0;
left: 0;
}

ul.acc {
position: relative;
padding: 0;
margin: 0;
list-style: none;
}
  
ul.acc li {
position: relative;
display: block;
width: 100%;
height: auto;
padding: 20px;
box-sizing: border-box;
margin: 0 0 10px 0;
border: 1px solid #F9C524;
border-radius: 5px;
cursor: pointer;
}
    
ul.acc li.active h3:after {
transform: rotate(45deg);
}
    
ul.acc h3 {
position: relative;
display: block;
width: 90%;
cursor: pointer;
margin: 0;
padding: 0 10% 0 0;
font-weight: 300;
}
      
ul.acc h3:after {
content: "\2b";
font-family: "fontawesome";
position: absolute;
right: 0;
top: 0;
color: #F9C524;
transition: all 0.3s ease-in-out;
font-size: 180%;
}

.accmore {
margin-top: 20px;
}

.bxwrapper {
position: relative;
width: 80%;
padding: 0 10%;
}

.bxwrapper .bx-prev, .bxwrapper .bx-next {
font-size: 200%;
transition: .2s ease;
display: block;
padding: 10px 15px;
box-sizing: border-box;
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.7);
}

.bxwrapper .bx-prev {
left: 0;
}

.bxwrapper .bx-next {
right: 0;
text-align: right;
}

.disabled {
opacity: 0.3;
cursor: inherit;
}

.tabbg {
border-radius: 20px;
padding: 20px;
border-box: box-sizing;
}

.tabbg2 {
border-radius: 20px;
}

.tabbg img {
margin-bottom: 20px;
}

.tabbggelb {
color: #232A56;
background-color: #F9C524;
}

.tabbgblau {
background-color: #232A56;
color: #FFFFFF;
}

/**************************************************************************************/

#whatsapp {
position: fixed;
bottom: 5vh;
right: 0;
background-color: #F9C524;
color: #FFFFFF;
z-index: 10;
padding: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
font-size: 90%;
line-height: 1.1em;
font-weight: 700;
opacity: 0;
transition: all .2s ease-out;
visibility: hidden;
pointer-events: none;
}

#whatsapp.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

#whatsapp:hover {
transform: scale(1.1);
}

#whatsapp i {
color: #FFFFFF;
display: block;
font-size: 260%;
line-height: 1.1em;
margin-bottom: 5px;
}

/**************************************************************************************/

#tabzweierwrapper {
position: relative;
padding: 50px 50px 100px 50px;
}

#tabzweierwrapperleft {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}

#tabzweierwrapperright {
position: absolute;
bottom: 0;
right: 0;
pointer-events: none;
}

#tabzweierwrapperleft img, #tabzweierwrapperright img {
width: 45vw;
}

#tabzweier, #tabzweierwide, #tabdreier {
display: grid;
gap: 20px;
}

.tabicon {
max-width: 20vw;
}

#tabdreiereinzel i {
font-size: 200%;
color: #F9C524;
margin-top: 30px;
}

.tabcenter {
text-align: center !important;
}

#tabvierereinzel, #tabfuenfereinzel {
background-color: #232A56;
color: #FFFFFF;
padding: 20px;
box-sizing: border-box;
border-radius: 20px;
}

#tabvierereinzel img, #tabfuenfereinzel img {
width: 40%;
margin-top: -40px;
}

/****************************************************************************************************************************************************************************/

@media screen and (max-width: 768px) {
/**************************************************************************************/

body {
-webkit-text-size-adjust: none;
}

/**************************************************************************************/
}

@media screen and (min-width: 800px) {
/**************************************************************************************/

body {
font-size: 130%;
line-height: 1.5em;
}

h1, h2, h3, .hltab {
font-size: 180%;
line-height: 1.4em;
}

h2.hlstartbild {
font-size: 4.5vw;
line-height: 1.1em;
}

h2.hlhand {
font-size: 3.4vw;
line-height: 1.2em;
}

h2.hlteaser, h3.hlteaser {
font-size: 3.0vw;
line-height: 1.3em;
}

h3.hltabbg {
font-size: 1.6vw;
line-height: 1.3em;
}

h3.hltext {
font-size: 100%;
line-height: 1.4em;
}

.imgdesktop {
display: block;
}

.imgmobile {
display: none;
}

#startbildcontent {
font-size: 100%;
line-height: 1.5em;
}

.btn {
font-size: 115%;
line-height: 1.3em;
width: auto;
}

#tabzweier {
grid-template-columns: 1fr 1fr;
}

#tabzweierwide {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 30px;
}

#tabzweierwide2 {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 30px;
}

#tabzweiereinzel {
margin-top: 0;
}

#tabzweierwideeinzel {
text-align: left;
}

.tabimgborder {
border-radius: 20px;
border: 8px solid #F9C524;
box-sizing: border-box;
}

#tabdreier {
grid-template-columns: 1fr 1fr 1fr;
}

#tabvierer {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
}

#tabfuenfer {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 10px;
}

#tabtextborder {
border-radius: 20px;
border: 8px solid #F9C524;
padding: 20px;
box-sizing: border-box;
}

.tabtextbordermarg {
margin-left: 50px;
margin-top: 10px;
position: relative;
}

.tabtextbordermarg img {
position: absolute;
bottom: 20px;
left: -60px;
width: 70px;
}

#tabzweierwrapper {
position: relative;
padding: 30px 50px 60px 50px;
}

#tabzweierwrapperleft img, #tabzweierwrapperright img {
width: 15vw;
}

/**************************************************************************************/
}

@media (min-width : 1300px) {
/**************************************************************************************/

h1, h2, h3, .margtop {
margin-top: 90px;
}

h2.hlstartbild {
font-size: 3.5vw;
line-height: 1.1em;
margin-bottom: 30px;
}

h2.hlteaser, h3.hlteaser {
font-size: 2.5vw;
line-height: 1.2em;
}

.imgcover {
width: 100%;
height: 100%;
object-fit: cover;
}

img[data-object-fit="cover"] {
object-fit: cover;
}

#container {
width: 1300px;
}

#startbild {
height: calc(100vh - 60px) !important;;
}

.headerbild {
display: block;
}

.headerbildmobile {
display: none;
}

.margtop2 {
margin-top: 40px;
}

#btn {
margin-top: 50px;
}

.btn {
font-size: 110%;
line-height: 1.3em;
}

#bgblau, #bggelb {
padding: 100px 0;
}

.tabbg {
padding: 40px;
}

#tabdreier {
display: grid;
gap: 30px;
}

#tabzweierwrapper {
padding: 80px 0 220px 0;
}

/**************************************************************************************/
}

@media screen and (min-width: 1600px) {
/**************************************************************************************/

#tabzweierwrapperleft img, #tabzweierwrapperright img {
width: 100%;
}

/**************************************************************************************/
}