/* Basis-Stile */
#Angebotskorb-v2 {
  position:relative;
  float:none;
  margin-left:auto;
  margin-right:auto;
  width:90%;
  min-width:200px;
  background-color:#fff;
  padding:2%;
  margin-top:3%;
  margin-bottom:3%;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border:1px solid #ccc;
  box-shadow:3px 3px 3px #777;
  -moz-box-shadow:3px 3px 3px #777;
  -webkit-box-shadow:3px 3px 3px #777;
  box-shadow:3px 3px 3px #777;
  transition-property:all;
  -webkit-transition-property:all;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out
}

/*Textmeldung 50Positionen*/
#Ly23MbDiv110 {
  text-align: center;
  margin-bottom: 0rem;
}
#Ly23MbDiv110 p {
  text-align: left;
  color: black;
}



/*Alte Input-Button*/
#PositionenButtDiv input,
#WeiterAnfrageButtDiv input {
 max-width: 200px!important;
  color: white!important;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  
 
  
}
#PositionenButtDiv {
  
    height:unset;
  padding: 0%;
  background-color: black;
  
}
#PositionenButtTxt,
#WeiterAnfrageButtTxt{
  all: unset;
  width: 200px;
max-width: 200px!important;
  background-color: black!important;
  color: white!important;
  margin-left: auto;
  margin-right: auto;
  padding-top: 3%;
  padding-bottom: 3%;
  cursor: pointer;
}
#WeiterAnfrageButtTxt:hover {
  outline: 2px solid #black!important; /* Fokusrahmen */
  outline-offset: 2px!important; /* Abstand des Rahmens */
  background-color: rgba(100,100,100,1)!important;
 
}

#submitAktualisieren {
 background-color: black!important;
  color: white!important;
  margin-left: auto;
  margin-right: auto;
  max-width: 200px;
  font-size: 1em;
}

#submitAktualisieren:hover {
  outline: 2px solid #black!important; /* Fokusrahmen */
  outline-offset: 2px!important; /* Abstand des Rahmens */
  background-color: rgba(100,100,100,1)!important;
}

/*Alte Input-Button Ende*/





/* === Allgemeines Layout === */
#Angebotskorb-v2 {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-family: sans-serif;
}

.AngK2-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* === Table Wrapper (für Responsivität) === */
.AngK2-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.AngK2-row {
  display: flex;
  padding: 0.5rem;
  border-bottom: 1px solid #ccc;
  align-items: center;
  flex-wrap: wrap; /* Für responsives Layout */
}

.AngK2-header-row {
  font-weight: bold;
  background-color: #f9f9f9;
}

.AngK2-cell {
  flex: 1;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  position: relative;
  box-sizing: border-box;
}

/* === Mengenfeld Styling === */
.AngK2-Menge {
  background-color: #000;
  color: #fff;
  border: 1px solid #ccc;
  padding: 0.4rem;
  width: 50px;
  max-width: 50px;
  text-align: center;
  box-sizing: border-box;
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Entfernt Pfeile */
.AngK2-Menge::-webkit-outer-spin-button,
.AngK2-Menge::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Checkbox Styling */
.AngK2-Loeschen {
  transform: scale(1.2);
  width: 30px;
  height: 30px;
  cursor: pointer;
}

/* === Buttons Styling === */
#Angebotskorb input[type="submit"],
#Angebotskorb button,
#Angebotskorb-v2 input[type="submit"],
#Angebotskorb-v2 button,
.AngK2-main-button {
  background-color: #000;
  
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  max-width: 100%; /* Mobil freundlich */
  text-align: center;
  transition: background-color 0.2s ease-in-out;
}

#Angebotskorb input[type="submit"]:hover,
#Angebotskorb button:hover,
#Angebotskorb-v2 input[type="submit"]:hover,
#Angebotskorb-v2 button:hover,
.AngK2-main-button:hover {
  background-color: #990000;
}

/* Button-Ausrichtung */
.AngK2-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* === Responsive Anpassung unter 960px === */
@media (max-width: 959px) {
  /* Überschrift Zeile wird vollständig ausgeblendet */
  .AngK2-header-row {
    display: none !important; /* Sicherstellen, dass die Überschrift nicht angezeigt wird */
  }

  /* Die Zeilen werden untereinander als Block angezeigt */
  .AngK2-row {
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    margin-bottom: 1rem;
    padding: 0.5rem;
  }

  .AngK2-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid #eee;
  }

  /* Labels werden durch data-label angezeigt */
  .AngK2-cell::before {
    content: attr(data-label);
    font-weight: bold;
    margin-right: 1rem;
    flex-shrink: 0;
  }

  .AngK2-button-row {
    text-align: center;
  }
}