@font-face {
  font-family: 'MontserratAlternates';
  src: url('./fonts/MontserratAlternates-Regular.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

:root {
  --color-white: #fff;
  --color-light-gray: #f1f1f1; /*bg*/
  --color-gray: #9ea9ad; /*font*/
  --color-dark-gray: #7b7979; /*bischen dunklere font*/
  --color-yellow: #fee01c;
  --color-yellow-gradient: #fee01cff;
  --color-red: #ed1c24;
  --color-black: #0c0c0c;
  --color-almost-black: #202020;

    /* Schriftvariablen */
    --font-family-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-secondary: Arial, Helvetica, sans-serif;
    --font-family-accent: 'MontserratAlternates', sans-serif;
    --font-size-base: 16px;
    --font-size-large: 20px;
    --font-size-small: 14px;
    --font-size-xsmall: 12px;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-light: 300;
  }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

table {
  max-width: 1400px; /* Maximale Breite der Tabelle */
  margin: 0 auto; /* Zentriert die Tabelle */
  padding: 20px; /* Etwas Abstand zu den Rändern */
}

/* Grundlegendes Layout */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: normal;
  max-width: 1400px; /* Maximale Breite der Tabelle */
  margin: auto;
}

/* Inhaltsbereich */
#content {
  flex: 1; /* Nimmt den verfügbaren Platz ein */
}

h1{
  font-family: var(--font-family-accent);
}

/* Farben für das Farbschema */
a {
  color: var(--color-gray);
  text-decoration: none;
  font-family: var(--font-family-main);
}

a:hover {
  color: var(--color-red);
}

ul {
  list-style-type: none; /* Entfernt Punkte vor den Listenelementen */
  padding-left: 0; /* Entfernt die Standard-Einrückung */
  padding-inline-start: 10px!important;
}

hr {
  /*width: 90%;*/
  height: 2px; /* Dicke der Linie */
  border: none; /* Standardrahmen entfernen */
  background-color: var(--color-yellow); /* Eigene Farbe setzen */
  margin: 0 20px 0 20px; /* Abstand oben/unten */
}

table:first-of-type tr:first-of-type {
  max-width: 100%;
}

#webisco-content {
  background: var(--color-black);
}

/* Buttons */
button,
input[type="submit"],
.webisco-article-put-cart a,
.webisco-article-continue a {
  font-family: var(--font-family-main);
  font-weight: normal;
  font-size: 16px;
  text-transform: uppercase;
  border: 1px solid var(--color-black);
  background: none;
  color: var(--color-black);
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

button:hover,
input[type="submit"]:hover,
.webisco-article-put-cart a:hover,
.webisco-article-continue a:hover {
  background-color: var(--color-almost-black);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

button:active,
input[type="submit"]:active,
.webisco-article-put-cart a:active,
.webisco-article-continue a:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

button:disabled,
input[type="submit"]:disabled {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
}

/* === CONTENTBEREICH === */

#webisco-content .webisco-header::before {
  content: "";
  display: block;
  background: url('images/startbild-shop.webp') no-repeat center center;
  background-size: cover;
  height: 200px; /* Höhe anpassen */
  width: 97%;
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 15px; /* Falls Abstand notwendig ist */
}

table tbody tr:nth-of-type(1) td {
 /* border-bottom: 1px solid var(--color-dark-gray);*/
  padding-bottom: 10px;
}

table tbody tr:nth-of-type(2) td {
  padding-top: 10px;
}

/* === Navigation links === */

#webisco-navigation {
  background-color: var(--color-almost-black);
  width: 280px; /* Navigation schmaler */
  padding: 8px;
  box-sizing: border-box;
  display: none; /* Standardmäßig ausblenden */
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  background-color: var(--color-almost-black);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#webisco-navigation.active {
  display: block; /* Anzeigen, wenn aktiv */
}

/* Hauptmenüpunkte */
.webisco-navigation-title {
  background-color: var(--color-yellow);
  color: var(--color-gray);
  display: block;
  padding: 6px 10px; /* Kleinerer Abstand */
  margin-bottom: 5px;
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-light);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hauptmenüpunkte (1. Ebene) */
ul.webisco-navigation-level-1 {
  padding: 0;
  list-style: none;
  width: 100%;
}

.webisco-navigation-level-1 li {
  border-bottom: 1px solid var(--color-white);
  padding: 6px 10px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
}

#webisco-navigation a {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-light);
  font-size: 16px;
  text-decoration: none;
  color: var(--color-white);
  display: block;
  padding: 6px 10px;
}

#webisco-navigation a:hover {
  background-color: var(--color-yellow);
  color: var(--color-almost-black);
}

/* Untermenüpunkte (2. Ebene) */
ul.webisco-navigation-level-2 {
  padding-left: 15px; /* Einrückung */
  border-left: 2px solid var(--color-yellow); /* Vertikale Linie */
  margin-top: 4px;
}

.webisco-navigation-level-2 li {
  padding: 4px 10px;
  font-size: 14px;
  color: var(--color-light-gray);
}

