/*
Quick.Cart responsive stylesheet für mobile Geräte (< 768px).
Dieses CSS stellt sicher, dass #menu1 und #menu2 immer sichtbar sind.
#menu3 wird als einklappbares Burgermenü implementiert.
*/

/* GLOBAL STYLES - Übernommen von Desktop */
body, body *{margin:0;padding:0;border:0;box-sizing:border-box;}
body,table{color:#4e4e3d;font-size:0.9;font-family:Arial, Verdana, sans-serif;}

body{padding:0;background:url(img/bg-olives.gif);text-align:center;}

table{border-collapse:collapse;border-spacing:0;font-size:100%;}
caption, tr, th, td{margin:0;padding:2px 4px;font-size:100%;font:inherit;vertical-align:baseline;}

.input, select, textarea{padding:2px;border-top:1px solid #7eb512;border-right:1px solid #93c831;border-bottom:1px solid #93c831;border-left:1px solid #7eb512;font:1em Arial, sans-serif; width: 100%;}
.submit{padding:5px 14px;border-width:1px;border-style:solid;border-color:#c4ed75 #3f3f3f #3f3f3f #c4ed75;background:#6fa506;color:#fff;font-weight:bold;font-size:1em;font-family:Verdana; width: 100%;}
.submit:hover{background:#86c111;cursor:pointer;}

a{background-color:inherit;color:#6fa506;text-decoration:underline;}
a:hover{text-decoration:underline;}

/* CONTAINER & HEADER - Anpassung an mobiles Layout */
#container{position:relative;width:100%;margin:0 auto;padding:0;overflow:hidden;background:url(img/bg.jpg) repeat-x center top;}
#body, #foot, #header{float:none; width:100%; margin:0; padding:0;}

#header {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(img/head-bg-2025.jpg) no-repeat center top;
    background-size: cover;
    padding: 15px 0;
}

#logo{text-align:center; padding: 20px 0;}
#logo #title a{font:bold 30px "myriad Pro";text-transform:uppercase; color:#fff; text-decoration:none;}

/* NAVIGATION - ANPASSUNG */
/* Menü #menu1 und #menu3 werden immer angezeigt und sind vertikal ausgerichtet */
#menu1, #menu3 {
    display: block;
    width: 100%;
}
/* *** ANPASSUNG FÜR MENÜ 2 IM FUSSBEREICH *** */
#menu2 {
    /* Menü 2 wird im mobilen Layout als block-Element ohne Burgermenü-Funktion angezeigt */
    display: block;
    width: 100%;
}

#menu2 ul {
    list-style: none;
    display: flex; /* Flexbox für horizontale Anordnung */
    flex-wrap: wrap; /* Erlaubt das Umbrechen der Menüpunkte */
    justify-content: center; /* Zentriert die Menüpunkte horizontal */
    padding: 10px 0;
}

#menu2 li {
    margin: 5px; /* Abstand zwischen den Menüpunkten */
    text-align: center;
    background: none;
    height: auto;
    white-space: nowrap; /* Verhindert Zeilenumbruch im Menüpunkttext */
}

#menu2 li a {
    display: block;
    padding: 10px;
    background: #6fa506;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
}
/* *** ENDE ANPASSUNG FÜR MENÜ 2 *** */

#menu1 ul, #menu3 ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}
/* *** ANPASSUNGEN FÜR MENÜ 3 *** */
#menu3 ul {
    align-items: center; /* Zentriert die Menüpunkte horizontal */
}
#menu3 li {
    width: auto; /* Breite passt sich an den Inhalt an */
    background: none; /* Entfernt die Hintergrundbilder, um die Breite anzupassen */
    height: auto; /* Höhe passt sich dem neuen Padding an */
    margin: 5px 0; /* Abstand zwischen den Menüpunkten */
}
#menu3 li a {
    font-weight: bold; /* Schriftgröße etwas größer */
    padding: 10px 20px; /* Mehr Platz um den Text */
    background: #6fa506; /* Grüner Hintergrund für Menüpunkte */
    border-radius: 5px; /* Abgerundete Ecken */
    color: #fff; /* Weiße Schrift */
    text-align: center; /* Text zentrieren */
}
/* *** ENDE DER ANPASSUNGEN FÜR MENÜ 3 *** */

#menu1 li {
    margin-bottom: 5px;
    background: url(img/menu1r.png) no-repeat right top;
    height: 24px;
}

#menu1 li a {
    display: block;
    line-height: 24px;
    padding: 0 0 0 11px;
    background: url(img/menu1l.png) left top;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}

#menu1 li:hover, #menu1 li.selected{
    background: url(img/menu1rh.png) no-repeat right top;
}
#menu1 li:hover a, #menu1 li.selected a{
    background: url(img/menu1lh.png) no-repeat left top;
}

/* CONTENT - Anpassung für mobiles Layout */
#body .container{width:100%; margin:0 auto;text-align:left; padding: 10px;}
#column{float:none;width:100%;padding:10px 0;background:none;}
#content{float:none;color:#fff:width:100%;padding:50px 0 5px;text-align:left; background:#fff url(img/left_top.png) no-repeat top;}
#page{width:100%;margin:0 auto;}

#products .list li{
    width: 100%;
    margin-left: 1;
    padding: 20px 0;
    border-top:1px solid #c4ed75;
    text-align:center;
}
#products li.column1{clear:both;margin-left:1;}#products li h2{padding:5px 0 5px 0;font-weight:bold;font-size:1.083em;}

