body {

  margin-top:0px;
  margin-left:1px;
  margin-right:1px;
  margin-bottom:1px;

  /*margin: 0 auto;*/
  background-color:#ffffff;
  color:rgb(0,0,0);
  font-family:Arial,helvetica;
  font-size:11pt;
  /*
  scrollbar-base-color:rgb(165,140,127);
  scrollbar-3dlight-color:#ffffff;
  scrollbar-arrow-color:#ffffff;
  scrollbar-darkshadow-color:rgb(0,0,0);
  scrollbar-face-color:rgb(165,140,127);
  scrollbar-highlight-color:#ffffff;
  scrollbar-shadow-color:rgb(120,70,0);
  scrollbar-track-color:#ffffff;
  */
 }

p {font-size:11pt;}
td {font-size:11pt;}
th {font-size:11pt;}


a:link { color:rgb(0,0,0); text-decoration:none; font-weight:bold; }
a:visited { color:rgb(0,0,0); text-decoration:none; font-weight:bold; }
a:hover { color:rgb(0,0,0); text-decoration:none; background-color:#ddcccc; font-weight:bold; }
a:active { color:rgb(200,52,0); background-color:#FFFF99; font-weight:bold; }
 
h1 {  color:rgb(0,0,0); font-size:11pt;}
h2 {  color:rgb(0,0,0); font-size:12pt;}
h3 {  color:rgb(0,0,0); font-size:12pt;}
h4 {  color:rgb(0,0,0); font-size:11pt;}
h5 {  font-size:11pt;
  margin-top:0px;
  margin-left:1px;
  margin-right:1px;
  margin-bottom:1px;
  background-color:#ffffff;
  color:rgb(0,0,0);
  font-family:Arial,helvetica;
  font-style:normal;
}
h6 {  font-size:11pt;
  margin-top:0px;
  margin-left:1px;
  margin-right:1px;
  margin-bottom:0px;
  background-color:#ffffff;
  color:rgb(0,0,0);
  font-family:Arial,helvetica;
  font-style:normal;
}

b.Rabatttext
{
    text-decoration:line-through;
    font-style:normal;
    COLOR: black
}
b.EndText
{
    text-decoration:none;
    COLOR: black;
    font-size:11pt;
  margin-top:0px;
  margin-left:1px;
  margin-right:1px;
  margin-bottom:0px;
  font-family:Arial,helvetica;
  font-style:normal;
}

select {
  color:rgb(0,0,0);
  border-top-color:#ffffff;
  border-bottom-color:rgb(69,32,0);
  border-left-color:#ffffff;
  border-right-color:rgb(69,32,0);
  background-color:rgb(221,206,198);
  cursor:hand;
}
input {
  color:rgb(0,0,0);
  border-top-color:#ffffff;
  border-bottom-color:rgb(69,32,0);
  border-left-color:#ffffff;
  border-right-color:rgb(69,32,0);
  background-color:rgb(221,206,198);
  cursor:hand;
}

#Navigation {
  font-family:Arial,helvetica;
  font-size:11pt; 
}
#NavigationGr {
  font-family:Arial,helvetica;
  font-size:11pt; 
}

#shadow {
  width:100%; 
  font-family:"Andale Mono",Arial,sans-serif;
  font-size:26pt; 
  padding-bottom:5px;
}

