/* ---- WARENKORB ANFANG ---- */
    .CartArt {
        border-top: 1px solid black;
	      /* max-width: 800px; */
	      position: relative;
	      margin-top: 1rem;
	      margin-bottom: 1rem;
	      width:100%;
        vertical-align: top;
    }
    
    .CartArtName {
      	border: 0px solid black;
	      width:90%;
	      font-size:1.2em;
	      font-weight: bold;
	      margin: 0px;
	  }

    .CartArtNo {
	      border: 0px solid green;
	      width:90%;
	      font-size: 0.8em;
	      margin: 0;
	      margin-bottom: 1em;
	  }

    .CartDelButton {
      	position: absolute;
	      top:5px;
	      right: 5px;
	      font-size: 1.5em;
        /*	width: 1.8em; */
        /*	height: 1.8em; */
	      border: 0px solid black;
	      background-color: transparent;
	      color: red;
        /*	border-radius: 2px; */
	      text-align: center;
	      vertical-align: middle;
	      align-items: center;
	      align-content: center;
	      justify-content : center;
	  }

    .CartDelButton:hover {
        /*	background-color: darkred; */
	      color: darkred;
	  }

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

    .CartPic {
      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;
    }

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

    .CartPicFooter {
        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;
    }

    .CartArtBox {
      	border: solid 0px blue;
        padding: 0rem;
	      /*width: 70%;*/
	      display: inline-block;
	      vertical-align: top;
	      text-align: right;
        background-color: transparent;
	  }

    .CartArtInnerBox{
      	border: solid 1px black;
        background-color: #f0f0f0;
        padding: 0.2rem;
	      /*width: 70%;*/
        aspect-ratio: 1 / 1;
	      display: inline-block;
	      vertical-align: center;
	      text-align: right;

    }

    .CartArtAmount {
	      display: inline-block;
	  }

    .CartArtPrice {
	      display: inline-block;
        font-size: 1rem;
	  }

    .CartArtTotal {
	      display: inline-block;
	      font-size: 1rem;
	      font-weight: bold;
	  }

    .CartDetailBox {
	      border: solid 0px orange;
	      /*width: 100%;*/
        padding: 0rem;
        background-color: transparent;
	      /*display: inline-block;
	      vertical-align: top;*/
	  }

    .CartDetailBoxHersteller {
	      border-top: 1px solid gray;
	  }	

    .cart-summencontainer{
        position: relative;
        width: 100%;
    }

    .cart-summenblock {
        position: absolute;
        right: 0;
        border: 1px solid black;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ---- WARENKORB ENDE ---- */

    

    /* ---- Kundendaten-Template ANFANG ---- */
    .fancy-input {
        margin: 0.5rem 0 0.5rem 0;
        position: relative;
        /*width: 60vw;*/
        }
  
      .fancy-input label {
          position: absolute;
          background: #fff;
          padding: 0 .5em;
        border: 1px solid #666;
        border-radius: 0.2em;
          font-size: .7em;
        color: #666;
          top: -.6em;
          left: .5em;
          transition: all .3s ease;
        }
  
      .fancy-input label.like-placeholder {
          color: #666;
          font-size: 1em;
          top: .5em;
          left: .5em;
        border: 0px solid black;
        }
  
      .fancy-input input {
        padding: .5em;
        font-size: 1em;
        border: 1px solid#666;
        border-radius: 0.2em;
        }
  
      .fancy-input select {
        padding: .5em;
        font-size: 1em;
        border: 1px solid#666;
        border-radius: 0.2em;
        }
      /* ---- Kundendaten-Template ENDE ---- */


/* ── Kundendaten-Formular: Responsive Zeilen ── */

.kd-row {
    display: flex;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}

/* Alle fancy-inputs innerhalb einer kd-row */
.kd-row .fancy-input {
    flex: 1 1 0;
    min-width: 0;        /* ← verhindert Overflow aus dem Container */
    box-sizing: border-box;
}

/* Inputs + Selects füllen ihren Flex-Container */
.kd-row .fancy-input input,
.kd-row .fancy-input select {
    width: 100%;
    box-sizing: border-box;
}

/* Straße (flex) + Hausnummer (fix 140px) */
.kd-row--street .fancy-input:first-child {
    flex: 1 1 auto;
}
.kd-row--street .fancy-input:last-child {
    flex: 0 0 140px;
    min-width: 0;
}

/* PLZ (fix 140px) + Ort (flex) */
.kd-row--zip .fancy-input:first-child {
    flex: 0 0 140px;
    min-width: 0;
}
.kd-row--zip .fancy-input:last-child {
    flex: 1 1 auto;
}

/* Mobiltelefon: allein, aber nur halb so breit */
.kd-row--half .fancy-input {
    flex: 0 0 calc(50% - 0.5rem);
    min-width: 0;
    box-sizing: border-box;
}
.kd-row--half .fancy-input input {
    width: 100%;
    box-sizing: border-box;
}

/* USt-IdNr: max. Breite einer EU-Umsatzsteuer-ID */
.kd-ustid input {
    max-width: 185px;
    width: 100%;
    box-sizing: border-box;
}

/* Standalone fancy-inputs (ohne kd-row): volle Breite */
.fancy-input input,
.fancy-input select {
    width: 100%;
    box-sizing: border-box;
}

/* ── Smartphone: alle Felder full-width untereinander ── */
@media (max-width: 600px) {
    .kd-row,
    .kd-row.kd-row--street,
    .kd-row.kd-row--zip,
    .kd-row.kd-row--half {
        flex-direction: column;
        gap: 0;
    }

    .kd-row .fancy-input,
    .kd-row--street .fancy-input:first-child,
    .kd-row--street .fancy-input:last-child,
    .kd-row--zip .fancy-input:first-child,
    .kd-row--zip .fancy-input:last-child,
    .kd-row--half .fancy-input {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .kd-ustid input {
        max-width: 100%;
    }
}


  
      /* ---- Ship and Pay-Template ANFANG ---- */
      .shippay {
          padding: 1rem;
          font-size: 0.8rem;
          margin-bottom: 1rem;
      }
  
      .shippay label {
            /* margin-top: 1rem;
          margin-bottom: 1rem; */
          font-size: 1rem;
      }
  
      .shippay label::after {
            content: "";
            display: block;
      }
      /* ---- Ship and Pay-Template ENDE ---- */


    .mischlieferung-hinweis {
        display: flex;
        gap: 0.7rem;
        align-items: flex-start;
        background: #fff8e1;
        border-left: 4px solid #f9a825;
        border-radius: 4px;
        padding: 0.7rem 1rem;
        margin: 0.6rem 0;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .mischlieferung-icon {
        font-size: 1.2rem;
        flex-shrink: 0;
        margin-top: 0.1rem;
    }


    /* ---- Untere Button-Leiste ---- */
.cart-button-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    gap: 1rem;
    flex-wrap: nowrap; /* auch auf Smartphone nebeneinander */
}

.cart-btn-update,
.cart-btn-kasse {
    flex: 1;                /* ← beide teilen sich den Platz gleichmäßig */
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    cursor: pointer;
    border: 1px solid #000;
    border-radius: 4px;
    white-space: nowrap;
    box-sizing: border-box; /* ← Padding wird eingerechnet, kein Überlauf */
    text-align: center;
}

.cart-btn-update {
    background-color: #f0f0f0;
    color: #333;
}

.cart-btn-update:hover {
    background-color: #ddd;
}

.cart-btn-kasse {
    background-color: blue;
    color: white;
}

.cart-btn-kasse:hover {
    background-color: darkblue;
}

@media (max-width: 480px) {
    .cart-btn-update,
    .cart-btn-kasse {
        padding: 0.5rem 0.5rem;
        font-size: 0.85rem;
    }
}

.cart-button-row--end {
    justify-content: flex-end;
}
/* ---- Ende Untere Button-Leiste ---- */

.cart-btn-top {
    width: 100%;
    margin-top: 0.7rem;
}