/* (c) 2005-2026 Italy-Outlet */

@font-face {font-family:"Albertus Extra Bold"; src:url("/img/AlbertusExtraBold.woff") format("woff"); font-display:swap;}
@font-face {font-family:"Karla"; src:url("/img/Karla_static.woff2") format("woff2-variations"); font-display:swap;}

/* Grundlagen */
html {-webkit-text-size-adjust:100%;}
html,body,td,p,li,form,input,select,option {font-size:15px; line-height:1.5; font-family:Karla,Helvetica,Arial,sans-serif; color:#333; margin:0; padding:0;}
input,select,option {font-size:16px; line-height:18px; margin:5px;}	/* iPhone zoomt sonst unter 16px */
html,body {height:100%;}
body {background:#fff url('/img/i/bg_fade2.jpg') top repeat-x;}
img {border:0; max-width:100%; height:auto;}
p {margin:5px 0;}

/* Links */
a:link, a:visited {color:#2b8a3e; text-decoration:none;}
a:hover {color:#1f6b2f;}
h2 a:link, h2 a:visited {color:#404040;}
h2 a:hover {color:#2b8a3e;}
a.white:link, a.white:visited {color:#fff;}

/* Sichtbarer Tastatur-Fokus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline:2px solid #2b8a3e; outline-offset:2px;}

#container {width:1040px; margin:0 auto; text-align:left; min-height:100%; background-color:#f8f8f8;}

/* Grob-Einteilung */
#head	{width:100%; height:auto; position:relative; display:inline-block;}
#intro	{width:100%; float:left; position:relative;}
#main	{width:100%; float:left;}
#leftcol{width:200px; float:left; margin:0 0 0 18px;}
#midcol {width:518px; float:left; margin:0 0 0 18px;}
#xmidcol{width:786px; float:left; margin:0 0 0 18px;}
#footer	{width:100%; float:left; background-color:#2b8a3e; background-image:linear-gradient(#3a9d4b, #1f6b2f);}	/* Verlauf wie Ribbon, dunkler fuer lesbare weisse Schrift */

/* Titel in der Mitte */
.bigtitle,
h1	{margin:0 0 15px 0; padding:10px 12px; line-height:1.3; font-size:22px; text-align:left; background-color:#fff; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,.2);}
/* Sub-Titel (Produkt-Liste) */
h2	{margin:0; line-height:14px; width:100%; font-size:14px; font-weight:normal; display:inline-block; vertical-align:middle; text-align:center;}
/* Titel in den seitl. Boxen */
h3	{margin:0; padding:0 0 0 5px; line-height:30px; font-size:14px; text-align:left; border-bottom:1px solid #800;}
/* Text-Ueberschriften */
h4	{margin:0; padding:10px 0; font-weight:normal; font-size:150%;}
h5	{margin:0; padding:0; font-size:100%; font-weight:normal;}
/* Titel im Intro */
.welcome	{margin-top:10px; padding:0; font-weight:normal; font-size:150%; height:30px;}
.welcome-text {font-size:18px; font-weight:bold;}

/* Menue- und Sprach-Leisten oben */
#logo {margin:10px 0; float:left; height:60px;}
#date {position:absolute; top:0; right:20px; color:#888;}
.boilogo {padding:0 20px; font-family:"Albertus Extra Bold",Helvetica,Verdana; font-size:50px; font-weight:normal; color:#cc0000; text-shadow:1px 1px 2px #888; line-height:60px;}
.ycolor {color:#44aa55;}
.com {font-size:20px;}

#topbar {position:relative; margin:0; top:12px; left:20px; display:inline-block;}
#topbar ul {list-style-type:none; margin:0; padding:0;}
#topbar ul li {float:left; text-align:center;}
#topbar ul li a {display:block; padding:8px; font-size:16px; color:#800; text-decoration:none;}
#topbar ul li a:hover {background-color:#cc0000; color:#fff;}

#dropdowns {position:absolute; top:30px; right:13px;}
#dropdowns select {min-height:0; padding:3px 6px;}
#vattoggle, #currselection, #langselection {float:right;}

/* Aufmacher mit Bild und Customer-Service-Links */
#intro1 {width:100%;}
#services {margin:18px 0 0 18px; width:250px; float:left; display:table-cell; vertical-align:top;}
#welcomebox {position:absolute; top:50px; right:0; left:0; max-width:680px; overflow:hidden; margin:0 auto; padding:0 10px 5px 10px; background-color:rgba(255,255,255,.6);}
#siteseal {padding:20px 0 0 0; width:200px; float:right;}

/* MwSt.-Schalter */
#vattoggle {width:150px; line-height:25px; display:inline-block; padding:5px;}
#vattoggle .badge {float:right;}
.toggler-wrapper {float:right; display:block; width:45px; height:25px; cursor:pointer; position:relative;}
.toggler-wrapper input[type="checkbox"] {display:none;}
.toggler-wrapper .toggler-slider {background-color:#cc0000; position:absolute; border-radius:100px; top:0; left:0; width:100%; height:100%; transition:all 300ms ease;}
.toggler-wrapper input[type="checkbox"]:checked+.toggler-slider {background-color:#44aa55;}
.toggler-wrapper .toggler-knob {position:absolute; width:19px; height:19px; border-radius:50%; left:3px; top:3px; background-color:#fff; transition:all 300ms ease;}
.toggler-wrapper input[type="checkbox"]:checked+.toggler-slider .toggler-knob {left:calc(100% - 22px);}

/* Slideshow: Animation laeuft n*10 Sekunden pro Span */
.cb-slideshow {position:relative; height:240px; max-height:33vw; margin:18px; padding:0; list-style:none; z-index:0;}
.cb-slideshow li span {width:100%; height:100%; position:absolute; top:0; left:0; background-size:cover; background-position:top center; background-repeat:no-repeat; opacity:0; z-index:0;}

/* seitliche Boxen */
.newbox {float:left; width:100%; padding:0; margin:0 0 15px 0; display:inline-block; background-color:#fff; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,.2);}
.textbox {padding:10px;}
.textbox p {line-height:1.6;}
/* Box mit Payment-Logos und Seals */
.trustbox {float:left; width:100%; color:#808080; font-size:max(1em, 11px); text-align:center;}
#trustpilot {margin:10px auto;}

/* Menuepunkte */
#menucol ul {list-style:none; margin:0; border:0; padding:5px 0;}
#menucol ul li {border-bottom:1px solid #eee;}
#menucol ul li a {line-height:20px; font-size:14px; color:#404040; display:block; padding:4px 0 4px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#menucol ul li a:hover {background-color:#ddd;}
#menucol ul li.menux, #menucol ul li.menusx {padding-left:6px; line-height:28px; font-weight:bold;}
#menu-icon {position:absolute; display:none; width:25px; height:25px; border:0; margin:0; padding:0; background-position:0 -50px;}
.menus, .menusx {background-color:#eee;}

/* Suche */
.searchbox input[type=text] {width:120px; min-height:0; padding:3px 6px;}
.searchbox button.greenbutton {min-height:0; padding:4px 10px; margin:5px 0; vertical-align:middle;}

/* Produkt-Raster (Startseite, Kategorien) */
.products {display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:18px; width:100%; margin:0 0 18px;}
.smallprod {position:relative; padding-bottom:10px; text-align:center; background-color:#fff; border-radius:6px; box-shadow:0 2px 4px rgba(0,0,0,.1); transition:box-shadow .2s, transform .2s;}
.smallprod:hover {box-shadow:0 6px 18px rgba(0,0,0,.12); transform:translateY(-2px);}
.prodimage {position:relative; width:100%; aspect-ratio:1 / 1; margin:auto; text-align:center;}
.searchimage img,
.prodimage img {position:absolute; top:0; bottom:0; left:0; right:0; max-width:100%; max-height:100%; width:auto; height:auto; margin:auto;}
/* Produktname: max. 2 Zeilen */
.prodtitle {margin:0; padding:10px 10px 4px;}
.prodtitle h2 {margin:0; min-height:2.6em; font-size:15px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.prodinfo {padding:5px;}
.smallprod .price, .smallprod .pricevatless {line-height:1.4;}
/* leerer Coupon-Platzhalter ( ) erzeugte ~55px Leerraum unter jeder Kachel */
.smallprod .offercoupon {text-align:center; padding:0; line-height:8px;}

.specialprod {position:relative; width:100%; float:left; margin:9px 0; background-color:#fff;}
.specialprodimage {height:64px; width:calc(30% - 5px); line-height:64px; margin:10px 5px; float:left; text-align:center;}

/* Suchergebnisse */
#categorysearchtitle {background-color:#666; color:#fff; font-weight:bold; padding:3px 3px 3px 12px; margin:0; border-radius:6px 6px 0 0;}
#categorysearch {border:1px solid #ccc; margin:0; padding:9px; background-color:#fff; border-radius:0 0 6px 6px;}
#searchtotal {margin:0;}
.products:has(> .searchprod) {grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));}	/* Suchergebnisse: breitere Kacheln */
.searchprod {position:relative; padding-bottom:6px; background-color:#fff; border-radius:6px; box-shadow:0 2px 4px rgba(0,0,0,.1);}
.searchprod .prodinfo {padding:5px 80px 5px 10px;}	/* rechts Platz fuer das Vorschaubild */
.searchprod .bigbutton {min-width:0; width:auto; min-height:42px; margin:8px 0; padding:8px 16px; font-size:16px;}
.searchimage {position:absolute; top:48px; right:0; height:64px; width:64px; line-height:64px; margin:0 0 0 10px; text-align:center;}
.pager {text-align:center; clear:left;}

/* Produktseite */
.bigprod {margin:15px 0;}
.bigprod p {padding:5px 0; line-height:1.6;}
.bigprod li {margin-left:20px; margin-bottom:4px;}
.bigprod .flag {display:inline-block; margin:6px 0; font-size:14px;}
.foto {float:left; width:50%; margin:0 10px 10px 0; padding-bottom:8px; text-align:center; color:#808080; background-color:#fff; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,.4);}
.foto img[itemprop=image] {cursor:zoom-in;}
.altimages {display:flex; justify-content:center; gap:6px; padding:0 5px;}
.altfoto {flex:0 1 110px; min-width:0; max-width:120px; margin:0; padding:5px 0; cursor:pointer;}	/* Thumbnails max. 120px, nicht hochskalieren */
.altfoto:only-child {display:none;}	/* nur 1 Bild = gleiches Bild wie oben -> ausblenden */
.altfoto img {width:100%; height:auto; border-radius:4px; transition:box-shadow .15s;}
.altfoto:hover img, .altfoto.active img {box-shadow:0 0 0 2px #2b8a3e;}
.mesg {font-size:max(1em, 11px);}
.relatedprods {width:90%; margin:15px 10px; padding:0; background-color:#fff; box-shadow:0 2px 4px rgba(0,0,0,.2);}
.description {float:left; width:100%; max-width:75ch;}
.description p, .prodtexte p {line-height:1.6;}
.nl {clear:both;}
.hidden {display:none;}

/* Infoboxen */
#grayboxtitle {background-color:#666; color:#fff; font-weight:bold; padding:3px 3px 3px 12px; margin:0;}
.graybox {width:90%; margin:18px auto; padding:10px; box-sizing:border-box; color:#333; background-color:#f1f7f2; border:1px solid #d3e6d6; border-radius:8px;}
.lgraybox {width:90%; margin:18px auto; padding:10px; color:#404040; background-color:#d0d0d0; border-radius:8px; text-align:center;}
.redbox {width:90%; margin:18px auto; padding:10px; color:#fff; background-color:#777; border-radius:8px;}
.bluebox {width:40%; min-width:270px; margin:18px auto; padding:10px; background-color:#ccc; border-radius:8px;}

/* Preise */
.price, .pricevatless {color:#000; font-size:max(1em, 10px); text-align:center;}
.pricevatless {display:none;}
.big {color:#cc0000; font-size:18px; font-family:"Helvetica Narrow", Charcoal, sans-serif;}
.bigp {color:#ff0080; font-size:16px; font-weight:bold;}
.bigprod .price .big, .bigprod .pricevatless .big {font-size:28px; line-height:1.2;}
.sconto {font-weight:bold;}
strike {text-decoration:line-through; color:#808080;}

/* Text-Bloecke */
.text {margin:10px auto; padding:2px 0; border:0; width:90%;}
.titolo {color:#404040; padding-left:15px; font-size:max(1em, 11px); font-weight:bold;}
.lgray {color:#c0c0c0; font-size:max(1em, 11px);}
.gray {color:#808080;}
.flag {color:#808080; font-size:max(1em, 11px);}
.red {color:#cc0000;}
.small {font-size:max(1em, 9px);}
.promo {float:left; color:#606060; margin:10px 0; padding:5px 5px 5px 10px; background-color:#dfd; box-shadow:0 1px 4px rgba(0,0,0,.2);}
.minipromo {color:#cc0000;}

/* Aufklappbarer Kategorietext */
.collapsible {position:relative; height:80px; padding-left:40px; overflow:hidden; cursor:pointer; border-radius:6px; background:#dfd no-repeat left 10px top 10px url('/img/open.png');}
.expanded {height:auto; background:#dfd no-repeat left 10px top 10px url('/img/close.png');}
.collapsible:hover {background-color:#bfb;}
.collapsible:not(.expanded)::after {content:"\25BC\25BC\25BC"; letter-spacing:10px; font-size:17px; line-height:1; position:absolute; left:0; right:0; bottom:0; height:46px; padding-top:22px; box-sizing:border-box; background:linear-gradient(rgba(221,255,221,0), #dfd 60%); color:#2b8a3e; font-weight:bold; text-align:center;}
.collapsible:hover:not(.expanded)::after {background:linear-gradient(rgba(187,255,187,0), #bfb 60%);}

/* Banner / Coupons */
.banner {position:relative; width:514px; display:inline-block; margin:9px 0; color:#fff; background:linear-gradient(#a02020, #ff0000); border:2px dotted white;}
.coupon_tag {position:relative; float:left; font-size:50px; line-height:60px; left:10px; text-shadow:2px 2px 4px #000; transform:rotate(-8deg);}
.coupon_price {font-size:20px; line-height:24px; margin:0 10px;}
.coupon_name {position:absolute; font-size:30px; line-height:36px; top:10px; right:10px;}
.coupon_big {font-size:20px; line-height:24px; top:5px; left:0; right:0; text-align:center; margin:0 10px;}
.coupon_small {position:absolute; font-size:max(1em, 12px); line-height:15px; bottom:5px; left:0; right:0; text-align:center;}
.bigprod .banner {width:auto; margin:0; text-align:center;}
.bigprod .coupon_big {font-size:16px;}
.bigprod .coupon_price .big {font-size:24px; color:#fff;}
.offercoupon {line-height:20px; padding-bottom:20px;}

/* Warenkorb- und Bestelltabelle */
.cart {margin:0 auto; padding:0; width:90%; border:1px solid #ccc; border-collapse:collapse; background-color:#fff;}
.cart td {padding:10px 8px; border-bottom:1px solid #eee; vertical-align:middle;}
.cart tr:last-child td {border-bottom:0;}
.cart .price, .cart .pricevatless, .cart .xprice {font-size:15px;}
.cart .big {font-size:20px;}
.cart a {font-weight:bold;}
.cart a:hover {text-decoration:underline;}
.cart a + .gray {display:none;}	/* interne Artikel-Kuerzel ausblenden */
.cart input[type=number] {width:70px; padding:6px 8px; text-align:center;}
.cart .imgcol img {border-radius:4px;}

.partnersection {width:95%; margin:18px auto; border:1px solid #aaa; border-radius:10px; background-color:#fff;}

/* Coupon-Feld */
fieldset {display:inline-block; margin-bottom:10px; padding:10px 14px; border:1px solid #ccc; border-radius:6px; overflow:hidden;}
legend {margin-left:10px; padding:2px 8px; border:0; border-radius:4px; background-color:#cfc;}
fieldset input[name=coupon] {width:220px; max-width:100%;}

/* Formulare */
input {height:24px; border:1px solid #aaa; padding-left:5px;}
select {width:200px;}
#currselection select, #langselection select {width:auto;}
input[type=text], input[type=password] {width:200px;}
input[type=text], input[type=number], input[type=email], input[type=tel],
input[type=password], input[type=prov], input[type=plz], input[type=cc], input[type=cvc], input:not([type]),
select, textarea {box-sizing:border-box; height:auto; min-height:42px; padding:8px 10px; border:1px solid #bbb; border-radius:4px; background:#fff; font-family:inherit; font-size:16px; line-height:1.3;}
input[type=text]:focus, input[type=number]:focus, input[type=email]:focus, input[type=tel]:focus,
input[type=password]:focus, input[type=prov]:focus, input[type=plz]:focus, input[type=cc]:focus, input[type=cvc]:focus,
select:focus, textarea:focus {border-color:#2b8a3e; box-shadow:0 0 0 3px rgba(43,138,62,.2); outline:none;}
input[type=checkbox] {height:22px; width:22px; vertical-align:middle; accent-color:#2b8a3e;}
input[type=prov] {width:120px;}
input[type=plz] {width:60px;}
input[type=cc] {width:160px;}
input[type=cvc] {width:60px;}
input[type=number] {width:50px;}

/* Adress-Eingabe */
.addressbox {margin:auto; padding:20px 24px; width:90%; max-width:560px; overflow:hidden; text-align:left; background-color:#fff; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.2);}
.addressbox>div {overflow:hidden;}			/* zusammengehoerige Felder eventuell in selber Zeile */
.addressbox>div>div {display:inline-block;}	/* Inhalte moeglichst in einer Zeile */
.addressbox h4 {margin:18px 0 6px; padding:6px 10px; border-radius:4px; font-size:18px; font-weight:bold;}
.addressbox h4:first-child {margin-top:0;}
.desc {float:left; min-width:140px; margin-top:10px;}
.desc b::after {content:" *"; color:#cc0000;}	/* Pflichtfelder zusaetzlich mit * kennzeichnen */
.value {float:left;}
.addressbox .desc {width:170px; min-width:0;}
.addressbox input[type=text], .addressbox select {width:300px; max-width:100%;}
.addressbox input[type=prov] {width:160px;}
.addressbox input[type=plz] {width:100px;}
.privacy {font-size:max(1em, 12px);}
.note {font-size:max(1em, 12px); color:#888;}
.err {font-weight:bold; color:#f00;}
.graybg {background-color:#e6e6e6;}

/* Bezahl-Seite */
.num {width:60px;}
.numselect {width:auto; margin-right:0;}
.payselection {width:fit-content; margin:10px auto 20px; border:0; text-align:left;}
.paymethod {display:block; box-sizing:border-box; width:100%; min-width:300px; max-width:400px; margin:0 0 4px; padding:12px 16px; font-size:16px; background:#fff; border:1px solid #ccc; border-radius:8px; cursor:pointer; transition:border-color .15s, background-color .15s;}
.paymethod:hover {border-color:#2b8a3e;}
.paymethod.checkedpm {border:2px solid #2b8a3e; background:#f1f9f2;}
.paymethod input[type=radio] {width:20px; height:20px; margin:0 12px 0 0; vertical-align:middle; accent-color:#2b8a3e;}
.paymethod img {height:28px; width:auto; max-width:100px; padding:5px 10px; vertical-align:middle;}
.creditcard {display:inline-block; margin-top:12px; padding-top:8px; border-top:1px solid #d5e8d8;}
.creditcard > div {overflow:hidden;}
.creditcard .desc {min-width:120px;}
/* CC-Eingabe-Toggle */
#ccinput {display:none; font-size:max(1em, 12px);}
#showccinput:not(:checked) ~ #ccinput {display:none;}
#showccinput:checked ~ #ccinput {display:block;}

/* Buttons */
input[type=submit] {margin:10px 5px;}
input.greenbutton, .greenbutton, .continuebutton {display:inline-block; margin:7px 10px 7px 0;}
input[type=submit],
.greenbutton, a.greenbutton:link, a.greenbutton:visited,
.continuebutton,
.bigbutton {box-sizing:border-box; height:auto; min-height:42px; padding:10px 18px; border:0; border-radius:6px; background:#2b8a3e; color:#fff; font-size:16px; font-weight:bold; line-height:1.3; text-decoration:none; text-align:center; cursor:pointer; transition:background-color .15s;}
input[type=submit]:hover, .greenbutton:hover, .bigbutton:hover {background:#267533; color:#fff;}
.greenbutton:active {box-shadow:0 1px 4px 3px #226633 inset;}
/* Haupt-Aktion (Warenkorb, zur Kasse, Kaufen) */
.bigbutton, input.bigbutton {min-height:50px; min-width:220px; padding:12px 26px; font-size:18px;}
/* Zweitrangige Buttons: hell mit gruenem Rand ("aktualisieren", "anwenden", "Weiter einkaufen") */
.cart input[type=submit],
fieldset input[type=submit],
.continuebutton, a.continuebutton:link, a.continuebutton:visited {width:auto; min-height:38px; padding:8px 16px; background:#fff; color:#2b8a3e; box-shadow:inset 0 0 0 2px #2b8a3e;}
.cart input[type=submit]:hover,
fieldset input[type=submit]:hover,
.continuebutton:hover, a.continuebutton:hover {background:#eef7ef; color:#267533;}
.disabled, .disabled:hover {cursor:not-allowed; pointer-events:none; background:#aaa !important; box-shadow:none; color:#fff;}

/* Symbole, Fahnen */
.icon, .payments, a.lang {margin:0; padding:0; display:inline-block; vertical-align:bottom; background:url('/img/symbols.png') no-repeat;}
.icon {position:relative; width:20px; height:20px;}
.payments {width:180px; height:32px; margin:10px; background-position:0 -125px;}
a.lang {width:30px; height:18px; margin-right:20px;}
a.lang:hover {box-shadow:0 1px 4px 3px rgba(255,255,255,.5);}
a.de {left:0; background-position:0 -160px;}
a.en {left:40px; background-position:-40px -160px;}
a.it {left:80px; background-position:-80px -160px;}
a.fr {left:120px; background-position:-120px -160px;}
a.se {left:160px; background-position:-160px -160px;}
.tel {background-position:0 -25px; margin:10px 10px 10px 0; float:left;}
.bluetel {background-position:-125px -51px; margin:10px 10px 10px 0; float:left; width:30px; height:30px;}
.client {background-position:-125px 0; padding-right:4px;}
.parcel {background-position:-75px 0; padding-right:4px;}
.about {background-position:-50px -50px; padding-right:4px;}
.mail {background-position:-50px -25px; padding-right:4px;}
.lens {background-position:-25px 0; margin:2px;}
.trolley {background-position:-50px 0; margin:2px;}
.folder {background-position:-25px -50px; margin:2px;}
.inverted {filter:invert(100%);}
.home {background-position:0 0; margin:2px;}
.login {background-position:-125px 0; margin:2px;}
.info {background-position:-50px -50px; margin:2px;}
.contact {background-position:-50px -25px; margin:2px;}
.toptext {display:block; color:#404040;}
.topicon {display:inline-block; filter:drop-shadow(1px 1px 2px #444);}

/* Footer */
.foot {float:left; margin:0 0 0 20px; width:calc(33% - 20px); color:#fff; font-size:13px; line-height:1.6; text-align:center;}
.foot a, .foot a:link, .foot a:visited {color:#fff; text-decoration:underline;}
.foot a:hover {color:#dff3e2;}
.copyright {clear:both; margin:0; padding:5px 0; text-align:center; width:100%; background-color:#cc0000; color:#fff;}
.white {color:#fff;}

/* Ribbon oben links: hidden, damit Ueberhang abgeschnitten wird */
.ribbon-box {position:absolute; width:70px; height:70px; top:-3px; left:-3px; overflow:hidden;}
.ribbon {font:bold 18px sans-serif; text-align:center; transform:rotate(-45deg); position:relative; width:100px; padding:1px 0; left:-24px; top:14px;}
.ribbon:before {left:0;}
.ribbon:after {right:0;}
.r_green {color:#fff; text-shadow:rgba(0,0,0,.5) 0 1px 1px; background:linear-gradient(#88dd55, #44aa55);}
.r_green:before, .r_green:after,
.r_red:before, .r_red:after {position:absolute; content:""; bottom:-3px; border-top:3px solid #6e8900; border-left:3px solid transparent; border-right:3px solid transparent;}
/* Ribbon oben rechts */
.ribbon_right-box {position:absolute; width:70px; height:70px; top:-3px; right:-3px; overflow:hidden;}
.ribbon_right {font:bold 18px sans-serif; text-align:center; transform:rotate(45deg); position:relative; width:100px; padding:1px 0; top:14px;}
.ribbon_right:before {left:0;}
.ribbon_right:after {right:0;}
.ribbon_right .big {color:#fff; font-size:22px; font-weight:normal;}
.ribbon_right .small {font-size:max(1em, 11px);}
.r_red {color:#fff; text-shadow:rgba(0,0,0,.5) 0 1px 1px; background:linear-gradient(#a02020, #ff0000);}

@keyframes fadeIn {from {opacity:0;} to {opacity:1;}}

@media print {
	#intro, #leftcol, #midcol, #xmidcol, #rightcol {background-color:#fff;}
}
/* 1040 + Scrollbar(16) = 1056 */
@media only screen and (max-width:1056px) {
	#container, #head, #intro, #footer {width:100%;}
	.boilogo {padding:0 5px;}
	#leftcol {margin-left:0;}
	.cb-slideshow {margin:0 0 15px 0;}
}
/* bis 1024 geht iPad landscape */
@media only screen and (max-width:1023px) {
	#topbar ul li a {padding:8px 3px;}
	.toptext {display:none;}
	.topicon {display:block; margin:2px 8px;}
	#date {right:10px;}
	#dropdowns {right:7px;}
	a.lang {margin-right:10px;}
	#trustpilot {display:none;}
	#xmidcol, #midcol {float:none; width:auto; margin-left:220px; margin-right:10px;}
	.products {grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));}
	.specials {display:none;}
}
/* ab hier menucol ausblenden und durch Sandwich-Icon ersetzen */
@media only screen and (max-width:740px) {
	#date {display:none;}
	#topbar {top:0;}
	#dropdowns {top:40px; margin-bottom:10px;}
	#services {margin-top:10px;}
	#welcomebox {font-size:75%; margin:0 10px;}
	#leftcol {width:calc(100% - 4px);}
	.searchbox {width:auto; margin:0; box-shadow:none; float:right; background-color:transparent;}
	.searchbox h3 {display:none;}
	.trustbox {display:none;}
	h1, .bigtitle {margin:0 10px; font-size:19px;}
	#midcol, #xmidcol {margin-left:0; float:left; width:100%;}
	.bigprod, .prodtexte {margin:12px;}
	.foot {margin-left:10px; width:calc(50% - 10px);}

	/* Kategorie-Menue als Button "Kategorien" mit Aufklapp-Liste */
	#menucol {position:absolute; width:auto; margin:4px 0 0 8px; z-index:10; background:transparent; box-shadow:none;}
	#menucol h3 {padding:0 10px 0 30px;}
	#menucol ul {display:none; position:relative; top:0; margin-top:6px; width:280px; max-width:calc(100vw - 20px); max-height:calc(100vh - 150px); overflow-y:auto; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.25); border-radius:6px;}
	#menucol.open ul {display:block; animation:fadeIn .2s;}
	#menucol:not(.js):hover > ul, #menucol:not(.js):focus-within ul {display:block;}	/* Fallback ohne Script */
	#menucol ul li a {line-height:44px; font-size:16px;}
	#menu-icon, #menu-icon:link, #menu-icon:visited {position:static; display:inline-flex; align-items:center; gap:10px; width:auto; height:40px; margin:0; padding:0 14px 0 12px; border:0; border-radius:6px; background:#2b8a3e; color:#fff; font-size:16px; font-weight:bold; text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,.25);}
	#menu-icon::before {content:""; width:18px; height:14px; background:linear-gradient(#fff 0 2px, transparent 2px 6px, #fff 6px 8px, transparent 8px 12px, #fff 12px 14px);}
	#menucol.open #menu-icon::before {content:"\2715"; height:auto; background:none; font-size:18px; line-height:1; text-align:center;}
	#menu-icon::after {content:"Kategorien";}
	:lang(en) #menu-icon::after {content:"Categories";}
	:lang(fr) #menu-icon::after {content:"Cat\E9gories";}
	:lang(it) #menu-icon::after {content:"Categorie";}
	:lang(sv) #menu-icon::after, :lang(se) #menu-icon::after {content:"Kategorier";}

	/* Produkt-Raster: immer 2 Spalten */
	.products {grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin:0 0 12px;}
	.products:has(> .searchprod) {grid-template-columns:1fr;}
	#xmidcol .products {padding:0 8px; box-sizing:border-box;}
	.smallprod .price, .smallprod .pricevatless {font-size:13px;}
	.smallprod:hover {transform:none;}

	/* Tabellen seitlich scrollbar statt abgeschnitten */
	.cart {display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
	/* Haupt-Buttons ueber die ganze Breite */
	.bigbutton, input.bigbutton {width:calc(100% - 16px); margin:10px 8px;}
}
@media only screen and (max-width:640px) {
	#topbar {position:absolute; top:10px; left:auto; right:10px;}
	#dropdowns {position:relative; top:0; right:3px; width:100%; height:32px; display:inline-table;}
}
@media only screen and (max-width:540px) {
	.boilogo {font-size:9vw;}
	#intro1 {display:none;}
	#services {float:none; width:auto; margin:2px;}
	.foto {float:none; width:100%; margin:0 0 20px 0; font-size:0; line-height:0;}
	.banner {width:calc(100% - 10px);}
	.coupon_name {position:relative; float:right; top:0;}
	.coupon_small {position:relative; float:right; width:100%;}
	.big {font-size:16px;}
	.bigprod .price .big, .bigprod .pricevatless .big {font-size:24px;}
	.cart {width:auto; margin:auto;}

	/* Adressformular: Beschriftung ueber dem Feld, Felder volle Breite */
	.addressbox {width:auto; margin:0 8px; padding:14px;}
	.addressbox > div > div {display:block;}
	.desc, .addressbox .desc {float:none; display:block; width:auto; min-width:0; margin:8px 0 0;}
	.value {float:none; display:block;}
	.addressbox input[type=text], .addressbox input[type=prov], .addressbox input[type=plz],
	.addressbox input[type=email], .addressbox input[type=tel],
	.addressbox select,
	.creditcard input[type=text] {width:100%; max-width:none; margin:2px 0;}

	.paymethod {min-width:0; width:100%;}
	.payselection {width:auto; margin:10px 8px 20px;}
	fieldset input[name=coupon] {width:100%;}
}
@media only screen and (max-width:460px) {
	.home.topicon, .lens.topicon, .info.topicon {display:none;}
	h2 {font-size:max(1em, 12px);}
	.imgcol, .mengetit {display:none;}
	.offercoupon {height:28px;}
	.smallprod .offercoupon {height:auto;}
}
@media only screen and (max-width:380px) {
	.desc {margin-bottom:-4px;}
	.products {gap:8px;}
	.prodtitle {padding:8px 6px 2px;}
	.prodtitle h2 {font-size:14px;}
}
/* Bewegungen abschalten, wenn der Nutzer das im System so eingestellt hat */
@media (prefers-reduced-motion: reduce) {
	* {transition:none !important; animation:none !important;}
}