/* Bei 1100px muss hier schon der Header anders dargestellt werden. Der Rest ist noch ok */

.footer_logo {
    flex-direction: column!important;
}
.footer_logo > div {
    width:auto;
    padding:0 5%;
}
.footer_logo h6 {
    font-size:1.8rem;
}
.aktion {
    position:relative;
}
a.basket_item:link, a.basket_item:active, a.basket_item:visited {
    font-size:1rem;
}
#directory_product {
    display:none;
}
.content .subdir_info_wrapper .subdir_bild img {
    aspect-ratio:initial;
}
.content .subdir_text {
    padding-bottom:15px;
}
.mobile .suche .fa-search {
    color:var(--white)!important;
    font-size:30px!important;
    margin-left:0!important;
    margin-top:0!important;
}
#ueber_uns, #kunden, #testimonials {
    width:96%;
}
.ueber_uns {
    flex-direction: column;
}
.ueber_uns h2 {
    font-size:3rem;
    gap:18px;
}
.ueber_uns h2 img {
    max-height: 34px;
}
#ueber_uns,
#testimonials {
    margin:2%!important;
}
.testimonials {
    flex-direction:column;
}
.ueber_uns > div,
.testimonials > div {
    width:100%;
}
.bx-controls-direction {
    display:initial!important;
}
.testimonials_text .bx-wrapper .bx-prev {
    left:10px!important;
}
.testimonials_text .bx-wrapper .bx-next {
    right:10px!important;
}
.beschreibung_info .inner {
    flex-direction: column;
    gap: 10px;
    padding:0 20px;
}
#beschreibung,
.eigenschaften {
    width:100%;
}

.root .breadcrumb {
    font-size:.7rem;
}
.home {
    flex-direction:column;
}
.home > div {
    width:100%;
    text-align:center;
    max-height:unset;
    margin-bottom:0;
}

section.aktion {
    padding-bottom:0;
}
.content .subdir_artikel {
    flex-direction:column;

}
.bestellvorgang .box_2 {
    display:flex;
}
.content .box_2 {
    width:96%;
    padding:0 2%;
}
.aktion_box {
    padding:0 2%;
}
.adressdaten {
    margin-left: 0;
}
.adressdaten .placeholder {
    margin:4px 0 0 8px;
}
.adressdaten select {
    width:calc(98% - 2px);
}
.bestellvorgang input[type="text"],
.bestellvorgang input[type="email"],
.bestellvorgang input[type="password"],
.bestellvorgang textarea {
    width:calc(98% - 2px);
    border-radius: var(--border_radius_1);
}
.adressdaten .addr_50 {
  width: calc(48% - 5px)!important;
}
.adressdaten .addr_100 {
    gap:6%;
}

.divtoggle {
    margin:2%;
    display:flex;
    flex-wrap:wrap;
}
.dropd {
    min-width:unset;
}
.subdir_sort .options_select {
    width:unset!important;
    max-width:44%;
}
.subdir_info {
    max-width:90%!important;
}
.content .subdir_info_wrapper {
    flex-direction:column;
}
.social,
.shoplogos {
    justify-content:center;
}
.service_center > div {
    width:98%!important;
}
.service_center_menu {
    max-height:unset;
}
.service_center_menu li {
    width:100%;
}
.hinweis_vk {
    background-color:#EC659E;
    color:#fff;
}

.box_top h3 {
    padding-left:3%;
}
.liefer_select > div {
    width:100%;
}
.search_result_msg {
    padding:0 2%;
}

footer .inner {
    display:block!important;
}

footer .inner .kontakt
 {
    width:100%;
}
.ce-textpic > div {
    width:100%!important;
}
.search #searchSubmit {
    background-position: center;
    height: 26px;
    margin:5px 10px 10px 0 !important;
    top:1px;
}
#artikel .itemTable_container .itemTable_rownew {

    display: initial;
    flex-direction: column;
    vertical-align:initial;

}
#artikel {
    overflow-x:scroll!important;
}
.itemTable_container thead {
    display:initial;
}
.konfig_scroll {
    width:92%;
}
.zahlarten_wrapper {
    justify-content: center;
}
.zahlarten_wrapper a {
    display:flex;
}
.zahlarten_wrapper div {
    margin:0 auto;
}
.footer li {
    justify-content:center;    
}

.jetztKaufenButton {
    display:block;
    text-align:center;
} 
.bestellvorgang input[type=text],
.bestellvorgang input[type=email],
.bestellvorgang input[type=password],
.bestellvorgang textarea,
.bestellvorgang select,
.versand_laenderauswahl select {
    padding: 2%;
}

.ui-dialog-buttonset .ui-button {
    padding:3%!important;
    font-size:.9rem!important;
}
.bottom_nav {
    flex-direction:column;
    gap:15px;
    margin:0;
    margin-bottom:50px;
    width:calc(100% - 15px) !important;
}
.item_mobile {
    display:block;
}
.item_single {
    display:flex;
    max-width:100%;
    justify-content:left;
    align-items:top;
    flex-wrap:wrap;
}
.item_detail {
    display:flex;
    clear:both;
    align-items:center;
    margin-top:5px;
    margin-bottom:20px;
    background:#eee;
    padding:2px;
    width:100%;
}
.item_liefer {
    color:#666;
    padding:2% 0 2%;
}
.item_delete {
    display:flex;
    align-items:center;
    gap:4px;
    justify-content:right;
}
.itemBeschreibung {
    flex:min-content;
}
.itemBild {
    padding:5px;
    text-align:center;
    max-width:47px;
}
.itemMenge {
    display:flex;
    align-items:center;
    gap: 10px;
}
.easycredit_box {
    width:95%;
    min-width:unset;
    flex-wrap:unset;
}
.easycredit_box img {
    margin:10px -2px;
    
}
.basket_table_left .itemSmall_menge {
    display:flex;
    gap:10px;
    align-items: center;
    padding: 4px;
}
.item_centerrow {
    width:100%;
}
.item_rightrow {
    width:100% !important;
}