#products li .photo{text-align:center;}
#products li .photo img{max-width:100%; height:auto;}
#products li div.description{margin:10px 0 0;text-align:center;}
#products li .price, #products li .noPrice{margin:5px 0 5px 0;background-color:inherit;color:#222;font-weight:bold;text-decoration:none;}
#products li .price em{padding:0 5px;background:inherit;color:#86c111;font-style:normal;}
#products li .price strong{font-size:1.25em;}
#products li .noPrice strong{font-size:1.083em;}
#products li .price span{padding-left:4px;font-size:1.083em;}

/* FOOTER - Anpassung an mobiles Layout */
#foot, #footer-menu{
    background: #d8d5c2; /* Grauer Hintergrund für den gesamten Fußbereich */
}

#foot{
    clear:both;
    font-weight:bold;
    text-align: left;
}

#foot .container{
    width:100%;
    margin:0 auto;
    padding:25px 15px;
    color:#4e4e3d;
    overflow:hidden;
    text-align: center;
}
#copy, .foot{display:block; padding: 5px 0;}
#skiplinks{display:none;}

/* Zusätzliche Anpassung für Copyright unter dem Menü */
.footer-container {
    display: flex;

}
.footer-copy, .footer-powered {
    margin-top: 10px; /* Fügt Abstand zum Menü hinzu */
}
#column .type{font-family: Tahoma, "Arial Black";width: 165px;padding: 10px 0px 0px 50px;margin: 10px 0 0;font-size: 14px;font-weight: bold;color: #fff;height: 30px;background: url('img/button_cart_list_h.png') no-repeat; display:block;}
#products li .basket a{display:block;padding:9px 0;color:#fff;background:url('img/button_cart_list_h.png') no-repeat right bottom;text-decoration:none;text-align:right;}
#orderedProducts tfoot .nextStep .submit{background:#b30910;}
#orderedProducts tfoot .nextStep .submit{text-align:left;}
/* BASKET AND ORDER */
/* MOBILE: BASKET AND ORDER WITH FLEXBOX */

/* Produkte und Container */
#orderedProducts table {
  width: 100%;
  margin: 0;
  border-bottom: 2px solid #c4ed75;
  font-size: 1em;
  color: #386d1d;
  /* Tabelle als Flex-Container behandeln */
  display: flex;
  flex-direction: column;
}

#orderedProducts td,
#orderedProducts th {
  padding: 6px 7px;
  /* Flex-Eigenschaften für Zellen anpassen */
  display: block;
  width: 100%;
}

/* Tabellenkopf (Überschriften) */
#orderedProducts thead {
  display: flex;
  flex-direction: column;
  background: #6fa506;
  color: #fff;
  padding: 11px 0;
  order: 1; /* Stellt sicher, dass der Header an erster Stelle steht */
}

#orderedProducts thead tr {
  display: flex;
  flex-direction: row; /* nebeneinander anordnen */
  justify-content: space-between;
  width: 100%;
}

#orderedProducts thead .price,
#orderedProducts thead .quantity,
#orderedProducts thead .summary {
  text-align: right;
  flex-grow: 1;
  padding: 0 7px;
}

#orderedProducts thead em {
  font-style: normal;
  padding: 0 4px 0 0;
}

/* Tabellenkörper (Produktdetails) */
#orderedProducts tbody {
  display: flex;
  flex-direction: column;
  order: 2;
}

#orderedProducts tbody tr {
  display: flex;
  flex-direction: column;
  border-top: 2px solid #fff;
  border-bottom: 1px solid #c4ed75;
  background: #f0f6fa url('img/body.png');
  padding: 11px 7px;
}

/* Jede Zelle ist ein Flex-Container */
#orderedProducts tbody th,
#orderedProducts tbody td {
  display: flex;
  justify-content: space-between; /* Bezeichnung links, Wert rechts */
  padding: 0;
}

#orderedProducts tbody th {
  text-align: left;
  font-weight: bold;
}

/* Jede Zelle als eigene Zeile */
#orderedProducts tbody .price,
#orderedProducts tbody .summary {
  font-weight: bold;
  text-align: right;
}

#orderedProducts tbody .quantity {
  /* Set the container to be a Flexbox container for alignment */
  display: flex;
  justify-content: space-between;
}

#orderedProducts tbody .quantity label {
  display: block;
}

#orderedProducts tbody .quantity input {
  /* No need for text-align on the input itself */
  
  /* Set a fixed width to prevent overflow */
  width: 80px; /* Adjust as needed */
  
  /* Add padding for better look and feel */
  padding: 2px 5px;

  /* Optional: align the text inside the input field */
  text-align: center;
}#orderedProducts tbody .quantity label {
  display: block; /* Label wieder anzeigen */
}

/* Tabellenfuß (Summen und Buttons) */
#orderedProducts tfoot {
  display: flex;
  flex-direction: column;
  background: url('img/bg2.jpg');
  padding: 11px 7px;
  text-align: right;
  order: 3; /* Stellt sicher, dass der Footer an dritter Stelle steht */
}

#orderedProducts tfoot .summaryProducts,
#orderedProducts tfoot .summaryShippingPayment,
#orderedProducts tfoot .summaryOrder {
  text-align: right;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#orderedProducts tfoot .nextStep {
  width: 100%;
  display: flex;
  justify-content: flex-end; /* Button rechts ausrichten */
}

#orderedProducts tfoot .nextStep .submit {
  background: #b30910;
  text-align: center;
  width: auto;
}