#Kopfzeile {
  font-size:11pt; 
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:rgb(69,32,0);
  padding-top:1px;

  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:#ffffff;
  padding-bottom:1px;

  border-left-width:1px;
  border-left-style:solid;
  border-left-color:rgb(69,32,0);
  padding-left:1px;

  border-right-width:1px;
  border-right-style:solid;
  border-right-color:#ffffff;
  padding-right:1px;

  color:rgb(69,32,0); 
  background-color:rgb(239,195,156);
}
#ProduktLink{
.link { color:rgb(0,0,0); text-decoration:none; font-weight:bold; }
.visited { color:rgb(0,0,0); text-decoration:none; font-weight:bold; }
.hover { color:rgb(0,0,0); text-decoration:none; background-color:#ddcccc; font-weight:bold; }
.active { color:rgb(200,52,0); background-color:#FFFF99; font-weight:bold; }
}

#XKnopf {
  font-size:11pt; 
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:#ffffff;
  padding-top:1px;

  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:rgb(69,32,0);
  padding-bottom:1px;

  border-left-width:1px;
  border-left-style:solid;
  border-left-color:#ffffff;
  padding-left:1px;

  border-right-width:1px;
  border-right-style:solid;
  border-right-color:rgb(69,32,0);
  padding-right:1px;

  color:rgb(69,32,0); 
  background-color:rgb(221,206,198);
}
#Knopf {
  font-size:11pt; 
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:#ffffff;
  padding-top:1px;

  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:rgb(69,32,0);
  padding-bottom:1px;

  border-left-width:1px;
  border-left-style:solid;
  border-left-color:#ffffff;
  padding-left:1px;

  border-right-width:1px;
  border-right-style:solid;
  border-right-color:rgb(69,32,0);
  padding-right:1px;

  font-style:normal;
  color:#FF0000; 
  background-color:#eeeeee;
}
#Herein1 {
  font-size:11pt; 
  border-top-width:0px;
  border-top-style:solid;
  border-top-color:rgb(69,32,0);
  padding-top:1px;

  border-bottom-width:0px;
  border-bottom-style:solid;
  border-bottom-color:#ffffff;
  padding-bottom:1px;

  border-left-width:0px;
  border-left-style:solid;
  border-left-color:rgb(69,32,0);
  padding-left:1px;

  border-right-width:0px;
  border-right-style:solid;
  border-right-color:#ffffff;
  padding-right:1px;

  background-color:rgb(255,255,255);
 }

#HervorRed10 {
  font-size:11pt; 
  color:#ff000; 
  font-style:normal;
  font-weight:bold;
  }

#HervorBlack10 {
  font-size:11pt; 
  color:#000000; 
  font-style:normal;
  font-weight:bold;
  }
#HervorBlack11 {
  font-size:12pt; 
  color:#000000; 
  font-style:normal;
  font-weight:bold;
  }
#HervorBlack12 {
  font-size:13pt; 
  color:#000000; 
  font-style:normal;
  font-weight:bold;
  }
#LieferbarRed {
  font-size:11pt; 
  color:#ff0000; 
  font-style:normal;
  font-weight:bold;
  }
#LinkRed {
  font-size: 11pt;
  color: #ff0000;
  font-style: normal;
  font-weight: bold;
}

#LinkRed a:link {
  color: rgb(0,0,0);
  text-decoration: underline;
  font-weight: bold;
}
#LieferbarGreen {
  font-size:11pt; 
  color:#009900; 
  font-style:normal;
  font-weight:bold;
  }
#SmallText {
  font-size:10pt; 
  color:#000000; 
  font-style:normal;
  font-weight:normal;
  }
#StreichPreisRed {
  font-size:13pt; 
  color:#ff0000; 
  font-style:normal;
  font-weight:bold;
  }
#StreichPreisRed11 {
  font-size:11pt; 
  color:#ff0000; 
  font-style:normal;
  font-weight:bold;
  }
#StreichPreisOriginal
{
  text-decoration:line-through;
  font-size:11pt; 
  color:#000000; 
  font-style:normal;
  font-weight:bold;
}

#HervorRed10 {
  font-size:11pt; 
  color:#Cc0000; 
  font-style:normal;
  font-weight:bold;
  }
#HervorRed09 {
  font-size:11pt; 
  color:#Cc0000; 
  font-style:normal;
  }
#HervorGreen09 {
  font-size:11pt; 
  color:#339933; 
  font-style:normal;
  }
#HervorRed09Bold {
  font-size:11pt; 
  color:#Cc0000; 
  font-style:normal;
  font-weight:bold;
  }
#HervorGray10 {
  font-size:11pt; 
  color:#C0C0C0; 
  font-style:normal;
  font-weight:bold;
  }
#HervorGray09 {
  font-size:11pt; 
  color:#C0C0C0; 
  font-style:normal;
  font-weight:bold;
  }
#HervorBlack09 {
  font-size:11pt; 
  color:#000000; 
  font-style:normal;
  }