.sie_sparen {
    margin:3% 0;
}
.item_rightrow .vk_link, .item_rightrow .preis_lieferstatus {
    width:100%;
    text-align:left;
    padding:2% 0;
}
/* kacheln startseite */
@media screen and (max-width:768px) {
    .einstieg_text {
        position:relative;
        max-width:unset!important;
        text-align:left;
        padding:0 2%;
        font-size:1.2rem!important;
        text-shadow:1px 1px 1px #000;
        height:auto!important;
    }
}

.addr_table .input,
.addr_table textarea,
.addr_table select,
.addr_table input[type=text],
.addr_table input[type=email],
.addr_table input[type=password] {
    width:unset;
}
.addr_table textarea {
    width:100%!important;
}
.addr_table td:first-of-type {
    display: table-cell;
    text-align: left !important;
    width: auto !important;
}
.addr_table *{
    font-size: .9em;
}   
.addr_table .persdata {
    margin:2px 0;
}
td.save_address {
    display:unset;
}
.hLogo {
    width: 96%;
    float: none;
    text-align: center;
}
.back {
    float: none;
    clear: both;
}
.hText {
    float: left;
    width: 96%;
    line-height: 1.4em;
    padding: 2%;
}

.artikel_box {
    flex:unset;
    max-width:unset;
    height:unset!important;
}
.inner_basket h1 {
    font-size:1.4rem!important;
}
.inner_basket h1,
.inner_basket h3 {
    padding:10px 0px;
}
.box_subdir {
    width:96%;
    margin:2% auto!important;
}
.box_subdir a .top {
    min-height:250px;
}
.merkmale {
    width:100%;
}
.content .basketNav2 {
    float:unset;    
}
#accordionBasket {
    clear:both;
}
.bottom_nav .special_buy {
    width:100%;
    float:left;
    text-align:center;
}
.bottom_nav .special_buy a {
    float:right;
}

.bottom_nav_left {
    display:none;    
}
.gutschein_table input {
    width:93%;
    margin:0 auto;
}
#gutschein {
    padding:5px;
}
.subdir_bild {
    width:100%!important;
}
.subdir_text {
    clear:both;
    float:none;
    width:92%!important;
    border-style:none!important;
}
.service_center {
    flex-direction:column;
    text-align:center;
}
.service_center_text {
    transition:all 200ms ease;
}
.shopname {
    font-size: .8em;
    padding-left: 10px;
    padding-top:0;
}
.hotline {
width: 100%;
text-align: right;
padding-left: 0;
padding-right: 10%;
clear: both;
float: right;
}

.basket-items-overview tr {
    vertical-align:top;
}
.basket_table_artikel {
    margin-left:0px;
    padding-left:0px;
    width:100%;
}
.basket_table_artikel thead {
    display:none;
}
.basket_table td {
    padding: 5px;
    /*display:flex;*/
}
.steps_image {
    display:none;
}


.subdir_title {
    left:unset!important;
    top:unset!important;
    position:relative!important;
    clear:both;
    float:none;
}
.subdir_title h1 {
    padding:3px 0!important;
}
.inner_basket {
    width:96%!important;
}

.content .basketNav2 {
    border-bottom:none;
}
.nav_home,
.bx-controls-direction {
    display:none;
}

.footernav {
    width:100%;
}
.footernav ul {
    display:block;
    width:100%;
}
.footernav ul li {
    text-align:center!important;
    width:100%;
    padding:0!important;
}
.infobar {
    display:none;
}
.backToShopButton
{
    float: right;
    clear: both;
    width: 100%;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

html{
    height:100%;
}

img{
    max-width:100%;
}
.ui-accordion .ui-accordion-content{
    padding: 2%;
}
.root{
    clear:none;
    margin-top:0px;
    overflow:hidden;
    min-height: 100vh;
}
/* Startseite: dort ist der Inhaltsbereich praktisch leer — center.tpl gibt auf
   der Startseite kaum etwas aus (angebote.tpl ist komplett auskommentiert, das
   Content-Template wird uebersprungen, weil $file dort "aktion.tpl" ist).
   Die oben erzwungene Bildschirmhoehe wurde dadurch zu einer leeren Flaeche
   zwischen dem Banner und den Kacheln aus home01.tpl — gemessen exakt 100vh
   (844px bei 390x844). Auf dem Desktop faellt es nicht auf, weil .aktion dort
   position:absolute ist (styles.css:1076) und tablet.css hier gar nicht gilt.
   Erkannt wird die Startseite daran, dass auf .root die Kachel-Sektion folgt:
   .mainnav_items entsteht nur in home01.tpl, und das bindet page.tpl:485
   ausschliesslich bei $pagetype=="Startseite" ein. Alle uebrigen Seiten
   behalten die Bildschirmhoehe unveraendert. */
.root:has(~ .mainnav_items){
    min-height: 0;
}
.header {
    transition:all 200ms ease;
    height: auto;
    position:relative;
    padding-top: 0px;
    float: left;
    background: var(--grey);
}

.mobile_header {
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin:0 10px;
    padding: 10px 0;
}
.fa-search {
    position: initial;
}
.boxCenter img {
    padding: 5%;
    border-radius: 10px;
}
.basketIcon {
    height:auto;
}

.fixed{
 /*   position:fixed;*/
}
.basket_table_left .mobile,
.desktop,
#topinfo.desktop,
.header .desktop{
    display: none!important;
}
.mobile,
.header .mobile {
    display: block;
    float:left;
}

.boxCenter {
    text-align:center;
}
.boxCenter a {
    margin:0 auto;
    display:inline-block;
}

.boxCenter img {
    width:auto;
    margin:0 auto;
    max-height:81px;
    display:block;
}

.header .mobile .boxLeft, .header .mobile .boxCenter, .header .mobile .boxRight {
    float: left;
    width: 33.33%;
}

.header .mobile .boxLeft .menue,
.header .mobile .boxLeft .suche,
.header .mobile .boxRight .location,
.header .mobile .boxRight .warenkorb{
    float:left;
    width:48%;
    padding:0% 1%;
    margin: 0;
    text-align: center;
    position:relative;
    height:auto;
}

.header .mobile .boxCenter .logo{
    text-align:center;
    max-width:100%;
    position: relative;
    float: none;
    margin: 0px;
}
.header .mobile .boxCenter .logo a{
    margin: 0 0 -3px 0;
    display: block;
}
.header .mobile .menue img,
.header .mobile .suche img,
.header .mobile .location img,
.header .mobile .warenkorb img{
    max-width:35px;
}
.header .mobile .logo img{
    max-width: 90px;
    margin-top:-3%;
}
.header .mobile .warenkorb .warenkorb_icon{
    padding:0px;
    width: 100%;
}
.warenkorb_preis {
    background-color: transparent;
    float: none;
    position: absolute;
    margin-top: 39%;
    height: auto;
    color: #000 !important;
    width: 57px;
}
.searchMobile{
    float:left;
    width:100%;
}
.mobile .search{
    padding: 1% 0px;
    width: 100%;
    float: left;
    margin-bottom:8px!important;
}
.searchMobile .mobile #suchbegriff{
    max-width: none;
    width:85%;
    height:30px;
    float:left;
    padding: 0 2%;
    border: 1px solid #ccc;
}
.header_wk_anzahl {
    width: 13%;
    text-align: center;
    margin: 0px;
    padding: 12px 2.5%;
    float: left;
}
.warenkorb_menu{
    top:100%;
    right:-10px;
    margin: 0;
}
.header_wk_anzahl_10 {
    width: 13%;
    text-align: center;
    margin: 0px;
    padding: 12px 1.9%;
    float: left;
}


