/* ---- ARTIKEL ANFANG ---- */
    .artikelname{
        font-size: 1.2rem;
        font-weight: bolder;
        color: black;
    }

    .artikelnr{
        font-size: 0.8rem;
        color: black;
    }

    .price{
        font-size: 1.8rem;
        font-weight: bold;
        color: black;
        text-align: right;
        margin: 0.1rem;
    }

    .priceustinfo {
        font-size: 0.8rem;
        font-style: italic;
        text-align: right;
        margin: 0.1rem;
    }

    .artikelstilp {
        font-size: 0.8em;
        margin: 0.1rem;
    }

    .buy{
        width: 95%;
        /* margin-left: auto;
        margin-right: auto; */
        background-color: lightgray;
        border: 1px solid #000;
        padding: 0.5rem;
        align-content: center;
        align-items: center;
        text-align: center;
    }

    .buybutton{
        background-color: blue;
        color: white;
        padding: 0.5rem;
    }

    /*.buyarea {
        display: flex;
        align-items: flex-end;
    }*/

	.image-box {
		content: "";
    	display: block;
        width: max-content 100%;
        /* padding-top: 0%; */
        padding: 0.5rem;
        position: relative;
        align-items: center;
        align-content: center;
        justify-content : center;
        border: 0px solid black;
        background-color: transparent;
    }

    .main-image {
      position: relative;
      width: 95%;
      /*height: 20vw;*/
      aspect-ratio: 1 / 1;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      align-items: center;
      justify-content : center;
      border: 1px solid black;
    }

    .main-image img {
        max-height:96% !important;
        max-width:96% !important; 
        display:block;
    }

    .picFooter {
        position: relative;
        text-decoration: none;
        color: black;
        border: 0px solid black;
        font-size: 0.6em;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        align-items: center;
        justify-content : center;
}

/* Style the buttons that are used to open and close the accordion panel */
    .jhaccordion {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 0.5rem;
        margin-top: 0.5rem;
        width: 100%;
        text-align: left;
        border: 1px solid black;
        outline: none;
        transition: 0.4s;
    }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .active, .jhaccordion:hover {
        background-color: #ccc;
        border: 1px solid black;
    }
  
  /* Style the accordion panel. Note: hidden by default */
    .panel {
        padding: 0.5rem;
        /* background-color: white; */
        border: 1px solid black;
        border-top: none;
        font-size: 1rem;
        display: none;
        overflow: hidden;
    } 

    .jhaccordion:after {
        /* content: '\02795'; Unicode character for "plus" sign (+) */
        content: '\02228'; /*  */
        font-size: 0.7rem;
        font-weight: bold;
        color: black;
        float: right;
        margin-left: 0.5rem;
    }
  
    .active:after {
        /*content: "\2796"; Unicode character for "minus" sign (-) */
        content: '\02227'; /*  */
    }


/* ── Verfügbarkeits-Ampel ─────────────────────────────── */
.ampel-badge {
    display:     inline-flex;
    align-items: center;
    gap:         7px;
    font-size:   13px;
    line-height: 1.4;
}

/* farbiger Punkt vor dem Text */
.ampel-badge::before {
    content:       '';
    display:       inline-block;
    width:         11px;
    height:        11px;
    border-radius: 50%;
    flex-shrink:   0;
}

.ampel-gruen::before      { background-color: #43a047; }
.ampel-gelb::before       { background-color: #fb8c00; }
.ampel-rot::before        { background-color: #e53935; }
.ampel-gruen-rand::before { background-color: transparent;
                            border: 2px solid #43a047; }
.ampel-blau::before       { background-color: #1e88e5; }
.ampel-grau::before       { background-color: #9e9e9e; }

/* Lieferzeit-Zeile */
.lieferzeit-text {
    font-size:  13px;
    color:      #555555;
}

/* Rückgabe-Hinweis */
.kein-rueckgabe {
    font-size: 12px;
    color:     #e53935;
}



    /* ---- ARTIKEL ENDE ---- */