.webisco-navigation-level-2 a {
  font-size: 14px;
  color: var(--color-light-gray);
}

.webisco-navigation-level-2 a:hover {
  color: var(--color-yellow);
  font-weight: bold;
}

/* === Zweites Menü === */
#webisco-navigation-text-links {
  position: fixed; /* Fixiert die Navigation */
  bottom: 0; /* Setzt sie an den unteren Rand */
  left: 0; /* Startet ganz links */
  width: 100%; /* Deckt die gesamte Breite ab */
  background: var(--color-almost-black); /* Hintergrundfarbe */
  color: var(--color-dark-gray); /* Schriftfarbe */
  text-align: center; /* Zentriert den Text */
  padding: 10px;
  z-index: 1000; /* Stellt sicher, dass sie über anderen Elementen liegt */
  display: flex; /* Flexbox aktiviert */
  justify-content: center; /* Zentriert die Links */
  gap: 20px; /* Abstand zwischen den Links */
}

#webisco-navigation-text-links a {
  color: var(--color-dark-gray);
  text-decoration: none;
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-light);
  font-size: 14px;
}

#webisco-navigation-text-links a:hover {
  text-decoration: underline;
}

/* zweites Menu Tablet */
@media (max-width: 768px) {
  
/* Fixiertes Icon für das untere Menü */
  #footer-hamburger-icon {
    position: fixed;
    bottom: 10px;
    right: 10px;
    transform: translateX(-50%);
    width: 60px;
    height: 50px;
    cursor: pointer;
    z-index: 1001;
    fill: var(--color-gray); /* Beispiel: Weiß */
    background-color: var(--color-almost-black);
    padding: 10px;
  }

  /* Das Menü selbst */
  #webisco-navigation-text-links {
    display: none;
    position: fixed;
    bottom: 60px; /* Abstand zum Icon */
    left: 0;
    width: 100%;
    background: var(--color-dark-gray);
    text-align: center;
    padding: 10px;
    z-index: 1000;
  }

  #webisco-navigation-text-links a {
    color: var(--color-white);
    padding: 12px;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid var(--color-gray);
  }

  /* Falls das Menü geöffnet wird */
  #webisco-navigation-text-links.open {
    display: block;
  }
}

/* === Copyright === */

#webisco-copyright {
  position: fixed;
  bottom: 20px;
  right: 200px;
  padding-right: 200px;
  width: 60%;
  background: var(--color-light-gray-bg);
  color: var(--color-dark-gray);
  font-size: 8px;
  line-height: 1.0;
  text-align: center;
  padding: 10px 0;
  z-index: -10;
}

/* ====== Das Warenkorb-Icon ====== */
/*
#webisco-cartinfo {
  position: relative;
}

#webisco-cartinfo a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: transparent;
  text-decoration: none;
}

/*#cart-icon {
  width: 24px;
  height: 24px;
  stroke: var(--color-yellow);
  transition: transform 0.2s ease, opacity 0.2s ease;
}*/
/*
#webisco-cartinfo a:hover #cart-icon {
  transform: scale(1.1);
  opacity: 0.8;
}
#webisco-cartinfo .webisco-cartinfo-sum {
  display: none;
}*/

/* ====== Artikel-Archiv ====== */
/* Flexbox für die Produktansicht */
.webisco-article {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  background-color: var(--color-white);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  gap: 20px;
  margin: 20px;
}

/* Bildbereich */
.webisco-article-images {
  flex: 1;
  max-width: 40%;
  text-align: center;
}