.topnav, .topnav * {
    margin:0!important;
    padding:0!important;
    width:100%!important;
    /*background:var(--white);*/
    float:left;
    overflow:hidden;
}
.topnav ul {
    margin: 0;
    float:left;
    clear:both;
    display:block;
}
.topnav ul li{
    width: 100%;
    max-width:none;
    clear:both;
    float:left;
    border-bottom:1px solid #ccc;
}
.topnav ul li a {
    float:left;
    width:94%!important;
    display: block;   
    text-align:left!important;
    padding:20px 30px!important;
    background-color:#fff!important;
    color:var(--darkblue);
    text-decoration:none;
}
.topnav ul li a:focus, 
.topnav ul li a:hover {
    text-decoration:none;
    background-color:var(--blue);
}

[role="search"],
.search {
    transition: .2s all ease;
    height: 0;
	float: left;
    display:none;
    z-index:99;
}
.search {
    min-width:unset;
}
.active-search .search {
    clear:both;
    transition: .2s all ease;
    height: auto;
    display: block;
    padding: 10px !important;
    margin: 2% 0 8px 2%!important;
    float: left;
    max-width:calc(96% - 20px);
    width:calc(96% - 20px);
}
#topnav {
    top:100%;
    transition: .2s all ease;
    margin-left:-106%!important;
    position:absolute;
    z-index:99999;
}
.active-nav #topnav {
	margin:0%!important;
	width:100%;
    background-color: rgb(255, 255, 255);
/*    overflow:hidden;*/
    padding:0!important;   
}

.mainslider{
    float:left;
    clear:none;
}
/** BESTELLVORGANG **/
.content .basket_table_right{
    display:block;
}
.content .basketNav2{
    width: 100%;
    padding:0;
    height:auto;
}
.content .basketNav2 .headline{
    display: none;
}
.content .basketNav2 .basketNav2Image{
    width: 100%;  
}
.content .basketNav2 .basketNav2Image img{
    max-width: 25%;
}
.content .subdir .box_subdir img {
    max-height: unset!important;
}
.content .subdir_artikel_wrapper .subdir_artikel .artikel_box img,
.content .subdir_artikel_wrapper .subdir_artikel .artikel_box a{
    max-width:100%;
}
.basket_comodo{
    margin: 0!important;
}
/* Neue Mobile Buy1 TPL */
.steps_image {
    display:none;
}
    .grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0fr 0fr;
  gap: 1px 1px;
  grid-template-areas:
    "mobile_buy_login"
    "mobil_buy_buttons_options"
    ;
  width:100%;
  margin-top: 5%;
}

.mobil_buy_buttons_options { grid-area: mobil_buy_buttons_options; }

.mobile_buy_login { grid-area: mobile_buy_login; padding: 1% 2.5% 5% 2%;}

.mobile_options_buy_1
{
   display:flex; 
   width: 100%;
}
.bestellartButtons_mobile a {
    font-weight: bold;
    color:white !important;
}
.bestellartButtons_mobile {
    margin-bottom: 5%;
}
.bestellartButtons_mobile a {
    color: white;
}
.weiterButton_mobile {
    padding: 14px;
    background-color:var(--pink);
    display: flex;
    width: 100%;
    justify-content: center;
    border-radius:5px;
    text-decoration:none;
}
.weiterButton_mobile:hover,
.weiterButton_mobile:focus {
    background:var(--darkred);
}