#HervorBlack07 {
  font-size:11pt; 
  color:#000000; 
  font-style:normal;
  }
#HervorGrey07{
  font-size:11pt; 
  color:#C0C0C0; 
  font-style:normal;
  }
#HervorMarked07{
  font-size:11pt; 
  color:#Cc0000; 
  font-style:normal;
  font-weight:bold;
  }

#HBlack09Bold {
  font-size:11pt; 
  color:#000000; 
  font-weight:bold;
  font-style:normal;
  }

#Herein {
  font-size:11pt; 
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:rgb(69,32,0);
  padding-top:1px;

  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:#ffffff;
  padding-bottom:1px;

  border-left-width:1px;
  border-left-style:solid;
  border-left-color:rgb(69,32,0);
  padding-left:1px;

  border-right-width:1px;
  border-right-style:solid;
  border-right-color:#ffffff;
  padding-right:1px;

  background-color:rgb(225,203,184);
 }
#Menublock {
  font-size:11pt; 
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:#ffffff;
  padding-top:1px;

  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:rgb(69,32,0);
  padding-bottom:1px;

  border-left-width:1px;
  border-left-style:solid;
  border-left-color:#ffffff;
  padding-left:1px;

  border-right-width:1px;
  border-right-style:solid;
  border-right-color:rgb(69,32,0);
  padding-right:1px;

  background-color:#cccccc;
 }
#fusszeile {
  background-color:#ffffff;
 }
#Bereichaussen {
  font-size:11pt; 
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:rgb(69,32,0);
  padding-top:1px;

  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:#ffffff;
  padding-bottom:1px;

  border-left-width:1px;
  border-left-style:solid;
  border-left-color:rgb(69,32,0);
  padding-left:1px;

  border-right-width:1px;
  border-right-style:solid;
  border-right-color:#ffffff;
  padding-right:1px;


  background-color:rgb(221,206,198);
 }
#Bereichinnen {
  font-size:10pt; 
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:rgb(69,32,0);
  padding-top:1px;

  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:#ffffff;
  padding-bottom:1px;

  border-left-width:1px;
  border-left-style:solid;
  border-left-color:rgb(69,32,0);
  padding-left:1px;

  border-right-width:1px;
  border-right-style:solid;
  border-right-color:#ffffff;
  padding-right:1px;

  background-color:rgb(221,206,198);
 }
#trenner {
  font-size:10pt; 
  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:rgb(155,145,145);
  padding-bottom:1px;
 }
#UMenutrenner {
  font-size:10pt; 
  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:rgb(155,145,145);
  padding-bottom:1px;
 }

#unsichtbar {
  position:absolute;
  top:-500; 
  left:140; 
  color:#000000; 
  width:138; 
  height:159; 
  cursor:pointer; 
  z-index:4; 

  border-top-width:1px;
  border-top-style:solid;
  border-top-color:#ffffff;
  padding-top:1px;

  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:rgb(69,32,0);
  padding-bottom:1px;

  border-left-width:1px;
  border-left-style:solid;
  border-left-color:#ffffff;
  padding-left:1px;

  border-right-width:1px;
  border-right-style:solid;
  border-right-color:rgb(69,32,0);
  padding-right:1px;

  background-color:#ACACE6;
  background-image:url(/Portal/imageslokal/hintergross_hell.jpg);
  font-size:10pt; 
}