.webisco-article-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Produktdetails */
.webisco-article-data {
  flex: 2;
  max-width: 55%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tabelle für Artikeldetails */
.webisco-article-data table {
  width: 100%;
  border-collapse: collapse;
}

.webisco-article-data td {
  padding: 5px 0;
}

/* Preisbereich */
.webisco-article-price-value {
  font-size: 22px;
  font-weight: bold;
  color: var(--color-red);
}

.webisco-article-price-hint {
  font-size: 14px;
  color: var(--color-dark-gray);
}

/* Verfügbarkeit */
.webisco-article-availability-value {
  font-weight: bold;
  color: var(--color-success);
}

/* Gefahrenhinweise */
.webisco-caution-information {
  margin-top: 15px;
  padding: 10px;
  background-color: var(--color-warning-light);
  border-left: 4px solid var(--color-warning);
  display: flex;
  align-items: center;
  gap: 10px;
}

.webisco-caution-information img {
  width: 60px;
  height: 60px;
}

/* Warenkorb-Button */
.webisco-article-put-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.webisco-article-put-cart a {
  display: inline-block;
  padding: 12px 20px;
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  text-transform: uppercase;
}

.webisco-article-put-cart a:hover {
  transform: translateY(-2px);
  background-color: var(--color-almost-black);
  color: var(--color-white);
}

/* Beschreibung und Hinweis unter den Artikeldetails */
.webisco-article-details {
  width: 100%;
  order: 3;
}

.webisco-article-description,
.webisco-article-shopping-hint {
  background: var(--color-light-gray);
  padding: 10px;
  border-radius: 8px;
  margin-top: 20px;
  width: 100%;
  order: 4;
}

.webisco-article-description-header,
.webisco-article-shopping-hint-header {
  font-weight: bold;
  font-size: 18px;
  color: var(--color-almost-black);
  margin-bottom: 10px;
}

.webisco-article-description-text,
.webisco-article-shopping-hint-text {
  color: var(--color-almost-black);
  font-size: 16px;
  line-height: 1.4;
}

.webisco-article-number-key,
.webisco-article-manufacturer-key, 
.webisco-article-price-key,
.webisco-article-availability-key, 
.webisco-article-delivery-note,
.webisco-article-availability-branches-key,
.webisco-article-packing-unit-key,
.webisco-article-order-unit-key,
.webisco-article-deposit-key,
.webisco-article-environmental-charge-key{
  color: var(--color-almost-black);
}

.webisco-article-number-value,
.webisco-article-manufacturer-value,
.webisco-article-availability-branches-value,
.webisco-article-availability-value,
.webisco-article-availability-branches-value,
.webisco-article-packing-unit-value,
.webisco-article-order-unit-value,
.webisco-article-deposit-value,
.webisco-article-environmental-charge-value{
  color: var(--color-almost-black);
  font-weight: bold;
}



/* Mobile Anpassung */
@media (max-width: 768px) {
  .webisco-article {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .webisco-article-images,
  .webisco-article-data,
  .webisco-article-details {
    max-width: 100%;
  }
}

/* ====== ENDE Artikel ====== */


/* === Artikel-Liste === */

/* Artikelübersicht */
.webisco-article-table {
  width: 100%;
  border-spacing: 0; /* Kein Abstand zwischen Zellen */
  margin: 20px;
}

/* Tabellenzeile */
.webisco-article-table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border: 1px solid var(--color-gray);
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Spalten */
.webisco-article-table-row .image {
  flex: 0 0 10%; /* Bild nimmt 10% der Breite ein */
  text-align: center;
}

.webisco-article-table-row .description {
  flex: 1 1 50%; /* Beschreibung nimmt flexibel Platz ein */
  padding: 0 15px;
}

.webisco-article-table-row .description a{
  text-align: left;
  font-family: var(--font-family-main);
  font-size: 18px;
  color: var(--color-black);
  font-weight: bold;
}

.webisco-article-table-row .price {
  flex: 0 0 15%; /* Preis nimmt 15% der Breite ein */
  text-align: center;
  font-weight: bold;
  color: var(--color-dark-gray);
}

.webisco-article-table-row .cart {
  flex: 0 0 10%; /* Button nimmt 10% der Breite ein */
  text-align: right;
}

/* Bild */
.webisco-article-table-row .image img {
  max-width: 80px;
  margin: 0 auto;
  border-radius: 4px;
}

/* Überschrift ausblenden */
.webisco-article-table thead {
  display: none;
}

.webisco-article-stock-text {
  font-family: var(--font-family-main);
  font-size: 14px;
  color: var(--color-black);
  padding: 0 15px;
}
 .webisco-article-stock-branches{
  font-family: var(--font-family-main);
  font-size: 14px;
  color: var(--color-black);
  padding: 0 15px;
}

/*EAN ausblenden */
.ean{
  display:none;
}

.webisco-article-shipping-costs{
  font-family: var(--font-family-main);
  font-size: 12px;
  color: var(--color-black);
  padding: 0 15px;
  text-align: right;
}

/* der weiter Button */
.webisco-article-continue a {
  display: inline-block;
  padding: 10px 15px;
  background-color: var(--color-almost-black); 
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-family-main);
  font-size: 14px;
  font-weight: normal;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schattierung für Tiefe */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.webisco-article-continue a:hover {
  background-color: var(--color-white); /* Dunklere Akzentfarbe */
  transform: translateY(-2px); /* Leichter Hover-Effekt */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-black);
  color: var(--color-black);
}

.webisco-article-continue a:active {
  transform: translateY(0); /* Zurück bei Klick */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* === Ende Artikel-Liste ===*/


/* === Kategorien === */
#webisco-subsections {
  display: flex; /* Nebeneinander anordnen */
  justify-content: space-between; /* Platz zwischen den Boxen */
  gap: 20px; /* Abstand zwischen den Boxen */
  flex-wrap: wrap; /* Umbrechen auf kleinere Bildschirme */
  padding: 20px;
  background-color: var(--color-black); /* Hintergrundfarbe */
  margin-bottom: 30px;
}

.webisco-subsection {
  flex: 1 1 calc(33.33% - 20px); /* Drei Boxen pro Reihe */
  max-width: calc(33.33% - 20px);
  background-color: var(--color-white); /* Weiße Boxen */
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sanfter Schatten */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animation bei Hover */
}

.webisco-subsection:hover {
  transform: translateY(-5px); /* Leichte Bewegung */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten */
}

.webisco-subsection img {
  max-width: 100%;
  height: auto;
  border-radius: 4px; /* Runde Ecken für Bilder */
  margin-bottom: 10px; /* Abstand unter dem Bild */
}

.webisco-subsection a {
  text-decoration: none; /* Entfernt Unterstreichung */
  color: var(--color-almost-black); /* Textfarbe */
  font-family: var(--font-family-main);
  font-size: 20px;
  font-weight: normal;
}

.webisco-subsection a:hover {
  color: var(--color-dark-gray); /* Hover-Farbe */
}

#webisco-subsections h2 {
  width: 100%; /* Volle Breite */
  text-align: center; /* Überschrift mittig ausrichten */
  margin-bottom: 20px; /* Abstand zu den Kategorien */
  font-size: 24px; /* Größere Schrift */
  font-weight: bold; /* Hervorheben */
  color: var(--color-light-gray);
}