.login-form_mobile {
  position: relative;
  z-index: 1;
  text-align: center;
}
.login-page p {
    font-weight: bold;
}
.login-form_mobile input {
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  border-radius:5px;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
}
.login-form_mobile button {
  outline: 0;
  font-weight: bold;
  background: var(--pink);
  width: 100%;
  border: 0;
  border-radius:5px;
  padding: 15px;
  color: #FFFFFF;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.login-form_mobile button:hover,
.login-form_mobile button:focus {
    background:var(--darkred);
}
.buttons_selection
{
  padding: 1% 10% 0% 2%;  
}


@media screen and (max-width:990px) {
    .content .box_2 .item_top {
        flex-direction: column;
        gap: 0;
    }
    .grill_anim {
        display:none;
    }
    .billiger_gesehen_headline {
        max-width:50%;
    }
    .itemTable_container {
        display:flex;
        gap: 10px;
    }
    .itemTable_container thead {
        display:none;
    }
    .itemTable_container tbody {
        gap: 15px;
        flex-direction: column;
    }
    .itemTable_container .itemTable_rownew {
        flex-wrap: wrap;
    }
    .itemTable_container .itemTable_rownew td {
        width:50%;
        max-width:50%;
    }
    .itemTable_container .itemTable_rownew td:nth-of-type(1) {
        text-align:center;
    }
    .itemTable_container .itemTable_rownew td:nth-of-type(2) {
        text-align:left;
    }
    .itemTable_container .itemTable_rownew td:nth-of-type(6) {
        display: flex;
    }

    /* ══ Artikelstamm-Serientabelle als Karten (artstamm_itemTable.tpl) ══
       Aus dem sechsspaltigen Desktop-Raster werden zwei Spalten: das Bild
       links ueber drei Zeilen, rechts daneben Name, Lieferzeit und Preis,
       darunter Menge und Warenkorb als durchgehende Bedienzeile mit
       fingergerechten Flaechen (mindestens 44px hoch). */
    .serie_zeile {
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-areas:
            "bild name"
            "bild liefer"
            "bild preis"
            "menge warenkorb";
        column-gap: 12px;
        row-gap: 4px;
        padding: 14px 10px;
        align-items: start;
    }
    .serie_zeile > div {
        justify-content: flex-start;
        padding: 0;
    }
    /* feste Bildflaeche: das Bild wird vollstaendig eingepasst statt
       beschnitten, und die Karte bleibt unabhaengig vom Seitenverhaeltnis
       gleich hoch */
    .serie_zeile > .serie_bild {
        grid-area: bild;
        width: 96px;
        height: 112px;
        overflow: visible;
        align-items: center;
        justify-content: center;
    }
    /* das <a> muss die volle Flaeche einnehmen, sonst loest max-height:100%
       am Bild nicht auf (dasselbe Verhalten wie im itemSlider) */
    .serie_bild a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    .serie_bild img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }
    /* Touch kennt kein Hover — ein angetippter Zoom bliebe sonst stehen */
    .serie_zeile:hover .serie_bild img {
        transform: none;
        max-width: 100%;
    }
    .serie_zeile > .serie_name {
        grid-area: name;
        padding-left: 0;
    }
    .serie_name a {
        line-height: 1.35;
    }
    .serie_zeile > .serie_liefer {
        grid-area: liefer;
    }
    .serie_zeile > .serie_preis {
        grid-area: preis;
        text-align: left;
        font-size: 1.25rem;
        color: var(--darkgrey);
    }
    .serie_zeile > .serie_menge {
        grid-area: menge;
        flex-direction: column;
        align-items: flex-start;
        padding-top: 10px;
    }
    .serie_menge_label {
        display: block;
        font-size: .75rem;
        line-height: 1.6;
    }
    .serie_menge .mengeninput {
        width: 96px !important;
        height: 44px;
        font-size: 1rem;
    }
    .serie_zeile > .serie_warenkorb {
        grid-area: warenkorb;
        padding-top: 10px;
        align-items: flex-end;
    }
    .serie_warenkorb .basketImg {
        width: 100%;
    }
    .serie_warenkorb .add_item_from_subdir {
        width: 100%;
        min-height: 44px;
    }
}
/*Neue Mobil1 TPL Ende*/
/* Darstellung des Contents */
@media screen and (max-width:800px){
    #artikel {
        gap: 10px;
    }
    #artikel > div {
        width:46%;
        max-width:46%;
        aspect-ratio: 1/1;
    }
    #artikel .artikel_name,
    #artikel .artikel_kennung
    {
        font-size: 3vw;
    }
    #artikel .preisnew {
        font-size:4vw;
        padding: 2%;
    }


    .pagination_container {
        background:var(--red);
        color:var(--white);
    }
    .pagination_container label {
        display:none;
    }
    .pagination_container > div:nth-of-type(1) {
        display:none;
    }
   section.billiger_gesehen {
    display:block!important;
   }
   .billiger_gesehen_headline {
        max-width:100%!important;
   }
   .billiger_gesehen_headline h2 {
    font-size:1.3em;
   }
    body {
        background:none!important;
    }
    
    /*.subdir {
        width:100%!important;
        padding:0!important;
    }
    .box_subdir {
        max-width:100%;
        height:auto;
        min-height:0;
    }
    .box_subdir .top {
        height:auto!important;
    }*/
    header .inner {
        width:100%!important;
        background:var(--darkgrey);
    }
    #topnav .inner {
        width:100%!important;
    }
    .filialen .topfooter_box:nth-of-type(4) {
        text-align:center!important;
        padding:0;
    }
    .filialen .topfooter_box:nth-of-type(4) img {
        max-width:96%!important;
        margin:0 auto!important;
    }
    .filialen .topfooter_box {
        width:100%!important;
        clear:both!important;
        float:none!important;
        text-align:center!important;
        margin-bottom:8%;
    }
    .topfooter_inner {
        text-align:center;
    }
    .filialen .topfooter_box * {
        width:100%!important;
    }
    .header .info{
        display:none;
    }
    .header_wk_anzahl{
        padding: 2% 2.5%;        
    }    
    .root{
        width:100%;
        float:left;
    }
    #container-content,
    .mainnav{
        /*background-color: #2c4f1b;*/
    }
    .content{
        padding: 0;
        width:100%;
    }
    /*.content .subdir .box_subdir {
        width:100%;
    }*/
    .content .mainnav .box{
        width:100%;
        float:left; 
        margin:20px auto!important;
    }

    .subdir_artikel .artikel_box {

        max-height:none;
        width: 100%;

    }
    .content .subdir_artikel_wrapper .subdir_artikel .artikel_box .bottom{
        position:relative;
        padding: 0;
        height: auto;
        width: 100%;
    }
    /*.content .subdir,*/
    .content .subdir_artikel_wrapper,
    .content .mainnav,
    .content .serviceBox_wrapper{
        width:100%;
        float:left;
        padding:2% 0%;
    }
    
