@charset "UTF-8";
/* CSS Document */

* { 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
}

button { all: unset; display: block; cursor: pointer; font: inherit; }
html { font-size: 4.4dvh;}
   body { background-color: #165C9A;  background-position: center; background-size: cover;  width: 100%; margin: 0; font-family: Outfit; font-size: .53rem; line-height: 1.7; color: white; letter-spacing: .01rem; height: 100%; overflow: clip; position: fixed; word-spacing: .02rem;    }
#fade_in:not(.not_ready) { opacity: 1 !important; transition: opacity .7s;}
   #hasen:after { background-image: url(img/bg_breit.webp);  position: fixed; top: 0; left: 0; right: 0; margin: auto; height: 100dvh; aspect-ratio: 3354 / 1420; background-position: center; background-size: cover; z-index: -2;  content: "";}
#img_load_wrapp { display: none;}
#prel_balken { width: 80%; max-width: 8rem; height: .3rem; position:fixed;  z-index: 9999; top: 0; bottom: 0; left: 0; right: 0; margin:auto; background: #aaa; color: white; text-align:center; font-size: .4rem; border-radius: .1rem; z-index: 99999; }
#prel_balken p { margin: 0; position:absolute; top: 0; left: 0; height: .3rem; background: white; z-index: -1; border-radius: .2rem; max-width: 100%;    }
#prel_balken span { display: block; width: 100%; position:absolute; bottom: -.9rem; color: white; text-align: center}

h1, h2, h3, h4, h5, h6 { font-family: Anton-Regular; line-height: 1.7; color: #008FD2; }
p { margin: 0;}
ul { padding: 0; margin: 0;}
ol { margin: 0;}
#bg { height: calc(100dvh); position: fixed; width: 53dvh; top: 0; left: 0; right: 0;  bottom: 0; margin: auto;   display: block; z-index: -1;   }
body li:last-child, body p:last-child { margin-bottom: 0 !important;}

#hasen { position: absolute; height: 100%; width: 54dvh;  top: 0; left: 0; right: 0; margin: auto;  background-size: cover; background-position: center; z-index: 1; max-height: 240vw }
#hasen_oben { position: absolute; width: 95%; aspect-ratio: 1/1; top: 1.5%; left: 2.5%;  }
#hasen_seitl, #hasen_hinten { position: absolute; width: 100%; aspect-ratio: 3/4; top: 1%; left: 0; background-size: cover; background-position: center; background-image: url(img/hasen-seitl.webp); z-index: 1; display: none;   }
#hasen_seitl:before { content: ""; position: absolute; height: 100%; width: 100%; mask-image: url(img/hasen-seitl.webp);   mask-size: contain; }
#hasen_hinten  { background-image: url(img/hasen-hinten.webp); display: none;   }
.seitl #hasen_dreh, .hinten #hasen_dreh  { display: none;   }
.seitl #stange, .hinten #stange { top: 40%;}
.seitl #hasen_seitl { display: block;}
.hinten #hasen_hinten { display: block;}

.d_dreh #hasen_dreh  {animation-name: d_dreh;}
.d_dreh #ref p {animation-name: d_dreh_2;}


#hasen_oben:after { content: ""; position: absolute; z-index: 2; width: 5.3%; aspect-ratio: 1 / 1; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background-image: url(img/schraube.webp); background-size: contain; background-position: center; background-repeat: no-repeat; display: none;  }
#hasen_dreh {  animation-iteration-count: infinite; width: 100%; position: absolute; height: 100%; top: 0; left: 0; animation-direction: normal ; animation-duration:  10s;   animation-timing-function: linear;  background-size: cover; background-position: center; background-image: url(img/hasen.webp); z-index: 1; }
#ref{ content: ""; position: absolute; top: 0%; left: 0%; height: 100%; width: 100%;  mask-image: url(img/hasen.webp); -webkit-mask-image: url(img/hasen.webp);  background-size: cover; mask-size: contain; -webkit-mask-size: contain; } 
#ref p {background-image: url(img/reflexion.webp); position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; background-size: cover;  animation-direction: reverse; animation-iteration-count: infinite; animation-duration:  10s; animation-timing-function: linear;  }


.firefoxandroid #hasen_dreh { animation-name: none !important;}
.firefoxandroid #ref p { animation-name: none !important; display: none;}

.hase_ohne #hasen_dreh {  background-image: url(img/hasen_ohne.svg); }

#stange { position: absolute; height: 100%; aspect-ratio: 110/11000 ;background-image: url(img/stange.webp); background-size: 100% 100%; background-position: top left; position: absolute; left: 0; right: 0; top: 25%; margin: auto; z-index: 0; border-radius: 100rem 100rem 0 0;}


@keyframes d_dreh {
  0% {  transform: rotate(0deg)     }
  100%   {  transform: rotate(360deg)  }
}

@keyframes d_dreh_2 {
  0% {  transform: rotate(0deg)     }
  100%   {  transform: rotate(360deg)  }
}


#gesch { position: fixed; width: 1rem; right: 5%;  top: 0; bottom: 0; margin: auto; cursor: pointer; height: fit-content; border-radius: .1rem; z-index: 124;}
#gesch p, #gesch div  { height: 1rem; margin: 0; background-color: rgba(0,0,0,.1); }
#gesch p:nth-child(2) { background-color: pink}



#content { background: linear-gradient(180deg,rgba(70, 70, 70, 0) 30%, rgba(70, 70, 70, .2) 60%); min-height: calc(100dvh + 2px); width: 13.4rem; z-index: 22; padding: 4.3rem 1.2rem 0 1.2rem; text-align: right; position: static;  height: 100dvh;}
#hasen:before, #content:before { position: fixed; bottom: 0; left: 0; width: 5.2rem; aspect-ratio: 1/1; content: ""; background-image: url(img/weizen.webp); background-size: contain; background-repeat: no-repeat; background-position: bottom left; opacity: .9; z-index: 3; }
#hasen:before { display: none;}
#content > div > a, #content > div > a:visited { color: white;}
#link_load a, #link_load a:visited { color: black;}
#preis_content { background: linear-gradient(180deg,rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, .08) 60%);  width: 13.4rem; position: fixed; padding: 12.8rem .95rem 1rem 1.2rem; height: 100dvh; top: 0; right: 0; text-align: left; }
.second_open #preis_content { z-index: 222;} 
#preis_content #inkl { font-size: .45rem;}
#preis_content #preis { font-size: 1.63rem; font-family: Anton-Regular; letter-spacing: .1rem; line-height: 1.1; margin-top: .01rem; margin-bottom: .35rem;}
#preis_content #preis span { font-size: 1.2rem;}
#preis_content e-u { font-size: 1.35rem; padding-left: .34rem;}
#preis_content #kaufen { font-family: Anton-Regular; font-size: .88rem; height: 1.3rem; line-height: 1.37rem; color: #008FD2; background-color: white; padding: 0 .5rem; border-radius: .1rem; width: 4.74rem; text-transform: uppercase; letter-spacing: .05rem; background-image: url(img/favicon.svg); background-size: auto 69%; background-position: right .2rem center; background-repeat: no-repeat; text-align: left; cursor: pointer; }

#logo_h1 { font-size: 0; background-image: url(img/logo.svg); background-size: contain; background-repeat: no-repeat; background-position: right bottom; aspect-ratio: 100/26; width: 100%; margin-left: auto; margin-right: 0; max-width: 12rem; position: relative; z-index: 22; }


#content > div { margin-right: .07rem; }
#content_first { margin-top: 1.25rem; font-weight: 500; letter-spacing: .03rem; position: relative; z-index: 4;   }
#content_second { margin-top: 1.25rem; position: relative; z-index: 4; }
.med_wr:after { clear: both; content: ""; display: table;}
.med_wr img { float: left; margin-right: .6rem; margin-bottom: .6rem; width: calc(33.333332% - .4rem); aspect-ratio: 100/83; object-fit: cover; object-position: top; border-radius: .2rem; cursor: pointer; border: solid .05rem #444;}
.med_wr img:nth-child(3n) { margin-right: 0;}
.med_wr img.ac { border: solid .05rem #01afff;}
.med_wr { margin-bottom: -1.2rem;}
#content_third { margin-top: 1.25rem; position: relative; z-index: 4;}
#content_first p, #content_second p, #content_third p { padding-bottom: 1rem;}
#content_third ul li { list-style-type: none;  }
#content_third ul li:before { width: .5rem; height: .5rem; background-image: url(img/stern.svg); background-position: top .18rem center; background-size: 60%; background-repeat: no-repeat; content: ""; display: inline-block; margin-right: .08rem; }

#menu_button { width: 1.3rem; height: 1.3rem; position: fixed; top: 2rem; right: 2rem; border-radius: .1rem;  background-image: url(img/nav_button.svg); background-color: white; background-size: 105%; background-repeat: no-repeat; background-position: center; z-index: 100; cursor: pointer; display: none; }
.loaded #menu_button { display: block;}
#menu { top: 1.5rem; right: 1.5rem; position: fixed; width: fit-content; background-color: rgba(111, 152, 184, 0.7); border-radius: .1rem; padding: .55rem .5rem .45rem .5rem; z-index: 99; display: none;}
.menu_on #menu  { display: block;}
#menu > * { line-height: 1.3rem; background-color: white; border-radius: .1rem; color: #165C9A; padding: 0 1.7rem 0 .5rem; cursor: pointer; text-decoration: none; display: block; font-weight: 700; text-transform: uppercase; margin-top: .45rem; position: relative; width: fit-content; font-size: .68em; letter-spacing: .025rem; border: solid .025rem black}
#menu > *:after { position: absolute; top: .2rem; right: .3rem; height: calc(100% - .4rem); aspect-ratio: 100/92; background-color: #dedede; content: ""; border-radius: .1rem; background-repeat: no-repeat; background-size: 65% auto; background-position: center; background-image: url(img/punkt_grau.svg); background-size: contain; background-repeat: no-repeat; background-position: center; }
#menu > *.ac { color: white;  background-color: #008FD2; }
#menu > *.ac:after { background-color: white; background-image: url(img/punkt_blau.svg); background-size: 99.5% auto; }
#menu > *:first-child { margin-top: 0;}

#menu > *:nth-child(1):after { background-image: url(img/hase_blau.svg);}


#menu > *:nth-child(5) {  padding-right: 2.3rem; background-color: rgb(245,245,245); }
#menu > *:nth-child(5):after { background-image: url(img/faq.svg); background-size: 75% auto; background-color: white;  }
#menu > *:nth-child(5):before { content: ""; height: 100%; aspect-ratio: 9/9; position: absolute; top: 0; right: 1.155rem; background-image: url(img/pfeil_rechts_blau.svg); background-size: 60% auto; background-repeat: no-repeat; background-position: center; }

.nav_second { position: absolute; bottom: .9rem; right: 1.1rem;  color: white; display: flex; text-transform: uppercase; font-size: 0.35rem;
}
.nav_second a,  .nav_second a:visited { color: white; text-decoration: none;}
.nav_second div {  cursor: pointer;}
.nav_second p {margin: 0 .2rem; }


#dreh_buttons { position: absolute; top: 19.2%; left: 1.2rem;  width: fit-content; border-radius: .1rem; background-color: rgba(245,245,245,.6); overflow: hidden;}

#dreh_buttons button { cursor: pointer;   width: .93rem; height: .93rem; background-position: center; background-repeat: no-repeat; background-size: 48%;}
#dreh_buttons button:nth-child(3) { background-image: url(img/pfeil_vorne.svg); }
#dreh_buttons button:nth-child(2) { background-image: url(img/pfeil_seitl.svg); }
#dreh_buttons button:nth-child(1) { background-image: url(img/pfeil_hinten.svg); }

#dreh_buttons button.ac { background-color: rgba(255,255,255,1);}

.r_wr { position: absolute; width: 100%; height: 100%; color: black; background-color: rgba(255,255,255,.95); top: 0; left: 0;  display: none; font-size: .9em; padding: .6rem 1.2rem 1rem 1.2rem; }
.second_open #link_load { background-color: rgb(247,247,250);}
.kasse #kauf_wr { display: block;}
#kauf_wr { text-align: left;}
.kasse #menu_button, .kasse #pr_norm { display: none;}
.r_wr h2 { color: #008FD2; text-transform: uppercase; font-size: 1.8rem; margin: 0 0 .2rem 0; line-height: 1.7;}
#link_load.r_wr h2 { text-transform: none;}
.r_wr h3 span { font-style: italic;}
.bestellung_x, #media_w p { width: 1.1rem; height: 1.1rem; line-height: 1.1rem; position: absolute; top: .7rem; right: .7rem; border-radius: .1rem; text-align: center;   color: white; font-weight: bold; background-color: #008FD2; cursor: pointer; z-index: 1;  }
.re h3 {  margin: 0 0 0 0; font-family: Outfit; font-size: 1.2em;}
.re ul { margin: .2rem 0; padding: 0 0 0 .3rem;}
.re ul  li { list-style-type: none; margin-left: 0; padding-left: .1rem;}
.re ul  li:before { width: .5rem; height: .5rem; background-image: url(img/blue_dot.svg); background-position: top .22rem center; background-size: 60%; background-repeat: no-repeat; content: ""; display: inline-block; margin-right: .08rem; }
.re > div { display: flex;}
.re > div > h3 { width: 70%; }
.re > div > p, #ges_wr p { text-align: right; justify-content: right;  color: #666;   font-weight: bold; font-size: 1.2em; font-family: arial; width: 18.5%; margin-left: .3rem; }
#ges_wr p { min-width: 18.5%; max-width: 25%; width: auto;}
#ges_wr > div { display: flex; justify-content: end; margin-bottom: 0; padding: 0 1.2rem; }
#ges_wr h3 { font-family: Outfit; margin: 0; font-weight: 500;}
#ges_wr h3 { color: #666; }
#gessi h3 { color: black; text-align: right; font-weight: bold; }
#tipp { margin-top: .6rem; display: block; margin-bottom: .15rem;}
#tipp  b { color: #008FD2; border-bottom: solid .05rem #008FD2;  }

.kasse_button_wr { display: flex; width: 100%; background-color: white; border: solid .03rem #008FD2; overflow: hidden; border-radius: .15rem; margin: .8rem 0; font-size: .8em;}

.kasse_button_wr p.ac { background-color: #008FD2; color: white;}

.r_wr.abh #vers, .abh .transp { display: none !important;}
#abh { display: none;}
.r_wr.abh #abh { display: block;}

.r_wr.abh #vers_abholung_wr p:last-child, .r_wr:not(.abh) #vers_abholung_wr p:first-child { background-color: #008FD2; color: white;}
.r_wr.abh .tran > p:after { content: '0,00 €'}
.r_wr.abh .verp > p:after { content: '0,00 €'}
.r_wr:not(.abh) .tran > p:after { content: '7,69 €'}
.r_wr:not(.abh) .verp > p:after { content: '2,31 €'}
#abh > div { display: flex; margin-top: .125rem; }
#abh p-f { display: block; margin-bottom: .4rem;}
.input_wr > input { height: 1rem; line-height: 1rem; padding: 0 .25rem; border: solid .03rem #008FD2; border-right: none; border-radius: .1rem 0 0 .1rem;  width: calc(25% - .375rem);  font-size: 1em; text-align: center; color: white; background-color: #008FD2;  font-size: .8em; font-weight: 700; cursor: pointer;}
.input_wr .urz {  height: 1rem; line-height: 1rem; text-align: center; border-radius: 0 .1rem .1rem 0;  border: solid .03rem #008FD2;  width: calc(25% - .375rem); color: #008FD2; font-size: .8em; font-weight: 600; position: relative; cursor: pointer; background-color: white; }
.input_wr .urz input { width: 100%; color: #008FD2; background-color: transparent; padding: 0 .25rem; border: 0; border-radius: 0;  font-weight: 700; text-align: center; cursor: pointer;   font-size: 1em; display: flex; align-items: center; justify-content: center; height: 1rem;  }
.input_wr > input::placeholder { color: white;}
.bill_wr input::placeholder,  .urz input::placeholder { color: #008FD2 !important;}
.input_wr p { width: 1.5rem; text-align: center; height: 1rem; line-height: 1rem;}
p-f h3 { color: #008FD2;;}

body .kasse_button_wr p { width: 50%; height: 1rem; line-height: 1rem; text-align: center; font-weight: bold; text-transform: uppercase; cursor: pointer; border-radius: .1rem; color: #008FD2; margin: 0;}
.stop_vers #vers_abholung_wr > p:nth-child(1) { text-decoration: line-through;}
.stop_abh #vers_abholung_wr > p:nth-child(2) { text-decoration: line-through; }
.stop_vers_abh #kaufen { text-decoration: line-through;}

body #prod_change p { width: 25%; }
body #prod_change p:not(.ac):nth-child(1), body #prod_change p:not(.ac):nth-child(3) { background-color: rgb(248,248,248);}


#ges_wr { position: absolute; bottom: 0; left: 0; width: 100%; }
h-h { display: block; background-color: #008FD2; color: white; padding: .6rem 1.2rem .6rem 1.2rem; }
body div#gessi { margin-top: .4rem; margin-bottom: .6rem;   }
#gessi p {  display: inline-block; border-bottom: .2rem double #008FD2; color: #008FD2;   line-height: 1rem; }
.blink #gessi p { animation-name: blink; animation-duration: .1s; animation-iteration-count: infinite; animation-timing-function: linear;}
  @keyframes blink {
      0% { color: greenyellow;}
      49% {color: greenyellow;}
      50% { color: black;}
      100% { color: black;}
    }

click-pp {  position: relative; z-index: 1; background-color: #F7C657; background-image: url(img/paypal_ld.svg); background-size: auto 68% ; background-position: center; background-repeat: no-repeat; display: block; cursor: pointer; height: 1.2rem; width: 100%; border-radius: .1rem; margin-bottom: .6rem;  overflow: hidden;  }

#paypal-button-container iframe { width: 100% !important; height: 1.35rem !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; }

#paypal-button-container { width: 100% !important; height: 2.5rem !important; opacity: 0.00001;  }

haken-agb.agb_gelesen:before { background-color: #008FD2;}

haken-agb { display: block; width: 1.1rem; height: 1.1rem; cursor: pointer; border-radius: .1rem; background-color: white; position: relative; margin-right: .5rem; margin-left: -.05rem;}
haken-agb:before { content: ""; width: 50%; height: 50%; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: #eee; border-radius: .1rem;  }

s-n { position: relative; z-index: 200; display: block;  cursor: pointer; margin: 0 .15rem; text-decoration: underline;}
#abg_gel { display: flex; font-size: .9em;  position: relative; z-index: 200;  }
#abg_gel s-n, #abg_gel i-i { line-height: .95rem; }



body #ui-datepicker-div { -webkit-box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.51); 
    box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.51); background-color: #efefef; padding: 0; border-radius: 0; opacity: 1 !important; width: 8rem; border-radius: .1rem; overflow: hidden;  }
body .ui-widget-header { background: white;}
body .ui-datepicker table { margin: 0;}
body .ui-datepicker .ui-datepicker-header { padding: 0; height: 1.2rem;}
body  .ui-datepicker .ui-datepicker-title { line-height: 1.2rem; font-size: .47rem; color: #555;}

body #ui-datepicker-div * { border-radius: 0; border: none;}

body .ui-datepicker .ui-datepicker-prev, body  .ui-datepicker .ui-datepicker-next  { height: 100%; left: 0; margin: 0; top: 0; left: 0; width: 1.5rem; cursor: pointer; background: none;}
body  .ui-datepicker .ui-datepicker-next { right: 0; left: auto;}

body .ui-datepicker .ui-datepicker-prev span, body .ui-datepicker .ui-datepicker-next span { height: 100%; left: 0; margin: 0; top: 0; background-image: url(img/dreick_links.svg); background-size: 30% auto; background-position: center; background-repeat: no-repeat; width: 100%;}
body .ui-datepicker .ui-datepicker-next span { background-image: url(img/dreick_rechts.svg); }
body .ui-datepicker .ui-state-default { padding: .07rem .2rem; background: white; font-size: .34rem;}
body .ui-datepicker .ui-state-default:hover { background: rgb(235,255,235);}
body .ui-datepicker .ui-state-active { background-color: #008FD2; color: white;}
body  .ui-datepicker th { color: #555;  font-weight: normal; font-size: .38rem;}
body  .ui-datepicker td { padding: 0; border: solid .1rem transparent !important;}
body .ui-datepicker th { padding: .1rem .2rem;}
body  .ui-datepicker-other-month { height: 0; overflow: hidden; font-size: 0;}



.urz_set_wrapp { position: absolute; z-index: 999; top: 1rem; height: 6.425rem; overflow-y: scroll; left: 0; width: 100%; background-color: white; cursor: pointer;
box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.51); padding: .125rem 0 .125rem .1rem; display: none; scroll-padding: 0; border-radius: .1rem; }
.urz_set_wrapp p { height: .9rem; line-height: .9rem; margin: 0; width: 100%; font-weight: normal; color: #444;}

 .uz_active {   background-color: #FFFAC1 !important; }


.uz_active .urz_set_wrapp  { display: block;}
    .urz_set_wrapp::-webkit-scrollbar {
        background-color: transparent;
        width: 0;
       
    }
    
    .urz_set_wrapp::-webkit-scrollbar-thumb {
        background-color: #008FD2;
        height: .2rem;
        max-height: .2rem;

    
    }
.urz_set_wrapp::-webkit-scrollbar {
    -webkit-appearance: none;
    background-color: transparent;
    width: .25rem;
    max-height: .2rem;
    position: absolute;
    right: 0;

}
input:focus { outline: none;}
.uz_p_active, .bill_wr input:focus { background-color: #FFFAC1 !important; color: black !important;  }
.urz_set_wrapp p:hover { background-color: rgb(235,255,235) }
body #ui-datepicker-div { z-index: 100001 !important;}



#media_w { position: fixed; width: calc(100% - 12rem); height: 100%; top: 0; right: 0; margin: auto;  z-index: 88; display: none;}
#media_w p { top: .5rem; right: .5rem; }
#med_b  { height: 75%; width: 1%;  position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: height .3s, width .3s, opacity .5s; background-color: rgba(0,0,0,.08);}
#med_l, #med_l > * { width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; margin: auto; border-radius: .2rem; transition: all .5s; object-position: center;}
#med_l .dim { opacity: 0;}
.media_on #media_w { display: block;}
.media_on #hasen > div, .media_on #preis_content { display: none;}
#media_w n-ext { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;}
#media_w video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; object-position: center;  z-index: 0;}
n-ext:before { content: ""; position: absolute; top: 1rem; left: 1rem; height: .35rem; width: .35rem; background-color: white; border-radius: 2rem; z-index: 2; animation-name: blink_2; animation-duration: .4s; animation-delay: 1s; animation-iteration-count: infinite; animation-timing-function: linear; opacity: 0;}
.med_load n-ext:before { opacity: 1;}
  @keyframes blink_2 {
      0% { background-color: white;}
      49% {background-color: white;}
      50% { background-color: red;}
      100% { background-color: red;}
    }

.adress_wr {margin: .6rem 0 0 0;}
.adress_wr > p {  margin-bottom: .25rem;}
.bill_wr { display: flex;  border: solid .03rem #008FD2; border-radius: .1rem; overflow: hidden;}
.bill_wr input { line-height: 1rem; padding: 0 .1rem; border: none; border-right: none; border-radius: 0;  font-size: 1em; text-align: center;  font-size: .8em; color: #008FD2; font-weight: 700;  }
.bill_wr input:nth-child(1) { width: 50%;}
.bill_wr input:nth-child(2) { width: 18%; background-color: rgb(240,240,250);}
.bill_wr input:nth-child(3) { width: 32%;}



#link_load { position: absolute; display: none; text-align: left;}
#link_load scr-l { position: absolute; height: 100%; width: 100%; overflow-y: scroll; top: 0; left: 0; padding: 1.2rem .7rem 1rem .7rem; z-index: 0;}
.second_open #link_load { display: block;}
#link_load h1 { font-size: 1.27rem; color: #008FD2; margin: 1.2rem 0 .5rem 0; line-height: 1.2;}
#link_load h2, #link_load h3 { font-size: .8rem; margin: 1rem 0 .3rem 0; line-height: 1.2;}
#link_load p { margin-bottom: .125rem;}

#info { position: fixed; width: 100%; text-align: center; background: white; color: white; font-weight: bold; font-family: arial; text-align: center; padding: .35rem .125rem; margin: auto; top: 35vh; left: 0; z-index: 99999999999999999; display: none; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); transform: translateY(-50%); font-size: .45rem; text-transform: uppercase; line-height: 1.5; }
  #info p { color: black;}
  #info span { color: rgb(255, 255, 156);}

 .page_2 #content_first, .page_2 #content_third { display: none;}
  .page_4 #content_first, .page_4 #content_third { display: none;}
   .page_5 #content_first, .page_5 #content_third { display: none;}
      .page_6 #content_first, .page_6 #content_third { display: none;}
          .page_7 #content_first, .page_7 #content_third { display: none;}
           .page_8 #content_third { display: none;}

 #content.page_4 { background-color: rgba(0,0,0,.6); overflow-y: scroll;}
 #content.page_5 { background-color: rgba(0,0,0,.6); overflow-y: scroll;}
 #content.page_6 { background-color: rgba(0,0,0,.6); overflow-y: scroll;}
 #content.page_7 { background-color: rgba(0,0,0,.6); overflow-y: scroll;}
 #content.page_8 {  background-color: rgba(35,77,118,.5); overflow-y: scroll;}

 
#f_ant_w { color: black; text-align: left !important;}
.page_8 #fragen_wr > div { border: none;}
 #f_k_a { margin-top: 1.41rem; font-size: 1.05em; }
 #f_k_a p { margin-bottom: 0; height: 1.15rem; line-height: 1.15rem; }
 #fragen_wr a-nt { display: none; line-height: 1.65; padding-left: .6rem; padding-right: .1rem; color: black;}
 #f_ant_w > div { display: none;}
  #f_ant_w > div.ac { display: block;}

  .page_8 #f_k_a { display: none;}
  .page_8 #content_first p, .page_8 #content_second p, .page_8 #content_third p { padding-bottom: unset;}
    .page_8 #fragen_wr { display: block;}
      .page_8 #kontakt_wr { display: none;}
  
  #fragen_wr > div { background-color: white; margin-bottom: .3rem; border-radius: .1rem; padding: .22rem; border: solid .03rem #008FD2
; cursor: pointer;}
  #fragen_wr > div.ac a-nt { display: block; }
  #fragen_wr > div > p { line-height: 1.3; margin: 0; font-weight: 600; color: #444; letter-spacing: -.00005rem; }
   #fragen_wr > div.ac > p { padding-bottom: .2rem;}
   #fragen_wr > div.ac { background-color: #FCFFDA;;}



#kontakt_wr input[type=text], #sub_mit { width: 100%; height: 1.35rem; line-height: 1.35rem; padding: 0 .3rem; border: none; font-family: Outfit; }
#kontakt_wr input[type=text] { margin-bottom: .5rem; border: solid .03rem #008FD2; border-radius: .1rem; font-size: 1em;}
#sub_mit { text-align: center; font-size: .8rem; color: white; text-transform: uppercase; background-color: #008FD2; cursor: pointer; font-weight: bold; border-radius: .1rem; height: 1.45rem; line-height: 1.45rem;}
#kontakt_wr textarea { height: 6.5rem; width: 100%; padding: .3rem; font-family: Outfit; border: solid .03rem #008FD2; margin-bottom: 0.5rem; border-radius: .1rem; font-size: 1em; }
#mehlme { height: 1.6rem; width: 100%; margin: 1.1rem 0 1.1rem 0; background-image: url(img/mehl.svg); background-size: 98.8% auto; background-position: center; background-repeat: no-repeat; opacity: .95; cursor: pointer;  }

#kontakt_wr input:focus, #kontakt_wr textarea:focus { background-color: #FCFFDA;}
  .kontaktformular {  cursor: pointer; text-decoration: underline;}

  m-l { cursor: pointer; text-decoration: underline;}

  g-green { color: rgb(181, 253, 181);}

@media screen and (max-aspect-ratio: 100/160)  { 
  html { font-size: 9.43vw; }
  body {  font-size: .51rem; overflow: unset;  color: #165C9A; font-weight: 500; height: auto; position: unset;}
  #bg { border: none; width: calc(100% + 1.4rem); height: unset; border-radius: 0; position: sticky; right: auto; margin-left: -.7rem; overflow: unset; top: 0; bottom: 0; margin-bottom: 6rem; margin-top: 103vw;  }
#f_k_a { font-size: .85em; }
#fragen_wr > div { margin-bottom: .4rem; padding: .3rem .2rem;}
  #hasen:after { width: 108%;  background-position: top center; background-image: url(img/bg.webp); aspect-ratio: 800 / 1536; position: absolute; }
#hasen_oben { width: 98%; left: 1%; bottom: auto; top: .5vh;}
  #hasen  { width: 100%; top: 0; bottom: auto; position: absolute; height: 100vh; overflow: clip;  }
  #stange { top: 50vw; height: calc(55vh + 47vw); width: .23rem;}
  #content, #content.page_4, #content.page_5, #content.page_6, #content.page_7, #content.page_8 { width: 100%; padding: 1rem .7rem 0 .7rem; background: none; height: unset; overflow: unset; }
   #content:after { width: 100%; content: ""; width: 100%; background-image: url(img/wolken.webp); height: 93vw; background-repeat: no-repeat; position: absolute; top: 0; left: 0; z-index: -1; background-size: 100% 100%;}
  #content_first { position: absolute; top: 8.7rem; left: .7rem; width: calc(100% - 1.4rem);}
  #content_second { margin-top: 22rem;}
   #content_third { margin-top: 1.35rem; margin-bottom: 1.6rem;}
  #logo_h1 { font-size: 26vw; background-image: none; color: white; line-height: 1; text-align: center; margin-left: 0; aspect-ratio: unset; text-align: right; padding-right: 0; position: absolute; top: 1.1rem; left: .7rem; width: calc(100% - 1.4rem);}
  #logo_h1  span { display: block;  margin-left: 0; letter-spacing: .03rem; text-align: left;}
   #content > div { background-color: rgba(255,255,255,.95); padding: .3rem .36rem .3rem .36rem; margin-left: 0;  border-radius: .1rem; margin-right: 0; text-align: left; }
    #content.page_8 > div#content_second { background-color: transparent; padding: 0;}
   #content.page_3 > div#content_third { padding: 0; background-color: transparent;}
  #content.page_3 > div#content_third p { background-color: rgba(255,255,255,.95); padding: .3rem .36rem .3rem .4rem; margin-bottom: 1.2rem; border-radius: .1rem;}
   #content_third ul li { text-align: right;}
   #content_third ul li:before { background-image: url(img/stern_mob.svg); background-size: 65% auto;   }
  #preis_content { width: 100%; position: relative;}
  #menu_button { width: 1.35rem; height: 1.35rem; top: .7rem; right: .7rem;}
  #hasen:before {  width: 40%; bottom: auto; top: calc(100vh - 40vw); position: absolute; display: block;}
  #content:before { display: none;}
  #preis_content { position: relative; padding: 0; height: 140vh; background: none;  }
  .kasse   #preis_content { height: auto;}
  .kasse #menu_button { display: block;}
   .kasse #menu_button, .kasse #menu { position: absolute; }
  #pr_norm {   width: 100%; left: 0; background-color: white; padding: 0 0 0 .35rem;  text-align: center; color: #008FD2;; position: sticky; 
    bottom: auto; top: 80vh;  margin-top: 0; height: fit-content; display: flex; height: 1.57rem; border-radius: .2rem; cursor: pointer;    }
  #preis_content #kaufen { margin-left: auto; margin-right: auto; position: relative; left: 0;  font-size: 1rem; height: unset; line-height: unset; margin: 0 0 0 auto; display: flex; align-items: center; width: 58%; letter-spacing: .06rem; border-radius: 0 .2rem .2rem 0; color: #008FD2; padding: .05rem 0 0 .45rem;   }
  #preis_content #preis { height: unset; line-height: unset; display: flex; align-items: center; font-size: 1rem; margin: 0; padding-top: .05rem;}
  #preis_content #preis span { font-size: 1rem !important; }
  #link_load scr-l { padding-left: .4rem; padding-right: .4rem;}
  #preis_content e-u { font-size: 1rem !important; padding-left: .125rem;}
  .abh #current_prod { display: none;}
  #tipp { margin-top: 0;}
  #preis_content #inkl { font-size: .4rem; text-transform: uppercase; position: absolute; top: -.85rem; left: .1rem; color: white; word-spacing: .02rem; }
  #dreh_buttons { top: 50vh; position: sticky; bottom: 0; margin-top: 4rem; margin-bottom: 1.7rem; height: fit-content;  left: 0; right: auto; background-color: rgba(255,255,255,.85); }
  #dreh_buttons button { width: 1rem; height: 1rem;}
  .kasse  #dreh_buttons { display: none;}

  .r_wr { padding: .5rem .4rem 8.8rem .4rem; height: auto;   top: 0; left: -.7rem; width: calc(100% + 1.4rem); z-index: 100000; position: relative; background-color: rgb(250,250,250); min-height: 100dvh;}
  #link_load scr-l { padding-bottom: 6rem;}
  .abh.r_wr { padding-bottom: 6.4rem;}
  .kasse_button_wr p { height: 1.1rem; line-height: 1.1rem; font-size: 1.1em;}
#kau_was { display: none;}
  .re > div > p, #ges_wr p, .re h3 { font-size: 1.22em;}
   #ges_wr p  {   min-width: 22%; max-width: 24%; }
  #gessi { padding-left: 0; padding-right: .4rem;}
  h-h { padding: .5rem .4rem;}
  haken-agb { height: 1rem; width: 1rem; margin-right: .35rem;}
  click-pp { height: 1.35rem; margin-bottom: .5rem;}
  #abg_gel { font-size: .98em; }

  .bestellung_x { right: .4rem; top: .6rem; }
  .r_wr h2 { font-size: 1.65rem;}
  #ges_wr > div { padding: 0 .42rem;}
  .nav_second {  bottom: 0; right: 0;  justify-content: center; z-index: 60; line-height: 1.1rem; align-items: center; font-size: .75em; width: 100%; margin: 0;  padding: 0; background-color: #165C9A; width: calc(100% + 1.4rem); left: -.7rem;   }

  .nav_second p { margin: 0 .31rem;}


#link_load { position: fixed; width: 100%; left: 0;}
.second_open #fade_in { filter: none !important;}
  
.med_wr img, .med_wr img:nth-child(3n) { width: calc(50% - .15rem); float: none; margin-right: .3rem; margin-bottom: .3rem; aspect-ratio: 100/85;}
.med_wr img:nth-child(2n) { margin-right: 0;}
.med_wr { margin-bottom: -.3rem;}

#media_w { width: 100%; z-index: 222222222; height: 100vh; left: 0; top: 0; bottom: auto; right: auto; background-color: rgb(22,92,154,.95);}

#med_b { width: calc(100% - 1.4rem); max-height: calc(100% - 1.4rem); top: 0; height: 60%;  }


  .page_2 #content_second { margin-top: -6rem; background-color: transparent; padding: 0;}
   .page_2 #hasen > div { display: none;}
     .page_2 #dreh_buttons { display: none;}
     .page_2 .med_wr { margin-bottom: 3rem;}
     .page_2 #hasen:after, #hasen:before { opacity: .25;}
     .page_2 #preis_content { height: 60vh;}
     .page_2 #bg { margin-top: 140vw }
     .page_2 #pr_norm { top: 60vh;}

  #menu {  right: .35rem; top: .35rem; background-color: #7ba3c2; padding:  .4rem .7rem .5rem .7rem; border: solid .05rem white;  width: calc(100% - .75rem); box-shadow: 0 0 .1rem .15rem rgba(0,0,0,0.2); overflow: hidden; white-space: nowrap; }
  #menu > * { margin-top: .5rem; font-size: .8em; height: 1.35rem; line-height: 1.35rem; border: none;}



  #link_load h1 { font-size: 1rem;}
  #ges_wr p, #ges_wr h3 { line-height: 1.5;}
  r_wr h2 { line-height: 1.2; }
  
#mehlme { margin: .8rem 0 .7rem 0;}
.second_open { background-color: white;}
.second_open #content > div, .second_open #bg { opacity: 0;}
#kontakt_wr textarea { height: 5rem;}


}






@media screen and (min-aspect-ratio: 100/50)   { 
  #content, #preis_content { width: 14rem; max-width: 62vh!important;}


  
}

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

   .faq_kont_open #menu_button { display: none;}
 .second_open #menu_button { display: none;} 
#content.page_3 { overflow-y: scroll; }
  /* Breite/Höhe der Leiste */
.windows #content.page_3::-webkit-scrollbar {
  width: .3rem;
  height: 2rem;
}

/* Hintergrund der Leiste */
.windows #content.page_3::-webkit-scrollbar-track {
  background: rgba(0,0,0,0);
}

@supports (-webkit-appearance: none) { .windows #content.page_3 { padding-right: .85rem;}
}
.windows #content.page_3::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.3);
  border-radius: 6px;
  width: .3rem;
  height: 2rem;
}


  
}



@media screen and (max-aspect-ratio: 100/80) and (min-aspect-ratio: 100/160)   { 
  html { font-size: 3.8dvh;}
  body {  overflow: unset; color: #165C9A;   font-weight: 500; }
  #fade_in { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; overflow: scroll; filter: unset !important;}
  #content.page_4, #content.page_5, #content.page_6, #content.page_7, #content.page_8  { background-color: transparent;}
  #content > div { background-color: rgba(255,255,255,.95); padding: .3rem .4rem .3rem .4rem; margin-left: 0;  border-radius: .1rem; margin-right: 0; text-align: left; margin-top: 1.2rem; }
  #hasen:before, #content:before { position: fixed;}
  #preis_content { background: none; padding: 12.9rem .7rem 1rem .7rem; }
  #menu_button { top: 1rem; right: 1rem; }
  #menu { background-color: #A4C1D7; top: .5rem; right: .5rem;}
  .med_wr img, .med_wr img:nth-child(3n) { width: calc(50% - .15rem); float: none; margin-right: .3rem; margin-bottom: .3rem; aspect-ratio: 100/75;}
.med_wr img:nth-child(2n) { margin-right: 0;}
.med_wr { margin-bottom: -.3rem;}
  #dreh_buttons { left: auto; right: 1rem;}
  .nav_second { right: 1rem;}

html body .r_wr { width: 13rem; position: fixed !important; left: 0; right: 0; margin: auto; background-color: white; z-index: 99;}
#hasen { width: 49dvh; top: 1rem;}
#stange { aspect-ratio: 92/11100;}

 #ges_wr p { width: 22%;}
 
#bg { left: 0;  }
#hasen:after { background-position: center; aspect-ratio: 3354 / 2320;}
#link_load h1 { font-size: 1.13rem; }
 #content { margin: auto; padding: 50vh 0 0 0; width: 11rem; background: none; overflow: unset;}
 #preis_content { position: relative;}
 #dreh_buttons { position: fixed;}
 .nav_second { justify-content: end;}
 #pr_norm {   width: 83.5%; left: 0;  background-color: white; padding: 0 0 0 .35rem;  text-align: center; color: #008FD2;; position: sticky; 
    bottom: auto; top: 70vh;  margin-top: 2.3rem; height: fit-content; display: flex; height: 1.57rem; border-radius: .2rem; margin-left: auto; margin-right: auto;   }
  #preis_content #kaufen { margin-left: auto; margin-right: auto; position: relative; left: 0;  font-size: 1rem; height: unset; line-height: unset; margin: 0 0 0 auto; display: flex; align-items: center; width: 58%; letter-spacing: .06rem; border-radius: 0 .2rem .2rem 0; color: #008FD2; padding: .05rem 0 0 .45rem; }
  #preis_content #preis { height: unset; line-height: unset; display: flex; align-items: center; font-size: 1rem; margin: 0; padding-top: .05rem;}
  #preis_content #preis span { font-size: 1rem !important; }
  #preis_content e-u { font-size: 1rem !important; padding-left: .125rem;}
  #preis_content #inkl { font-size: .4rem; text-transform: uppercase; position: absolute; top: -.85rem; left: .1rem; color: white; word-spacing: .02rem; }
    #preis_content { background: none; padding: 0; width: 11rem; }
    .nav_second { left: 8.25%; justify-content: center; width: 83.5%; background-color: #008FD2; height: .8rem; align-items: center; border-radius: .1rem;}
    #content_third ul { text-align: right !important;}
    #content_third ul li:before { background-image: url(img/stern_mob.svg); background-size: 65% auto;   }
    #stange {position: absolute;height: 100%;aspect-ratio: 92/10000; }


#media_w { width: 100%; z-index: 222222222; height: 100vh; left: 0; top: 0; bottom: auto; right: auto; background-color: rgb(22,92,154,.95);}

#med_b { width: 70%; max-height: calc(100% - 5.4rem); top: 0; height: 70%;  }
 
  
}

@media screen and (max-aspect-ratio: 100/52) and (min-aspect-ratio: 100/58)  {
  body { font-size: .51rem;}
#content { padding: 4.3rem 1rem 0 .5rem; width: 12rem;}
.r_wr, #ges_wr > div, h-h { padding-left: .8rem; padding-right: .8rem;}
#preis_content { width: 12rem; padding-left: 1rem; padding-top: 13.1rem;}
#content_second { margin-top: 1.18rem;}
#content_third { margin-top: 1rem;}
#link_load h1 { font-size: 1.13rem;}

}

@media screen and (max-aspect-ratio: 100/58) and (min-aspect-ratio: 100/80)  { 
  #hasen { top: .1rem;}
  #content { width: 13rem;}
  #bg { left: 8.6rem; }
  #preis_content { background: none; text-align: right; padding-top: 13.8rem; padding-right: 1.5rem;}
  #kaufen { margin-left: auto;}
  #menu_button { top: 1rem; right: 1.5rem;}
  #dreh_buttons { left: auto; right: 1.5rem;}
  .nav_second { right: 1.5rem;}
  #menu { top: .5rem; right: 1rem; background-color: #A4C1D7;}
  
}


@media screen and (min-aspect-ratio: 3354 / 1420)  { 
  #hasen:after { background-image: url(img/bg_total_breit.jpg); aspect-ratio: 3354 / 1000; }
#content { width: calc(70vw - 2vh * 50); max-width: 35%; }
#preis_content { width: calc(70vw - 2vh * 50); max-width: 35%; padding-top: 12.3rem; }
#content_first { margin-top: .9rem; }
#content_second { margin-top: 1.5rem;}
#content { margin: 0 auto 0 calc(45vw - 2vh * 50);}
#preis_content { right: calc(45vw - 2vh * 50);}
#menu_button { right: calc(47vw - 2vh * 50)}
#menu { right: calc(46.1vw - 2vh * 50);}

}

@media screen and (min-aspect-ratio: 3354 / 1420) and (orientation: landscape)  { 

  #content { margin: 0 auto 0 calc(53vw - 2vh * 50);}
#preis_content { right: calc(53vw - 2vh * 50);}
#menu_button { right: calc(57vw - 2vh * 50)}
#menu { right: calc(56.1vw - 2vh * 50);}

}


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

#hasen:after { width: 100vw; aspect-ratio: inherit;}
}


@media screen and (max-aspect-ratio: 100 / 218) {

  
    .kasse .r_wr { min-height: 190vw;}
    #hasen:before { background: linear-gradient(180deg,rgba(22, 92, 154, 0) 0%, rgba(22, 92, 154, 1) 80%); content: ""; width: 100%; height: 30%; position: absolute; bottom: -1vw; left: 0; top: auto; opacity: 1;}
    #hasen:after { width: 100%; height: 100%; aspect-ratio: unset;}
    .nav_second { bottom: .6rem;}
    

}



@media (prefers-color-scheme: dark) {
 body { background-color: #405C77 }
@media screen and (max-aspect-ratio: 100/80) and (min-aspect-ratio: 100/160)   {
  body { background-color: #3D5675 } }
  #fade_in {filter: grayscale(.65); }
#hasen:after, #content:before, #hasen:before,  #content:after { opacity: .48; }
}