/* === Ende Kategorien ===*/

/* Für Bildschirme kleiner als 768px (z. B. Tablets) */
@media (max-width: 768px) {
  table {
    width: 100%;
    padding: 10px;
  }

}

/* Für Bildschirme kleiner als 480px (z. B. Smartphones) */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

/* Warenkorb-Seite */
.webisco-cart-actions {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.webisco-cart-actions div a {
  display: inline-block;
  padding: 12px 20px;
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.webisco-cart-actions div a:hover {
  background-color: var(--color-almost-black);
  color: var(--color-white);
}

#webisco-cart {
  text-align: left;
  padding: 20px;
  margin: 20px;
  background: var(--color-almost-black);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-light-gray);
}

.webisco-cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.webisco-cart-table th {
  padding: 10px;
  border-bottom: 1px solid var(--color-dark-gray);
  text-align: left;
  color: var(--color-almost-black);
  font-weight: bold;
}

.webisco-cart-table td {
  padding: 10px;
  border-bottom: 1px solid var(--color-dark-gray);
  text-align: left;
  color: var(--color-almost-black);
  font-weight: normal;
}

.webisco-cart-sum {
  margin-top: 20px;
  text-align: right;
  font-size: 18px;
  font-weight: bold;
  color: var(--color-almost-black);
}

/* Anpassung des "Neu berechnen" Buttons */
#calc {
  display: inline-block;
  padding: 12px 20px;
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* Anpassung des "löschen */
button, input[type="submit"], .webisco-article-put-cart a, .webisco-article-continue a {
  font-family: var(--font-family-main);
  font-weight: normal;
  font-size: 16px;
  text-transform: uppercase;
  border: 1px solid var(--color-black);
  background: #fff;
  color: #0c0c0c;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

#calc:hover {
  background-color: var(--color-almost-black);
  color: var(--color-white);
}

/* === Bestellfortschritt (Progress Bar) === */
#webisco-order-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: var(--color-almost-black);
  text-align: center;
  font-weight: var(--font-weight-bold);
  margin: 20px;
  border: 1px solid var(--color-white);
}

.webisco-order-progress-title {
  color: var(--color-almost-black);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.webisco-order-progress-show-cart a,
.webisco-order-progress-options,
.webisco-order-progress-summary {
  color: var(--color-dark-gray);
  text-decoration: none;
  transition: color 0.3s ease;
}

.webisco-order-progress-show-cart a:hover,
.webisco-order-progress-options:hover,
.webisco-order-progress-summary:hover {
  color: var(--color-almost-black);
}

.webisco-order-progress-account-edit.active {
  color: var(--color-red);
  font-weight: var(--font-weight-bold);
}

.webisco-order-progress-separator {
  color: var(--color-dark-gray);
}

/* === Login & Registrierungsbereich === */

#webisco-registered-customer, #webisco-create-customer {
  background: var(--color-almost-black);
  border: 1px solid var(--color-white);
  padding: 20px;
  margin: 20px 0;
  color: var(--color-white);
  margin: 20px;
}

.webisco-login-header {
  font-weight: bold;
  color: var(--color-white);
  margin-bottom: 10px;
}

.webisco-login-body a {
  display: inline-block;
  padding: 10px 15px;
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.webisco-login-body a:hover {
  background: var(--color-almost-black);
  color: var(--color-white);
}

#webisco-login-nameinput, #webisco-login-passwordinput {
  padding: 8px;
  width: 100%;
  border: 1px solid var(--color-white);
  background: var(--color-almost-black);
  color: var(--color-white);
}

#webisco-login-submit {
  display: inline-block;
  padding: 12px 20px;
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

#webisco-login-submit:hover {
  background-color: var(--color-almost-black);
  color: var(--color-white);
}

/* Registrierungs- und Kundendaten-Seite */
#webisco-registered-customer, #webisco-create-customer, .webisco-account-details-edit, .webisco-account-details {
  background: var(--color-almost-black);
  border: 1px solid var(--color-white);
  padding: 20px;
  margin: 20px;
  color: var(--color-white);
}

.webisco-login-header {
  font-weight: bold;
  color: var(--color-white);
  margin-bottom: 10px;
}