/*
    .content .subdir .box_subdir:nth-child(3n+2){
        margin: 0px;
    }
    */
    .content .subdir_artikel_wrapper .subdir_artikel .artikel_box .preisInner, 
    .content .subdir_artikel_wrapper .subdir_artikel .artikel_box .preis_messageInner, 
    .content .subdir_artikel_wrapper .subdir_artikel .artikel_box .favorite_ButtonInner {
        padding: 1% 0% 0;
        width: 100%;
        text-align: right;
        line-height: 1.3em !important;
        height:auto!important;
        min-height:0;
    }
    
    
    /** ITEMSEITE **/
    .content .box_2 .box_singleitem_img{
        display:block;
    }
    .content .box_2 .item_preis{
        width:auto;
    }
    .itemBasketButton {
        margin-left: 0;
    }
    .basketButton{
        width: 50%;
    }
    .itemTopSection{
        width:97%
    }
    .itemRightLeft{
        margin-left:0;
    }
    .itemPreis div span > span{
        float:left;
    }
    .content .box_2 .basket,
    .content .box_2 .basket img,
    .basketButton img{
        max-width:100%;
    }
    /** LOGIN CONTROL CENTER **/
    .loginInfo{
        min-width: 0px;
    }
    .basket-table-items{
        margin: 0;
    }
    
    /** SLIDER **/
    .content .neueProdukte .bx-wrapper, 
    .content .bottomcontent .lastvisited .bx-wrapper, 
    .content .bottomcontent .kundenBesuchtenAuch .bx-wrapper{
        width: 88%;    
    }
    .content .neueProdukte .item_slider_inner .item_slider_img, 
    .content .bottomcontent .lastvisited .item_slider_inner .item_slider_img, 
    .content .bottomcontent .kundenBesuchtenAuch .item_slider_inner .item_slider_img{
        width:auto;
        height: 95px;
    }
    .content .neueProdukte .item_slider_inner .item_slider_wrapper, 
    .content .bottomcontent .lastvisited .item_slider_inner .item_slider_wrapper, 
    .content .bottomcontent .kundenBesuchtenAuch .item_slider_inner .item_slider_wrapper{
        width: auto;
    } 
    .content .neueProdukte .item_slider_inner .item_slider_wrapper span, 
    .content .neueProdukte .item_slider_inner .item_slider_wrapper h3, 
    .content .bottomcontent .lastvisited .item_slider_inner .item_slider_wrapper span, 
    .content .bottomcontent .lastvisited .item_slider_inner .item_slider_wrapper h3, 
    .content .bottomcontent .kundenBesuchtenAuch .item_slider_inner .item_slider_wrapper span, 
    .content .bottomcontent .kundenBesuchtenAuch .item_slider_inner .item_slider_wrapper h3{
        height: 20%;
    }   
        
    /** FOOTER **/
    .topfooter .desktop{
        display: none;
    }
    .topfooter .mobile{
        width:96%!important;
        display: block;
    }
    .topfooter_inner{
        width:100%;
        /*background-color: #2C4F1B;*/   
    }
    .topfooter_inner .head_background{
        width: 100%;
        height: 15px;
    }
    .topfooter .topfooter_box{
        padding: 5%;
        width: 90%;
    }
    .topfooter .topfooter_box div{
        width: 100%;
        text-align:center;
        
    }
    .topfooter .topfooter_box div:nth-child(1){
            
    }
    .topfooter .topfooter_box .head{
        text-align: left;
        padding: 0;
        
    }
    .topfooter .top .topfooter_box .head,
    .topfooter .topfooter_box .head{
        background-color: transparent;
    }
    
    
    .topfooter_inner .top{
        position: unset!important;
        float: left;
        margin: 9px 0px 0px;
    }
    .topfooter_inner .top a:link, 
    .topfooter_inner .top a:active, 
    .topfooter_inner .top a:visited{
        
    }
    
    .topfooter .top .topfooter_box{
        padding-top: 0px;
        text-align:center;    
    }
    .topfooter .top .topfooter_box div{
        border-bottom: none;    
    }
    .topfooter .top .topfooter_box .head{
        text-align:center;
    }
} /* ende 800 */


@media screen and (max-width: 768px) {
    .section_itemSlider {
        padding-top: 20px!important;
        margin-top:0;
    }
    .itemSliderWrapper_aktion1 .item_slider_inner,
    .itemSliderWrapper_aktion2 .item_slider_inner,
    .itemSliderWrapper_aktion3 .item_slider_inner
    {
        flex-direction: column;
        align-items: center;
        aspect-ratio: initial;
    }
    .itemSliderWrapper_aktion1 .bx-viewport,
    .itemSliderWrapper_aktion2 .bx-viewport,
    .itemSliderWrapper_aktion3 .bx-viewport
    {
     /*   height:500px!important;*/
    }

    .item_slider_img {
        align-items: center!important;
        overflow: initial;
    }
    .item_slider_buttons {
        padding-bottom:10px;
    }
    .item_slider_buttons .itemLink {
        padding:5px 100%;
    }
    .item_slider_wrapper {
        max-width:unset;
    }
    .imgLeft {
        flex-direction: column;
    }
    .slider_text {
        font-size:1rem!important;
    }
    .slider_text h2 {
        font-size:3rem!important;
    }
    .slider_text p {
        width:100%!important;
        max-width:100%!important;
    }


    #brandklassen tr:nth-of-type(2) {
        display: none;
    }

    .typo3content table img {
        width: 5vw;
    }

    .einstieg_box {
        clear: both;
        float: none !important;
        margin: 20px auto !important;
    }

    .stoerer_samstags {
        display: none;
    }

    .quickview_opener {


        /*display: none !important;*/
    }

    .aktion .bx-wrapper .bx-controls-direction a {
        display: none;
    }
}



