body {
   background: #eae9e9f4;
   font-family: Verdana, Geneva, sans-serif;
   color: #020202;
   margin: 0;
   padding: 0;
}

header {
   background-color: rgb(242, 234, 178);
   color: #fff;
   padding: 20px;
   text-align: center;
}

h1 {
   font-family: "Courier New", Courier, monospace;
   font-size: 200%;
   margin: 0;
   color: #fff;
}
/* .title{
   margin-bottom: 20px;
   text-align: center;
} */
.title-1 {
   margin-bottom: 40px;
   padding-bottom: 20px;
   text-align: center;
   font-size:xx-large ;
}

/* section {
   display: flex;
   flex-direction: row;
   align-items: center; 
   padding: 20px;
}
section .title-1{
   margin-bottom: 40px;
   padding-bottom: 30px;
   align-self: center;
} */

article {
   float: left;
   width: calc(25% - 32px);
   min-width: 160px;
   border: 1px solid transparent;
   margin: 5px;
   padding: 10px;
   color: #000;
}
article .bild {
   width: 100%; /* Bildbreite 100% für responsives Design */
   height: auto; /* Automatische Höhe, um das Seitenverhältnis beizubehalten */
   border: 2px solid rgb(233, 162, 56);
   margin-bottom: 10px; /* Abstand zwischen Bild und Text hinzugefügt */
   margin-top: 8px;
   /* border-radius: 1%; */
}

/* .info-box h2 #bi_1{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: #000;
} */

p{
   padding-left: 8px;
   color: #000;
   font-size: 12px;
   text-align: left;
   /* line-height: 1.5; */
}
.info-box {
   background-color: #f4f1f1; /* Hintergrundfarbe */
   border: 1px solid #ddd; /* Randstil und Farbe */
   border-radius: 5px; /* Abrundung der Ecken */
   padding: 20px; /* Innenabstand */
   margin-bottom: 20px; /* Außenabstand nach unten */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Schatten */
}
article .info-box:hover{
   background-color: #eaf0ba;
   color: var(--color2);
}
.info-box h2 {
   display: inline-block;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: #000;
   font-size: 20px; 
}
.info-box p {
   font-size: 11px; 
   color: #666; 
}
.info-box p:hover{
   color: var(--color4);
   font-weight: bold;
}
.info-box a {
   color: #007bff; 
   text-decoration: none; 
}

.info-box a:hover {
   text-decoration: underline; 
   color: #065fbe;
}

.btn_buy{
   background: #d6d4d4;
   display: inline-block;
   align-items: center;
   justify-content: center;
   /* margin-left: 10px;
   padding-left: 5px; */
}

.btn_buy:hover{
   background: #f29f7f;
}

footer {
   background-color: rgb(215, 243, 198);
   border-top: 1px solid gray;
   text-align: center;
   color: #000;
}

footer p{
   text-align: center;
   padding: 10px;
}