.webisco-login-body a, .webisco-account-details a {
  display: inline-block;
  padding: 10px 15px;
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.webisco-login-body a:hover, .webisco-account-details a:hover {
  background: var(--color-almost-black);
  color: var(--color-white);
}

#webisco-login-nameinput, #webisco-login-passwordinput, .webisco-account-details-edit input[type="text"], .webisco-account-details-edit select {
  padding: 8px;
  width: 100%;
  border: 1px solid var(--color-white);
  background: var(--color-almost-black);
  color: var(--color-white);
}

#webisco-login-submit, .webisco-account-details-edit input[type="submit"] {
  display: inline-block;
  padding: 12px 20px;
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

#webisco-login-submit:hover, .webisco-account-details-edit input[type="submit"]:hover {
  background-color: var(--color-almost-black);
  color: var(--color-white);
}

/*ohne Registrierung einkaufen*/

@media (max-width: 768px) {
  .webisco-account-details-edit {
    padding: 10px;
  }

  .webisco-account-details-edit table,
  .webisco-account-details-edit td {
    display: block;
    width: 100%;
  }
  .webisco-account-details-edit input,
  .webisco-account-details-edit select {
    width: calc(100% - 20px);
    margin: 5px auto;
  }
  
}

/*Bestellübersicht-Seite*/

/* Flexbox für den Bestellübersichtscontainer */
#webisco-order-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Elemente nebeneinander verteilen */
  gap: 20px; /* Abstand zwischen den Boxen */
}

/* Kundendaten-Boxen nebeneinander */
.webisco-account-details {
  flex: 1 1 48%; /* Zwei Boxen mit gleicher Breite */
  min-width: 300px; /* Mindestbreite, um Umbrüche zu vermeiden */
  background: var(--color-almost-black);
  border: 1px solid var(--color-white);
  padding: 20px;
  color: var(--color-white);
}

/* Bestelloptionen unter den Kundendaten */
.webisco-order-details {
  width: 100%; /* Volle Breite */
  background: var(--color-almost-black);
  border: 1px solid var(--color-white);
  padding: 20px;
  margin-top: 20px;
  color: var(--color-white);
}
/* Stil für das Bemerkungsfeld */
#webisco-order-comment {
  margin: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Eingabefeld */
#webisco-order-comment-inputfield {
  width: 100%;
  padding: 10px;
  background: var(--color-black);
  border: 1px solid var(--color-white);
  color: var(--color-white);
  font-family: var(--font-family-main);
}

/* Pseudo-Label für die Bemerkung */
#webisco-order-comment-inputfield::placeholder {
  color: var(--color-gray);
  opacity: 1; 
}

/* Erzeugt das sichtbare Label */
#webisco-order-comment::before {
  content: "Bemerkung";
  color: var(--color-white);
  font-size: var(--font-size-small);
  font-weight: bold;
}

/* Container für die Checkbox */
#webisco-order-comment-checkbox {
  display: flex;
  align-items: center;
  gap: 10px; /* Abstand zwischen Checkbox und Text */
  margin-top: 10px;
}

/* Standardstil für die Checkbox */
#webisco-order-comment-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Pseudo-Label für die Checkbox */
#webisco-order-comment-checkbox label {
  color: var(--color-white);
  font-size: var(--font-size-small);
  font-weight: normal;
  display: inline;
  visibility: visible;
}

/*Rechtliche Seiten*/

#webisco-agb, #webisco-widerrufsbelehrung, #webisco-altoelverordnung, 
#webisco-batterieverordnung, #webisco-datenschutz, #webisco-versandbedingungen,
#webisco-reklamationshinweise, #webisco-altteilpfand, #webisco-impressum{
  padding: 20px;
  background-color: var(--color-light-gray);
  color: var(--color-black);
  margin: 20px;
}

/* Container für das Formular */
#webisco-send-password {
  background: var(--color-almost-black);
  border: 1px solid var(--color-white);
  padding: 20px;
  margin: 20px auto;
  max-width: 500px;
  text-align: center;
}

/* Eingabefeld */
#webisco-send-password-input {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-white);
  font-size: var(--font-size-base);
}

/* Button */
#webisco-send-password-submit {
  display: inline-block;
  width: 100%;
  padding: 12px 20px;
  margin-top: 10px;
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
  font-weight: normal;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

#webisco-send-password-submit:hover {
  background-color: var(--color-almost-black);
  color: var(--color-white);
  transform: translateY(-2px);
}