@media screen and (max-width:700px){
    #maincontent {
        overflow:hidden;
    }
    section.aktion {
        /*
        width:200%;
        margin-left:-50%;
        */
    }
    
    .content .subdir_info_wrapper img {
        margin-bottom:3%!important;
    }
    
    .header .search{
        padding:0;
    }
    .bestellvorgang .box_2 > div {
        flex-direction: column;
    }
    /**LOGINCENTER **/
    #accordionBasket > div{
        min-height:200px;
    }
    .adressdaten {
        gap: 32px;
    }
    .addresses .box_middle .boxInner{
        clear:both;
        width: 100%;  
        padding-left: 0px;  
    }
    .addresses .box_middle .boxInner:nth-child(2n+1){
        border-right: 0px;    
    }
    /** BESTELLVORGANG **/
    .bestellvorgang h1 {
        font-size:1.5rem;
        line-height: 1.6rem;
    }
    .content .box_2 .bestellartWrapper:nth-child(2),
    .content .box_2 .bestellartWrapper{
        clear:both;
        width: 60%;
        padding: 0px 20%;
    }
    
    .itemLeftContainer{
        width: 100%;
    }
    #img_zoom{
        max-width:50%;
    }
    .itemRightContainer{
        width:100%;
    } 
    .itemRightLeft{
        width: 50%;
    }
    .content .box_2 .item_top{
        padding: 0px;
    }
   
    .itemPreis {      
       text-align: left;
    }
    .itemBasketButton{
        clear:none;
        
    }
    .basket_addFavorites,
    .favoriteButton{
        /*width:100%;*/
    }
    
    .footer .bottomcontent .werbungen .werbung_wrapper div{
        width:100%;
        padding: 2% 0;
   }
   
    
}

@media screen and (max-width:640px){
    .item-3-cols .vk_link {
        width:100%!important;
        text-align:left!important;
    }
    .item-3-cols .item_preis {
        clear:both;
        display:block;
    }
    .item-3-cols .preis_lieferstatus {
        clear:both!important;
        float:left!important;
    }
    .content .subdir_info_wrapper .subdir_bild_small img,
    .content .subdir_info_wrapper .subdir_bild img {
        float:none;
        aspect-ratio:initial;
    }
    .ui-button-text-only .ui-button-text {
        padding:0;
    }

    section.serviceInfo .serviceBanner {
        width:100%;
        max-width:98%;
        
    }
    .topbutton {
        display:block!important;
    }   

    .itemSumme {
        border-bottom: 1px dotted #ccc;
        float: right;
        font-weight: bold;
        margin: 0;
        padding: 10px 0;
        text-align: right;        
    }
    td.basket_preis {
        float:none;
        width:unset;
        margin:0!important;
        padding:0!important;
        text-align:left;
    }     
    td.basket_summe {
        float:none;
        width:unset;
        margin:0!important;
        padding:0!important;
        text-align:right;
        font-size:1.3em;
    }
    .basket_table_left .mobile {
        width:100%;
        padding:0;
        margin:0;
    }
    .itemMenge .mengeninput {
        margin:0;
        float:right;
    }
    .itemSumme, .itemPreis {
        width:100%;
    }
    .itemBeschreibung {
        padding:1%;
    }
    .itemMenge {
        text-align:right!important;
        float:right!important;
    }
    .special_buy a {
        margin:1% 0;
    }
    .gutschein_table td {
        display:block;
        clear:both;
        float:none;
        padding:1%;
        height:auto!important;
    }
    .gutschein_table button {
        width:100%;
        margin:1% auto;
    }
    

    .typo3content ul {
        margin-left:6%!important;
    }

    .sliderLastVisited li,
    .sliderKBA li {
        width:245px!important;
    }
    .sliderLastVisited .bx-next,
    .sliderKBA .bx-next {
        right:45px!important;
    }
    #img_zoom {
        max-width:100%!important;
    }
    .artikel_box .preis_messageInner {
        padding:2% 0!important;
    }
    .artikel_box .top {
        height:auto!important;
    }
    
} /* ende 640 */
@media screen and (max-width:600px){
   .content .mainnav .col,
   .content .subdir_artikel_wrapper .directory_box,
   .content .serviceBox_wrapper .serviceBox,
   .content .mainnav .col:nth-child(2){
        width:100%;
        margin-left:0;
        margin-right: 0; 
   }   
   .mainnav_beschreibung {
        width:80%;
   }

   /* item Detailseite */
   .item_leftrow {
        width:96%;
        clear:both;
        float:left;
        padding: 0 2%;
   }
   
    .basketIconWrapper{
        padding:0!important;
        width:100%!important;
    }
}
@media screen and (max-width:530px){
    .mainnav .col {
        clear:both;
        float:none;
        width:100%;
        margin:0;
        padding:0;
    }

    .mainnav .box {
        clear:both;
        float:none;
        width:100%;
        margin:20px auto;
    }
    .item_tablerow_img {
        display:none;
    }
    .item_tablerow_text a {
      -moz-hyphens: auto;
      -o-hyphens: auto;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;     
    }        
    .desktop,
    .content .basket-table-items{
        display: none!important;
    }
    .box_2_basket .mobile{
        display: block;
    } 
    .basket_table_left .mobile{
        display:block;
    }
    .basket_table_left .mobile span{
        float:right;
    }
    .itemBasketButton{
        text-align:center;
    }
    .basket_preis{
        /*width:calc(60% - 8px)!important;*/
        float:left;
    }
    .basket_summe{
        font-weight:bold;
        width:calc(40% - 8px)!important;
        float:left;
    }
    .bottom_nav {
        float:left;
        width:100%;
    }
    
}

@media screen and (max-width:465px){
    
    .csc-textpic-text {
        clear:both;
    }

    .serviceBanner {
        clear:both;
        float:none;
        max-width:94%;
        width:94%;
    }
    .item_rightrow .small {
        /*width:50%;*/
        float:left;
    }
    
    .header .mobile .logo img {
        margin-top:-8%;
    }
    .bottom_nav{
        float:left;
    } 
    .header_wk_anzahl{
        padding: 2.5% 2.9%;        
    }
    .special_buy .backToShop{
        padding: 0
    }   
    .content .subdir_artikel_wrapper .subdir_artikel .artikel_box .center{
        height: auto;
    }
    .content .box_2 .bestellartWrapper:nth-child(2), 
    .content .box_2 .bestellartWrapper{
        padding: 10%!important;
        width: 80%!important;    
    }
}



