/* responsive.css – Mobiloptimierung (11/2026)

   Eingebunden ueber includes/head_common.php nach stylesheet.css.
   Fast alle Regeln stehen in @media (max-width: 999px): Der Desktop (ab 1000px) sieht
   genauso aus wie vorher. Oben stehen nur wenige Regeln, die am Desktop nichts veraendern.

   Aufbau mobil:
   - Die Layout-Tabellen (feste Breite 980px) werden zu Bloecken.
   - Linke Spalte: Zeilen .lc-nav (Hauptmenue, Kategorien) erscheinen per Menue-Knopf oben,
     Zeilen .lc-extra (Bestseller, Trustami) unter dem Inhalt (display:contents + order).
   - Produktlisten (table.pgrid) werden zum Raster, Warenkorb-Zeilen zu Karten.
   Hooks: includes/header.php (.mbar, .hdr-*), column_left.php/boxes (.lc-nav, .lc-extra),
   classes/boxes.php contentBox (.pgrid), shopping_cart.php (.cart-*), footer.php (.fsep).
   Keine Grafiken in images/ verwenden (der Ordner wird nicht deployt) – Icons als data:-SVG. */

/* ---------- immer (am Desktop unsichtbar bzw. ohne Wirkung) ---------- */
.mbar{display:none}
/* Buttons (tep_image_button/tep_image_submit, Design 11/2026): ueberall CSS-Buttons mit Text statt der GIFs.
   Desktop kompakt (28px), mobil gross (42px, weiter unten im Media-Query). */
.gbtn>img{display:none!important}
.gbtn{display:inline-block;margin:2px 2px;vertical-align:middle}
button.gbtn{margin:2px 2px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;border-radius:0}
a:has(>.gbtn){display:inline-block;text-decoration:none!important}
.gbtn-t{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 12px;box-sizing:border-box;
  border:1px solid #b9b2b2;border-radius:5px;background:#fff;color:#353434!important;
  font:bold 12px/1.2 Arial,Helvetica,sans-serif!important;text-decoration:none!important;text-transform:none;white-space:nowrap}