/* Mobile Anpassung */
/*Artikel*/
@media (max-width: 768px) {
  .webisco-article {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .webisco-article-images,
  .webisco-article-data,
  .webisco-article-details {
    max-width: 100%;
  }

  .webisco-cart-actions {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}









/* Standard für alle Bildschirmgrößen: Die Kategorien nehmen 100% der Spalte ein */
.webisco-subsection {
  max-width: 100%;
 
}

/* Inhaltsbereich auf 3 Spalten für größere Bildschirme */
@media (min-width: 1024px) {
  #webisco-subsections {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* Inhaltsbereich auf 2 Spalten für Tablets */
@media (min-width: 769px) and (max-width: 1023px) {
  #webisco-subsections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Inhaltsbereich auf 1 Spalte für Mobilgeräte */
@media (max-width: 768px) {
  #webisco-subsections {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Standard-Artikelansicht (Desktop) */
@media (min-width: 1024px) {
  .webisco-article-table {
    width: 100%;
    border-collapse: collapse;
  }

  .webisco-article-table-row {
    border-bottom: 1px solid var(--color-gray);
  }

  .webisco-article-table td {
    padding: 10px;
  }

  .webisco-article-thumbnail {
    max-width: 100px;
  }
}

/* Tablet-Ansicht: Flexbox für bessere Übersicht */
@media (min-width: 769px) and (max-width: 1023px) {
  .webisco-article-table {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .webisco-article-table-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--color-gray);
    padding: 10px;
  }

  .webisco-article-thumbnail {
    width: 80px;
  }

  .description, .articlenumber, .manufacturer, .availability, .price, .cart {
    flex: 1;
    text-align: left;
  }

  .cart {
    text-align: right;
  }
}

/* Mobile-Ansicht: Jeder Artikel als Box */
@media (max-width: 768px) {
  .webisco-article-table {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .webisco-article-table-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--color-gray);
    margin-bottom: 10px;
    padding: 15px;
    background: var(--color-white);
  }

  .webisco-article-thumbnail {
    width: 120px;
    margin-bottom: 10px;
  }

  .articlenumber {
    font-weight: bold;
    margin-bottom: 5px;
  }

  .description {
    text-align: center;
    margin-bottom: 10px;
  }

  .availability {
    font-size: 14px;
    margin-bottom: 5px;
  }

  .price {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-green);
    margin-bottom: 10px;
  }

  .cart {
    width: 100%;
    text-align: center;
  }

  .cart a {
    display: block;
    padding: 8px;
    background: var(--color-black);
    color: var(--color-white);
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
  }
}

/*Warenkorb - Kasse*/
/* Desktop-Ansicht: Klassische Tabelle */
@media (min-width: 1024px) {
  #webisco-cart table {
    width: 100%;
    border-collapse: collapse;
  }

  #webisco-cart th, 
  #webisco-cart td {
    padding: 10px;
    border-bottom: 1px solid var(--color-gray);
    text-align: left;
  }

  #webisco-cart th {
    background: var(--color-dark-gray);
    color: var(--color-white);
    font-weight: bold;
  }

  .webisco-article-thumbnail {
    max-width: 100px;
  }
}

/* Tablet-Ansicht: Flexibles Layout */
@media (min-width: 769px) and (max-width: 1023px) {
  #webisco-cart {
    margin: 5px;
    padding: 0px;
 }
 
  
  #webisco-cart table {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  #webisco-cart thead {
    display: none;
  }

  .webisco-cart-row-odd, 
  .webisco-cart-row-even {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid var(--color-gray);
  }

  .webisco-cart-row-odd td, 
  .webisco-cart-row-even td {
    flex: 1;
    text-align: left;
  }

  .webisco-article-thumbnail {
    width: 60px;
    flex-shrink: 0;
  }

  .cart {
    text-align: right;
  }


}

/* Mobile-Ansicht: Jeder Artikel als eigene Box */
@media (max-width: 768px) {
  #webisco-cart table {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  #webisco-cart thead {
    display: none;
  }

  .webisco-cart-row-odd, 
  .webisco-cart-row-even {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--color-gray);
    margin-bottom: 10px;
    padding: 15px;
    background: var(--color-almost-black);
  }

  .webisco-article-thumbnail {
    width: 120px;
    margin-bottom: 10px;
  }

  .articlenumber {
    font-weight: bold;
    margin-bottom: 5px;
  }

  .description {
    text-align: center;
    margin-bottom: 10px;
  }

  .availability {
    font-size: 14px;
    margin-bottom: 5px;
  }

  .price {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-green);
    margin-bottom: 10px;
  }

  .cart {
    width: 100%;
    text-align: center;
  }

  .cart a {
    display: block;
    padding: 8px;
    background: var(--color-black);
    color: var(--color-white);
    text-decoration: none;
    font-weight: bold;
    
  }

  /* Buttons */
  .webisco-cart-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 15px;
  }

  .webisco-cart-actions a {
    display: block;
    text-align: center;
    padding: 10px;
    background: var(--color-dark-gray);
    color: var(--color-white);
    text-decoration: none;
    font-weight: bold;
    
  }
}

/*LÖSCHEN durch Icon ersetzen*/

/* Ersetzt den ursprünglichen "Löschen"-Button durch ein Icon */
input[type="submit"][value*="Löschen"] {
  width: 30px;
  height: 30px;
  background: url('images/trash-icon.svg') no-repeat center center;
  background-size: contain;
  border: none;
  text-indent: -9999px; /* Versteckt den ursprünglichen Text */
  cursor: pointer;
  background-color: transparent; /* Kein Hintergrund */
  filter: invert(50%); /* Graue Farbe */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: auto; /* Zentriert das Icon innerhalb der Tabelle */
}

/* Falls der Button im Layout nicht mittig sitzt */
td:first-child {
  text-align: center;
  /*vertical-align: middle;*/
}

/* Hover-Effekt für das Icon */
input[type="submit"][value*="Löschen"]:hover {
  filter: invert(30%);
}