@media screen and (max-width:415px){

    .divider {
        margin:0 auto 10px auto;   
    }

    form#basket {
        width:100%;
    }   
    .bottomfooter {
        margin:2% 0;
    }
    .footernav ul li {
        clear:both;
        float:none;
        width:100%;
    }

    .service_center * {
        text-align:center;
    }


    .item_socialmedia {
        clear: both;
        float:left;
        margin:0px 0;
        width:100%;
    }
    .item_rightrow .itemBasketButton {
        float: right;
        margin: 0;
        padding: 0;
        width:100!important;
    }    
    .basketButton {
        background-color:#b81d19;
        border-radius:0px;
        text-align:center;
    }
    .p_artikel {
        text-align:left;
    }
    .pagination_container div:nth-of-type(1) {
        width:98%;
        clear:both;
        float:none;
    }
    .pagination_container div:nth-of-type(2) {
        width:48%;
        float:left;
    }
    .pagination_container div:nth-of-type(3) {
        width:48%;
        float:left;
    }
    .basketMenge{
        float:left;
        
    }      
    .itemPreis{
        clear:both;
    }
    
    /* item Detailseite */
   .item_leftrow,
   .item_centerrow,
   .item_rightrow {
        clear:both;
        float:none;
        width:96%!important;
   }
   .item_rightrow {
    padding:0 2%;
   }    
   .itemBasketButton {
    text-align:left!important;
   }
   
   .basket_table textarea{
        width:100%;
   }
   .basket_form {
        overflow-x:scroll;
   }
   
   .basket_table{
    width:100%!important;
   }
   
   .basket_table_wrap {
        overflow-x:scroll;
   }
   
   .itemMenge img{
    display:none;
   }
    
}

    #addressBookWidgetDiv,
    #readOnlyAddressBookWidgetDiv {
        margin-bottom:10px;
    }
    
    #addressBookWidgetDiv,
    #walletWidgetDiv
    {
        width:100%;
    }
    #readOnlyWalletWidgetDiv,
    #readOnlyAddressBookWidgetDiv
    {
        width:95%;
    }
    #addressBookWidgetDiv, 
    #readOnlyAddressBookWidgetDiv,
    #walletWidgetDiv, 
    #readOnlyWalletWidgetDiv {
        clear:both;
        float:none;
        margin-left:0px;
    } 
    #widgets {
        display:none;
    }

.beschreibung_info .inner {
    padding:0;
}

.subdir_artikel .artikel_box {
    width:96%!important;
    margin:0 auto;
    max-width: unset;
}
.subdir_artikel .artikel_box:hover,
.subdir_artikel .artikel_box:focus {

}
.artikel_box > div {
    width:96%;
    padding:1% 0;
}
.itemRightLeft {
    width:100%!important;
}
.itemBasketButton{
    width: 96%!important;
    clear: both;
}



/* unsere Kunden */
.kunden {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-bottom:20px;
}
#kunden h2 {
    text-align:center;
}

/* warenkorb */
.basket_preis_ {
    font-size:.8rem;
}
.basket_preis {
    width:initial!important;
}


.section_itemSlider {
    padding:40px 0;
}

.search #suchbegriff {
    width:100%!important;
    max-width:calc(100% - 70px);
}
/* =============================================================
   Ergänzungen für: list_orders.tpl, view_order.tpl, fastOrder.tpl
   NEU: Responsive Tabellen-Layout für Bestellübersicht + Schnellbestellen
   Einzubinden in: styles/tablet.css (Responsive-Abschnitt)
   Feste Werte (px) sind im Frontend-Kontext gesetzt, wo Tabellenspalten
   es erfordern — alle Breakpoints orientieren sich an tablet.css-Standard.
   ============================================================= */

/* --- Bestellübersicht (list_orders.tpl) --- */

.orders-table-wrap {
    overflow-x: auto;
    width: 100%;
    margin: 1.25em 0;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
}

.orders-table thead tr,
.orders-table tr.order {
    border-bottom: 1px solid var(--darkblue);
}

.orders-table th,
.orders-table td {
    padding: 0.6em 0.75em;
    vertical-align: top;
}

.orders-table th {
    text-align: left;
    font-family: kollektifregular, sans-serif;
}

.orders-table .text-right {
    text-align: right;
}

.order-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.order-detail-row td {
    padding: 0;
}

/* Debug-Ausgabe (nur IS_WEBAN) */
.debug-output {
    display: none;
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 15px;
    border-radius: var(--border_radius_1);
    font-size: 0.8em;
    max-height: 400px;
    overflow: auto;
    text-align: left;
    margin-top: 0.5em;
}

/* --- Bestelldetail (view_order.tpl) --- */

.order-detail-wrap {
    overflow-x: auto;
    width: 100%;
}

.order-items-table {
    width: 100%;
    background-color: #ebebeb;
    border-collapse: collapse;
}

.order-items-table th,
.order-items-table td {
    padding: 4px 6px;
    vertical-align: top;
}

.order-items-table th {
    font-family: kollektifregular, sans-serif;
    text-align: left;
}

.order-items-table .text-right {
    text-align: right;
}

.order-items-table .col-ep,
.order-items-table .col-gp {
    white-space: nowrap;
    width: 130px;
}

.order-items-table .col-menge,
.order-items-table .col-artnr,
.order-items-table .col-status {
    width: 1%;
    white-space: nowrap;
}

.order-tax-note {
    font-size: 11px;
    font-style: italic;
    color: var(--grey);
    padding: 4px 6px;
}

/* --- Schnellbestellen (fastOrder.tpl) --- */

