/*@viewport{width:device-width;zoom:1}*/
@font-face{font-family:'icons';src:url('../iconfonts/icons.eot');src:url('../iconfonts/icons.eot#iefix') format('embedded-opentype'),url('../iconfonts/icons.ttf') format('truetype'),url('../iconfonts/icons.woff') format('woff'),url('../iconfonts/icons.woff2') format('woff2'),url('../iconfonts/icons.svg#icons') format('svg');font-weight:normal;font-style:normal;font-display:block}
.i-tel:before{content:"\e942"}
.i-such:before{content:"\e986"}
.i-fb:before{content:"\ea90"}
.i-inst:before{content:"\ea92"}
.i-such{position:relative;left:-35px}
[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}
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif,Verdana;margin:0;padding: 0}
img{border:0;max-width:100%;height:auto}
#adr,#logo{position:absolute}
#adr{margin:4.5em 0 1em 3.5em;}
#logo{width:150px}
#b{margin:0em auto}
#b,#k,#herotxt{max-width:1000px}
#k{padding:0.5em 0 0;margin:0em auto}
#suche{clear:right;margin:1.5em 0;line-height:2.5em}
a{text-decoration:none;color:#039}
a:hover{text-decoration:underline;color:#03C}
#adr,#herotxt h1,#herotxt p{text-align:left}
.kn,.br,#hero,#herobutton,#navi,.wrp{text-align:center}
.lnav,.BU,.re,#sterne{text-align:right}
.ff,.av{float:left}
#langnav,#suche,.fix100,.br{float:right}
#navi,#grew,footer,.w,.cl{clear:both}
.lnav,input[type=submit]{-webkit-appearance:none;-moz-appearance:none;-webkit-appearance:none;appearance:none}
.lnav,.br,#hero{border:1px solid #ccc}
.lnav,#herobutton,.wrp .btn{cursor:pointer}
h2,h3,.a2{margin-top:2em}
.lw,.lw:hover,.schalt{margin:1em 1em 2em 0}
.for,.for35,.fix100{margin:0 0 2em 2em}
#f{padding-top:1em}
.fl{padding:0 1em 1em 0}
.h1u{font-size:60%}
h2{font-size:150%}
h3{font-size:135%}
#hero{height:450px;background-image:url("../online-shop/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 a,.kn a:hover{text-decoration:none}
#herotxt p{font-size:250%;line-height:1.25em;margin-left:10px}
#herotxt h1,#herotxt p{text-shadow: 3px 3px 3px #16354E,3px -3px 3px #16354E,-3px  3px 3px #16354E,-3px -3px 3px #16354E}
#herobutton{margin-top:3em;border:none;border-radius:0.25em;outline:0;display:inline-block;padding:0.75em 1.5em;color:#16354E;background-color:#fff;font-size:150%;letter-spacing:0}
.herobutton:hover{background-color: #f00;color:#FFF}
#sterne{margin-top:0.5em}
#sterne,.t80{font-size:80%}
#adr,.BU{font-size:80%}
INPUT,SELECT,TEXTAREA,.kn,#navi{font-size:90%}
.BU{font-style:italic}
.ff{padding-right:3em}
SELECT{background-color:#fff}
input,TEXTAREA,SELECT{border:1px solid #999}
.rot{color:#f00}
input[type=submit]{padding:0.25em}
input,SELECT,input[type=submit]{height:2em}
SELECT{width:12em}
.kn{border:3px outset #FC3}
.kn,.grew-ue,.cnt p{font-weight:bold}
#f{margin:5em 0;padding:1em 0;border-top:3px solid #ccc}
#f ul li{list-style:none}
#f ul {padding:0;margin:0}
.w15{width:15em}
.br{padding:1em;margin:0 0 0.5em 1em}
.kn{-webkit-appearance:none;padding:0.5em 1em;border-radius:0.25em;background-color:#FC0;border:1px outset #FC3}
.kn,.kn a,.kn a:hover{color:#000}
.kn:hover{background-color:#FF6;border:1px outset #F93}
.grew-ue,.card-content-grew{background-color:#f5f5f5}
.grew-ue,.card-content-grew{border-radius:25px}
.grew-ue{padding:0.1em 1em;font-size:125%;margin-top:2em}
#grew{display:flex;min-width:100%;height:340px;overflow-x:auto}
.card-content-grew{min-width:270px;padding:.5em 1.5em;margin:2em 1.5em 0 0;line-height:1.25em;overflow-y:scroll}
.av{margin:0 1em 1em 0 }
nav{z-index: 99;width:100%;background:#ccc;font-size:100%}
nav input{display:none}			/*verbirgt Checkboxen*/
nav ul{padding:0;margin:0;line-height:3.5em}
.wrp{position:relative}
.navlnk{display:inline-flex;}
.navlnk li{list-style:none;text-align:left}
/*Menupunkte horizontale Navileiste */
.navlnk li a{color:#000;text-decoration:none;padding:1.25em}
/* Mouse over horizontale Navileiste */
.navlnk li a:hover{background: #ffc}
.navlnk .mobil{display:none}
.navlnk li:hover .mega1a,.navlnk li:hover .mega1b,.navlnk li:hover .mega1c,.navlnk li:hover .mega2a,.navlnk li:hover .mega2b,
.navlnk li:hover .mega2c,.navlnk li:hover .mega2d,.navlnk li:hover .mega4{top:3em;visibility:visible}
.mega1a,.mega1b,.mega1c,.mega2a,.mega2b,.mega2c,.mega2d,.mega4{position:absolute;margin-top:0.5em;visibility:hidden}
.mega1a{width:15em}
.mega1b{width:25em}
.mega2a,.mega2b,mega2d{width:20em}
.mega2c{left:1em;width:95%}
.mega4{width:40em}
.cnt{background:#ffc;padding:1em 1.5em;display:flex;width:100%;justify-content:space-between}
.row4{width:calc(50%)}
.cnt p{color:#000;margin-bottom:-0.5em}
.mglnk li{line-height:1.75em}
.mglnk li a{padding:0;color:#00f;display:block}
.mglnk li a:hover{text-decoration:underline}
.wrp .btn{color: #000;font-size:120%;padding:0.85em 1em;display:none}
.wrp .btn.close-btn{position:absolute;right:30px;top:10px}
/*Suche*/
#output li{margin:1em 0}
.th,em,#output a{/*Linktext 1.+letzte Z. Treffer*/font-weight:bold}
.searchword{color:#222;background:#0FF}
.searchword0{color:#222;background:#faf000}
.searchword1{color:#222;background:#F9C}
.searchword2{color:#222;background:#9F6}
.searchword3{color:#222;background:#fbb000}
.searchword4{color:#222;background:#9Cf}
.searchword5{color:#222;background:#F00}
.searchword6{color:#222;background:#96F}
.liste{line-height:1.5em}
/****** bis 900 Pixel Breite *******/
@media all and (max-width:900px) {
#hero{height:300px}
#herotxt{margin-top:3em;max-width:880px}
#herotxt h1{font-size:250%}
#herotxt p{font-size:150%;line-height:1.5em}
#herobutton{margin-top:1em;font-size:120%}
body{margin:0.5em;}
#b{margin:2em 0.5em;max-width:900px}
.row1a,.row1b,.row1c,.row2a,.row2b,.row4,.mega1a,.mega1b,.mega1c,.mega2a,.mega2b,.mega2c,.mega2d,.mega4,.wrp .navlnk{width:100%}
.navlnk li a,.navlnk .mobil{font-size:120%}
input.select{font-size:125%}
.wrp{text-align:left}
.wrp .navlnk{position:fixed;height:100%;max-width:350px;top:0;left:-100%;background:#ccc;padding:1em;line-height:3em;overflow-y:auto}
#menu-btn:checked ~ .navlnk{left:0%}
#menu-btn:checked ~ .btn.menu-btn,.navlnk .dsktop{display:none}
.wrp .navlnk,.navlnk li a,#close-btn:checked ~ .btn.menu-btn,.navlnk .mobil,.wrp .btn{display:block}
input.select{-webkit-appearance:none}
.navlnk li{margin:1em}
.navlnk li a{padding:0}
#shwM1a:checked ~ .mega1a,#shwM1b:checked ~ .mega1b,#shwM1b:checked ~ .mega1c,#shwM2a:checked ~ .mega2a,#shwM2b:checked ~ .mega2b,#shwM2c:checked ~ .mega2c,#shwM2d:checked ~ .mega2d,#shwM4:checked ~ .mega4{max-height:100%}
.navlnk .mobil{color:#000;padding-left:0;cursor:pointer}
.navlnk .mobil:hover{background:#ffc}
.mega1a,.mega1b,.mega1c,.mega2a,.mega2b,.mega2c,.mega2d,.mega4{position:static;visibility:visible;padding:0;max-height:0px;overflow:hidden;left:0em}
.cnt{flex-direction:column;	/*unterbindet float*/
padding:0 1em}
.row1a,.row1b,.row1c,.row2a,.row2b,.row4{margin-bottom:1em}
.mglnk{padding-left:0}
.mglnk li{margin:0;line-height:3em}
#f,.liste{line-height:1.75em}
}
/*********** bis 600 Pixel Breite ***********/
@media all and (max-width:600px) {
#hero{height:220px}
#herotxt{margin:1.52em;}
#herotxt h1{font-size:180%}
#herotxt p{font-size:130%;line-height:1.25em}
#herobutton{margin-top:0;font-size:100%}
.fix100{padding:0;}
#suche{padding-top:3em}
.liste{padding-left:1em}
.fix100{margin:0 0 1em 0}
.w15,.fix100{width:100%}
.fix100,.br3{float:none}
.br{border:1px solid #ccc;padding:0.5em;margin:1em 0} 
h1{font-size:150%;margin:0 0 1em}
h2{font-size:125%;margin-top:1em}
h3{font-size:110%;margin-top:0em}
}