/*Kundendaten*/

/* Responsive Anpassungen */
@media (max-width: 768px) {
  #webisco-content {
      padding: 10px;
  }

  #webisco-order-progress {
      flex-direction: column;
      align-items: center;
  }

  #webisco-login-form input[type="text"],
  #webisco-login-form input[type="password"],
  #webisco-login-submit {
      font-size: 14px;
      padding: 8px;
  }
}





/* Tablet (769px - 1023px): Hamburger-Menüs für Navigation */
@media (min-width: 769px) and (max-width: 1023px) {
  /* Linkes Menü ausblenden und durch Hamburger-Icon ersetzen */
  #webisco-navigation {
    display: none;
  }

  /* Unteres Menü ausblenden und durch Footer-Hamburger ersetzen */
  #webisco-navigation-text-links {
    display: none;
  }

  /* Hamburger-Icon für Hauptnavigation sichtbar machen */
  #hamburger-icon {
    display: block;
  }

  /* Hamburger-Icon für Footer-Navigation sichtbar machen */
  #footer-hamburger-icon {
    display: block;
    position: fixed;
    bottom: 10px;
    right: 10px;
    transform: translateX(-50%);
    width: 60px;
    height: 50px;
    cursor: pointer;
    z-index: 1001;
    fill: var(--color-gray); /* Beispiel: Weiß */
    background-color: var(--color-almost-black);
    padding: 10px;
  }


  /* Falls das Menü geöffnet wird, soll es sich als Overlay zeigen */
  #webisco-navigation.open, #webisco-navigation-text-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 60px; /* Abstand zur Header-Leiste */
    left: 0;
    width: 100%;
    height: auto;
    background: var(--color-dark-gray);
    z-index: 1000;
    padding: 10px;
  }

  #webisco-navigation-text-links.open {
    bottom: 50px;
  }
  #webisco-navigation-text-links a {
    color: var(--color-white);
    padding: 12px;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid var(--color-gray);
  }


}


/* === HEADER == */