/****************************************************************************/
/* Add pointer-events:none to disable clicking the link */
    a[href$=".mp3"] {
        pointer-events: none;
        cursor: default;
      }

    /* Custom play button CSS */
      .play-btn {
        display: inline-block;
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(to bottom right, #ff4960, #ffae00);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        cursor: pointer;
      }
      .play-btn::before,
      .play-btn::after {
        content: "";
        position: absolute;
      }
      .play-btn::before {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 12px 0 12px 22px;
        border-color: transparent transparent transparent #fff;
        left: 12px;
        top: 6px;
      }
      .play-btn::after {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
        left: 13px;
        top: 12px;
      }

      /* Play and pause button states */
      .play-btn.playing::before {
        border-style: none none none solid;
        border-width: 0 0 0 20px;
        border-color: transparent transparent transparent #fff;
        left: 30px;
        top: 20px;
      }
      .play-btn.playing::after {
        content: "\f28c"; /* Font Awesome pause icon */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 24px;
        line-height: 80px;
        text-align: center;
        color: #fff;
      }
/****************************************************************************/
  .viewproductdetail-button {
    margin-top: auto;
    display: block;
    width: 300px;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    background-color: #ffdb58;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
  }

  .viewproductdetail-button::after {
    content: "";
    position: absolute;
    bottom: -100%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-color: orange;
    transform: rotate(30deg);
    transform-origin: bottom left;
    transition: bottom 0.3s ease;
  }

  .viewproductdetail-button:hover::after {
    bottom: 0;
  }

  .viewproductdetail-button:hover {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

/* CSS für den kleineren Knopf */
.small-viewproductdetail-button {
    font-size: 12px; /* Neue Schriftgröße */
    padding: 8px 12px; /* Neue Polsterung */
}

/*Artikellisten**************************************************************/
/* Container für jedes Produkt */
.product-container {
    display: flex;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    max-width: 850px; /* Maximale Breite von 850px */
    width: 100%; /* Damit der Container responsiv ist */
}

/* Bereich für das Produktbild */
.product-image {
    flex: 0 0 30%;
    padding: 20px;
    display: flex;
    justify-content: center; /* Horizontal zentriert */
    align-items: center; /* Vertikal zentriert */
}

/* Bildcontainer */
.image-container {
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center; /* Horizontal zentriert */
    align-items: center; /* Vertikal zentriert */
}

/* Hauptbild */
.main-image {
    max-width: 100%;
    max-height: 100%;
}

.product-title {
    font-size: 14px !important; /* Schriftgröße überschreiben */
}

/* Bereich für Produktinformationen */
.product-details {
    flex: 1;
    padding: 20px;
}

/* Preisbereich */
.price {
    margin-bottom: 20px;
}

.discounted-price {
    font-size: 14px;
    color: red;
}

.original-price {
    text-decoration: line-through;
    color: #888;
    font-size: 13px;
}

.discount-price {
    color: red;
    font-size: 14px;
}

.regular-price {
    font-size: 14px;
}

/* Aktionen (z.B. 'In den Warenkorb legen', 'Details anzeigen') */
.actions {
    margin-bottom: 20px;
}

/* Beschreibungsbereich */
.description {
    margin-bottom: 20px;
}

.read-more {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

/* Zusätzliche Informationen */
.additional-info {
    color: #888;
}

/****************************************************************************/
/* Stil für den Warenkorb-Button */
.top-cart-button {
    display: inline-block; /* Ändern Sie das Element in ein Blockelement */
    border: 1px solid #ccc; /* Knapper Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    background-color: #fff; /* Hintergrund weiß */
    padding: 5px; /* Kleinerer Abstand um das Bild */
    cursor: pointer; /* Zeiger auf Hover */
    transition: background-color 0.3s; /* Flüssiger Hover-Effekt */
    text-decoration: none; /* Textdekoration entfernen */
    width: 16px; /* Breite des Buttons */
    height: 16px; /* Höhe des Buttons */
    text-align: center; /* Zentrieren des Textes */
    line-height: 13px; /* Zentrieren des Textes */
}

.top-cart-button img {
    width: 100%; /* Kleinere Bildgröße */
    height: auto; /* Automatische Höhe, um das Seitenverhältnis beizubehalten */
    display: block; /* Damit das Bild korrekt zentriert ist */
    margin: auto; /* Horizontal zentriert */
}

.top-cart-button:hover {
    background-color: #f0f0f0; /* Hintergrundfarbe ändern bei Hover */
}

.widerruf-button {
	width: auto;
	padding: 4px 12px;
	white-space: nowrap;
    margin-top: auto;
    display: block;
    height: 32px; /* Hinweis: px hinzugefügt, das ist sauberer für alle Browser */
    padding: 4px;
    text-align: center;
    font-size: 12px;
    background-color: #ffffff; /* Weißer Hintergrund */
    color: black;
    align-items: center;
    text-decoration: none;
    border: 1px solid #dcdcdc; /* Dezenter Rahmen, wichtig bei weißen Buttons */
    border-radius: 4px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
    font-weight: bold;
    cursor: pointer; /* Zeigt die "Klick-Hand" an */
}
.widerruf-button::after {
    content: "";
    position: absolute;
    bottom: -200%;
    left: -50%;
    width: 80%;
    height: 150%;
    background-color: #f0f0f0; /* Leichtes Grau für den Hover-Wisch-Effekt */
    transform: rotate(30deg);
    transform-origin: bottom left;
    transition: bottom 0.2s ease;
    z-index: 0;
}
/* WICHTIG: Damit der Text beim Hovern im Vordergrund bleibt */
.widerruf-button span {
    position: relative;
    z-index: 1;
}
.widerruf-button:hover::after {
    bottom: 0;
}
.widerruf-button:hover {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

/**/
        .addtocart-button {
            margin-top: auto;
            display: block;
            width: 300px;
            height: auto;
            padding: 8px;
            text-align: center;
            font-size: 14px;
            background-color: #ffdb58;
            color: black;
            align-items: center;
            text-decoration: none;
            border-radius: 5px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
            overflow: hidden;
            font-weight: bold;
        }
        .addtocart-button::after {
            content: "";
            position: absolute;
            bottom: -100%;
            left: -50%;
            width: 200%;
            height: 200%;
            background-color: orange;
            transform: rotate(30deg);
            transform-origin: bottom left;
            transition: bottom 0.3s ease;
        }

        .addtocart-button:hover::after {
            bottom: 0;
        }

        .addtocart-button:hover {
            transform: translate(1px, 1px);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .small-addtocart-button {
            /* Vererbe den Stil von .addtocart-button und passe die Breite an */
            width: 120px;
            margin-top: auto;
            display: block;
            height: 32;
            padding: 4px;
            text-align: center;
            font-size: 12px;
            background-color: #ffdb58;
            color: black;
            align-items: center;
            text-decoration: none;
            border-radius: 4px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s, box-shadow 0.2s;
            position: relative;
            overflow: hidden;
            font-weight: bold;
        }
        .small-addtocart-button::after {
            content: "";
            position: absolute;
            bottom: -200%;
            left: -50%;
            width: 80%;
            height: 150%;
            background-color: orange;
            transform: rotate(30deg);
            transform-origin: bottom left;
            transition: bottom 0.2s ease;
        }

        .small-addtocart-button:hover::after {
            bottom: 0;
        }

        .small-addtocart-button:hover {
            transform: translate(1px, 1px);
            box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
        }
        
       .button-container {
            text-align: center; /* Horizontal zentrieren */
            vertical-align: middle; /* Vertikal zentrieren */
            height: 100%; /* Vollständige Höhe der Zelle verwenden */
        }

/****************************************************************************/
	/* Add some basic styling to the button */
	.search-form {
	    float: left;
	    margin-right: 5px;
	}

	.search-form-text {
	    float: left;
	    margin-right: 5px;
	}

	.search-input {
	    padding: 5px;
	    border: 1px solid #ccc;
	    border-radius: 3px;
	}
	
	.search-form {
	    display: inline-block; /* Setze das Formular auf inline-block, damit es in einer Zeile mit dem Button erscheint */
	}
	
	.search-input {
	    padding: 5px;
	    border: 1px solid #ccc;
	    border-radius: 3px;
	    margin-right: 5px;
	}

.search-button {
	    float: left;
	    width: 35x;
	    height: 30px;
	    background-color: #FFDB58;
	    border: none;
	    border-radius: 3px;
	    cursor: pointer;
	    color: #fff;
	}
	.search-button::before {
	    content: '\1F50D'; /* Unicode für das Lupe-Symbol */
	    font-size: 18px;
	}
	
/****************************************************************************/
#Kopfzeile1 {
  font-size: 11pt;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(255, 242, 232);
  padding-top: 1px;

  border-bottom-width: 0;
  border-bottom-style: solid;
  border-bottom-color: #ffffff;
  padding-bottom: 1px;

  border-left-width: 0;
  border-left-style: solid;
  border-left-color: rgb(255, 242, 232);
  padding-left: 1px;

  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #ffffff;
  padding-right: 1px;

  color: rgb(255, 242, 232);
  background-color: rgb(255, 242, 232);
}

#Kopfzeile2 {
}

#Hervor {
  font-size:11pt; 
  border-top-width:1px;
  border-top-style:solid;
  border-top-color:#ffffff;
  padding-top:1px;

  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:rgb(69,32,0);
  padding-bottom:1px;

  border-left-width:1px;
  border-left-style:solid;
  border-left-color:#ffffff;
  padding-left:1px;

  border-right-width:1px;
  border-right-style:solid;
  border-right-color:rgb(69,32,0);
  padding-right:1px;

  background-color:rgb(225,203,184);
 }

/****************************************************************************/
.navbar {
  display: flex;
  flex-direction: column;
}

.nav-item {
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid rgb(69, 32, 0);
  border-left: 1px solid #ffffff;
  border-right: 1px solid rgb(69, 32, 0);
  padding: 1px;
}

.nav-item a {
  text-decoration: none;
  color: #000; /* ändern Sie die Farbe nach Bedarf */
  display: block;
  padding: 10px; /* ändern Sie die Polsterung nach Bedarf */
}

.nav-item:hover {
  background-color: #ddd;
  color: #000; /* ändern Sie die Farbe nach Bedarf */
}

/****************************************************************************/
.site-footer {
  background-color: rgb(255, 242, 232); /* Hintergrundfarbe auf Hellbeige ändern */
  padding: 20px 0;
  color: black; /* Textfarbe auf Schwarz ändern */
  font-family: Arial, sans-serif;
}

.footer-inner {
  display: flex;
  font-size:13pt;
  font-weight:bold; 
  flex-wrap: wrap; /* Für Responsivität */
  justify-content: space-around;
  margin: 0 auto;
  max-width: 1024px;
}

.footer-column {
  flex: 1;
  min-width: 200px; /* Mindestbreite für Responsivität */
  margin-bottom: 20px; /* Abstand zwischen den Spalten */
}

.footer-column h4 {
  margin-bottom: 15px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li {
  margin-bottom: 10px; /* Abstand zwischen den <li> Elementen erhöhen */
}

.footer-column ul li a, .footer-column p a {
  color: black; /* Textfarbe der Links auf Schwarz ändern */
  text-decoration: none;
  font-size: 16px; /* Schriftgröße für <a> Elemente erhöhen */
}

.footer-column p {
  margin: 0;
  line-height: 1.5; /* Bessere Lesbarkeit des Textes */
  font-size: 16px; /* Schriftgröße für Text erhöhen */
}

/****************************************************************************/
.pagination a {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 3px;
  background-color: rgb(255, 242, 232); /* Helle Farbe */
  color: #000; /* Schriftfarbe (schwarz) */
  text-decoration: none;
  font-size: 16px;
  border: 1px solid rgba(0, 0, 0, 0.2); /* Dünner Rahmen */
  border-radius: 5px; /* Abgerundete Ecken */
}

.pagination a:hover {
  background-color: rgb(69, 32, 0); /* Dunkles Braun bei Hover */
  color: #fff; /* Schriftfarbe (weiß) bei Hover */
}

.pagination a.active {
  background-color: rgb(69, 32, 0); /* Dunkles Braun für den aktiven Knopf */
  color: #fff; /* Schriftfarbe (weiß) für den aktiven Knopf */
}

.page-info {
  margin-right: 10px;
  font-weight: bold;
}

.outer-container {
  position: relative;
  left: 171; /* Startposition */
  width: 850px; /* Feste Breite von 850px */
  /*border: 1px solid rgba(0, 0, 0, 0.2); */
  transition: left 0.3s ease; /* Übergangseffekt für die Position */
}

.outer-container.shifted {
  left:0px /* Ihr gewünschter Wert hier */ ; /* Verschobene Position */
}

.centered-container {
  width: 850px; 
  /*border: 1px solid rgba(0, 0, 0, 0.2);*/
}
/****************************************************************************/

.cart-container {
    width: 230px;
    left: 811px;
    /*border: 1px solid rgba(0, 0, 0, 0.2);*/
    padding: 0px;
	/*position: relative;*/
	position: absolute;
}

.cart-table {
    width: 100%;
}

.cart-table th, .cart-table td {
    text-align: left;
    padding: 0px;
    border-bottom: 1px solid #ccc;
}
/****************************************************************************/
/*Product-Swiper Element Schatulle.asp*/
    .product-swiper-container {
        position: relative; /* Bezugspunkt für absolut positionierte Elemente */
        max-width: 850px;
        /*margin-left: 170px; */
        height: 300px;
        overflow: hidden;
        /*border: 1px solid #ccc;*/
    }

	.product-swiper-container h3 {
	    padding: 5px; /* Setzt ein kleineres Padding */
	    margin: 0; /* Entfernt den Standard-Außenabstand */
	    font-size: 12px; /* Beispiel für eine Anpassung der Schriftgröße */
	    color: #333; /* Beispiel für eine Anpassung der Textfarbe */
	    text-align: center; /* Zentriert den Text */
	}

    .swiper-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .swiper-slide img {
        max-width: 100%;
        height: auto;
    }

    .swiper-button-prev, .swiper-button-next {
	    /* Vorhandene Stile */
        width: 50px !important; 
		background-size: 25px 25px;
        border-radius: 50%;

	    text-align: center; /* Stellt sicher, dass der Text zentriert ist, falls verwendet */
	    font-size: 20px; /* Passt die Icon-Größe an, falls Text-Icons verwendet werden */
		
        position: absolute;
        /*top: 50%;*/
        transform: translateY(-160%);
        z-index: 10;
        color: #000;
        background-color: rgba(255, 255, 255, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .swiper-button-prev {
		color:black !important;
        left: 10px;
    }

    .swiper-button-next {
		color:black !important;
        right: 10px;
    }

	/* Beispiel für das Anpassen des Icons innerhalb der Pfeile, falls FontAwesome oder ähnliches verwendet wird */
	.swiper-button-prev::after, .swiper-button-next::after {
	    font-size: 22px !important; /* Passt die Icon-Größe an */
	}

	.swiper-button-prev:hover, .swiper-button-next:hover {
	    background-color: rgb(255, 242, 232) !important; /* Dunklerer Hintergrund beim Hover */
	    color: white !important;
	}

	.swiper-additional-info {
		text-align: center; 
		font-size: 12px; 
		font-weight: bold;
	}

    /* Responsives Verhalten */
    /* Anpassungen für den linken Rand basierend auf Ihren Breakpoints */

  
    @media (max-width: 850px) {
        .product-swiper-container {
            margin-left: 85px; 
        }
    }

    @media (max-width: 670px) {
        .product-swiper-container {
            margin-left: 50px; 
        }
    }

    @media (max-width: 570px) {
        .product-swiper-container {
            margin-left: 25px; 
        }
    }

    @media (max-width: 393px) {
        .product-swiper-container {
            margin-left: 0; 
        }
    }
  
   
/****************************************************************************/
/* */
    .category-container-horizontal {
        border: 1px solid rgba(0, 0, 0, 0.2);
        /*width: 250px;
        height: 190px;*/

        width: 100%;
        padding: 2px;
        margin: 10px;
        display: inline-block;
        vertical-align: top;
        text-align: left;
        cursor: pointer; /* Ändert den Mauszeiger beim Überfahren des Elements */
        transition: transform 0.2s; /* Fügt einen Übergangseffekt hinzu */
        justify-content: left;
    }

    .category-container-horizontal:hover {
        transform: scale(1.05); /* Vergrößert das Element beim Überfahren mit der Maus */
    }

    .category-img {
        max-width: 100%;
        height: auto;
    }

    .category-title {
        font-weight: bold;
        font-size: 15px;
        margin-top: 5px;
		text-decoration: underline;
    }
    .category-description {
        /*font-weight: bold;*/
        font-size: 13px;
        margin-top: 5px;
    }

/****************************************************************************/

/*button {
    display: inline-block;
    height: 30px;
    padding: 0;
    margin: 0;
    vertical-align: top;
    width: 30px;
}
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}
.column {
  flex-basis: calc(25% - 20px);
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.column h2 {
  margin-top: 0;
}
*/