@charset "UTF-8";

* { box-sizing:border-box;  touch-action: manipulation;   }

@font-face { font-family: "Outfit"; src: url('img/Outfit-VariableFont_wght.ttf') format('truetype');
	src: url('img/Outfit-VariableFont_wght.woff2') format('woff2'); font-style: normal;
	font-display: swap
}

@font-face { font-family: "Anton-Regular"; src: url('img/Anton-Regular.ttf') format('truetype');
	src: url('img/Anton-Regular.woff2') format('woff2'); font-weight: bold; font-style: normal;
	font-display: swap
}

html { font-size: 2.2vh;}
   body { background-color: #154782;  background-position: center; background-size: cover;  width: 100%; margin: 0; font-family: Outfit;  line-height: 1.7; color: white; letter-spacing: .01rem; word-spacing: .02rem;    }
#fade_in:not(.not_ready) { opacity: 1 !important; transition: opacity .7s;}

button { all: unset; display: block; cursor: pointer; font: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: Anton-Regular; line-height: 1.2; color: #008FD2; }
#l_wr h1 { color: white; text-align: right; font-size: 3rem; margin-bottom: 1rem; }
p { margin: 0;}
ul { padding: 0; margin: 0;}
ol { margin: 0;}

#l_wr { width: 52vh; margin: 0 auto 1rem auto; padding-top: 4.8rem; padding-left: 5vh; transform: translateX(24%);  }
#share_button { border: none; background-color: rgba(50, 124, 226,.5); width: 2.4rem; height: 2.4rem; background-image: url(img/ic/share.svg); border-radius: .4rem; position: absolute; top: 2.4rem; right: 0; background-size: 40% auto; background-repeat: no-repeat; background-position: center;}
#l_wr > a, #l_wr > a:visited { background: linear-gradient(90deg,rgba(141, 155, 212, 0) 0%, rgba(50, 124, 226,.95) 40%); display: block; border-radius: .6rem;  text-align: center; text-decoration: none; padding: .25rem 2.5rem;  margin: 0 auto .5rem auto; line-height: 1.2; min-height: 2.5rem; display: flex; align-items: center; justify-content: center; color: white; font-size: .8rem; letter-spacing: .1rem;  font-weight: bold; text-transform: uppercase; border: solid .02rem black; position: relative; }
#l_wr > a:before, #l_wr > a p, #l_wr > a i { content: ""; position: absolute; width: 1.5rem; height: 1.5rem; top: 0; bottom: 0; right: .5rem; margin: auto; background-size: auto 100%; background-image: url(img/ic/dots.svg); background-repeat: no-repeat; background-position: right center; opacity: .9; }
#l_wr > a p { right: auto; left: 0; width: 3rem; height: 100%; opacity: 1; z-index: 1; background-position: center; background-size: auto 45%;}
#l_wr > a i { width: 100%; height: 100%; z-index: 0; background-image: none;}
#l_wr .termine:before { background-image: url(img/ic/termine.svg);}
#l_wr .shop:before { background-image: url(img/ic/shop.svg);}
#l_wr .homepage:before { background-image: url(img/ic/hp.webp); background-color: white; border-radius: 100rem; background-size: cover; width: 1.7rem; height: 1.7rem; opacity: 1;}
#l_wr .stiftung:before { background-image: url(img/ic/herz.svg);}
#l_wr .facebook:before { background-image: url(img/ic/link-facebook.svg);}
#l_wr .insta:before { background-image: url(img/ic/link-insta.svg);}
#l_wr .youtube:before { background-image: url(img/ic/link-youtube.svg);}
#l_wr .tiktok:before { background-image: url(img/ic/link-tiktok.svg);}
#l_wr .spotify:before { background-image: url(img/ic/link-spotify.svg);}
#l_wr .podcast:before { background-image: url(img/ic/podcast.svg);}
#l_wr .ard:before { background-image: url(img/ic/ard.svg); }

#ply_wr { display: flex; justify-content: right; color: white; align-items: center; position: fixed; bottom: .9rem; right: 1rem; }
#ply_wr p { margin: 0 .5rem;}
#ply_wr a, #ply_wr:visited { color: white; text-transform: uppercase; font-size: .8rem;  text-decoration: none; font-weight: bold;}

#bg_img_wr { position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index: -1; }
#bg_img_wr img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-position: top center; transition: opacity 1s; opacity: 0;}

#fade_in:not(.not_ready) #bg_img_wr img { opacity: 1;}
#bg img { z-index: -2; object-fit: cover; }
#n_michl img { z-index: -1; transform: translateX(-24%); object-fit: cover; object-position: top center; top: .5rem; right: 0; margin: auto; width: 52vh;  }

#link_load { position: fixed; top: 0; left: 0; right: 0; margin: auto; z-index: 5; height: 100%; width: 80vh;  display: none; text-align: left;}
#link_load scr-l { position: absolute; height: 100%; width: 100%; background-color: white; overflow-y: scroll; top: 0; left: 0; padding: 1.2rem 4rem 1rem 4rem;  left: 0;  color: #008FD2;}
.second_open #link_load { display: block;}
#link_load a, #link_load a:visited { color: #008FD2;}
#link_load h1 { font-size: 3rem; color: #008FD2; margin: 1.2rem 0 1rem 0; line-height: 1.2;}
#link_load h2, #link_load h3 { font-size: 2rem; margin: 2rem 0 .8rem 0; line-height: 1.2;}
#link_load p { margin-bottom: .125rem;}
.bestellung_x, #media_w p { width: 2.5rem; height: 2.5rem; line-height: 2.5rem; position: absolute; top: .7rem; right: .7rem; border-radius: .3rem; text-align: center;   color: white; font-weight: bold; background-color: #008FD2; cursor: pointer; z-index: 1;  }


  #info { position: fixed; width: 100%; text-align: center; background: white; color: white; font-weight: bold; font-family: arial; text-align: center; padding: .5rem; margin: auto; top: 35svh; left: 0; z-index: 99999999999999999; display: none; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); transform: translateY(-50%); font-size: 1rem; text-transform: uppercase; line-height: 1.5; }
  #info p { color: black;}
  #info span { color: rgb(255, 255, 156);}
  #quali_text { color: #888 !important; margin-bottom: .5rem;}
  #quali_text_ok { color: #9a9a9a !important;}
  #info p:nth-of-type(2) { padding-top: .6rem; border-top: dashed .08rem #888;}
  i-nfo { width: fit-content; display: inline-block; cursor: pointer; background-color: #888 ; color: white; padding: 0 .3rem; border-radius: .2rem;}

  #info > div { display: flex; align-items: center; width: fit-content; margin: auto;}
  #info > div > div { height: 1.7rem; line-height: 1.7rem; text-align: center; padding: 0 1rem; border-radius: .2rem; min-width: 4rem; background-color: #555; color: white;  margin: .5rem auto .4rem auto; font-size: .95rem; cursor: pointer;}
  #info > div > div:last-child { margin-left: 1rem;}
  #info > div > div:first-child { background-color: #AE7CB7 !important;}


@media screen and (max-aspect-ratio: 140/100) { #ply_wr { position: static; width: 52vh; margin-top: 2rem; margin-bottom: 2rem; margin-right: auto; margin-left: auto; transform: translateX(23%);}
}

@media screen and (max-aspect-ratio: 85/100) { 
	#ply_wr {  transform: translateX(8%);}
    #n_michl img { transform: translateX(-15%); }
    #l_wr { transform: translateX(9%); padding-top: 10rem;  }
    #share_button { top: 5.4rem;}
    #link_load { width: 100vw; }
#link_load scr-l { padding-left: 2rem; padding-right: 2rem;}

}

@media screen and (max-aspect-ratio: 68/100) and (max-width: 700px) {
html { font-size: 4.8vw;}
#l_wr { transform: none; width: calc(100% - 4.5rem); margin: 0 auto 0 auto; padding-top: 7rem; padding-left: 0; }
#l_wr > a, #l_wr > a:visited { min-height: 3rem; margin-bottom: .55rem;  background: linear-gradient(90deg,rgba(141, 155, 212, .4) 0%, rgba(50, 124, 226,.85) 70%); }
#n_michl img { transform: none; top: .25rem; height: auto; width: 100vw; aspect-ratio: 8 / 16; }
#ply_wr {  margin-right: 2.6rem;  width: auto; transform: none;}
#ply_wr a, #ply_wr:visited { font-size: .8rem;} 
#share_button { right: .8rem; width: 2.8rem; height: 2.8rem;}
#l_wr > a:before { opacity: 1; height: 1.7rem; width: 1.7rem;}
#l_wr h1 { font-size: 3.5rem;}

#n_michl img { transform: translateX(-1vh); top: .8rem; height: auto; width: 110vw; aspect-ratio: 8 / 16; }
#l_wr { padding-top: 10rem;}
    }

@media screen and (max-aspect-ratio: 8/16) {
#schmal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;  background: linear-gradient(-180deg,rgba(141, 155, 212, 0) 0%,  rgba(50, 124, 226,0) 190vw, rgba(50, 124, 226,1) 210vw); z-index: -1;   }
#n_michl img {  height: 220vw; width: 105vw; aspect-ratio: inherit; transform: none;  }
    }