/* vorhandenes Suchfeld ausblenden*/
#hamburger-icon {
  display: none;
}
#webisco-search {
    display: none;
  }
  /* neues Suchfeld gestalten */
  #webisco-search-new {
    background: var(--color-almost-black);
    color: var(--color-gray);
    padding: 10px;
    text-align: center;
    border-bottom: 2px solid var(--color-yellow);
  }
  
  /* vorhandenes Warenkorb-Icon ausblenden */
  #webisco-cartinfo, .webisco-cartinfo-content{
   display: none;
  }
  
  /* Login-Popup */
  #webisco-permanent-login input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f7f7f7;
    color: #444;
    font-size: 16px;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    margin-bottom: 5px;
  }
  
  #webisco-permanent-login input:focus {
    border-color: var(--color-dark-gray);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    outline: none;
  }
  #webisco-permanent-login-submit {
    background: var(--color-almost-black);
    color: var(--color-white);
    border: 1px solid yellow;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
  }
  
  #webisco-permanent-login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  
  #webisco-permanent-login-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  #webisco-permanent-login-name {
    position: relative;
  }
  
  #webisco-permanent-login-password {
    position: relative;
  }
  
  #webisco-permanent-login-namelabel, #webisco-permanent-login-passwordlabel{
    font-family: var(--font-family-main);
    padding-right: 10px;
  }
  
  #webisco-permanent-accountbox.open {
    display: block;
  }
  #webisco-permanent-accountbox {
    display: none;
    position: fixed;
    left: 50%;
    top: 70px;
    width: 350px;
    padding: 20px;
    background: var(--color-almost-black);
    font-size: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-top: 2px solid var(--color-yellow);
    border-bottom: 2px solid var(--color-yellow);
  }
  #webisco-permanent-accountbox .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    color: var(--color-black);
    text-align: center;
    line-height: 25px;
    border-radius: 50%;
    background: var(--color-light-gray);
  }
  
  #webisco-permanent-accountbox .close-button:hover {
    background: var(--color-gray);
  }
  
  
  /* Hamburger-Icon */
  #hamburger-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--color-gray); /* Gleiche Farbe wie das Home-Icon */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  #hamburger-icon:hover svg {
    stroke: var(--color-red); /* Hover-Farbe */
    opacity: 0.8;
  }
  /* Standardmäßig Level-2 verstecken */
  .webisco-navigation-level-1 li {
    border-bottom: 1px solid var(--color-white);
    padding: 6px 10px;
    margin: 0;
    white-space: normal; /* War: nowrap → Ermöglicht Zeilenumbruch */
    overflow: visible; /* War: hidden → Zeigt untergeordnete Elemente */
    text-overflow: unset; /* War: ellipsis → Verhindert Abschneiden */
    font-size: 16px;
  }
  
  /* Falls sich das Untermenü immer noch nicht zeigt, dann sicherstellen: */
  .webisco-navigation-level-1 li.open > ul {
    display: block !important; /* Erzwingt die Sichtbarkeit */
    opacity: 1;
    visibility: visible;
  }
  /* Checkbox für das Menü */
  #menu-toggle {
    display: none;
  }
  /* Tooltip für das Icon */
  #webisco-home-icon:hover::after {
    content: "Zur Webseite";
    position: absolute;
    background: var(--color-dark-gray);
    color: var(--color-white);
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    top: 40px;
    left: 5px;
    white-space: nowrap;
  }
  #webisco-permanent-accountbox,
  #webisco-cartinfo {
    display: none;
  }
  
  
  
  
  
  /* Für Bildschirme kleiner als 480px (z. B. Smartphones) */
  @media (max-width: 480px) {
    body {
      font-size: 14px;
    }
  
    #webisco-search-inputfield {
      height: 35px; /* Suchfeld wird kleiner */
      font-size: 12px;
    }
  
      #webisco-permanent-login {
      gap: 5px; /* Weniger Abstand zwischen den Elementen */
    }
  }
  
  /* Für Bildschirme kleiner als 768px (z. B. Tablets) */
  @media (max-width: 768px) {
  
    #webisco-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      background: var(--color-black);
    }
  
    /* AMT Logo */
    #webisco-logo {
      display: block;
      background: url('images/AMT-Logo-gelb.png') no-repeat center center;
      background-size: contain;
      height: 40px;
      width: 120px;
      margin-bottom: 10px;
    }
  
    /* Container für Logo + Suchfeld */
    #webisco-header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 10px;
    }
  
    #webisco-search-new {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      width: 100%;
    }
  
    #webisco-search-form-new {
      width: 90%;
    }
  
    #webisco-search-inputfield-new {
      width: 100%;
      padding: 8px;
      border: 1px solid var(--color-gray);
    }
     
    table {
      width: 100%;
      padding: 10px;
    }
  
    #webisco-search-inputfield {
      width: 100%; /* Suchfeld nimmt die volle Breite ein */
      font-size: 12px; /* Kleinere Schriftgröße */
    }    
      /* Container für Icons */
      #webisco-icons-container {
        display: flex;
        justify-content: center;
        width: 100%;
        gap: 20px;
        margin-top: 15px;
      }
    
      #hamburger-icon, 
      #webisco-cart-icon, 
      #webisco-login-icon,
      #webisco-home-icon,
      #hamburger-icon  {
        width: 30px;
        height: 30px;
        cursor: pointer;
        margin-left: 10px;
        margin-right: 10px;
        display: block;
      }

      #webisco-cart-icon:hover, 
      #webisco-login-icon:hover,
      #webisco-home-icon:hover,
      #hamburger-icon:hover {
        color: var(--color-red);
      }
      #webisco-home-icon img {
        width: 100%;
        height: auto;
        filter: invert(100%); /* Falls das Icon weiß sein soll */
      }
  
      /* Unnötige Bereiche entfernen */
      #webisco-permanent-accountbox,
      #webisco-cartinfo {
        display: none;
      }
  
      #webisco-navigation {
        display: none;
      }
  
      /* Falls das Menü geöffnet wird, soll es sich als Overlay zeigen */
    #webisco-navigation.open, #webisco-navigation-text-links.open {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 60px; /* Abstand zur Header-Leiste */
      left: 0;
      width: 100%;
      height: auto;
      background: var(--color-dark-gray);
      z-index: 1000;
      padding: 10px;
    }
  
    #webisco-navigation-text-links.open {
      bottom: 50px;
    }
    #webisco-navigation-text-links a {
      color: var(--color-white);
      padding: 12px;
      display: block;
      text-decoration: none;
      border-bottom: 1px solid var(--color-gray);
    }
  }
   
  /* === Header-Design für Desktop === */
   
  @media (min-width: 769px) {
    #webisco-navigation {
      display: block !important;
      position: static;
    }
    #webisco-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px 20px;
      background: var(--color-black);
    }
  
    #webisco-header-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }
  
    #webisco-logo {
      display: block;
      background: url('images/AMT-Logo-gelb.png') no-repeat center center;
      background-size: contain;
      height: 80px;
      width: 200px;
      flex-shrink: 0;
      margin-left: 20px;
      margin-top: 20px;
    }
  
    #webisco-search-new {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
      max-width: 420px;
      margin-top: 20px;
      margin-right: 20px;
    }
  
    #webisco-search-form-new {
      display: flex;
      width: 100%;
      max-width: 400px;
    }
  
    #webisco-search-form-new input[name="webiscosearch"] {
      width: 100%;
      padding: 8px;
      border: 1px solid var(--color-gray);
    }
  
    /* Warenkorb- und Login-Icons unterhalb des Suchfelds */
    #webisco-icons-container {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 10px;
    }
  
    #webisco-cart-icon, 
    #webisco-login-icon,
    #webisco-home-icon   
     {
      display: block;
      width: 35px;
      height: 35px;
      cursor: pointer;
      color: var(--color-gray);
    }
    #webisco-cart-icon:hover, 
    #webisco-login-icon:hover,
    #webisco-home-icon:hover{
          color: var(--color-red);
    }

    #footer-hamburger-icon{
      display:none;
    }
}