@charset "UTF-8";



@font-face {
    font-family: "Antropos";
    src: url('https://tanz-deinen-namen.de/img/AntroposFreefont-BW2G.ttf') format('truetype');
	src: url('https://tanz-deinen-namen.de/img/AntroposFreefont-BW2G.woff2') format('woff2');
    font-style: normal;
	font-display: swap
} 
* {  -webkit-overflow-scrolling: auto; outline: none; box-sizing: border-box;   }
* div, * p { -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
   }
   b { font-weight: normal;}
p { margin: 0}
#h { position: fixed; top: 0; left: 0; height: 100%; width: 100vw; z-index: -200;}
html { font-size: 1.8vh;   }
body { font-family: "arial"; margin: 0; line-height: 1.4;  background-color: #2B98B8; scrollbar-width: thin;  }


#bg_back { position: absolute; width: 100vw; height: 100vh; top: 0; left: 0; z-index: -1;  }
h1, h2, h3 { font-family: "Antropos"; font-size: 2.15rem; margin-top: 0; margin-bottom: 1rem; display: block; letter-spacing: 0.03rem;   }
h2, h3 { font-size: 1.55rem; margin-top: 1.5rem; margin-bottom: 1.2rem; }
a, a:visited { color: #FFFD96; text-decoration: none;}
.overlay_wrapp a { text-decoration: underline; color: white;}


#namen_h1_wrapp {
  width: calc(100% - 1rem);
  overflow-x: scroll;
  position: absolute;
  top: -.1rem;
  left: 0;
  right: 0;
  margin: auto;
}
#namen_h1 {  text-align: center; font-size: 7rem; margin-top: 2rem; text-shadow: 0.2rem 0.15rem 0 #EF5C8B, 0 0 0.1rem #EF5C8B; color: white; position: relative; z-index: 88888; display: flex; justify-content: center;  width: fit-content; margin-left: auto; margin-right: auto; }
#namen_h1 span { opacity: .7; }
#namen_h1 span.first { opacity: 1; }
#namen_h1 span.ac, #namen_h1 span:not(.first):hover { opacity: 1 !important; cursor: pointer; color: #FFF8A0;}


#cache_misc { display: none;}

#prel_balken { width: 200px; height: 8px; position:fixed;  z-index: 9999; top: 0; bottom: 0; left: 0; right: 0; margin:auto; background: #aaa; color: white; text-align:center; font-size: 12px; border-radius: 2px; }
#prel_balken p { margin: 0; position:absolute; top: 0; left: 0; height: 8px; background: white; z-index: -1; border-radius: 2px; max-width: 100%;    }
#prel_balken span { display: block; width: 100%; position:absolute; bottom: -22px; color: white; text-align: center}

#fade_in:not(.not_ready) { opacity: 1 !important; transition: opacity .5s;}

#img_load_wrapp { position: absolute; height: 100%; width: 100vw; top: 0; left: 0; }
#img_load_wrapp img { position: absolute; opacity: 0; object-fit: contain; object-position: bottom; height: 83%; aspect-ratio: 330/450; left: 0; right: 0;  bottom: 10%; margin: auto; z-index: 17; top: auto; transform-origin: bottom; transition: opacity 0s; transform: scale(1.002,1.01);    }

#img_load_wrapp img.ac { opacity: 1; transform: scale(1,1);}
#img_load_wrapp img.ac_ani {transition: transform 1.5s linear, opacity 0s; transform: scale(1.002,1.01); }


#buehne { position: absolute; height: 100%; width: 100vw; top: 0; left: 0; }
#buehne:before { content: ""; width: 100%; z-index: 0; height: 26%; bottom: auto; left: 0; top: 0; background-color: rgba(0,0,0,.2); position: absolute;}
#buehne *, #img_load_wrapp * { position: absolute; margin: auto; top: 0; bottom: 0;}
#buehne_hinten { width: 100%; left: 0; height: 48%; background-color: rgba(0,0,0,.1); z-index: 1;}

#buehne_links, #buehne_rechts { height: 100%; aspect-ratio: 330/450;}
#buehne_links { left: 0;}
#buehne_rechts { right: 0;}
#buehne_links p, #buehne_rechts p { width: 25%; height: 100%; background-image: url(img/p/vorhang.svg); background-size: cover; border-radius: .4rem;}
#buehne_links p:nth-child(1) { left: 0; z-index: 10; background-color: #787878;}
#buehne_links p:nth-child(2) { left: 20%; z-index: 9; width: 20%; height: 80%; background-color: #555;}
#buehne_links p:nth-child(3) { left: 40%; z-index: 8; width: 10%; height: 62%; background-color: #333;}

#buehne_rechts p:nth-child(1) { right: 0; z-index: 10; background-color: #787878;}
#buehne_rechts p:nth-child(2) { right: 20%; z-index: 9; width: 20%; height: 80%; background-color: #555;}
#buehne_rechts p:nth-child(3) { right: 40%; z-index: 8; width: 10%; height: 62%; background-color: #333;}

#buehne b-g { width: 100%; top: 0; left: 0; height: 100%; opacity: .75; background-color: #6a3567;}
#wrapp_wrapp { position: absolute; height: 100%; width: 100%; top: 0; left: 0;}
#wrapp_wrapp > b-g { width: 100%; top: 0; left: 0; height: 100%; opacity: .05; z-index: 33; position: absolute;}
#wrapp_wrapp .bg_2 { display: none;}
.verzoegert #wrapp_wrapp .bg_2 { display: block;}


#leier_wrapp, #leier_click { height: 53.1%; top: auto; bottom: 0; left: 0; aspect-ratio: 61/100;   z-index: 11; cursor: pointer; }
#leier_click { z-index: 99999998 !important;}
#leier_wrapp * { position: absolute; background-size: cover; background-position: bottom left; height: 100%; width: 100%; top: 0; left: 0; display: block; cursor: pointer;}
a-rm { background-image: url(img/p/leier-arm.svg); }
k-oerper { background-image: url(img/p/leier-koerper.svg); }
k-opf { background-image: url(img/p/leier-kopf.svg); transform-origin: top left; transition: transform .05s; }
k-opf.kopf_hoch { transform: rotate(-23deg) translate(-18%,4%)}

html body #leier_wrapp leier-klick-mich { display: none; position: absolute; z-index: 222; width: 51%; aspect-ratio: 4/3; background-image: url(img/p/klick_mich.svg); background-size: contain; background-position: center; background-repeat: no-repeat; top: 0; right: -5%; left: auto; bottom: auto; margin: 0; height: auto; }
html.klick_mich_on body #leier_wrapp leier-klick-mich { display: block;}
html.klick_mich_on body #leier_wrapp  { filter: brightness(.98);}

#publikum { height: 31%; aspect-ratio: 62/9; background-image: url(img/p/publikum.svg); background-size: cover; background-position: bottom right; background-repeat: repeat-x; z-index: 18; top: auto; bottom: -1px; right: 0; }

input:focus { background-color: #F7F7D0;}
#input_text_wrapp { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: fit-content; width: 40rem; display: flex; border-radius: .25rem; background-color: black; padding: .5rem; z-index: 35;}

#input_text_wrapp input, input-share { width: calc(78% - 1rem); text-align: center; margin: 0; height: 2.5rem; line-height: 2.5rem; padding: 0 .5rem; font-family: "Antropos"; font-size: 1.2rem; color: black; border: none; border-radius: .1rem; display: block; background-color: white; }
#input_text_wrapp input:focus { background-color: #FFF8A0;}
#input_text_wrapp > p { background-color: #BA319F; color: white; height: 2.5rem; line-height: 2.5rem; margin-left: .5rem; font-weight: bold; text-transform: uppercase; font-family: arial; font-size: 1.1rem; letter-spacing: .2rem; cursor: pointer; border-radius: .1rem; width: 13%; text-align: center; font-family: arial;}
#input_text_wrapp #main_reset { background-color: #333; width: 9%;}

#teilen_tshirt { display: flex; position: absolute; top: 3rem; right: 0; height: fit-content; width: 10.1rem; display: flex; border-radius: .25rem; background-color: black; padding: .5rem; }
.first_play #teilen_tshirt { display: none;}
#teilen_button, #tshirt_button { background-color: #333; cursor: pointer; width: calc(58.9% - .25rem); height: 1.6rem; background-size: 80% auto; background-image: url(img/p/teilen.svg); background-repeat: no-repeat; background-position: center; opacity: .9; }
#tshirt_button { margin-left: .5rem; width: calc(41.1% - .25rem); background-image: url(img/p/t-shirt.svg); background-size: auto 75% ;  }

.verzoegert #input_text_wrapp { display: none;}


@keyframes wait {
    from { transform: rotate(0deg);}
    to { transform: rotate(360deg);}
  }

  p-p { padding: 0 .7rem;}

  #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: 1.1rem; text-transform: uppercase; line-height: 1.5; }
  #info p { color: black;}
  #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;}


  
  #buchstaben_info { position: absolute; width: 39rem; padding: 1.3rem 1.5rem;  background-color: rgba(96,33,95,.8); z-index: 999999; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto; color: white; border-radius: .25rem; font-family: "Antropos"; letter-spacing: .1rem; line-height: 1.5; border: solid .05rem white;   opacity: 0; z-index: -99999999;}
  .buchstaben_info #buchstaben_info { opacity: 1; z-index: 99999999;}
  #buchstaben_info p-x, #video_emb p { position: absolute;  cursor: pointer; font-size: 2.5rem; top: -1.6rem; right: -1.5rem; width: 3rem; height: 3rem; line-height: 3rem; text-align: center; border-radius: .25rem; background-color: white; display: block; border: solid .05rem #3B053A; color: rgba(96,33,95,.9);  }
  #buchstaben_info p { margin: .7rem 0 0 0;}
  #buchstaben_info p:first-of-type { margin-top: 0;}
  #buchstaben_info p:nth-of-type(3) span { color: #FFF8A0;}


  input-share { display: none;}
  .s_n  input-share { display: block;}
  .s_n  #main_input_text  { display: none;}
  .s_n.first_play #buchstaben_info { display: none;}
  .s_n.buchstaben_info #input_text_wrapp { display: flex;}
  
#video_emb { position: absolute; top: 25%; left: 0;  right: 0; margin: auto; height: 59.5%; aspect-ratio: 16/9; background-color: black; z-index: 9999999999999; border:  solid .025rem white; display: none; font-family: "Antropos";}
.ple_yt #video_emb { display: block;}
.ple_yt #img_load_wrapp img { display: none;}
#video_emb iframe, #video_emb div { position: absolute; width: 100%; height: 100%; top: 0; right: 0; overflow: hidden;}

vi-deo { cursor: pointer; color: #FFF8A0; }
vi-deo:before { content: "  "; }

.nav_second { position: absolute; bottom: 1.75rem; right: 1.95rem; z-index: 1; color: white; display: flex; text-transform: uppercase; font-size: 0.8rem;
}
.nav_second a,  .nav_second a:visited { color: white;}
.nav_second div {  cursor: pointer;}
.nav_second p {margin: 0 .3rem; }


.bestelluebersicht_on w-rapp:before, .second_open #fade_in:before  { content: ""; position: fixed; top: 0; left: 0; background-color: #dedede; opacity: .95; width: 100%; height: 100vh; z-index: 999998; }
zu-sammenfassung, .overlay_wrapp { position: absolute; width: 30.7rem;  left: 0; right: 0; top: 50%; margin: auto; transform: translateY(-50%); padding: .8rem; border-radius: .2rem; border: solid .05rem #555; height: 33rem; display: none; z-index: 999999; background-color: #2B98B8; color: white; }
x-s { height: 2.5rem; width: 2.5rem; background-color: #F7C657; display: flex; align-items: center; justify-content: center; font-weight: bold; position: absolute; top: .8rem; right: .8rem; border-radius: .2rem; color: white; cursor: pointer; font-size: 1.25rem; line-height: 1; border: solid .125rem white;}
.bestelluebersicht_on zu-sammenfassung  { display: block;}


#zusammenfassung_info { position: relative; }
#zusammenfassung_info h2 { font-size: 2.35rem; margin: 0; margin-bottom: .2rem; margin-top: .05rem; line-height: 1; color: white}
#zusammenfassung_info h3 { font-size: 1.4rem; margin: 1rem 0 .3rem 0; line-height: 1.1;   }
#zusammenfassung_info ul { margin: 0; }
#zusammenfassung_info p-p { padding: 0; color: #FFF894; text-transform: capitalize; }


.overlay_wrapp {  position: fixed; width: 36rem; padding: 1rem 0; height: calc(70dvh + 2rem); background-color: #2384a0;  }
.overlay_wrapp > div {  overflow-y: scroll; height: 70dvh; padding: 0 1rem; }
.second_open .overlay_wrapp { display: block;}

z-wrapp  { text-align: center;     }
z-wrapp bestell-preis {  font-family: "Antropos"; font-size: 2rem; color:  #2B98B8;}
z-wrapp > div { background-color: white; color: #666; border: solid .05rem #555; padding: .5rem .8rem .8rem .8rem; border-radius: .2rem; margin-top: 1.2rem; font-size: .85rem; font-family: 'Antropos'; line-height: 1.6;  }
z-wrapp > div > div > div:first-child { margin: 0 0 .25rem 0;  }

z-wrapp > p { padding: 1.42rem 0 0 3rem; position: relative; text-align: left;   }
haken-agb { display: block; width: 2.4rem; height: 2.4rem; cursor: pointer; border: solid .2rem #2B98B8; position: absolute; top: 1rem; left: -.2rem; border-radius: .3rem; background-color: white;}
haken-agb:before { content: ""; width: 1rem; height: 1rem; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: #eee; border-radius: .1rem;  }
#paypal-button-container { width: 100% !important; height: 2.5rem !important; opacity: 0.00001; overflow: hidden; }
click-pp {  position: relative; z-index: 1; background-color: #F7C657; background-image: url(img/p/paypal_ld.svg); background-size: auto 68% ; background-position: center; background-repeat: no-repeat; display: block; cursor: pointer; height: 2.5rem; width: 100%; border-radius: .2rem;  }

#paypal-button-container iframe { width: 100% !important; height: 3rem !important;}
html body zu-sammenfassung #paypal-button-container > * { position: absolute !important; margin: auto !important; top: 0 !important; bottom: 0 !important;  left: 0 !important; right: 0!important; width: 100% !important; }

haken-agb.agb_gelesen:before { background-color: #2B98B8;}
z-wrapp > p s-n { text-decoration: underline; color: white;  cursor: pointer;}

#img_load_cache { display: none;}



#info_wrapp  { position: relative; height: 66.7vh; text-align: center; background-color: white; width: 100%; overflow: hidden;} 
#info_wrapp > .h_e  img { margin: 5.7rem auto .5rem auto; width: 6.9rem; aspect-ratio: 1/1;}
#info_wrapp  .h_e  p { line-height: 1.7rem; font-family: "Antropos"; color: #2B98B8; font-size: 1.045rem; letter-spacing: .06rem;}
#info_wrapp  .h_e  b-s { text-decoration: underline;}
#info_wrapp  .h_e  span { color: #C93CE6; font-weight: bold;}
#info_wrapp  .h_e  h1 { font-size: 3.2rem; color: #2B98B8; margin-bottom: 1.6rem;}
#start_texte {
width: 300%;
    display: flex;
    transition: transform .3s;
    will-change: transform; }

    #start_texte > section {
      width: 33.3332%;
      position: relative;
      overflow: hidden;
  }
  .tanzen #start_texte {
    transform: translateX(-33.3332%);
}
.info #start_texte {
  transform: translateX(-66.6665%);
}
#start_texte h2 { display: none;}
#main_nav { display: flex; justify-content: center; margin-top: 2.8rem;}
#main_nav > * { background-color: #aaa; color: white; border-radius: .125rem; border: none; height: 1.8rem; font-family: "Antropos"; display: flex; align-items: center; justify-content: center; margin: 0 1rem; text-transform: uppercase; font-size: 1.3rem; width: 11rem; letter-spacing: .025rem; cursor: pointer;}
#main_nav > *.ac { background-color: #9747B4;}

#main_wrapp { width: 100%; overflow: clip; position: relative;  }
#main_tanzen { background-color: #b19db0;}

.tanzen body { background-color: #9747B4;}
.info body { background-color: #AE7CB7;}
.tanzen #main_wrapp > #tdn_w { transform: translateX(-33.3332%);}
.info #main_wrapp > #tdn_w { transform: translateX(-66.6665%);}
#main_wrapp > #tdn_w { width: 300%; display: flex;  border-top: solid .5rem #593B73; transition: transform .3s; will-change: transform; }
#main_wrapp > #tdn_w > div { width: 33.3332%; height: calc(100vh + 1px); position: relative; overflow: clip;}

#main_info > div { position: relative; padding: 4rem 15rem 12rem 2rem; overflow: clip; font-size: 1.1rem; min-height: 100vh;  background-color: #015b93; line-height: 1.65;  }
#main_info > div:nth-child(1) { background-color: #4A0B68;}
#main_info > div:nth-child(2) { background-color: #800080;} 
.info #main_wrapp > #tdn_w > div#main_info { height: auto;}
#main_info a, #main_info a:visited { color: white; text-decoration: underline;}
#main_tshirt { background-color: #a1869f; }

#main_info .stick {  top: 0; position: relative; display: block; ;  }
#main_info .stick:before { content: ""; position: absolute; width: 100vh; height: 100vh; top: 0; left: 0;}
.info .not_top #main_info .stick  { position: sticky;  }
#main_info .stick > div { position: absolute; height: 100vh; width: 100%;  top: 0; left: 0; background-image: url(img/p/logo_weiss.svg); background-size: 13% auto; background-position: top 1rem left; background-repeat: no-repeat}
#main_info .stick img { position: absolute; height: 145vh; width: 100vh; top: -10%; left: -15%; right: 0; margin: auto; object-fit: contain; object-position: top left; transform-origin: top left;}

#main_info h2 { font-size: 2.3rem; line-height: 1.2; margin-top: 4rem; margin-bottom: 1.2rem;}
#main_info .ac > .stick img {  opacity: .9;}
#main_info > div:nth-child(2) .stick img { top: -20%; }
#main_info > div:nth-child(3) .stick img { top: -20%; }

#main_info p { margin-bottom: 1rem;}
#main_info {  color: white; font-size: 1.3rem; line-height: 1.5;}
#main_info .c_long { width: 27rem; margin: 0 0 0 calc(100vw - 10rem); right: 27vw; position: relative; z-index: 2; }
#main_info .c_short { position: absolute; bottom: 3rem; left: 1.6rem; width: 30rem;}
#main_info .c_short h2 { margin-bottom: .7rem;}

#qr-code-wrapp { position: absolute; width: 9%; bottom: 4.2%; left: 0; aspect-ratio: 100/125;  }
#qr-code-wrapp > div {  position: absolute; width: 91%; top: 0; left: 0;  right: 0; margin: auto; aspect-ratio: 1/1; box-sizing: content-box;}
#qrcode path {fill: #5B006B; }
#qr-code-wrapp > div > *  { position: absolute; height: 91%; width: 91%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
#qr-code-wrapp > p { position: absolute; display: flex; justify-content: center; bottom: 0; left: 0; width: 100%;  align-items: end; font-family: "Antropos"; font-size: .44rem; letter-spacing: .03rem; line-height: 1;}

.no_qr #qr-code-wrapp { display: none;}

.height:not(.vert) .links + #qr-code-wrapp { left: auto; right: 0;}
.width .unten + #qr-code-wrapp { left: auto; right: 0; bottom: auto; top: 1%;}



.overlay_wrapp h1 { font-size: 1.75rem; margin: 1rem 0 .5rem 0;}

.overlay_wrapp h2, .overlay_wrapp h3 { margin: 1.8rem 0 .5rem 0;}

.overlay_wrapp p,  .overlay_wrapp li { line-height: 1.45; }
 .overlay_wrapp p { margin-bottom: .5rem;}

.overlay_wrapp li { margin-bottom: .3rem;}
.overlay_wrapp li:last-of-type { margin-bottom: 0;}
.overlay_wrapp ol,  .overlay_wrapp ul { padding-left: 2rem;}

.overlay_wrapp p, #main_info p, .overlay_wrapp li, #main_info li { letter-spacing: .01rem;}



#b_w > m-w div, #qr-code-wrapp > p, #qr-code-wrapp > div { animation-duration: .1s; animation-iteration-count: infinite; animation-timing-function: linear;   }

    @keyframes blink {
      0% { background: black; color: greenyellow;}
      49% { background: black; color: greenyellow;}
      50% { background: greenyellow; color: black;}
      100% { background: greenyellow; color: black;}
    }
    @keyframes blink_2 {
      0% { color: greenyellow;}
      49% { color: greenyellow;}
      50% { color: black;}
      100% { color: black;}
    }

.blink_qr #qr-code-wrapp > p, .blink_qr #qr-code-wrapp > div { animation-name: blink;}

.blink_schrift #b_w > m-w div { animation-name: blink_2;}

#main_info ul { padding-left: 1rem;}

#main_info b-tn { display: block; cursor: pointer; margin: 2rem 0; height: 1.9rem; line-height: 1.8rem; font-family: "Antropos"; width: fit-content; border-radius: .2rem; background-color: white; color: #BA319F; padding: 0 .65rem 0 2.8rem; background-image: url(img/p/pfeil_rechts.svg); background-position: left .85rem center; background-size: auto 70%; background-repeat: no-repeat; letter-spacing: .1rem; }
#main_info b-tn#zurueck_tshirt { background-image: none; padding: 0 .75rem; color: #015b93; }
 #main_info > div .stick img.eig_fig_active { top: -24%; height: 130vh; opacity: .7 !important;}

 #main_info > div .stick img.fig_ae { top: -6%; height: 125vh;}
 #main_info > div .stick img.fig_aeue { top: -28%; height: 155vh;}
 #main_info > div .stick img.fig_au, #main_info > div .stick img.fig_ei { top: -10%;}
 #main_info > div .stick img.fig_eu { top: -15%; height: 135vh;}
 #main_info > div .stick img.fig_j { top: -24%; height: 135vh;}
 #main_info > div .stick img.fig_oe { top: -4%; height: 117vh;}
 #main_info > div .stick img.fig_oeae { top: -24%; height: 165vh;}
 #main_info > div .stick img.fig_x { top: -15%; height: 118vh;}


.info_text #info_text { display: block; width: 50rem;}
 

@media screen and (min-aspect-ratio: 100 / 77) {

 #info_wrapp .m_m { display: none;} 

.overlay_wrapp h1 { margin-top:1rem; font-size: 2.5rem; line-height: 1.13; hyphens: none;}
.overlay_wrapp h2 { hyphens: none;}

  #main_tshirt { background-image: url(img/p/logo_weiss.svg), url(img/p/logo_weiss.svg), url(img/p/logo_weiss.svg); background-position: left -1rem top -3rem, right -3rem bottom -3rem, bottom 2rem left 7rem; background-repeat: no-repeat; background-size: 47%, 47%, 10rem auto; }

  #buchstaben_info { background-color: rgba(96,33,95,.7); left: 0; right: 0; top: 65%; width: 50rem;}
  .buchstaben_info #input_text_wrapp { display: none;}
  .first_play #buchstaben_info { top: 50%; transform: translateY(-50%);  }
  .first_play #leier_wrapp { filter: brightness(0.5);}
  .first_play #leier_click:hover ~  #leier_wrapp { filter: brightness(0.7);}
  html:not(.first_play) #input_text_wrapp { border-bottom-right-radius: 0; bottom: auto; top: calc(50% - .8rem); transform: translateY(calc(-50% ));}
  #teilen_tshirt { border-top-right-radius: 0; border-top-left-radius: 0;}
  #input_text_wrapp, #teilen_tshirt { background-color:   rgba(96,33,95,.85);}
  #input_text_wrapp #main_reset, #teilen_button, #tshirt_button { background-color: #3B003A;}
  #teilen_tshirt { padding-top: 0; top: 3.495rem;}
  #text_specs_wrapp h2 { display: none;}

  tshirt-wrapp { border-left: solid 1rem white; border-right: solid 1rem white; box-sizing: content-box;}
  #info_wrapp .nav_second { display: none;}


}



#p_wrapp { height: calc(100vh - 4rem); aspect-ratio: 1/1; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
tshirt-wrapp { display: block; position: absolute; width: 100%; aspect-ratio: 1/1; top: 0; left: 0; overflow: hidden; border-radius: .5rem; background-color: white; }
t-shirt { width: 100%; transition: transform .3s; position: absolute; top: 0; left: 0; height: 100%; }
.zoom t-shirt { transform: scale(1.58) translateY(8%);}
t-shirt_img, t-shirt_bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; display: block; }
t-shirt_img { background-image: url(img/tshirt-maske-vorne.webp); background-size: contain; background-repeat: no-repeat; background-position: center; }
t-shirt_img.hinten { background-image: url(img/tshirt-maske-hinten.webp);}
t-shirt_bg { z-index: 0; background-color: #f8f8f8;}
druck-bereich { display: block; position: absolute; width: 42%; aspect-ratio: 330/450; left: 0; right: 0; top: 13%; margin: 0 auto; overflow: hidden;  background-size: 7% auto; background-repeat: no-repeat; background-position: bottom  left 1%; z-index: 4;}
#b_w {margin: auto;top: 5%;display: flex;position: absolute;width: 100%;left: 0;right: 0;height: fit-content;}
m-w {position: relative;display: block;margin: 0 auto;aspect-ratio: 330/450; }
#b_w > m-w img {width: 100%; object-fit: contain; position: relative;left: 0;top: 0; transform-origin: bottom center; transform: scale(1.04); aspect-ratio: 330/450;}
#b_w > m-w div {width: 100%; text-align: center; font-family: "Antropos"; position: relative; line-height: .9; margin-top: .25rem; }
.height #b_w > m-w div {  top: 0;}

.vert #b_w:not(.wenig_buchstaben) > m-w:not(.uebergross) img { transform: scale(1.08) translateX(-4%);}

.height #b_w { flex-direction: column; align-items: center; justify-content: center; top: 0 !important; aspect-ratio: 330/450; }


.height #b_w > m-w div,  #b_w.wenig_buchstaben > m-w div { position: absolute;  display: flex; align-items: end; justify-content: flex-end; top: 0; right: 0;  aspect-ratio: 330/450; margin-top: 0; }
.smaler_font #b_w > m-w div { font-size: .6rem;}
.smaler_font_2 #b_w > m-w div { font-size: .5rem;}

  

#b_w p-p { padding: 0 .3rem;}


#custom_wrapp { position: absolute; width: 30%; right: -29%;  height: fit-content; top: 0; bottom: 0; z-index: 5; }
mb-scroll > div { background-color: #ccc; padding: .5rem; margin-top: 2rem; border-radius: .2rem;  
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.46);}
mb-scroll > div * { border-radius: .2rem;}
mb-scroll > div:first-child { margin-top: 0;}
#p_wrapp h2 { color: white; margin: 0 0 .8rem .25rem; line-height: 1.2;}

#current_color, #current_size { position: relative;  display: flex; background-color: #dedede; cursor: pointer; font-weight: bold; background-image: url(img/p/dreieck_runter_schwarz.svg); background-position: center left .6rem; background-repeat: no-repeat; background-size: auto 38%;   }
#current_size { margin-top: 1rem;}

.color_open #current_color, .size_open #current_size { background-image: url(img/p/dreieck_hoch_schwarz.svg); background-color: #FFC; }
#current_color div, #current_size div { position: absolute; height: 100%; display: flex; align-items: center; left: 0; top: 0; left: 1.7rem; text-transform: uppercase; font-size: .9rem;}
#current_color p, #current_size p {  width: 3.5rem; aspect-ratio: 21/10; margin: 0 0 0 auto; background-color: white; border: solid .07rem #777; display: flex;  align-items: center; justify-content: center; margin: 0.2rem 0.2rem 0.2rem auto; }
#current_size p { background-color: #AE7CB7; color: white; }
g-rid { display: grid; grid-template-rows: minmax(0, 0fr); transition: grid-template-rows .3s; } 
.color_open g-rid.color, .size_open g-rid.size  { grid-template-rows: minmax(0,1fr); }
prod-colors { display: block; overflow: hidden; width: calc(100% + 1rem); margin-left: -.5rem; padding: .2rem .5rem;}

prod-colors p { float: left; cursor: pointer; width: calc(16.66666666% - .41666667rem); aspect-ratio: 1/1; margin: .5rem .5rem 0 0; border-radius: .1rem;  position: relative; }
prod-colors p p-e { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: block; width: calc(100% - .1rem); height: calc(100% - .1rem); border: solid .08rem white; z-index: 0;}
prod-colors p:hover { opacity: 1;}
prod-colors p.ac { opacity: 1;}
prod-colors p.ac:before { border: solid .2rem  #D800FF; opacity: 1; background-image: url(img/p/check.svg); background-size: 57%; background-repeat: no-repeat; background-position: center; content: ""; display: block; width: calc(100% + .4rem); height: calc(100% + .4rem); top: -.2rem; left: -.2rem; position: absolute; z-index: 1; box-sizing: border-box; border-radius: .1rem;  }
prod-colors p:nth-of-type(6n) { margin-right: 0;}
prod-colors:after { content: ""; clear: both; display: table;}

prod-sizes { display: block; font-size: .8rem; margin-top: .7rem; overflow: hidden;}
prod-sizes p { float: left; cursor: pointer; width: calc(33.333333332% - .33333333rem); aspect-ratio: 16/7; margin: 0 .5rem .5rem 0; background-color: #cdcdcd; border-radius: .1rem; border: solid .1rem white; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center;}
prod-sizes p:nth-of-type(3n) { margin-right: 0;}
prod-sizes p.ac {  background-color: #AE7CB7; color: white;}
prod-sizes:after { content: ""; clear: both; display: table;}


vorne-hinten { display: block; margin-top: 1rem; }
#p_wrapp vorne-hinten h2 { font-size: 1.4rem; margin: .5rem 0 .7rem 0; text-align: right; }
vorne-hinten p, vorschlag-showcase p { float: left; display: flex; align-items: center; justify-content: center; width: calc(50% - .25rem); margin-right: .5rem; margin-bottom: .2rem;  aspect-ratio: 17/5; border: solid .1rem white; cursor: pointer; color: #888; text-decoration: line-through; font-weight: bold; text-transform: uppercase; font-size: .9rem;}
vorne-hinten p:last-child, vorschlag-showcase p:last-child { margin-right: 0;}
vorne-hinten p.ac { background-color: #AE7CB7; color: white; text-decoration: none; }
vorne-hinten:after, vorschlag-showcase:after { content: ""; clear: both; display: table;} 

#img_specs_wrapp { padding: .5rem; padding-bottom: .7rem; margin-top: 2rem;}
#custom_wrapp input { line-height: 2.3rem; height: 2.3rem; font-size: 1.1rem; padding: 0 .5rem; width: 100%; border: none; font-family: "Antropos"; margin-bottom: 1rem; }

sch-rift { display: block; }
sch-rift p { width: calc(25% - .375rem); margin-right: .5rem; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; float: left; font-family: "Antropos";  cursor: pointer; border: solid .1rem white; position: relative; font-size: .9rem;    }
sch-rift p:last-child { margin-right: 0;}
sch-rift p.ac { border: solid .1rem white;}
sch-rift p.ac:before { border: solid .2rem #D800FF;    content: ""; display: block; width: calc(100% + .2rem); height: calc(100% + .2em); top: -.3rem; left: -.3rem; position: absolute; z-index: 1;  border-radius: .1rem;  }
sch-rift p:nth-of-type(1) { text-decoration: line-through; color: #666; background-color: #cdcdcd;}
sch-rift p:nth-of-type(2) { background-color: #aaa;}
sch-rift p:nth-of-type(3) { background-color: white; }
sch-rift p:nth-of-type(4) { background-color: black; color: white; }
sch-rift:after { content: ""; clear: both; display: table;}

vorschlag-showcase { display: block;  margin-top: 1rem; }
vorschlag-showcase p { text-decoration: none; background-color: #ddd; color: #666;  font-size: .85rem; width: calc(42% - .33333333rem); aspect-ratio: 14/5; }

#qr_on_off { background-image: url(img/p/qr_not_active.svg); width: calc(16% - .33333333rem); aspect-ratio: 1/1; background-size: auto 60%; background-repeat: no-repeat;background-position: center;color: rgba(0, 0, 0, 0); }
#qr_on_off.ac { background-image: url(img/p/qr_active.svg); background-color: white;  }

view-type { display: block; margin-top: .5rem;}
view-type p { width: calc(33.333333332% - .33333333rem); margin-right: .5rem; aspect-ratio: 16/7; float: left; background-size: auto 90%; background-position: center; background-repeat: no-repeat; background-color: #cdcdcd; cursor: pointer; border: solid .1rem white;  }
view-type p:nth-of-type(3n) { margin-right: 0;}
view-type .ac { background-color: #AE7CB7; }
view-type p:nth-of-type(1) { background-image: url(img/p/viewtype_0.svg) } 
view-type p:nth-of-type(2) { background-image: url(img/p/viewtype_1.svg) } 
view-type p:nth-of-type(3) { background-image: url(img/p/viewtype_2.svg) } 
view-type:after { content: ""; clear: both; display: table;}

br-eite { display: block;  border: solid .1rem white; }

br-eite p { width: calc(25%);  aspect-ratio: 15/8; float: left; background-color: #cdcdcd; cursor: pointer;  display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: .8rem; border-radius: 0 !important;   }
br-eite .ac { background-color: #AE7CB7; color: white; }
br-eite:after { content: ""; clear: both; display: table;}

#b_w.breite_siebzig { width: 70%;}
#b_w.breite_fuenfzig { width: 50%;}
#b_w.breite_dreissig { width: 30%;}

vert-align, hor-align  { display: block; margin-top: .5rem;}

vert-align p, hor-align p { width: calc(33.333333332% - .33333333rem); margin-right: .5rem; aspect-ratio: 16/7; float: left; background-color: #cdcdcd; cursor: pointer; border: solid .1rem white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0; background-size: 85% auto; background-position: center; background-repeat: no-repeat;  }
vert-align p { background-size: 100% auto;}
hor-align p:nth-of-type(1) { background-image: url(img/p/h_left.svg) }
hor-align p:nth-of-type(2) { background-image: url(img/p/h_center.svg) }
hor-align p:nth-of-type(3) { background-image: url(img/p/h_right.svg) }

vert-align p:nth-of-type(1) { background-image: url(img/p/v_top.svg) }
vert-align p:nth-of-type(2) { background-image: url(img/p/v_center.svg) }
vert-align p:nth-of-type(3) { background-image: url(img/p/v_bottom.svg) }


vert-align p:nth-of-type(3n), hor-align p:nth-of-type(3n) { margin-right: 0;}
vert-align .ac, hor-align .ac { background-color: #AE7CB7; color: white; }
vert-align:after, hor-align:after { content: ""; clear: both; display: table;}

#b_w.links { left: 0; right: auto;}
#b_w.rechts { right: 0; left: auto;}

#b_w.zentriert { bottom: 0; top: 0 !important;}
#b_w.unten, .height #b_w.breite_hundert  { bottom: 0 !important; top: auto !important;}
#b_w.wenig_buchstaben_1.breite_hundert { top: auto !important; bottom: auto !important; display: block;}

#b_w.wenig_buchstaben_1 m-w { width: 100%}
#b_w.wenig_buchstaben_1 m-w img { position: absolute; height: 100%;}

.height #b_w.links m-w { margin-left: 8%; margin-right: auto;}
#p_wrapp.height:not(.vert) #b_w.rechts m-w { margin-left: auto; margin-right: 8%;}

.height #b_w.links.breite_siebzig  m-w { margin-left: 15%; margin-right: auto;}
#p_wrapp.height:not(.vert) #b_w.rechts.breite_siebzig  m-w { margin-left: auto; margin-right: 15%;}

.height #b_w.links.breite_fuenfzig  m-w { margin-left: 25%; margin-right: auto;}
#p_wrapp.height:not(.vert) #b_w.rechts.breite_fuenfzig  m-w { margin-left: auto; margin-right: 25%;}

.height #b_w.links.breite_dreissig  m-w { margin-left: 40%; margin-right: auto;}
#p_wrapp.height:not(.vert) #b_w.rechts.breite_dreissig  m-w { margin-left: auto; margin-right: 40%;}

.height #b_w.links.wenig_buchstaben  m-w { margin-left: 0; margin-right: auto;}
#p_wrapp.height:not(.vert) #b_w.rechts.wenig_buchstaben m-w { margin-left: auto; margin-right: 0;}

#b_w.wenig_buchstaben.breite_hundert m-w:not(.uebergross)  img  { transform: scale(1.13);}


#p_wrapp.height:not(.vert) #b_w:not(.wenig_buchstaben) m-w img, #b_w m-w.uebergross img  { transform: none; }
#p_wrapp.height:not(.vert) #b_w:not(.wenig_buchstaben) m-w div, #b_w m-w.uebergross div { top: 0;}


#vorschlag { background-image: url(img/p/wuerfel.svg); background-size: auto 90%; background-repeat: no-repeat; background-position: center; font-size: 0; }
#vorschlag, mob-shirt-text-switch p:last-child,  #showcase, #p_text_input {  animation-duration: .1s; animation-iteration-count: infinite; animation-timing-function: linear;  }
.flicker mob-shirt-text-switch p:last-child, .flicker #p_text_input  { animation-name: flicker; }
#vorschlag:hover { background-size: auto 105%;}
.flicker #vorschlag { animation-name: flicker_3; background-size: auto 120%; }



@keyframes flicker {
  0% { color: black;}
  49% { color: black;}
  50% { color: rgb(1, 205, 1);}
  100% { color: rgb(1, 205, 1);}
}

@keyframes flicker_2 {
  0% { color: white;}
  49% { color: white;}
  50% { color: #00FFF2;}
  100% { color: #00FFF2;}
}

@keyframes flicker_3 {
  0% { background-color: #ddd;}
  49% { background-color: #ddd;}
  50% { background-color: #ACF9AC;}
  100% { background-color: #ACF9AC;}
}

#showcase { background-image: url(img/p/showcase.svg); background-size: auto 55%; background-repeat: no-repeat; background-position: center; color: rgba(0,0,0,0);}
.showcase_on #showcase { background-image: none;}
.showcase_on #showcase:before { content: "stop";}
.showcase_on #showcase { animation-name: flicker_2; animation-duration: 2s;; background-color: #AE7CB7;  }



p-reis { display: block; position: absolute; bottom: 1rem; left: -3rem; z-index: 2; text-align: center; font-family: "Antropos"; width: fit-content; height: fit-content; padding: 1rem; text-align: right; border-radius: .3rem; background-color: #2B98B8; cursor: pointer; }
p-reis p { color: white; font-size: .77rem;}
p-reis div, bestell-preis  { font-weight: bold;  font-size: 2.2rem; color: white; margin-bottom: .5rem; line-height: 1.1;}

k-aufen { width: 100%; height: 2rem; background-color: white; border-radius: .2rem; display: flex; align-items: center; justify-content: end; font-size: 1.42rem; cursor: pointer; color: #2B98B8; background-image: url(img/p/paypal.svg); background-size: auto 53%; background-position: left .4rem center; padding-right: .5rem; background-repeat: no-repeat; }

mob-shirt-text-switch { display: none;}

#zoom_button, t-shirt-info { width: 3rem; height: 3rem; cursor: pointer; background-color: #eee; border-radius: .5rem; background-image: url(img/p/lupe.svg); background-size: 55%; background-repeat: no-repeat; background-position: center; position: absolute; top: 0; bottom: 0; left: 1rem; margin: auto; border: solid .1rem #888; z-index: 4; display: flex;   }
.zoom #zoom_button { background-color: #2B98B8; background-image: url(img/p/lupe_active.svg); }

t-shirt-info { background-image: none; top: 1rem; width: 2.4rem; height: 2.4rem; left: 1.025rem; bottom: auto; border-radius: 100000rem; background-color: #ccc; border: none; background-image: url(img/p/t-shirt.svg); background-size: 80%; }



  @media screen and (max-aspect-ratio: 100 / 77) {
    #info_wrapp .d_d, t-shirt-info { display: none;} 

html {
    font-size: 4.1vw;  }
    f-e { display: block;}

body {  width: 100vw; overflow-x: hidden; min-height: auto !important;  }
#wrapp_wrapp:after { content: ""; position: absolute; width: 100%; top: 57.5vh;  background-color: black; height: 50vh;  }
#wrapp_wrapp > b-g, #buehne, #img_load_wrapp { margin: 0; bottom: auto; top: 0; width: 100%; height: 57.5vh;   }
#buehne:before { display: none;}
#wrapp_wrapp > b-g { top: 0; height: 57.5vh;}
#input_text_wrapp { width: 100%; bottom: 0; top: auto;  padding: .5rem 0; position: absolute;}
#input_text_wrapp input,  input-share { width: calc(87% - .5rem); }
#input_text_wrapp #main_reset { width: 13%; position: absolute; right: 0; bottom: 4.5rem; background-color: #222;}
#input_text_wrapp  #main_reset { font-size: 1.3rem;}
#teilen_tshirt { display: block; position: absolute; top: -18rem; right: .05rem;  height: fit-content; width: fit-content; border-radius: 0; background-color: transparent; padding: 0; }
.first_play #teilen_tshirt { display: block; opacity: .3;}
#teilen_button, #tshirt_button { background-color: transparent; width: 3rem; height: 3rem; background-size: 80% auto; background-image: url(img/p/teilen_mob.svg);  opacity: .9; border-radius: .25rem 0 0 .25rem; }
#teilen_button { margin-bottom: .6rem; height: 9rem; background-size: 100% auto; background-color: transparent;}
#tshirt_button { margin-left: 0; width: 3rem;  background-image: url(img/p/t-shirt.svg); background-size: auto 62%;  }

.first_play #namen_h1_wrapp { height: 12rem; top: 1rem;}
#namen_h1_wrapp {  width: calc(100% - 1rem); overflow-x: scroll; height: 6.5rem; position: absolute; top: -.1rem; left: 0; right: 0; margin: auto; }
#main_tanzen:not(.first_play) #namen_h1_wrapp { z-index: 999999999; top: .25rem; }
#namen_h1 { font-size: 5rem; line-height: 5rem;  margin: 0 auto; padding: 0; display: flex; justify-content: center; width: fit-content; }
#namen_h1 span { margin-left: auto; margin-right: auto;}
#buehne_links, #buehne_rechts { aspect-ratio: 18/60;  }
#buehne_hinten { top: auto; height: 19.3%; bottom: 0; background-color: rgba(255,255,255,.08);}
#publikum { background-image: url(img/p/publikum_mob.svg);
  background-position: bottom center;
  height: 12vh;
  width: 100vh;
  right: auto;
  left: -27.5vh;
  background-size: 100% auto;
  margin: auto; }

#leier_wrapp, #leier_click { height: calc(52.4vh - 3rem); position: absolute; z-index: 77777;  bottom: auto; top: 45.9vh; left: -.8rem }
html body #leier_wrapp leier-klick-mich {top: -4%; right: -13%; width: 60%; }

#img_load_wrapp img { height: calc(114% - 4rem); bottom: 1%;  width: 100%; aspect-ratio: inherit;}

.verzoegert #namen_h1 span { opacity: .2;}
.verzoegert #input_text_wrapp { display: flex;}
.verzoegert #input_text_wrapp:before { content: ""; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,.3);}

#buchstaben_info { transform: none; margin-top: 48vh; position: relative; top: 0; width: 100%; border-radius: 0;}
#buchstaben_info p-x, #video_emb p { right: .7rem; top: -4rem; }
.first_play #buchstaben_info p-x { display: none; }
.buchstaben_info #input_text_wrapp { display: flex;}
.first_play #buchstaben_info {  margin-top: 15rem;}
#buchstaben_info p { margin-top: 1.25rem;}
.buchstaben_info.first_play #wrapp_wrapp:before { display: none;}

.buchstaben_info .nav_second { opacity: 1 !important;}
.nav_second p { margin: 0 .5rem;}
html:not(.buchstaben_info) body { min-height: 150vh;}

#video_emb { position: absolute; top: 0; bottom: 0; margin: auto; height: auto; width: 100%; aspect-ratio: 16/15; }
#main_tanzen.ple_yt:before { content: ""; position: absolute;  background-color: #894585; height: 100%; width: 100%; top: 0; left: 0; z-index: 666666666;}

#main_los p, #input_text_wrapp input, #input_text_wrapp > p { height: 3rem; line-height: 3rem;}

#main_wrapp > #tdn_w { border-top: none; }
#main_tshirt { background-color: transparent;}
#p_wrapp { position: absolute; height: 100%; aspect-ratio: inherit; margin-top: 0; overflow: hidden; width: 100%;}

#main_wrapp .nav_second { display: none;}
.nav_second { position: static; display: flex; align-items: center; justify-content: center; height: 1.1rem; font-size: .85rem; color: #2B98B8;}
.nav_second a,  .nav_second a:visited { color: #2B98B8;}
.nav_second p { margin: 0 .8rem;}

#custom_wrapp {  width: 100%; left: 0; right: 0; margin: auto; top: auto; bottom: 5.2rem; overflow: hidden; }
mb-scroll { display: flex; width: 300%; transition: transform .3s; align-items: end; }
.mob_text mb-scroll { transform: translateX(calc((33.33332% - 3.5rem) * -1));}
.mob_groesse mb-scroll { transform: translateX(calc((66.666664% - 7rem) * -1));}
mb-scroll > div { background-color: rgba(100,100,100,.4); width: calc(33.333332% - 7rem); margin-left: 3.5rem; margin-top: 0 !important; height: fit-content; padding: .5rem; border-radius: .2rem; overflow: hidden; border: solid .05rem #666; box-shadow: none; }
mb-scroll > div:first-child { margin-top: 1rem !important;}
vorne-hinten p { background-color: #ddd; margin-bottom: .25rem;}
#current_color { background-color: #ddd; margin-top: .25rem;}
#current_size { background-color: #ddd; margin-top: .6rem;}
#current_color p, #current_size p { aspect-ratio: 21/10; width: 4.5rem; border: solid .05rem #666; margin: .2rem .2rem  .2rem auto ;}
vorne-hinten { margin-bottom: 0; margin-top: .6rem;}
#current_color div, #current_size div { left: 2rem;}
br-eite p { aspect-ratio: 16/7; font-size: .9rem;  }
#p_wrapp h2 {margin-bottom: .6rem; }
#custom_wrapp input { margin-bottom: 1rem; }
br-eite { margin-top: 1rem;}
#prod_specs_wrapp h2, #img_specs_wrapp h2 { display: none;}
br-eite { margin-top: .2rem;}
view-type, vert-align, hor-align { margin-top: .7rem;}
vorschlag-showcase p { width: calc(37.65% - .33333333rem); aspect-ratio: 1000 / 360;}
#qr_on_off { width: calc(24.7% - .33333333rem); aspect-ratio: 16/9;}

tshirt-wrapp { position: absolute; width: calc(50% + 44vh); left: calc((22vh - 25vw) * -1); top: 3rem; border-radius: 0; }
#main_tshirt:after { content: ""; display: block; top: calc(50vw + 44vh + 2.98rem); height: calc(46vh - 50vw); background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); position: absolute; left: 0; width: 100%; }
p-reis { height: 3rem; position: absolute; top: 0; left: 0; padding: .5rem .6rem; width: 100%; border-radius: 0;}
p-reis div { line-height: .88; margin-top: 0; margin-bottom: 0;}
p-reis p { display: none}
p-reis:after { width: .8rem; height: 15rem; content: ""; display: block; position: absolute; top: 4rem; right: 1rem; background-image: url(img/p/vers_inf.svg); background-size: contain; background-position: top right; background-repeat: no-repeat; }
k-aufen { width: 48%; position: absolute; top: 0; left: .5rem; margin: auto; bottom: 0; background-color: rgba(255,255,255,.99); background-size: auto 64%; font-size: 1.7rem; }

mob-shirt-text-switch { display: flex; position: absolute; bottom: 1rem; left: 3.5rem; width: calc(100% - 7rem); height: fit-content; overflow: hidden; border-radius: .2rem; border: solid .1rem rgba(80,80,80,.4); z-index: 222;}
mob-shirt-text-switch p { width: 33.3332%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #555; background-color: #efefef; height: 2.3rem; text-transform: uppercase; font-weight: bold;}
mob-shirt-text-switch p span { text-transform: lowercase;}
mob-shirt-text-switch p.ac { background-color: #AE7CB7; color: white;}

#zoom_button { left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; width: 2.9rem; height: 2.5rem; }
.zoom t-shirt { transform: scale(1.28) translateY(calc((5vw + 5vh) * -1)); }
t-shirt { transform-origin: top; }

zu-sammenfassung , .overlay_wrapp { width: calc(100% - 1rem); height: fit-content; max-height: 90%; top: 4.4rem; padding: 0; transform: none; bottom: auto;  }
zu-sammenfassung > div, .overlay_wrapp > div { height: fit-content; position: relative; overflow: hidden;}
zu-sammenfassung > div > div, .overlay_wrapp > div > div { overflow-y: scroll; max-height: 80dvh; padding: .8rem;}
#zusammenfassung_info { height: fit-content; position: relative;padding: 0; padding-top: .25rem;}
.overlay_wrapp { max-height: inherit; height: 90%; padding: 0;}
.overlay_wrapp > div { padding: .8rem 0 0 0;}
.overlay_wrapp > div > div  { max-height: inherit; height: calc(90dvh - 1.6rem); padding: 0 .8rem 2rem .8rem; }

z-wrapp { position: relative; }
z-wrapp > div { margin-top: 1.4rem;}
x-s { top: -3.5rem !important; right: 0 !important;}
haken-agb { width: 2.5rem; height: 2.5rem;  }
haken-agb:before { width: 1.2rem; height: 1.2rem; }
z-wrapp > p {   line-height: 1.5; padding-left: 3.2rem;  margin-bottom: .5rem;}
#zusammenfassung_info h3 { margin-top: 1.2rem; margin-bottom: .6rem;}
#zusammenfassung_info h2 { font-size: 2.175rem !important; margin-bottom: 1.4rem; margin-top: .05rem;  }

#main_tshirt { background-color: #a1869f; background-color: #2B98B8;}
#info_wrapp { padding: 1rem .7rem 3.5rem .7rem; height: auto;}
#info_wrapp > .h_e  p { margin-bottom: .5rem;  line-height: 1.4; font-size: 1.1rem; padding: 0 1.2rem; color: #2B98B8;}
#info_wrapp > .h_e  b-r { display: block; margin-bottom: .8rem;}
#info_wrapp > .h_e  img { margin-top: 1.4rem; width: 6rem; margin-bottom: .8rem;}
#info_wrapp > .h_e  h1 { font-size: 3rem; line-height: 1; margin-bottom: 2.2rem;}

#main_nav { margin-top: 2.7rem;}
#main_nav > * { margin: 0; width: 33.33332%; height: 2.3rem; font-size: 1.2rem; border-radius: 0; background-color: #bcbcbc}
#main_nav > *.ac { background-color: #AE7CB7; }
#main_nav > *:first-child { border-radius: .25rem 0 0 .25rem;}
#main_nav > *:last-child { margin-right: 0; border-radius: 0 .25rem .25rem 0;}

#qr-code-wrapp > p { font-size: .35rem; letter-spacing: .01rem; }

#main_info b-tn { height: 2.2rem; line-height: 2.2rem; background-position: left .8rem center;}
#main_info > div { padding: 1rem 2rem 7rem 1rem;}
.c_short { display: none;}
#main_info .c_long { width: 100%; right: 0; margin: 0;}
#main_info  .stick img { width: 190%; left: -42%; top: -1.5rem; opacity: .3;  }
#main_info > div:nth-child(2) .stick img { top: -7rem; opacity: .3; }
#main_info > div:nth-child(3) .stick img { top: -7rem; opacity: .3; }
#main_info > div .stick img.eig_fig_active { transform: translateY(3%); opacity: .5 !important;}
#main_info > div .stick img.fig_ae { transform: translateY(2%);  }
#main_info > div .stick img.fig_oe { transform: translateY(12%);  }
#main_info > div .stick img.fig_aeue { transform: translateY(0);  }
#main_info > div .stick img.fig_oeae { transform: translateY(0) translateX(6%);  }



#main_info h2 { margin-top: 7rem;}
#main_info .stick > div { background-image: none;}

.overlay_wrapp h1, #main_info h1 { font-size: 1.9rem; margin: 1rem 0 .5rem 0; letter-spacing: 0;}
.overlay_wrapp h2 { font-size: 1.72rem;}
#main_info h2 { font-size: 1.95rem;}

.overlay_wrapp p, #main_info p,  .overlay_wrapp li, #main_info li { line-height: 1.6; font-size: 1.11rem; }
 .overlay_wrapp p { margin-bottom: .7rem;}

.overlay_wrapp li { margin-bottom: .5rem;}


@media screen and (min-width: 400px) and (max-width: 420px)  {
  #fade_in, #fade_in:not(.not_ready) { transition: none;}
}


@media screen and (min-aspect-ratio: 26 / 40)  {
html { font-size: 2.26vh;}
#fade_in { position: relative; width: 55vh; margin: 2rem auto 0 auto; -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.42); box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.42); overflow: clip; border-radius: .5rem; background-color: white;}
tshirt-wrapp { width: 140%; left: -20%; top: 3rem;}
body { background-color: #ddd;}
.overlay_wrapp { width: 70%; left: 0%; right: 0; margin: auto;}
#main_tshirt { background-color: white;}
#prel_balken span { color: black;}
#prel_balken p { background-color: #2B98B8;}
#input_text_wrapp { bottom: 1rem;}
#leier_wrapp, #leier_click { z-index: 20;}
#fade_in, #fade_in:not(.not_ready) { transition: none;}

 }

 @media screen and (max-aspect-ratio: 26 / 40)  {
  .info body { background-color: #4A0B68;}
  .tanzen body { background-color: black;}
  
   }

}

@media screen and (max-aspect-ratio: 40 / 25) and (min-aspect-ratio: 100 / 77)  { 
 
  .nav_second { bottom: .6rem; right: 1rem;}
  
    
  }


@media screen and (max-aspect-ratio: 40 / 26) and (min-aspect-ratio: 100 / 77)  { 
  html { font-size: calc(1.31vh + .3vw);}
  #info_wrapp { height: auto; padding-bottom: 4rem;}
  #info_wrapp #start_texte > section { padding: 0 .5rem;}
  #p_wrapp { margin: 2rem 0 0 2rem; right: auto; left: 0;}
#custom_wrapp { right: auto; left: calc(100vh - 2rem + (50vw - 50vh - 15%));}
p-reis { bottom: 0; left: 0; border-radius: 0 .5rem 0 .5rem; padding: 1rem 1.2rem;}
.nav_second { bottom: 1rem; right: 1rem;}
#main_wrapp > #tdn_w { border-top: none;}
#info_wrapp > .h_e img { margin-top: 4rem;}
#main_nav > * { height: 1.9rem;}
k-aufen { background-size: auto 59%;}
#main_info > div { padding-right: 4rem;}
  
}



html.ts { font-size: 6.3vw;}
.ts, .ts * { background-color: transparent !important;}
.ts druck-bereich { width: 3898px; height: 5315px; aspect-ratio: inherit; position: fixed; bottom: auto; left: 0; top: 0;  }
.ts #custom_wrapp, .ts mb-scroll, .ts t-shirt_img, .ts t-shirt_bg, .ts p-reis, .ts #zoom_button, .ts *:before, .ts *:after, .ts mob-shirt-text-switch { display: none !important}
.ts tshirt-wrapp { border: none;}
.ts #p_wrapp, .ts tshirt-wrapp, .ts t-shirt { display: inline; position: static;}

.ts #qr-code-wrapp { left: 1%;  }
.ts .height:not(.vert) .links + #qr-code-wrapp { right: 1%;}
.ts .width .unten + #qr-code-wrapp {right: 1%; }
.ts  t-shirt-info { display: none;}