.fastorder-intro {
    padding: 1% 0 2%;
    line-height: 1.5em;
}

.fastorder-table-wrap {
    overflow-x: auto;
    width: 100%;
    margin: 1% 0;
}

.fastorder-table {
    width: 100%;
}

.fastorder-breadcrumb {
    text-align: left;
}

/* --- Warenkorb-Steuerung (fastOrder)
   Button und Mengenfeld haben dieselbe feste Breite.
   Beim Klick: Button verschwindet, Mengenfeld + Confirm erscheinen in einer Zeile.
   fo-basket-info erzwingt Zeilenumbruch via width:100% in flex-wrap:wrap. */

.fo-basket-ctrl {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap; /* wrap nötig damit fo-basket-info eigene Zeile bekommt */
    width: 100%;
}

/* Info-Text "X× im Warenkorb": volle Breite → erzwingt Umbruch vor Button/Mengenfeld */
.fo-basket-info {
    display: block;
    width: 100%;
    flex: 0 0 100%; /* explizit volle Flex-Zeile */
    margin-bottom: 2px;
}

/* Button und Mengenfeld-Wrapper: identische feste Breite, kein Schrumpfen */
.fo-btn-activate,
.mengen_input {
    width: 80px;
    min-width: 80px;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Warenkorb-Symbol-Button */
.fo-btn-activate {
    height: 36px;
    padding: 0;
    cursor: pointer;
    font-size: 1.2em;
    text-align: center;
    background: #ccc;
    border: 1px solid #aaa;
    border-radius: var(--border_radius_1);
    color: #555;
}

/* Mengenfeld füllt den 80px-Wrapper vollständig */
.mengen_input .fo-menge {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1em;
    padding: 0 4px;
}

/* Confirm-Button: füllt verbleibenden Platz rechts neben dem Mengenfeld,
   flex-basis:0 + flex-grow:1 statt auto damit er auch bei wrap korrekt wächst */
.fo-btn-confirm {
    display: none;
    height: 36px;
    flex: 1 1 0;
    min-width: 80px; /* Mindestbreite damit Text nicht abgeschnitten wird */
    white-space: nowrap;
    box-sizing: border-box;
}

/* =============================================================
   RESPONSIVE OVERRIDES — @media max-width: 640px
   Gestapeltes Layout für Tabellen auf kleinen Displays
   ============================================================= */

@media (max-width: 640px) {

    /* Bestellübersicht: Spalten stapeln */
    .orders-table thead {
        display: none; /* Spaltenköpfe ausblenden — data-label übernimmt */
    }

    .orders-table tr.order {
        display: block;
        border-bottom: 2px solid var(--darkblue);
        margin-bottom: 0.75em;
    }

    .orders-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.4em 0.5em;
        border-bottom: 1px solid #ddd;
        text-align: right;
    }

    .orders-table td::before {
        content: attr(data-label);
        font-family: kollektifregular, sans-serif;
        font-weight: bold;
        text-align: left;
        flex: 0 0 45%;
        padding-right: 0.5em;
    }

    .orders-table .text-right {
        text-align: right;
    }

    /* Bestelldetail: Spalten stapeln */
    .order-items-table thead {
        display: none;
    }

    .order-items-table tr.order {
        display: block;
        border-bottom: 2px solid var(--darkblue);
        margin-bottom: 0.75em;
    }

    .order-items-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.4em 0.5em;
        border-bottom: 1px solid #ccc;
        text-align: right;
        width: auto;
        white-space: normal;
    }

    .order-items-table td::before {
        content: attr(data-label);
        font-family: kollektifregular, sans-serif;
        font-weight: bold;
        text-align: left;
        flex: 0 0 45%;
        padding-right: 0.5em;
    }

    .order-items-table .col-ep,
    .order-items-table .col-gp {
        width: auto;
    }

    /* -------------------------------------------------------
       Schnellbestellen: 2-Spalten-Karte
       Links: Artikelbild
       Rechts: Titel + Preis (übereinander)
       Darunter: Warenkorb-Steuerung (volle Breite)
       ------------------------------------------------------- */

    .fastorder-table thead {
        display: none;
    }

    /* Kategorie-Überschrift bleibt als Block */
    .fastorder-table tr:not(.fastorder-row) td {
        display: block;
    }

    /* Artikel-Zeile wird zur Karte mit CSS-Grid */
    .fastorder-table .fastorder-row {
        display: grid;
        grid-template-columns: 80px 1fr;
        grid-template-areas:
            "img  name"
            "img  price"
            "cart cart";
        gap: 0 0.75em;
        border-bottom: 2px solid var(--darkblue);
        margin-bottom: 1em;
        padding-bottom: 0.75em;
    }

    /* Bild: linke Spalte, beide oberen Zeilen */
    .fastorder-table .fastorder-img {
        grid-area: img;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 0.25em;
    }

    .fastorder-table .fastorder-img img {
        max-width: 80px;
        height: auto;
        display: block;
    }

    /* Titel: rechts oben */
    .fastorder-table .fastorder-name {
        grid-area: name;
        display: block;
        padding: 0.25em 0 0;
        align-self: end;
    }

    /* Preis: rechts unten */
    .fastorder-table .fastorder-price {
        grid-area: price;
        display: block;
        padding: 0.15em 0 0;
        font-size: 0.9em;
        color: var(--grey);
        align-self: start;
    }

    /* Warenkorb: volle Breite über beide Spalten */
    .fastorder-table .fastorder-action {
        grid-area: cart;
        display: block;
        padding-top: 0.5em;
        margin-top: 0.25em;
        border-top: 1px solid #ddd;
    }

    .fastorder-table .fo-btn-confirm {
        flex: 1 1 auto;
        min-width: 0;
    }

}


#subdir_container {
    row-gap: 40px;
}
.item-3-cols {
    flex-direction: column;
}

.landingpage .box_subdir {
    cursor: initial!important;
}



@media screen and (max-width:830px) {
    .subdir.inner.table-wrapper {
        display:none;
    }
}