.gbtn-p .gbtn-t{background:#da1544;border-color:#b3103a;color:#fff!important}
a:hover .gbtn-t,button.gbtn:hover .gbtn-t{border-color:#8e1919}
.gbtn-p:hover .gbtn-t,a:hover .gbtn-p .gbtn-t{background:#b3103a}
a:active .gbtn-t,button.gbtn:active .gbtn-t{filter:brightness(.92)}
a:focus-visible .gbtn-t,button.gbtn:focus-visible .gbtn-t{outline:2px solid #171313;outline-offset:2px}
/* Suchfeld im Kopf: Hintergrundgrafiken des alten GIF-Buttons ausblenden */
td.hdr-search-btn{background:none!important}
td.hdr-search-btn br{display:none}
table.hdr-search td[style*="vertical-align:top"]{display:none}
td.hdr-search-btn .gbtn-t{min-height:22px;padding:0 10px}

/* Rahmen (Design/Ladezeit 11/2026): statt 8 Textur-Bildern (235 KB) CSS-Verlaeufe ueber der Grundtextur */
table.bg2_body{background:
  linear-gradient(to bottom, rgba(255,128,40,.92), rgba(255,128,40,0) 300px) top / 100% 300px no-repeat,
  linear-gradient(to top, rgba(255,128,40,.92), rgba(255,128,40,0) 300px) bottom / 100% 300px no-repeat,
  linear-gradient(to right, rgba(255,128,40,.92), rgba(255,128,40,0) 300px) left / 300px 100% no-repeat,
  linear-gradient(to left, rgba(255,128,40,.92), rgba(255,128,40,0) 300px) right / 300px 100% no-repeat!important}
td.bg3_body,table.bg4_body,td.bg5_body,table.bg6_body,td.bg7_body,table.bg8_body,td.bg9_body{background:none!important}
/* SEO: H1 im Titelbalken sieht aus wie der bisherige Text; Einleitungstext der Kategorien */
h1.seo-h1{display:inline;margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit}
div.seo-intro{margin:4px 0 14px;color:#353434;font-size:12px;line-height:1.55}
div.seo-intro p,div.seo-intro li{font-size:12px;line-height:1.55;margin:0 0 6px}
div.seo-intro p.seo-facts{color:#5b5757}
div.seo-intro h2{font-size:14px;margin:10px 0 4px}
/* Kategorie-Uebersicht: Kacheln (bis 40 Unterkategorien) und A-Z-Liste (z. B. 360 Staedte) */
ul.cgrid{list-style:none;margin:8px 0 12px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
ul.cgrid li{margin:0;padding:0}
a.ctile{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;box-sizing:border-box;padding:14px 10px 12px;
  background:#fff;border:1px solid #e3dfdf;border-radius:10px;text-align:center;text-decoration:none!important}
a.ctile:hover{border-color:#da1544;box-shadow:0 2px 8px rgba(0,0,0,.08)}
a.ctile .ctile-img img{display:block;max-width:100%;height:auto;border:1px solid #dbd8d8}
a.ctile .ctile-name{font:bold 14px/1.3 Arial,Helvetica,sans-serif;color:#a81553;text-decoration:underline}
a.ctile .ctile-n{font:11px/1.3 Arial,Helvetica,sans-serif;color:#767676}
div.az p.az-nav{margin:4px 0 12px;line-height:1}
div.az p.az-nav a{display:inline-block;min-width:16px;margin:0 3px 6px 0;padding:5px 6px;border:1px solid #e3dfdf;border-radius:5px;background:#fff;
  font:bold 13px/1 Arial,Helvetica,sans-serif;color:#a81553;text-align:center;text-decoration:none}
div.az p.az-nav a:hover{border-color:#da1544}
div.az .az-group{margin:0 0 10px;scroll-margin-top:10px}
div.az h2.az-h{margin:10px 0 6px;padding:0 0 3px;border-bottom:1px solid #e3dfdf;font:bold 16px/1.2 Arial,Helvetica,sans-serif;color:#171313}
div.az ul.az-list{list-style:none;margin:0;padding:0;columns:4;column-gap:22px}
div.az ul.az-list li{break-inside:avoid;padding:2px 0;font:12px/1.5 Arial,Helvetica,sans-serif;color:#353434}
div.az ul.az-list a{font:12px/1.5 Arial,Helvetica,sans-serif;color:#a81553;text-decoration:none}
div.az ul.az-list a:hover{text-decoration:underline}
div.az .az-n{font-size:11px;color:#999}
/* Produktseite: eigener Motivtext unter "In den Korb" */
div.motif-text{margin:14px 6px 6px;padding:14px 0 0;border-top:1px solid #e3dfdf;color:#353434}
div.motif-text h2{margin:0 0 8px;font:bold 15px/1.3 Arial,Helvetica,sans-serif;color:#171313}
div.motif-text p{margin:0 0 10px;font-size:13px;line-height:1.6}
/* Produktseite: "Mehr aus …" */
div.more-motifs{margin:16px 0 8px}
div.more-motifs h2{margin:0 0 8px;font:bold 16px/1.3 Arial,Helvetica,sans-serif;color:#171313}
div.more-motifs h2 a{margin-left:8px;font:normal 12px/1.3 Arial,Helvetica,sans-serif;color:#a81553}
div.more-motifs a.ctile .ctile-name{font-size:12px}
div.more-motifs a.ctile .ctile-n{font-size:12px;color:#353434}
div.more-motifs a.ctile .ctile-img img{max-height:170px;width:auto}
/* FAQ-Seite */
div.faq p.faq-intro,div.faq div.faq-a{font-size:12px;line-height:1.6;color:#353434}
div.faq h2.faq-q{font:bold 14px/1.35 Arial,Helvetica,sans-serif;color:#171313;margin:18px 0 4px}
div.faq div.faq-a a,div.faq p.faq-intro a{font-size:12px;color:#a81553;text-decoration:underline}
.menu a.mlink{color:inherit;text-decoration:none;font:inherit;display:block}
/* Ratgeber (ratgeber.php) */
div.guide{max-width:760px;color:#353434;font:13px/1.65 Arial,Helvetica,sans-serif}
div.guide p,div.guide li,div.guide td,div.guide th{font-size:13px;line-height:1.65}
div.guide p{margin:0 0 11px}
div.guide a{color:#a81553;text-decoration:underline}
div.guide h2{margin:24px 0 8px;font:bold 18px/1.3 Arial,Helvetica,sans-serif;color:#171313;scroll-margin-top:10px}
div.guide h3{margin:16px 0 6px;font:bold 15px/1.3 Arial,Helvetica,sans-serif;color:#171313}
div.guide ul,div.guide ol{margin:0 0 12px 20px;padding:0}
div.guide li{margin:0 0 5px}
div.guide p.guide-lead{font-size:15px;line-height:1.6;color:#171313}
div.guide p.guide-byline{margin:2px 0 14px;font-size:11px;color:#767676}
div.guide nav.guide-toc{margin:0 0 18px;padding:10px 14px;background:#faf8f8;border:1px solid #e3dfdf;border-radius:8px}
div.guide nav.guide-toc p{margin:0 0 4px;font-weight:bold;color:#171313}
div.guide nav.guide-toc ol{margin:0 0 0 18px}
div.guide nav.guide-toc li{margin:0 0 2px}
div.guide div.guide-box{margin:14px 0;padding:12px 14px;background:#fbf5f7;border-left:4px solid #a81553;border-radius:4px}
div.guide div.guide-box p:last-child{margin-bottom:0}
div.guide div.guide-table{overflow-x:auto;margin:0 0 14px}
div.guide table{border-collapse:collapse;width:100%}
div.guide th,div.guide td{padding:6px 8px;border:1px solid #e3dfdf;text-align:left;vertical-align:top}
div.guide th{background:#faf8f8;color:#171313}
div.guide ul.guide-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
div.guide ul.guide-tiles a.ctile{text-decoration:none}
div.guide ul.guide-tiles a.ctile .ctile-name{font-size:12px}
div.guide ul.guide-tiles a.ctile .ctile-img img{max-height:170px;width:auto}
div.guide figure.guide-fig{margin:6px 0 14px}
div.guide figure.guide-fig img{display:block;max-width:100%;height:auto;border-radius:6px}
div.guide figure.guide-fig figcaption{margin-top:5px;font-size:12px;line-height:1.45;color:#555}
div.guide div.guide-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:4px 0 14px}
div.guide div.guide-figs figure.guide-fig{margin:0}
div.guide div.guide-figs figure.guide-fig img{width:100%;aspect-ratio:3/2;object-fit:cover}
div.guide figure.guide-fig.portrait{float:right;width:38%;max-width:240px;margin:4px 0 12px 16px}
div.guide div.guide-figs figure.guide-fig.portrait{float:none;width:auto;max-width:none;margin:0}
div.guide h2{clear:both}
div.guide details.guide-faq{margin:0 0 8px;padding:9px 12px;border:1px solid #e3dfdf;border-radius:8px;background:#fff}
div.guide details.guide-faq summary{cursor:pointer;font-weight:bold;color:#171313}
div.guide details.guide-faq div{margin-top:8px}
ul.gteasers{list-style:none;margin:6px 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
ul.gteasers li{margin:0}
a.gteaser{display:flex;flex-direction:column;gap:6px;height:100%;box-sizing:border-box;padding:12px;background:#fff;border:1px solid #e3dfdf;
  border-radius:10px;text-decoration:none!important;color:#353434}
a.gteaser:hover{border-color:#da1544;box-shadow:0 2px 8px rgba(0,0,0,.08)}
a.gteaser .gteaser-img{text-align:center}
a.gteaser .gteaser-img img{max-height:120px;width:auto;max-width:100%;border:1px solid #dbd8d8}
a.gteaser .gteaser-t{font:bold 14px/1.3 Arial,Helvetica,sans-serif;color:#a81553;text-decoration:underline}
a.gteaser .gteaser-x{font:12px/1.5 Arial,Helvetica,sans-serif;color:#555}
div.guide-home{margin:14px 6px 6px}
div.guide-home h2{margin:0 0 8px;font:bold 16px/1.3 Arial,Helvetica,sans-serif;color:#171313}
div.guide-home h2 a{margin-left:8px;font:normal 12px/1.3 Arial,Helvetica,sans-serif;color:#a81553}
p.guide-more{margin:10px 6px;font:12px/1.6 Arial,Helvetica,sans-serif;color:#353434}
p.guide-more span{font-weight:bold}
p.guide-more a{color:#a81553}

/* ======================================================================= */
@media (max-width: 999px) {

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background-attachment:scroll}

/* ---------- Rahmen: Layout-Tabellen werden zu Bloecken ---------- */
table.bg2_body,table.bg2_body>tbody,table.bg2_body>tbody>tr,td.bg3_body,
table.bg4_body,table.bg4_body>tbody,table.bg4_body>tbody>tr,td.bg5_body,
table.bg6_body,table.bg6_body>tbody,table.bg6_body>tbody>tr,td.bg7_body,
table.bg8_body,table.bg8_body>tbody,table.bg8_body>tbody>tr,td.bg9_body,
table.width_table,table.width_table>tbody,table.width_table>tbody>tr,td.width_td,
td.width_td>table,td.width_td>table>tbody,td.width_td>table>tbody>tr,
td.row_1,td.row_2,td.row_3{display:block;width:auto!important;height:auto!important}
table.width_table{padding:0 6px;box-sizing:border-box}
td.width_td,td.content_width_td,td.row_2{min-width:0}

/* Lange Woerter/URLs umbrechen statt die Seite zu verbreitern */
td.content_width_td,td.row_3{overflow-wrap:anywhere;word-break:normal}
td.content_width_td [style*="justify"]{text-align:left!important}

/* Bilder im Inhalt passen sich an (Platzhalter-GIFs ausgenommen) */
td.content_width_td img:not([src*="spacer"]):not([src*="pixel_trans"]),
tr.lc-extra img{max-width:100%;height:auto}
td.content_width_td iframe,td.content_width_td object,td.content_width_td embed,td.content_width_td video{max-width:100%}

/* ---------- Kopf ---------- */
td.row_1>table,td.row_1>table>tbody,td.row_1>table>tbody>tr{display:block}
td.row_1>table>tbody>tr>td{display:block;width:auto!important;text-align:left!important}
td.row_1 td.logo{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0 6px}
td.row_1 td.logo img{width:104px;height:auto}
.mbar{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.mbar-cart,.mnav-toggle{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:0;border-radius:6px;
  background:#4a4541;color:#fff!important;font:bold 14px/1.2 Arial,Helvetica,sans-serif;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.mbar-cart b{display:inline-block;min-width:20px;margin-left:6px;padding:2px 5px;border-radius:10px;background:#c9e919;color:#171313;text-align:center;font-size:13px}
.mbar-cart-icon{display:inline-block;width:20px;height:18px;margin-right:6px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round' d='M1 2h4l3 12h12l3-9H7'/%3E%3Ccircle cx='10' cy='19' r='2' fill='%23fff'/%3E%3Ccircle cx='19' cy='19' r='2' fill='%23fff'/%3E%3C/svg%3E")}
.mnav-icon{display:inline-block;position:relative;width:18px;height:2px;margin:0 9px 0 0;background:#fff;box-shadow:0 -6px 0 #fff,0 6px 0 #fff}
html.nav-open .mnav-toggle{background:#171313}
html.nav-open .mnav-icon{box-shadow:none;transform:rotate(45deg)}
html.nav-open .mnav-icon:after{content:"";position:absolute;left:0;top:0;width:18px;height:2px;background:#fff;transform:rotate(90deg)}

table.hdr,table.hdr>tbody,table.hdr>tbody>tr,table.hdr>tbody>tr>td{display:block;width:auto!important;float:none!important}
table.hdr{margin:0!important}
table.hdr td{font-size:12px!important;line-height:1.3!important}
table.hdr .nav_separator,table.hdr td.z1{display:none}
tr.hdr-tools-row>td>table,tr.hdr-tools-row>td>table>tbody{display:block}
tr.hdr-tools-row>td>table>tbody>tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
tr.hdr-tools-row>td{padding-bottom:6px!important}
html:not(.nav-open) tr.hdr-tools-row,html:not(.nav-open) td.hdr-manu{display:none!important}
tr.hdr-tools-row table{width:auto!important}
td.hdr-lang td{white-space:nowrap}
td.hdr-cur select.select{height:34px;font-size:14px;line-height:normal}
td.hdr-lang a{display:inline-block;padding:9px 4px}
tr.hdr-search-row>td{padding-top:8px!important}
tr.hdr-search-row>td>table,tr.hdr-search-row>td>table>tbody{display:block}
tr.hdr-search-row>td>table>tbody>tr{display:flex;flex-direction:column;gap:8px}
tr.hdr-search-row>td>table>tbody>tr>td{display:block;width:auto!important}
tr.hdr-search-row td:empty,tr.hdr-search-row>td>table>tbody>tr>td.nav_separator{display:none}
table.hdr-search{float:none!important;width:100%!important}
table.hdr-search>tbody{display:block}
table.hdr-search>tbody>tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
table.hdr-search td{display:block}
table.hdr-search td.hdr-search-label{display:none}
table.hdr-search td[style*="vertical-align:top"]{display:none}
table.hdr-search td.go{flex:1 1 0;display:flex;gap:6px;height:auto;min-width:0}
table.hdr-search td.go input{flex:1 1 55%;min-width:0;height:44px;font-size:16px;line-height:normal;padding:0 8px;box-sizing:border-box}
table.hdr-search td.go select{flex:1 1 45%;min-width:0;height:44px;font-size:14px;line-height:normal}
td.hdr-search-btn{background:none!important;height:auto!important}
td.hdr-search-btn br{display:none}
td.hdr-search-btn .gbtn{margin:0}
td.hdr-search-btn .gbtn-t{min-height:44px}
td.hdr-manu table[style]{width:100%!important}
td.hdr-manu table,td.hdr-manu tbody,td.hdr-manu tr,td.hdr-manu td{display:block;width:auto!important}
td.hdr-manu tr{display:flex;align-items:center;gap:8px}
td.hdr-manu td[style]{flex:1 1 auto;min-width:0}
td.hdr-manu select{height:44px;font-size:14px;line-height:normal}

/* ---------- Hauptbereich: linke Spalte aufteilen ---------- */
table.main_table,table.main_table>tbody{display:block}
table.main_table>tbody>tr{display:flex;flex-direction:column}
td.box_width_td_left,td.box_width_td_left>table.box_width_left,td.box_width_td_left>table.box_width_left>tbody{display:contents}
td.content_width_td{display:block;order:1;width:auto}
td.box_width_td_right{display:none}
tr.lc-nav{display:none;order:0}
html.nav-open tr.lc-nav{display:block}
tr.lc-extra{display:block;order:2;margin-top:12px}
tr.lc-nav>td,tr.lc-extra>td{display:block}
tr.lc-menu{margin-top:4px}
tr.lc-nav:last-of-type{margin-bottom:10px}

/* Menue und Kategorien als grosse Tap-Zeilen */
#m1,#m2,#m3,#m4,#m5,#m6,#over_m1,#over_m2,#over_m3,#over_m4,#over_m5,#over_m6{padding:0 0 0 22px;background-position:0 50%;font-size:15px}
.menu a.mlink{padding:14px 0}
.boxText .bg_list a,.boxText .bg_list_un a,.boxText .bg_list3 a,.boxText .bg_list3_un a{font-size:15px;line-height:1.3;padding:11px 1px 11px 24px;background-position:0 50%}
.boxText ul li div{padding-left:14px}
.infoBoxContents_table .boxText{padding:10px 16px 12px;height:auto}
.boxText,.boxText td,.boxText a,.boxText font,.boxText font a,.boxText .order_history a{font-size:14px;line-height:1.4}
.infoBoxHeading_td,.infoBoxHeading2_td,.infoBoxHeading3_td{height:auto;padding-top:6px;padding-bottom:6px;font-size:16px}
tr.lc-extra .boxText li a{padding:8px 0}

/* ---------- Inhalt: Rahmen und Schrift ---------- */
td.content_width_td td.corner_bg[style*="padding"]{padding:0 10px 14px!important}
.cont_heading_td{height:auto;padding:12px 0 6px}
.cont_heading_td,.cont_heading_td a{font-size:17px;line-height:1.35}
.main .desc,.main .desc2,.main b,.main p,.main td,div.main,p.main,td.main,
.content_wrapper2_td .main,.smallText,TD.smallText,SPAN.smallText,P.smallText,.smallText em,
TD.fieldKey,TD.fieldValue,TD.tableHeading,.result td,.inputRequirement,.stockWarning,.messageStackError,.messageStackWarning,.messageStackSuccess,.messageBox,.errorBox,
.main b b,.main .data em,.checkoutBarFrom,.checkoutBarTo,.checkoutBarCurrent,TD.infoBox,SPAN.infoBox,.infoBoxNoticeContents,.productListing-heading{font-size:14px;line-height:1.45}
.main a,.main .name a,.main .name b a,.smallText a,.smallText a u,.main .desc2 a,.result_right a.pageResults{font-size:15px;line-height:1.4}
DIV.pageHeading,TD.pageHeading,DIV.pageHeading a,TD.pageHeading a{font-size:20px}
.main .listing em,.main .listing font,.main .listing b font,.main .listing font a,table.listing td{font-size:13px}
.main br{line-height:normal}

/* Eingabefelder: 16px verhindert das automatische Zoomen auf dem iPhone */
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input:not([type]),select,textarea{
  font-size:16px;line-height:normal;max-width:100%;box-sizing:border-box}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input:not([type]),select{min-height:40px}
input[type=checkbox],input[type=radio]{width:24px;height:24px;vertical-align:middle}

/* Links: etwas Innenabstand oben/unten vergroessert die Tap-Flaeche, ohne den Zeilenfluss zu aendern */
td.content_width_td a,tr.lc-extra a{padding-top:5px;padding-bottom:5px}
td.content_width_td a:has(>img){display:inline-block;padding:0}
td.content_width_td .cont_heading_td a{display:inline-block;padding:6px 0}
.orderEdit{font-size:13px}
td.content_width_td small,td.content_width_td font[size]{font-size:13px}
#widerruf-footer-btn span{font-size:13px!important}

/* Buttons mobil: groessere Tap-Flaechen */
.gbtn{margin:4px 2px}
a:has(>.gbtn){padding:0!important}
.gbtn-t{min-height:42px;padding:0 16px;border-radius:6px;font-size:14px!important}

/* ---------- Produktraster (Listen, Kategorien, Neuheiten, Angebote) ---------- */
table.pgrid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;width:100%!important}
table.pgrid>tbody,table.pgrid>tbody>tr{display:contents}
table.pgrid>tbody>tr>td{display:block;width:auto!important;min-width:0}
table.pgrid td.prod_line_x,table.pgrid td.prod_line_y{display:none!important}
table.pgrid-list{grid-template-columns:1fr}
.prod2_table,.prod2_table>tbody,.prod2_table>tbody>tr,.prod2_table>tbody>tr>td,
.prod2_tl,.prod2_tl>tbody,.prod2_tl>tbody>tr,.prod2_tl>tbody>tr>td,
.prod2_bl,.prod2_bl>tbody,.prod2_bl>tbody>tr,.prod2_bl>tbody>tr>td{display:block;width:auto}
.prod2_td{padding:12px 8px 14px;height:auto!important}
.prod2_br{height:auto}
td.prod2_td>table,td.prod2_td>table>tbody,td.prod2_td>table>tbody>tr,td.prod2_td>table>tbody>tr>td{display:block;width:auto}
.pic_table,.pic_table>tbody,.pic_table>tbody>tr,.pic_table>tbody>tr>td,
.pic2_table,.pic2_table>tbody,.pic2_table>tbody>tr,.pic2_table>tbody>tr>td,
.pic3_table,.pic3_table>tbody,.pic3_table>tbody>tr,.pic3_table>tbody>tr>td{display:block;width:auto;text-align:center}
.pic_table,.pic2_table{border:0}
.main .name2_padd,.main .name4_padd{height:auto;padding:8px 0 4px}
.main .name4_padd{text-align:center}
.main .pic4_padd{padding:0}
.main .desc2_padd{height:auto;max-height:10.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
.main .desc2_padd,.main .desc2_padd *{font-size:13px!important;line-height:1.4!important}
.main .price2_padd{height:auto;padding:6px 0}
.main .button2_padd{height:auto;padding:2px 0 0}
/* Produktkarten: Buttons untereinander in voller Breite */
.main .button2_padd a:has(>.gbtn),.main .button2_padd .gbtn{display:block;margin:6px 0 0}
.main .button2_padd .gbtn-t{width:100%;padding:0 6px}
.main .right .button_padd .fl_left,.main .right .button_padd .fl_right,.main .left .button_padd .fl_left,.main .left .button_padd .fl_right{float:none}
/* Listenansicht "Neue Produkte" */
.main .right .pic_padd,.main .left .pic_padd{float:none;padding:0 0 8px;text-align:center}
.main .right .data_padd,.main .left .price_padd,.main .right .price_padd{float:none;text-align:left;padding:6px 0 0}
.main .right .name_padd,.main .left .name_padd,.main .right .desc_padd,.main .left .desc_padd{padding:8px 0 0}
.prod_td{padding:10px 6px 14px}

/* Blaetterleiste */
.result_top_padd td,.result_bottom_padd td{display:block;width:auto!important;text-align:left!important;padding:6px 0}
.result_right a.pageResults{display:inline-block;min-width:32px;padding:8px 6px;text-align:center}
.select2 td{display:block;height:auto;padding:6px 0}
.select2 select,form[name=filter_price] select{width:100%;margin:6px 0}

/* ---------- Produktseite ---------- */
.prod_info{float:none!important;width:auto!important;margin:0 0 12px!important;text-align:center}
.left_part,.right_part{float:none;width:auto}
.right_part{margin-top:8px;font-size:15px}
.cont_heading_td .left_part a{font-size:15px}
.main .desc2 table{width:auto!important;max-width:100%}
.main .desc2 td{width:auto!important}
.pi-options,.pi-options>tbody,.pi-options>tbody>tr,.pi-options>tbody>tr>td{display:block;width:auto}
.pi-options select{width:100%}
.content_wrapper1_td,.content_wrapper2_td{padding-left:8px;padding-right:8px}
.content_wrapper1_br,.prod2_br{height:auto}
td.button_marg{display:block;width:auto;text-align:center!important;padding:4px 0}
/* Produktseite: "In den Korb" gross und in voller Breite */
td.button_marg .gbtn-p{display:block;width:100%;margin:6px 0}
td.button_marg .gbtn-p .gbtn-t{width:100%;min-height:50px;font-size:17px!important}

/* ---------- Warenkorb: jede Zeile wird eine Karte ---------- */
table.tableBox_shopping_cart,table.tableBox_shopping_cart>tbody{display:block;width:100%}
table.tableBox_shopping_cart>tbody>tr{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;gap:4px}
table.tableBox_shopping_cart td.cart_line_y,table.tableBox_shopping_cart td.s_cart_head{display:none}
table.tableBox_shopping_cart td.cart_line_x{display:block;grid-column:1/-1}
table.tableBox_shopping_cart td.cart-product{grid-column:1/-1;order:-1;display:block}
table.tableBox_shopping_cart td.cart-product table{width:100%}
td.cart-remove,td.cart-qty,td.cart-total{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:auto!important;padding:4px 0 12px!important}
td.cart-remove::before,td.cart-qty::before,td.cart-total::before{content:attr(data-label);font-size:12px;color:#666;margin-bottom:6px;text-transform:uppercase}
td.cart-qty input{width:64px;text-align:center}
.cart_total_left{width:auto;height:auto;padding:12px 10px 12px 0;font-size:14px}
.cart_total_right{width:auto;padding:0}
.cart_button_padd{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:10px 0 0}

/* ---------- Formulare: Beschriftung ueber dem Feld ---------- */
td.content_width_td table:has(>tbody>tr>td:is(.b_width,.fieldKey)),td.content_width_td table:has(>tbody>tr>td:is(.b_width,.fieldKey))>tbody,
td.content_width_td tr:has(>td:is(.b_width,.fieldKey)){display:block;width:auto!important}
td.b_width,td.width2_100,td.content_width_td tr:has(>td:is(.b_width,.fieldKey))>td{display:block;width:auto!important}
td.fieldKey{padding-top:8px}
td.fieldValue select,td.fieldValue input:not([type=checkbox]):not([type=radio]){width:100%}
.b_width strong{width:auto;display:block;padding-top:8px}
.width2_100 input,.width2_100 select,.width3_100 input{width:calc(100% - 22px)}
.width2_100 input[type=radio],.width2_100 input[type=checkbox]{width:22px}
.infoBox_ .infoBox__{padding:10px 8px}
textarea{width:100%!important}

/* ---------- Checkout und Konto: zweispaltige Bereiche untereinander ---------- */
td.content_width_td table:has(>tbody>tr>td:is([width="50%"],[width="30%"],[width="70%"])),
td.content_width_td table:has(>tbody>tr>td:is([width="50%"],[width="30%"],[width="70%"]))>tbody,
td.content_width_td tr:has(>td:is([width="50%"],[width="30%"],[width="70%"])){display:block;width:auto!important}
td.content_width_td tr:has(>td:is([width="50%"],[width="30%"],[width="70%"]))>td{display:block;width:auto!important;height:auto!important}
td.content_width_td table[style*="height:240px"]{height:auto!important}
/* Login: Ueberschriftenzeile "Neuer Kunde | Bereits Kunde" (die Kaesten nennen das selbst) */
td.content_width_td tr:has(>td.main.indent_2[width="50%"]){display:none!important}
tr.moduleRow td,tr.moduleRowSelected td,tr.moduleRowOver td{padding-top:10px;padding-bottom:10px}

/* ---------- Fuss ---------- */
td.row_3 table.footer,td.row_3 table.footer>tbody,td.row_3 table.footer>tbody>tr{display:block;width:auto}
td.row_3 table.footer>tbody>tr>td:first-child{display:none}
td.row_3 td.footer2_td{display:block;text-align:center!important;padding:10px 4px 16px}
.footer,.footer td,.footer span,.footer b,.footer b a,.footer a,.footer span a{font-size:14px;line-height:1.5}
.footer2_td>span a,.footer2_td>b>a{display:inline-block;padding:8px 6px}
.fsep{display:none}

/* ---------- Popups (Warenkorb-Info, Suchhilfe, Bild) ---------- */
.popup_width_table{width:auto;max-width:100%}
.popup td,.popup a,.popup a u,.popup strong,.popup_footer td,.popup_footer a{font-size:14px;line-height:1.45}
.popup a{display:inline-block;padding:8px 0}

/* SEO-Einleitungstext */
div.seo-intro,div.seo-intro p,div.seo-intro li{font-size:14px;line-height:1.55}
div.seo-intro h2{font-size:16px}
div.motif-text p{font-size:15px}
div.motif-text h2{font-size:17px}
div.faq p.faq-intro,div.faq div.faq-a,div.faq div.faq-a a,div.faq p.faq-intro a{font-size:15px}
div.faq h2.faq-q{font-size:17px}

/* Kategorie-Uebersicht mobil */
ul.cgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
a.ctile .ctile-name{font-size:15px}
a.ctile .ctile-n{font-size:13px}
div.az p.az-nav a{min-width:22px;padding:9px 8px;font-size:15px}
div.az ul.az-list{columns:2;column-gap:14px}
div.az ul.az-list li,div.az ul.az-list a{font-size:15px;line-height:1.4}
div.az ul.az-list li{padding:6px 0}
div.az .az-n{font-size:13px}

/* Ratgeber mobil */
div.guide,div.guide p,div.guide li,div.guide td,div.guide th{font-size:15px}
div.guide p.guide-lead{font-size:16px}
div.guide p.guide-byline{font-size:13px}
div.guide h2{font-size:19px}
div.guide h3{font-size:17px}
div.guide nav.guide-toc li{margin:0 0 8px}
div.guide ul.guide-tiles{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
div.guide details.guide-faq summary{padding:4px 0}
ul.gteasers{grid-template-columns:1fr}
a.gteaser{display:grid;grid-template-columns:90px 1fr;align-items:start;column-gap:12px;row-gap:4px}
a.gteaser .gteaser-img{grid-row:span 2}
a.gteaser .gteaser-img img{max-height:90px}
a.gteaser .gteaser-t{font-size:16px}
a.gteaser .gteaser-x{font-size:14px}
p.guide-more{font-size:15px}
p.guide-more a{display:inline-block;padding:6px 0}

} /* Ende max-width 999px */

/* Schmale Handys: Warenkorb nur als Symbol mit Anzahl */
@media (max-width: 419px) {
  .mbar-cart-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Sehr schmale Geraete: Raster einspaltig */
@media (max-width: 340px) {
  table.pgrid{grid-template-columns:1fr}
}