/*CSS zu Shop*/
@font-face{font-family:'icons';
src:url('../iconfonts/icons.woff2') format('woff2'),url('../iconfonts/icons.woff') format('woff');font-weight:normal;font-style:normal;font-display:block}
.i-star-empty:before{content:"\e9d7"}
.i-star-half:before{content:"\e9d8"}
.i-home:before{content:"\e902"}
.i-star-full:before{content:"\e9d9"}
.i-herz:before{content:"\e9da"}
.i-traube:before{content:"\e9db"}
.i-cart:before{content:"\e93a"}
.i-tel:before{content:"\e942"}
.i-user:before{content:"\e971"}
.i-such:before{content:"\e986"}
.i-menu:before{content:"\e9bd"}
.i-menu2:before{content:"\e9bf"}
.i-logo:before{content:"\e900"}
.i-fb:before{content:"\ea90"}
.i-inst:before{content:"\ea92"}
[class^="i-"],[class*=" i-"]{font-family: 'icons' !important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1}

.i-txt{position:absolute;width:1px;height:1px;overflow:hidden}
header{position:sticky;background-color:#fff}
header.active{top:var(--_top)}

#leiste{display:flow-root;margin-top:.5em;height:2.25em}
#leistentxt{margin-left:.5em;font-size:.85em}
#kdn{font-size:1.25em}

/* Kopf */
#k{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:1200px;margin:-1.5em auto .5em}
#mk{grid-column:2;position:relative;width:300px;height:140px;transform:translateX(-25px)}
#adr{position:absolute;top:75px;left:75px;color:#555;line-height:1.25;text-align:center;white-space:nowrap;font-style:italic}
#lg,#lg img{display:block}

#su{grid-column:3;position:relative;display:flex;align-items:center;justify-content:flex-end;justify-self:end;width:24em}
#su-sw{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.su-auf,.su-go{display:flex;align-items:center;justify-content:center;height:2.5em;color:#000;cursor:pointer}
.su-auf{position:absolute;right:0;width:2.5em;font-size:1.25em}
#search{display:flex;align-items:center;overflow:hidden;opacity:0;visibility:hidden;white-space:nowrap;transition:opacity .3s}
#su-sw:checked~#search{opacity:1;visibility:visible}
#su-sw:checked+.su-auf{display:none}
#suchbegriff{width:19em;min-width:0;height:2.5em;padding:.4em .6em;border:1px solid #999;font-size:100%}
.su-go{width:2.5em;border:0;background:transparent;font-size:1.15em}

*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif,Verdana}
body,#f ul, #ful li,figure{margin:0;padding:0}
#leiste,#herobutton,.ess-cont{background-color:#fff}
#leiste{height:2.25em}
#leistentxt{margin-left:0.5em;font-size:0.85em}
#kdn{font-size:1.25em}
.br900,.br-mobil,.br600,.br-tablet{display:none}
img{border:0;max-width:100%;height:auto}
#top{z-index:1001}
/*Slider Bestseller */
.card,.cardpi,#grew,#prew,#srew,.ess,#krew,#gb{display:flex}
.card{min-height:250px;overflow-x:auto}
.card--content{min-width:200px}
.card,#grew,#krew,.ess,#gb{min-width:100%}
.cardpi{min-height:400px;overflow-x:scroll;margin:0 2em 4em 0}
.card--contentpi{min-width:300px}
#grew,#prew,#srew,#krew,#gb{overflow-x:auto}
#grew,#krew,#gb{height:340px}
#prew,#srew{height:250px}
#prew > .card-content-prew,#srew > .card-content-prew{width:250px;flex:0 0 240px}
.card-content-grew,.card-content-prew{background-color:#fff;border:1px solid #ccc;min-width:240px;padding:.5em 1.5em;line-height:1.25em;overflow-y:auto}
.card-content-grew,.card-content-prew{margin:0}
#prew,#srew{min-width:0;flex:1 1 auto}
.prew-row{display:flex;column-gap:4em;row-gap:1.5em;align-items:flex-start;margin-top:2em}
.prew-stat{flex:0 0 220px}
.ess{background-color:#ccc;min-height:60px;overflow-x:auto}
.ess-cont{min-width:120px;margin:1em;padding:1em 0.5em 0.5em;text-align:center}
.essempf{clear:both;margin:4em 0 1em}
.shoprev-einzel{margin:-.75em 0 -.5em;font-size:.7em;line-height:1.25em}
.shoprev-sterne{color:#e5b700;white-space:nowrap;letter-spacing:-.1em;font-size:1.25em}
.kdf{display:flex;min-height:250px;min-width:100%;overflow-x:auto}
.kdf_inh{min-width:200px;margin:1em 1em 1em 0}
#flexbox{display:flex;border:2px solid #f00}
.trenner{margin:1em;color:#000;clear:both}
.prod{margin:0}
.prod h2{margin-top:0em}
.prod ul,.trust{list-style-type:none}
.prod li{text-indent:-1.5em;margin:0.25em 0 0 1.5em;line-height:1.35em;}
.prod li::before{content:"✓";color:#696;padding-right:0.25em;font-size:1.5em;font-weight:bold}
.trust{margin:0;padding:0}
.trust li{text-indent:-1.5em;margin:0 0 0 1.2em;line-height:1.35em}
.trust li::before{content:"✓";color:#696;padding-right:0.35em;font-size:1.35em;font-weight:bold}
.trust_ue{font-size:1.15em;font-weight:bold}
.av{margin:0 1em 1em 0}
.align{vertical-align:sub}
#warum{margin:3em 0}
#warum,#faq{border:1px #093 solid}
#warum,#faq{padding:0.01em 2em 1em}
#warum h2{margin-bottom:-0.5em}
#warum h3{margin-top:1em;color:#00611c}
.warumtxt{width:32%}
#warum li{margin-top:.5em}
.faq-more{max-height:0;overflow:hidden;transition:max-height 0.4s ease}
.faq-toggle:checked ~ .faq-more {max-height:2000px}
.cat-top-text{max-height:0px;overflow:hidden;transition:max-height 0.4s ease}
.cat-toggle:checked ~ .cat-top-text{max-height:25000px}/* Ausklappen */
.cat-toggle,.faq-toggle{display:none}/* Checkbox unsichtbar */
.cat-label,.faq-label{display:inline-block;margin:0;cursor:pointer}
.faq-label{color:#039}
.cat-label{font-size:80%;color:#666}
.cat-label::after,.faq-label::after{content:attr(data-open)}
.cat-toggle:checked ~ .cat-label::after,.faq-toggle:checked ~ .faq-label::after{content: attr(data-close)}
.cat-label:hover,.cat-label:focus,.faq-label:hover{text-decoration:underline}
details>summary.akk:focus,details>summary.akk:-moz-focusring{outline:none}
.akk{background:#e6ffe6;font-weight:bold;padding:.5em 0.5em .5em}
.ohne a,.button-g,.sb-ge,.button,.sb-go,.sb-gr,.button a,.button-g a,.sb-ge a,.sb-gr a,.plumi{color:#000}
a{color:#039}
a:hover{color:#03C}
.pwv a,.pl_lpr,.small,.mini{color:#666}
.rot,.neuWK,.errorText{color:#B30000}
.gruen{color:#060}
.l-gruen{color:#093}
.blau{color:#069}
.grau{color:#777}
.linie{color:#ccc;margin:2em 0;clear:both}
.trennlinie{border-top:1px solid #e8e8e8}
.wk_del a{color:#c00}
a,.ohne a:hover,.kat a,.ukat a,.pwv a,.button a,.button-g a,.sb-ge a,.sb-gr a,.button:hover,.button-g:hover,#herotxt a{text-decoration:none}
.toptxt,#herotxt{max-width:1200px}
#f,#m,#b,#sterne{max-width:1000px}
#sterne{margin:1em auto 0}
.fgruppe{display:contents}
#f{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:3em;row-gap:2em;margin:3em auto 0;padding:2em 0 3em;border-top:3px solid #ccc}
.ff{min-width:0}
#f ul li{list-style:none}
#f li{margin:0 0 .25em}
.osc{grid-column:1/-1;padding-top:2em;line-height:1.3em}
#f .fsocial{margin-top:1.25em}
#spr,.modal-content{position:relative}
#reb{margin:0 0 0 4em}
#hero{height:450px;background-image:url("images/weingut-fuchs-weine-online-kaufen.webp");
background-position:center;background-repeat:no-repeat;background-size:cover}
#herotxt{margin:3em auto;color:#fff;font-weight:700;letter-spacing:2px}
#herotxt h1{font-size:400%;margin-left:10px}
#herotxt p{font-size:250%;line-height:1.25em;margin-left:10px;margin-bottom:.4em}

#herotxt h1,#herotxt p{text-shadow: 3px 3px 3px #16354E,3px -3px 3px #16354E,-3px  3px 3px #16354E,-3px -3px 3px #16354E}
#herobutton{border:none;border-radius:0.25em;outline:0;display:inline-block;padding:0.75em 1.5em;color:#16354E;cursor:pointer;font-size:150%;letter-spacing:0}
.herobutton:hover{background-color:#f00;color:#FFF}
#bestseller{background-color:#ccc}
.prolist{width:315px;height:480px;padding:0.5em;margin:0 1em 1em 0}
.prolist a{color:#333}
#li_img,.links,.img_li,.foto-l,.bli,
.cfix3,.cfix5,.cfix18,.sp1,.sp2,.c15,.c20,.c25,.c50,.c65,.c75,#checkout p,.pl_img,.cardpi,.av,.warumtxt,.prolist,.kdfoto,.fol,.fol45,.fl45,.vid-li{float:left}
#reb,#kdn,#kdk,#spr,.rechts,.foto-r,.img_re,.for,.fr35,.for35,.for45,.bre,.modal-dialog,#pr,.pl_eur,.medrund,.weinfind{float:right}
#f,footer,.clearfix:after,.osc,.cl,.pl,.bst,.sp1,#navi,.bre:after,.wk,#k,#grew,#srew,#krew,#produkte{clear:both}
#herotxt h1,#herotxt p,.li,.UeWK,table.space2{text-align:left}
.re,.foto-r,.pl_re,.for,.for45,#sterne{text-align:right}
.mi,.kat,.ukat,.button,.button-g,#checkout p,.sb-go,.sb-ge,.sb-gr,.card--content,.card--contentpi,#hero,#herobutton{text-align:center}
.vid-li{width:40%;height:auto;margin:0 2em 2em 0}
#f ul li,.manufacturers{list-style:none}
#kdk .ohne button{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:0;background:transparent;padding:0;line-height:1;font-size:inherit}
.for,.for45,.for35,.weinfind{margin:0 0 2em 3em}
.fol,.fol45{margin:0 3em 2em 0}
.fl45{margin:1em 3em 2em 0}
.fr35{margin:1.5em 0 2em 3em}
.pl_preis{display:flow-root}
.pl_preis>p{margin-top:0}
h1 + h2,h1 + section > h2{margin-top:2em}
h2 + h3,h2 + section > h3{margin-top:1em}
.h1u{display:block;margin-top:.25em;font-size:45%;line-height:1.5;font-weight:normal;color:#666}
.ab125{margin-top:0.125em}
.cfix3,.cfix5,.cfix18,.sp2,.c15,.c25,.c50,.c65,.c75,.c20.anrede{margin-top:0.5em}
.a075{margin-top:0.75em}
.ab1,.ab-d,#sterne{margin-top:1em}
.c20,.a125{margin-top:1.25em}
h2,h3,.ab2,.grew-ue{margin-top:2em}
h4{margin-top:1.75em;margin-bottom:.5em}
#pro-list{list-style-type:none;margin:0;padding:0}
#pro-list > li{margin:0;padding:0}
#pro-list h4{margin-top:0.5em;font-size:100%;font-weight:bold}
#faq,#herobutton,#f,.ab3{margin-top:3em}
.sb-go{margin:1.5em}
.img_re,.foto-r{margin:3em 0 2em 3em}
.medrund{margin:2em 2em 4em 5em}
.foto-l{margin:2em 3em 2em 0}
.sp1{margin:0.5em 0 0 2em}
#b,#m,.toptxt{margin:0 auto}
.m10,.sb-pr{margin:1em 0}
.bli,.bre{margin:2em 0}
.br{margin:0 0 1em 1em}
#pr{margin:0 0 2em 3em}
#li_img{margin:0 2em 1em 0}
.liefer{margin-bottom:.5em}
.abu1{margin-bottom:1em}
.abu1-5{margin-bottom:1.5em}
.abu2{margin-bottom:2em}
#kdn,.mr1{margin-right:1em}
.pl_img{margin:0 0.5em 1em 0}
.b-ab-re{margin-right:3em}
.kdfoto{margin:0.5em}
.a01{padding-top:0.05em}
.pi_eur,.toptxt{padding-top:0.5em}
.pi_pr,.bst{padding-top:0.75em}
.a0{margin-top:0}
.a05{padding-top:0.5em}
.a1{padding-top:1em}
#produkte{padding-top:3em}
.a2{padding-top:2em}
.a3,.osc{padding-top:3em}
input[type=submit],table.space2 td,.naehr td{padding:0.25em}
#checkout p,.unterlegt,.card--contentpi{padding:0.5em}
.pi_pr,.bst{padding-top:0.75em}
.card--content,.br,.pr-det,.sb-go,.sb-ge,.sb-gr,.weinfind{padding:1em}
.button,.button-g,submit.wk_akt{padding:0.75em 1em}
.pou1,.wk,.klWK{padding:1em 1em 1em 0}
.UeWK{padding:1em 0 0 1.5em}
.ue{padding:2em 0 1em}
#spr,.mini-img{padding-right:2em}
.ff{padding-right:3em}
.naehr{max-width:100%;border-collapse:collapse;margin-top:1em}
.naehr{width:36em}
h2{font-size:130%;line-height:1.35}
h3{font-size:110%}
.mini{font-size:45%;line-height:2em}
.t55,.pl_lpr{font-size:55%}
.t65{font-size:65%}
.t70,.pwv{font-size:70%}
.osc,.l-pr,.liefer{font-size:76%}
#sterne,.t80{font-size:80%}
.t90{font-size:90%}
.wb,SELECT,input,.button,.button-g,.bst,#navi,.messageBox,.messageStackSucces,.messageStackError,.messageStackWarning,.sb-go,.sb-ge,.sb-gr{font-size:100%}
TEXTAREA{font-size:110%}
.ue,.pi_eur{font-size:120%}
.big,.pl_eur,.grew-ue{font-size:125%}
.wk_del{font-size:200%}
.mini,.smallText,.l-pr,.pl_lpr{font-weight:normal}
.grew-ue,.UeWK,.sb-go,.sb-ge,.sb-gr,.plumi,.sb-del,.big,.kat a,.ukat a,.pl_eur,.button,.button-g,.wk_del,#checkout p{font-weight:bold}
.pwv{line-height:2em}
.pl_eur{line-height:100%}
.pl_eur{margin-top:-.2em}
.lh130{line-height:130%}
#hero,.prolist,.pr-det,.plumi,input,TEXTAREA,SELECT,#checkout p,.naehr,.naehr td,.naehr-spez,.naehr-spez td,.card--contentpi,.card--content,.weinfind{border:1px solid #ccc}
.plumi{border-radius:0}
.sb-go,.sb-ge,.sb-gr,.button,.button-g{border-radius:0.25em}
table.space0,table.space2{border:none;border-spacing:0}
.clearfix:after,.sb-go,.button a,.button-g a,.sb-ge a,.sb-gr a{display:block}
.toggle,[id^=drop],.modal{display:none}
.clearfix:after{content:" "}
.img_li{width:10%;margin-right:2em}
/*.pl_re{width:45%;z-index:-1}*/
.tab_pr_list td,tr.top,.top,td.top{vertical-align:top}
input[type='radio'] {height:1em;width:1em}
input.bigcheck{height:1.5em;width:1.5em} 
input,SELECT{height:2.5em}
TEXTAREA{height:7em;font-family:inherit}
input[type=submit],.button,.button-g,.plumi,submit.wk_akt{-webkit-appearance:none}
.button-g,.sb-ge{background:#FC0;border:1px outset #FC3}
.button,.sb-go,.sb-gr{border:1px outset #aaa}
.button:hover,.button-g:hover{background:#FF6;border:1px outset #F93;cursor:pointer}
.leer{width:20em;height:5em}
.fade{transition:opacity .15s linear}
.modal{position:fixed;background:rgba(0,0,0,0.5);top:0;left:0;height:100%;z-index:1050;outline:0}		
.modal-dialog{border:5px solid #ccc;width:30em;height:100%;overflow-y:scroll}
.modal.fade .modal-dialog{transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out}
.modal-content{background-clip:padding-box;padding:2em}
#navi,.button,.sb-go,.sb-gr{background:#ccc}
.unterlegt{background:#FFC}
.messageStackError, .messageStackWarning{background:#ffb3b5}
.messageStackSuccess{background:#99ff00}
.checkBarCur{background:#FC3}
.checkBarErl{background:#6C6}
.plumi,SELECT,.modal-dialog,.checkBarOff{background:#fff}
submit.wk_akt{height:2em;background:#f00}
#navi{height:auto}
.cfix3{width:3em}
.cfix5{width:5em}
.w7{width:7em}
.w10{width:10em}
SELECT,.button,.button-g,.sp1{width:12em}
.w15,#checkout p{width:15em}
.cfix18,.w18{width:18em}
#pr,.weinfind{width:20em}
.pr-det{width:30em}
.c15{width:15%}
.c20{width:20%}
.c25{width:25%}
.c50,.tab_pr_list td{width:50%}
input.text,input.tel,input.email,input.pasword,TEXTAREA{width:60%}
.c65{width:65%}
.c75{width:75%}
.sb-go{width:88%}
header,.cardpi,.sb-ge,.sb-gr,.modal,table.w100{width:100%}
#checkout p{line-height:1.5em;margin-bottom:-1em}
.stars{display:inline-block;white-space:nowrap;font-family:'icons' !important;line-height:1}
.stars i{margin-right:0.1em}
.stars_on,.bg-gelb{color:#e5b700} /* gelb */
.stars_off{color:#e5b700} /* leere Sterne grau */
.review_stats_head{margin-bottom:1.5em}
.review_stats_row{display:flex;align-items:center;gap:8px;margin-top:.5em}
.review_stats_label{width:40px}
.review_stats_bar{flex:1;height:1em;border:1px solid #999;border-radius:5px;background:#fff;overflow:hidden}
.review_stats_fill{height:100%;background:#999}
.review_stats_count{width:30px;text-align:right}
.review_stats_pct{width:40px;text-align:right}
.inputError{background:#fff0f0;border-color:#c03}
.inputErrorBox{background:#fff0f0;border:1px solid #c03;padding:.25em}
.inputErrorText{color:#c03;font-size:90%;padding-top:.25em;line-height:1.5;margin-top:.5em}
.subh2{display:block;font-size:90%;font-weight:400;line-height:1.25;padding-top:.35em}

/* Warenkorb */
.wk{display:grid;grid-template-columns:3em minmax(0,1fr) minmax(17em,35%) 2em;gap:1em;align-items:start}
.wk_img{grid-column:1;grid-row:1}
.wk_txt{grid-column:2;grid-row:1}
.wk_meng_pr{grid-column:3;grid-row:1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:1em}
.wk_preis{justify-self:end;text-align:right;white-space:nowrap}
.wk_meng_pr .menge-eingabe{justify-self:end}
.wk_del{grid-column:4;grid-row:1;text-align:right}
.wk_summe{padding:0 1em 0 0}
.wk_summe_text{grid-column:1/3;text-align:left}
.wk_summe_betrag{grid-column:3;text-align:right;white-space:nowrap}

.sb-pr{display:grid;grid-template-columns:35px minmax(0,1fr);grid-template-rows:min-content minmax(min-content,1fr);column-gap:1em;align-items:start;align-content:start}
.sb-img{grid-column:1;grid-row:1/3}
.sb-oben{grid-column:2;grid-row:1;position:relative;padding-right:1.5em}
.sb-unten{grid-column:2;grid-row:2;display:flex;justify-content:space-between;align-items:center;gap:1em;margin-top:1em}
.sb-name{min-width:0}
.sb-del{position:absolute;top:0;right:0;color:#C03;font-size:150%;line-height:1rem;cursor:pointer}
.sb-eur{text-align:right;white-space:nowrap}
.sb-menge .menge-feld>input{width:3em;padding-right:0}
.sb-summe{display:flex;justify-content:space-between;align-items:center}

.pi-sprungnav{position:sticky;top:var(--_head,0px);z-index:1000;background:#fff;border-bottom:1px solid #ccc}
#pi-buy,.pi-buy-zu,.pi-sticky-buy{display:none}
.pi-sprungnav-links{position:relative;z-index:2;text-align:center;padding:.5em;font-size:80%;color:#666}
.pi-sprungnav-links label,.pi-sprungnav-links a{color:#666;cursor:pointer}
#pi-buy:checked~.pi-buy-zu{display:block;position:fixed;inset:0;z-index:1}
#pi-buy:checked~.pi-sticky-buy{display:block}
.pi-sticky-buy{position:relative;z-index:2;max-width:1000px;margin:auto;padding:.65em 1em 1.2em;border-top:1px solid #ddd;text-align:center}
.pi-toplink{position:fixed;right:0;bottom:0;left:0;z-index:1000;background:#fff;border-top:1px solid #e8e8e8;text-align:center;padding:.35em;font-size:80%}
.pi-toplink a,.pi-toplink label{color:#666;cursor:pointer}

/* Mengen-Schnellwahl auf Produktseiten */
.bst{position:relative}
.menge-eingabe{display:inline-flex;align-items:center;vertical-align:middle}
.menge-feld{position:relative}
.menge-feld>input{width:4em;padding-right:1.2em}
.menge-wahl{position:absolute;right:1px;top:1px;bottom:1px;width:1.3em}
.menge-wahl summary{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:0;background:transparent;list-style:none;cursor:pointer}
.menge-wahl summary::-webkit-details-marker{display:none}

/* Mengenauswahl – Außenrahmen*/
.menge-wahl-liste{display:none;position:absolute;bottom:80%;left:0;z-index:1100;width:100%;padding:2em 0 .5em 0;background:#fff}

.bst:has(.menge-wahl[open])>.menge-wahl-liste{display:block}
.menge-wahl-liste button{font:inherit;color:#000;cursor:pointer}
.menge-wahl-liste button:hover{background:#dcdcdc}
.menge-wahl-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5em;font-weight: bold}
.menge-wahl-zu{padding:0;border:0;background:transparent;font-size:2em;line-height:1}
.menge-wahl-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1em;row-gap:.3em}

/* grüne Zeile Staffelpreise */
.menge-staffel-hinweis{grid-column:1/-1;padding:.15em;text-align:center;font-size:85%;margin-top:0.5em;color:#006400}

/* Mengenauswahl Buttons */
.menge-wahl-option,.menge-andere{min-height:2.25em;padding:.15em 0;align-items:center;justify-content:center;}
.menge-wahl-option{position:relative;display:flex;gap:1em}

/* Mengenauswahl Buttons 1. Zeile + andere Menge */
.menge-wahl-option,.menge-andere{border:1px solid #ccc;background:#fff;appearance:none;-webkit-appearance:none}
/*2. Zeile*/
.menge-wahl-option.menge-staffel-aktiv{border:1px solid #093}

/*3. Zeile*/
.menge-andere{display:block;width:100%;margin-top:.5em}

/* Direktkauf in Produktkacheln */
.pl-kaufen{display:flex;align-items:center;justify-content:flex-end;gap:.3em;margin-top:0}
.pl-kaufen input{width:3em;text-align:center}
.pl-warenkorb{display:flex;align-items:center;justify-content:center;width:2.5em;height:2.5em;border:1px outset #FC3;background:#FC0;font:inherit;cursor:pointer}
.pl-warenkorb:hover{background:#FF6;border:1px outset #F93}
/* Mengen-Schnellwahl in Produktkacheln */
/* Mengen-Schnellwahl in Produktkacheln */
.pl-kaufen.bst{padding-top:0;clear:both}
.pl-kaufen .menge-feld>input{width:4em;padding-right:1.2em}
.pl-kaufen .menge-wahl-liste{right:-.25em;left:auto;bottom:100%;width:18em;padding:2.5em .75em .75em}



/* Kategorie- und Unterkategoriekacheln */
.katgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:86%;column-gap:3em;row-gap:2em;align-items:start}
.kat,.ukat{min-width:0;padding:0;text-align:center}
.kat img,.ukat img{display:block;width:100%;height:auto;margin:0 auto}
.kat figcaption,.ukat figcaption{margin-top:1em}

.pl_lpr{position:relative;top:-.25em}

.for{width:fit-content}
.foto-r_resp img{display:block;width:100%;height:auto}

.fl-resp{float:left;margin:2em 3em 2em 0}
.fr-resp{float:right;margin:2em 0 2em 3em}
.for-resp{float:right;margin:.5em 0 2em 3em}
.fl-resp img,.foto-r_resp img, .for-resp img{display:block;width:100%;height:auto}

.for-red{float:right;margin:.5em 0 2em 3em}
.for-red img{display:block;width:100%;height:auto}

.bu-l,.bu-r{margin-top:.5em;font-size:90%;font-style:italic;display:block;contain:inline-size}
.bu-l{text-align:left}
.bu-r{text-align:right}
.sum-naehr{padding-left:.85em;text-indent:-.85em;line-height:130%;font-weight:bold}
.hpform{}
.pay-zeile{display:grid;grid-template-columns:2em minmax(0,1fr) auto;align-items:center;column-gap:1em}
.pay15{min-width:0}
.zahlungslogo{width:auto;justify-self:end}
.zahlungslogo[src$="zahlung_paypal.jpg"]{height:28px}
.zahlungslogo[src$="zahlung_klarna.jpg"]{height:26px}
.zahlungslogo[src$="zahlung_applepay.jpg"]{height:32px}
.zahlungslogo[src$="zahlung_googlepay.jpg"]{height:32px}
.zahlungslogo[src$="zahlung_sepa.jpg"]{height:18px}

.eu-gar{margin-top:.1em}
.eu-gar-auf{padding:0;border:0;background:none;font-size:.8em;color:#0645ad;cursor:pointer}
#eu-gar[hidden]{display:none}
#eu-gar{position:fixed;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;padding:4px}
.eu-gar-back{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.eu-gar-dialog{position:relative;z-index:1;max-width:760px;max-height:90vh;padding:30px 0 0;background:#fff;overflow:auto}
#eu-gar-inh img{display:block;width:100%;height:auto}
.eu-gar-zu{position:absolute;top:4px;right:10px;border:0;background:none;font-size:30px;line-height:1;cursor:pointer}
body.eu-gar-offen{overflow:hidden}

/* Nährwert-Overlay in Produktlisten */
.prolist{position:relative}
.pl-naehr-auf{position:absolute;left:.5em;bottom:1em;padding:0;border:0;background:transparent;color:#039;font:inherit;font-size:80%;text-align:left;cursor:pointer}
.pl-naehr-auf:hover{text-decoration:underline}
#pl-naehr[hidden]{display:none}
#pl-naehr{position:fixed;z-index:1100;inset:0;display:flex;align-items:center;justify-content:center;padding:1em}
.pl-naehr-back{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.pl-naehr-dialog{position:relative;z-index:1;width:100%;max-width:600px;max-height:90vh;overflow:auto;padding:2em;background:#fff}
.pl-naehr-dialog h2{margin:0 2em 1em 0}
.pl-naehr-zu{position:absolute;top:.25em;right:.5em;padding:0;border:0;background:transparent;font-size:2em;cursor:pointer}
body.pl-naehr-offen{overflow:hidden}

.gs-motive{display:flex;flex-wrap:wrap;gap:15px;align-items:flex-start}
.gs-motiv{position:relative;display:block;flex:0 0 300px;width:250px;aspect-ratio:297/210;overflow:hidden;background:#fff;color:#222;text-decoration:none;box-sizing:border-box;border:1px solid #999}
.gs-motiv>img{position:absolute;display:block}
.gs-motiv-1>img,.gs-motiv-2>img,.gs-motiv-3>img,.gs-motiv-4>img,.gs-motiv-5>img,.gs-motiv-6>img,.gs-motiv-7>img{left:0;top:0;width:100%;height:auto}
.gs-motiv-10>img{left:0;top:0;width:100%;height:100%;object-fit:cover}
.gs-wert,.gs-txt,.gs-adr,.gs-qr,.gs-logo{position:absolute}
.gs-logo{left:3%;top:60%;width:18%}
.gs-logo img{display:block;width:100%;height:auto}
.gs-wert{left:27%;top:62%;font-size:.8em;font-weight:bold;font-style:italic}
.gs-txt{left:32%;top:73%;font-size:.5em;color:#aaa}
.gs-adr{left:0;bottom:3%;width:100%;font-size:.5em;text-align:center}
.gs-qr{right:4%;top:57%;width:8%}
.gs-qr img{display:block;width:100%;height:auto}
.gs-motiv-10 .gs-wert{left:28%;top:33%;text-align:center}
.gs-motiv-10 .gs-txt{left:0;top:80%;width:100%;text-align:center}
.gs-motiv-10 .gs-adr{left:3%;top:7%;text-align:left}
.gs-motiv-10 .gs-qr{top:7%}
.gs-motiv-10 .gs-logo{left:40%;top:7%;width:25%}
.gs-swipe{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* =========================================================
NAVIGATION (NEU) – Desktop first
========================================================= */
#navi{width:100%;background:#ccc;position:relative;z-index:1000;clear:both}
#navi .navbar{max-width:1200px;margin:0 auto;position:relative}
#navi ul{list-style:none;margin:0;padding:0}
#navi a,#navi a:link,#navi a:visited{color:#000;text-decoration:none}
#navi a:hover,#navi a:active{color:#00f;text-decoration:underline}
#navi ul.menu{display:flex;justify-content:center;align-items:center}
#navi ul.menu>li>a,#navi ul.menu>li>.menu-label{display:block;padding:.9em 1em;white-space:nowrap;color:#444}
#navi ul.menu>li:hover>a,#navi ul.menu>li>a:hover{background:#fff;color:#00f;text-decoration:underline}
#navi ul.menu>li:hover>.menu-label{background:#fff;color:#000;text-decoration:none}
#navi input[type=checkbox],#navi .toggle-main,#navi .toggle-close{display:none}
#navi .menu-label{cursor:pointer}
#navi li.has-mega>ul{display:none;position:absolute;top:100%;left:0;width:100%;background:#fff;border:2px solid #ccc;box-sizing:border-box}
#navi li.has-mega:hover>ul{display:block}
#navi .mega-inner{display:flex;flex-wrap:wrap;gap:1.25em;padding:1.4em 1em 5em 2em;align-items:flex-start}
#navi .mega-inner-4 .mega-col{flex:0 0 calc(25% - .95em)}
#navi .mega-toplink{flex:0 0 100%;margin-top:1.5em;font-weight:700}
#navi .mega-toplink a{display:inline-block}
#navi .mega-col{flex:1 1 0;min-width:0;text-align:left}
#navi .mega-head,#navi .mega-subhead{font-weight:700}
#navi .mega-head{margin-bottom:.45em}
#navi .mega-subhead{margin:1.5em 0 .45em}
#navi .mega-list{margin:0;padding:0;list-style:none;text-align:left}
#navi .mega-list li a{display:block;padding:.32em 0;white-space:normal;line-height:1.25;font-size:.95em}
#navi .mega-columns{columns:2;column-gap:1em}
#navi .mega-columns li{break-inside:avoid}
#navi .mega-columns-4{columns:4}
#navi .mega-sep{border:0;border-top:1px solid #d7d7d7;margin:.9em 0 .7em}

/******** Navi für große Tablets: Verkleinerung 3-stufig ********/
/* 1051–1159 Pixel */
@media(max-width:1159px) and (min-width:1051px){
#navi{font-size:100%}
#navi ul.menu>li>a,#navi ul.menu>li>.menu-label{padding:.9em .6em}
}

/* 981–1050 Pixel */
@media(max-width:1050px) and (min-width:981px){
#navi{font-size:95%}
#navi ul.menu>li>a,#navi ul.menu>li>.menu-label{padding:.9em .6em}
}

/* 901–980 Pixel */
@media(max-width:980px) and (min-width:901px){
#navi{font-size:90%}
#navi ul.menu>li>a,#navi ul.menu>li>.menu-label{padding:.9em .4em}
}
/* Seitenabstand große Tablets */
@media(max-width:1020px) and (min-width:901px){
#f,#m,#b{padding-left:.5em;padding-right:.5em}
}
/* Logo große Tablets mittiger */
@media(max-width:1099px) and (min-width:901px){
#k{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
}

/******** product_list nur für Desktop ********/
@media(min-width:901px){

#pro-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1em}
#pro-list>li{display:flex}
.prolist{display:flex;flex-direction:column;float:none;width:100%;height:auto;margin:0}
.pl_inhalt{flex:1 1 auto}
.pl_preis{margin-top:auto}

}


@media(max-width:900px) and (min-width:601px){
#pro-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1em}
#pro-list>li{display:flex}
.prolist{display:flex;flex-direction:column;float:none;width:100%;height:auto;margin:0}
.pl_inhalt{flex:1 1 auto}
.pl_preis{margin-top:auto}
}

/****** bis 900 Pixel Breite *******/
@media all and (max-width:900px) {
#k{grid-template-columns:1fr auto 1fr;align-items:start;max-width:none;margin:-2em 0 .5em}
#leiste{margin-top:0}
.br900{display:inline}
.hide{display:none}

#mk{grid-column:2;position:relative;justify-self:center;align-self:start;width:200px;height:100px;transform:translateX(-10px)}
#lg img{width:180px}
#adr{top:58px;left:54px;font-size:75%;line-height:1.15}

#su{grid-column:3;position:relative;top:1em;width:2.5em;justify-self:end;align-self:center}
#search{position:absolute;top:50%;right:0;transform:translateY(-50%);display:none;margin:0}
#su-sw:checked~#search{display:flex}
#suchbegriff{width:17em}

#hero{height:300px}
#herotxt{margin-top:3em;max-width:880px;padding:0 1em}
#herotxt h1{font-size:250%}
#herotxt p{font-size:150%;line-height:1.5em}
#herobutton{margin-top:.5em;font-size:120%}
#b>h2.ab3{margin-top:1.5em}
#b{max-width:880px}

.plumi{font-size:125%;padding:.25em .75em}
.bst .plumi,.bst input[type=tel],.wk .plumi,.wk input[type=tel],.sb-pr .plumi,.sb-pr input[type=tel]{height:3.125rem;vertical-align:top}
#navi,.toggle{text-align:left}
.toggle{display:block}
.toggle + a{display:none}
body{margin:0.5em}
.sp1,.sp2{margin-left:3em}
.pl_z{padding-top:1em}
.pl_z{clear:both}
.load a{color:#039}
.img_li{width:2.5em;}
input.bigcheck{height:3em;width:3em} 
input[type='radio']{width:2em;height:2em}
input.text,input.tel,input.email,input.password,TEXTAREA{width:95%}
input.textarea{font-size:100%;height:2em}
input.select{-webkit-appearance:none;font-size:125%}
TEXTAREA{height:7em}
#f{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4em;row-gap:2.5em;margin-top:3em;padding-right:1em;padding-left:1em}
#f,.liste{line-height:1.5em}
#f li{margin:0}
#f .fsocial{margin-top:0ch}
.toggle{background-color:#CCC;padding:0.75em;color:#000;text-decoration:none}
.toggle:hover{background-color: #ffc}	
.prew-row{display:block}
.prod ul{padding:0;margin:0}
#pr{border-left:1px solid #ccc;padding-left:1.5em;margin-left:1.5em}
#pr{width:21em}
.cardpi{margin-bottom:3em}
.prew-stat{margin-bottom:2em}

.katgrid{width:80%;column-gap:2em}
h2{line-height:1.25}

.warumtxt{float:none;width:auto}
#warum li{margin:0;padding:0}
#warum h3{margin:1.75em 0 0}
.pl_lpr{font-size:45%;top:-.5em}
.for45,.fol45,.fl45{max-width:45%}
.for,.fol,.fr35,.for35{max-width:35%}
.fl45{margin-right:2em}
.for45,.fr35,.for35{margin-left:2em}
.cl900{clear:both}

.br-dt{display:none}
#li_img{width:35%}
.menge-wahl-liste{bottom:100%}
.menge-wahl-liste{padding-top:3em}
.pl-kaufen .pl-warenkorb{height:3.125rem}

/* =========================================================
   NAVIGATION (NEU) mobil – Tablet + Handy = Hamburger Menu
========================================================= */
#navi .navbar{width:100%}
#navi #drop ~ ul.menu,#navi #drop:checked ~ .toggle-main,#navi li.has-mega:hover > ul {display:none}
#navi #drop:checked ~ .toggle-close{display:block}
#navi #drop:checked~ul.menu{display:block;position:fixed;top:0;left:0;right:0;bottom:0;height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:1002;background:#FFF;padding:4.2em 0 2em 0;margin:0;border:0}
#navi ul.menu > li{display:block}
#navi ul.menu{display:block;margin:0}
#navi ul.menu>li>a,#navi ul.menu>li>.menu-label{white-space:normal}
#navi li.has-mega>ul{position:static;top:auto;left:auto;width:100%;min-width:0;border:0}
#navi li.has-mega>input[type=checkbox]:checked~ul,#navi .mega-inner,#navi .mega-inner-4{display:block}
#navi .mega-col,#navi .mega-inner-4 .mega-col{flex:none;width:100%;min-width:0}
#navi .mega-columns,#navi .mega-columns-4{columns:1}
#navi .toggle-main{display:block;padding:.9em 1em;line-height:1.2}
#navi .toggle-close{display:none;position:fixed;top:0;right:0;padding:.9em 1em;font-size:1.4rem;line-height:1;cursor:pointer;z-index:1003}
#navi .mega-inner,#navi .mega-inner-4{padding:.4em 1em 1em 1em;align-items:flex-start}
#navi .mega-toplink{margin-top:.5em}

}


/******* ausschließlich für Tablets, nicht Desktop + Handy *****/
@media(max-width:900px) and (min-width:601px){
#f{grid-template-columns:repeat(2,minmax(0,1fr))}
#f .fgruppe{display:block;min-width:0}
#f .fgruppe:first-child .ff+.ff{margin-top:2em}
#f .fgruppe:nth-child(2) .ff+.ff{margin-top:0}

.wk{grid-template-columns:3em minmax(0,1fr) minmax(14em,38%) 1.5em}
.wk_del{padding-top:.15em}
.wk_meng_pr{grid-template-columns:3fr 2fr;gap:.5em}
.wk_meng_pr .menge-feld>input{width:3em;padding-right:0}

#pro-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1em}
#pro-list>li{display:flex}
.prolist{display:flex;flex-direction:column;float:none;width:100%;height:auto;margin:0}
.pl_inhalt{flex:1 1 auto}
.pl_preis{margin-top:auto}

.fl-resp{width:50%;margin:2em 2em 1em 0}
.fr-resp{width:50%;margin:2em 0 1em 2em}
.for-resp{width:50%;margin:.5em 0 1em 2em}
.for-red{width:50%;margin:.5em 0 1em 2em}

.br-tablet{display:inline}

}


/*********** bis 600 Pixel Breite ***********/
@media all and (max-width:600px) {
body{-webkit-hyphens:auto;hyphens:auto;
/* Wort min. 8 Zeichen, vorn 4, hinten 4 */
hyphenate-limit-chars: 8 4 4;
/* Safari-Fallback für die 3-Zeichen-Regel */
-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4}
h1,h2,h3,h4,details{hyphens:none;-webkit-hyphens:none}
#leiste{position:relative;display:flow-root}
.toptxt{display:flex;align-items:center;justify-content:space-between;padding:0}
#leistentxt,.hide-mobil{display:none}
#k{margin-bottom:0}
#spr{position:static;float:none;order:1;padding:0}
#kdn{position:static;float:none;order:2;margin:0}
#lg img{width:165px}
#adr{top:52px;left:48px;font-size:72%}
#su,.su-auf,.su-go{width:1.5em}
.su-auf,.su-go{justify-content:flex-end}
#search{right:0}

.pi-sticky-buy{padding:.8em}

#hero{height:220px}
#herotxt{margin:1.52em;padding:0}
#herotxt h1{font-size:180%}
#herotxt p{font-size:130%;line-height:1.25em}
#herobutton{margin-top:0;font-size:100%}
#reb{margin:0 0 0.5em 0}


#f{grid-template-columns:1fr;row-gap:0;padding-right:.5em;padding-left:.5em}
#f .fgruppe{display:contents}
#f .ff:nth-child(2),#f .ff:nth-child(3){margin-top:1.5em}

.osc{grid-column:auto;padding-top:1em}
.w15,.inh,#pr,.c15,.c20,.c25,.c50,.c65,.c75,.modal-dialog,.button,.button-g{width:100%}
.vid-li{width:40%;height:auto;margin:0 2em 2em 0}
.cardpi{min-width:100%;min-height:250px}
.card--contentpi{background-color:#fff;min-width:200px}
.w12{width:7em}
.foto-r{text-align:left}

.img_li{margin:0 1em 0 1em;float:right}
#flexbox{flex-direction:column}
.image-gallery,.pr-det,.weinfind{margin:1em 0;width:100%}
.image-gallery div{margin-left:10px}
.image-gallery label{width:15%}
.prod h2{margin-top:2em}
#pr:after,.mcl,.pwv{clear:both}
.bst{clear:none}
.fr,.fl,.for,.pp_re,.pp_li,.br,.wbr,.inh,.inh100,#pr,.c15,.c20,.c25,.c50,.c65,.c75,.modal-dialog,#frmlr p,.pr-det,.bli,.bre,.sp1,#reb,.cardpi,.foto-l,.foto-r,.vid-li,.weinfind{float:none}
.foto-r,.foto-l{display:block;margin:2em 0}
.liste,.li-eng{padding-left:1.25em}
.za{line-height:150%}
h1{font-size:140%}
h2{font-size:120%}
#pr,.pr-det,.pwv{font-size:90%}
#pr,.bl{padding:0.5em}
.c20{padding-top:0.5em}
#frmlr p{margin-top:-0.1em}
.ab-d{margin-top:0.25em}
.wk_kurz{margin-top:0.5em}
.pwv{margin-top:1em}
.b-ab-li{margin-left:4em}
#li_img{margin-right:1em}
.sp1{margin:0}
#pr{margin:0 0 1em 0;border:0}
.bre{margin:2em 0}
.sp2{margin:0.5em 0 1em 0}
.pr-det{margin:2em 0}
.pwv a{display:block}
#li_img{width:100%;float:none}
.img_li{width:2.5em}
.sp1{width:95%}
.pwv,.pwv a{color:#000}
.pwv{-webkit-appearance:none;padding:0.5em 0 0.5em;font-weight:bold;text-align:center;border-radius:0.25em;
background-color:#CCC;border:1px outset #aaa}
.cardpi{margin-bottom:1em}
h2{font-size:120%}
#produkte{padding-top:2em}
#warum{margin:2em 0;padding:.01em 1.5em 1em}
#warum h2,#warum h3{margin-top:1.5em}
.katgrid{width:100%;column-gap:1em;row-gap:1.5em}
.kat img,.ukat img{width:100%}
.kat figcaption,.ukat figcaption{margin-top:.5em}

.prolist{float:none;width:100%;height:auto;margin:0 0 1em}
.category-description h1{margin-bottom:1em}
.br-handy,.br600{display:inline}
.wk{grid-template-columns:3em minmax(0,1fr) 2em}
.wk_txt{grid-column:2;grid-row:1}
.wk_del{grid-column:3;grid-row:1;align-self:start}
.wk_meng_pr{grid-column:1/-1;grid-row:2;gap:2em}
.wk_meng_pr .menge-eingabe{justify-self:start}
.wk_summe{grid-template-columns:minmax(0,1fr) auto}
.wk_summe_text{grid-column:1}
.wk_summe_betrag{grid-column:2}
.fl-resp,.fr-resp{float:none;width:100%;margin:2em 0}
.for-resp{float:none;width:100%;margin:.5em 0 2em}

.for-red{width:40%;max-width:140px;margin:.5em 0 1em 1.5em}

.prod{hyphens:none;-webkit-hyphens:none}
.for,.for45,.for35{margin:.25em 0 1em 1.25em}
.fol,.fol45{margin:0 1.5em 1em 0}
.fl,.fl45{margin:1em 1.5em 1em 0}
.fr35{margin:1em 0 1em 1.5em}
.cl600{clear:both;padding-top:1.25em}
.cl600 > h3:first-child{margin-top:0}
.weg600{display:none}
.eng{margin:-.25em 0}
.medrund{margin:1em 0 2em 1em}
.br-dt-tab{display:none}
.menge-wahl-liste{padding-top:5em}
.menge-wahl-liste{left:-.5em;width:calc(100% + 1em);padding-left:.5em;padding-right:.5em}
.prolist{position:relative}
.pl-kaufen.bst{position:static}
.pl-kaufen .menge-wahl-liste{left:0;right:0;bottom:3em;width:100%}
}
@media all and (max-width:400px) {
.pi_pr{float:none}
.pi_pr,.pi_eur{text-align:left}
.pi_eur{clear:right}
}