*, ::after, ::before {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: "Rubik", sans-serif;
font-weight: 400;
font-size: 18px;
line-height:1.3;
}
h1, h2, h3 {
font-weight: 500;
}
h1 {
font-size: 28px;
}
h2, h3 {
font-size: 24px;
}
strong {
font-weight: 500;
}
img {
max-width: 100%;
}
a {
color: var(--text);
}
a:visited {
color: var(--text);
}
li {
list-style: none;
}  .termsfeed-com---palette-light.termsfeed-com---nb {
position: fixed;
}
body .termsfeed-com---palette-light .cc-nb-okagree {
background-color: var(--cookie-content-accept);
}
body .termsfeed-com---palette-light .cc-nb-reject {
background-color: var(--cookie-content-denial);
}
.row {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
.col {
flex: 1 0 0;
}
.col-1 {
flex: 0 0 auto;
width: 100%;
}
.col-2 {
flex: 0 0 auto;
width: 90%;
}
.col-3 {
flex: 0 0 auto;
width: 100%;
}
.scroll-offset {
scroll-margin-top: 3rem;
}
.scroll-offset-max {
scroll-margin-top: 7rem;
}  nav {
display: flex;
background-color: var(--navbar);
width: 100%;
position: fixed;
z-index: 2;
box-shadow: 0 0 4px -1px #000;
}
nav .logo {
width: 160px;
display: flex;
align-items: center;
overflow: hidden;
transition: all .3s;
padding-top: 3px;
}
.scrolled .logo {
width: 58px;
}
nav .logo a img {
padding: 5px 0 5px 28px;
width: 120px;
max-width: unset;
transition: all .4s;
}
.scrolled nav .logo a img {
width: 95px;
}
nav .menu-inner-wrapper {
display: flex;
flex-direction: row-reverse;
margin-left: auto;
align-items: center;
justify-content: center;
}
nav .navigation_items {
display: flex;
flex-direction: column;
position: absolute;
align-items: center;
justify-content: space-around;
right: 0;
height: 25vh;
width: 40%;
top: 7vh;
background: var(--navbar);
margin: 0;
transform: translateX(100%);
transition: transform 0.3s ease-in;
box-shadow: 0 2px 4px -3.5px #000;
border-radius: 0 0 0 10px;
}
nav .nav-active {
transform: translateX(0%)
}
nav .nav-active + .burger .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
nav .nav-active + .burger .line2 {
opacity: 0;
}
nav .nav-active + .burger .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
nav .navigation_items li {
opacity: 0;
letter-spacing: 1px;
font-size: 17px;
margin: 4px 34px 0 0;
}
nav .navigation_items li a {
text-decoration: none;
margin-bottom: 10px;
color: var(--navbar-text);
}
nav .navigation_items li a:after {
content: '';
display: block;
width: 0;
height: 2px;
background: var(--hover-navbar);
transition: all .250s;
left: 50%;
position: relative;
}
nav .navigation_items li a:hover:after {
width: 100%;
left: 0;
}
nav .menu-inner-wrapper .burger {
cursor: pointer;
margin: 0 22px 0 22px;
}
nav .menu-inner-wrapper .burger div{
width: 25px;
height: 3px;
background: var(--navbar-burger);
margin: 5px;
transition: all 0.3s ease;
pointer-events: none;
border-radius: 2px;
}
nav .social_menu ul {
display: flex;
padding: 0;
}
nav .social_menu ul li a {
display: flex;
padding: 5px;
margin: 0 5px;
background: var(--navbar-social);
box-shadow: 0 2px 4px -3px #000;
border-radius: 50%;
transition: all .2s;
}
nav .social_menu ul li:hover a {
transform: translateY(-5px);
}
nav .social_menu ul li:hover:nth-child(1) a {
background-color: #1877F2;
}
nav .social_menu ul li:hover:nth-child(2) a {
background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}
nav .social_menu ul li:hover:nth-child(3) a {
background-color: #CD201F;
}
nav .social_menu ul li a img {
width: 20px;
max-height: 20px;
transition: all .125s;
}
nav .social_menu ul li:hover a img {
filter: invert(1);
}  main .up {
position: fixed;
height: 0;
transition: all 0.3s;
}
.scrolled .up {
bottom: 50px;
right: 50px;
height: 35px;
width: 35px;
z-index: 3;
}
main header .row .col-3 {
overflow: hidden;
position: relative;
display: flex;
}
main header video {
padding-top: 64px;
margin-left: -1px;
margin-bottom: -1px;
width: calc(100% + 2px);
}
main header .row .col-3 .play-button {
position: absolute;
height: 35px;
bottom: 35px;
right: 35px;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
main header .row .col-3 .play-button:hover {
transform: scale(1.2, 1.2);
}
main header .row .col-3 a {
opacity: 0.4;
transition: all 0.3s;
}
main header .row .col-3 a:hover {
opacity: 0.8;
}
main header video.video-desktop {
display: none;
}  main .container {
position: relative;
background: none;
}
main .section-wrapper {
display: flex;
position: relative;
flex-wrap: wrap;
gap: 34px;
padding: 64px 0;
background: var(--dark-background);
}
main .section-wrapper section {
display: flex;
justify-content: center;
}
main .section-wrapper section .outer-wrapper.about-company {
display: inline-block;
position: relative;
background: var(--about-us);
height: 100%;
padding: 32px;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
main .section-wrapper section .outer-wrapper.about-company::after {
content: '';
display: block;
box-sizing: border-box; position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
opacity: 0;
border-radius: 10px;
padding: 32px;
box-shadow: 0 7px 18px rgba(0, 0, 0, 0.5);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
main .section-wrapper section .outer-wrapper.about-company .inner-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
main .section-wrapper section .outer-wrapper.individual-part .inner-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.about_individual_text {
color: var(--light-headline);
}
main .section-wrapper section .outer-wrapper .inner-wrapper video {
width: 250px;
}
main .section-wrapper section .outer-wrapper.individual-part .inner-wrapper {
flex-direction: column;
}
main .individual-part img {
border-radius: 10px 10px 10px 10px;
width: 100%
}  .media {
background: var(--dark-background);
}
.outer-wrapper-slider {
margin: 0;
padding: 0;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
}
.slider {
width: 800px;
height: 500px;
border-radius: 10px;
overflow: hidden;
border: 1px solid #212121;
}
.slides {
width: 500%;
height: 500px;
display: flex;
}
.slides input {
display: none;
}
.slide{
width: 20%;
transition: 1s;
}
.slide img{
width: 800px;
height: 500px;
} .navigation-manual {
position: absolute;
width: 800px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.manual-btn {
padding: 5px;
border: 2px solid #40D3DC;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}
.manual-btn:not(:last-child) {
margin-right: 40px;
}
.manual-btn:hover {
background: #40D3DC;
}
#radio1:checked ~ .first{
margin-left: 0;
}
#radio2:checked ~ .first{
margin-left: -20%;
}
#radio3:checked ~ .first{
margin-left: -40%;
}
#radio4:checked ~ .first{
margin-left: -60%;
}
.media .row .col-2 {
padding: 30px 0 30px 0;
}
.media .video-headline{
margin: 30px 0 30px 0;
}
.media .wrapper_mediavideo {
display: flex;
justify-content: center;
align-content: center;
}
#media_video2 {
padding: 0 0 30px 0;
}
.media .mediavideo {
background: #000;
padding: 30px 0 30px 0;
max-width: 100%;
}
.media .swiper-button-next {
display: none;
}
.media .swiper-button-prev {
display: none;
}  .education {
background: var(--light-background);
}
.education .row .col-2 {
padding: 60px 0 60px 0;
}
.education .mediavideo {
background: #000;
padding: 30px 0 30px 0;
max-width: 100%;
}  .live {
background: var(--dark-background);
}
.live .col-2 {
padding: 20px 0 30px 0;
}
.live .outer-wrapper {
padding-top: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.live .outer-wrapper .event-box {
padding: 0 0 40px 0;
display: flex;
flex-direction: column;
}
.live .outer-wrapper .event-box .box {
display: inline-block;
position: relative;
background: var(--light-background);
height: 100%;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.live .outer-wrapper .event-box .box::after {
content: '';
display: block;
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
opacity: 0;
border-radius: 10px;
box-shadow: 0 7px 18px rgba(0, 0, 0, 0.5);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.live .outer-wrapper .event-box h3 {
margin: 20px;
text-align: center;
}
.live .outer-wrapper .event-box p {
margin: 10px;
}
.live .outer-wrapper .live_image {
display: flex;
width: 100%;
margin-top: 20px;
border-radius: 4px 4px 10px 10px;
}  .booking {
background: var(--light-background);
padding-top: 30px;
}
.booking .row.contact_opportunities {
padding: 50px 0 60px 0;
}
.booking .inner-wrapper {
margin-bottom: 4vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
}
.booking .text_booking strong {
color: var(--booking-strong);
}
.booking .information_booking {
display: flex;
justify-content: center;
align-items: center;
}
.booking img {
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);    height: 30px;
margin: 20px 0 22px 0;
}
#whatsapp {
height: 35px;
}
.booking .inner-wrapper img:hover {
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transform: scale(1.8);
}
#alternative-contact img{
margin-left: 15px;
margin-right: 15px;
}  .bottom_bar {
background-image: radial-gradient(var(--bottom-bar-dots) 15%, var(--bottom-bar) 20%);
background-size: 20px 20px;
border-top: 4px solid var(--bottom-bar-border)
}
.bottom_bar .row {
display: flex;
}
.bottom_bar .outer-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.bottom_bar .col-1.inner-wrapper .footer-headline {
font-family: "Viga", sans-serif;
}
.bottom_bar .col-1.inner-wrapper.impressum {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 25px;
}
.bottom_bar .inner-wrapper.impressum img {
width: 150px;
padding: 20px 0 5px 0;
}
#bottom_menu.menu {
display: flex;
width: 100%;
justify-content: center;
padding: 0 0 0 0;
}
#bottom_menu.menu a, span{
color: #fff;
text-decoration: None;
}
#bottom_menu.menu span{
margin: 0 5px;
}
#bottom_menu.menu a:hover{
text-decoration: underline;
}
#menu-item-121 span {
display: none;
}  @media(min-width: 768px) {
.col-1 {
width: 33.333%;
}
.col-2 {
width: 66.666%;
}
.col-3 {
width: 100%;
}
nav .logo {
width: 180px;
}
.scrolled .logo {
width: 71px;
}
nav .logo a img {
width: 175px;
}
.scrolled nav .logo a img {
width: 130px;
}
nav .menu-inner-wrapper {
flex-direction: row;
}
nav .social_menu ul {
padding: 0 20px 0 10px;
}
nav .navigation_items {
display: flex;
flex-direction: row;
position: initial;
height: auto;
width: auto;
top: auto;
background: transparent;
transform: translateX(0);
box-shadow: none;
border-radius: 0;
}
nav .navigation_items li {
opacity: 100%;
font-size: 16px;
}
nav .navigation_items li a:hover:after {
width: 100%;
left: 0;
}
nav .social_menu ul li a {
padding: 8px;
}
nav .menu-inner-wrapper .burger {
display: none;
}
main header video {
padding-top: 65px;
max-width: 100%;
background: #212121;
}
main header video.video-mobile {
display: none;
}
main header video.video-desktop {
display: block;
}
main header .row .col-3 .play-button {
height: 45px;
bottom: 50px;
right: 50px;
}
main .section-wrapper {
padding: 90px 0;
background-image: var(--background_url);
background-color: rgba(255, 255, 255, var(--background_oppacity));
background-blend-mode: overlay;
}
.about_individual_text {
color: var(--dark-headline);
}
.media .row .col-2 {
padding: 60px 0 60px 0;
}
.media .mediavideo {
padding: 60px 0 60px 0;
}
.media .swiper-button-next {
display: flex;
}
.media .swiper-button-prev {
display: flex;
}
.education .row .col-2 {
padding: 60px 0 90px 0;
}
.education .mediavideo {
padding: 60px 0 60px 0;
}
.live .col-2 {
padding: 60px 0 60px 0;
}
.live .outer-wrapper .event-box {
width: 100%;
padding-bottom: 45px;
display: flex;
}
.bottom_bar .outer-wrapper {
flex-direction: row;
}
}
@media(min-width: 1220px) {
nav .social_menu ul {
padding: 0 40px 0 20px;
}
main .section-wrapper section .outer-wrapper.about-company .inner-wrapper {
flex-direction: row;
}
main .section-wrapper section .outer-wrapper.about-company:hover {
transform: scale(1.1, 1.1);
}
main .section-wrapper section .outer-wrapper.about-company:hover::after {
opacity: 1;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.live .outer-wrapper {
margin: 0 -20px;
flex-direction: row;
justify-content: left
}
.live .outer-wrapper .event-box {
width: 33.333%;
padding: 20px;
display: flex;
}
.live .outer-wrapper .event-box .box:hover {
transform: scale(1.1, 1.1);
}
.live .outer-wrapper .event-box .box:hover::after {
opacity: 1;
}
}
@media(min-width: 1300px) {
.media .mediavideo {
margin-left: 1px;
}
main .section-wrapper section .outer-wrapper.individual-part .inner-wrapper {
flex-direction: row;
}
main .section-wrapper section .outer-wrapper.individual-part .inner-wrapper.bl {
padding-top: 50px;
}
main .section-wrapper section .outer-wrapper.individual-part .inner-wrapper.dw {
padding-top: 30px;
flex-direction: row-reverse;
}
main .individual-part .inner-wrapper .text-wrapper.space_left {
padding-left: 50px;
}
main .individual-part .inner-wrapper .text-wrapper.space_right {
padding-right: 50px;
}
main .individual-part img {
border-radius: 10px 5px 5px 10px;
padding: 0;
width: 40%
}
main .individual-part .bl {
border-radius: 5px 10px 10px 5px;
}
main .individual-part .dw {
border-radius: 10px 5px 5px 10px;
}
}
@media(min-width: 1910px) {
nav .social_menu ul {
display: flex;
padding: 0 80px 0 80px;
}
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
} .additional-content {
padding-top: 85px;
} .about_us_headline {
color: var(--dark-headline);
}
.media_headline {
color: var(--light-headline);
}
.education_headline {
color: var(--dark-headline);
}
.live-headline {
color: var(--light-headline);
}
.event-box-headline {
color: var(--dark-headline);
}
.booking-headline {
color: var(--dark-headline);
}
.footer-headline {
color: var(--light-headline)
}