.elementor-22809 .elementor-element.elementor-element-df7c215{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}/* Start custom CSS for html, class: .elementor-element-0a4a5a4 *//* ==========================================
   HARDCODE – Fokusrahmen wirklich vollständig entfernen
   (für alle relevanten Versandfelder)
========================================== */
#calc_shipping_postcode,
#calc_shipping_city {
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid #54595F !important;
  background: #eeeeee !important;
  border-radius: 10px !important;
  color: #54595F !important;
  height: 40px !important;
  font-family: 'Istok Web', sans-serif !important;
}

/* Entfernt Fokusrahmen in allen Browsern */
#calc_shipping_postcode:focus,
#calc_shipping_city:focus,
#calc_shipping_postcode:focus-visible,
#calc_shipping_city:focus-visible,
#calc_shipping_postcode:active,
#calc_shipping_city:active {
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid #54595F !important;
  background: #eeeeee !important;
}

/* Für Safari/Webkit (die hartnäckigste Variante) */
input#calc_shipping_postcode::-webkit-focus-ring-color,
input#calc_shipping_city::-webkit-focus-ring-color {
  outline: none !important;
  box-shadow: none !important;
}

/* Verhindert Safari-Autofill-Leuchten */
input#calc_shipping_postcode:-webkit-autofill,
input#calc_shipping_city:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #eeeeee inset !important;
  -webkit-text-fill-color: #54595F !important;
  transition: background-color 9999s ease-in-out 0s;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-df7c215 *//* ==========================================
   WARENKORB – VOCALCOACH STYLE
========================================== */

/* Gesamtbox */
body.woocommerce-cart .bene-vocalcoach-box {
  background-color: #eeeeee !important;
  border: 1px solid #54595F !important;
  border-radius: 10px !important;
  padding: 20px !important;
  font-family: 'Istok Web', sans-serif !important;
  color: #54595F !important;
  box-sizing: border-box !important;
}

/* Tabellen */
body.woocommerce-cart table.shop_table {
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: #eeeeee !important;
  border: 1px solid #54595F !important;
  border-radius: 10px !important;
}

body.woocommerce-cart table.shop_table th,
body.woocommerce-cart table.shop_table td {
  padding: 10px !important;
  border-top: 1px solid #54595F !important;
  vertical-align: middle !important;
  color: #54595F !important;
}

/* ==========================================
   BUTTONS – VOCALCOACH STYLE + ICONS
========================================== */

body.woocommerce-cart .button,
body.woocommerce-cart button,
body.woocommerce-cart input.button {
  background-color: #149bd7 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 15px !important;
  height: 40px !important;
  padding: 10px 20px !important;
  font-family: 'Istok Web', sans-serif !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease !important;
}

/* Hover */
body.woocommerce-cart .button:hover,
body.woocommerce-cart button:hover,
body.woocommerce-cart input.button:hover {
  background-color: #616160 !important;
  color: #ffffff !important;
}

/* Disabled */
body.woocommerce-cart .button:disabled,
body.woocommerce-cart button:disabled,
body.woocommerce-cart input.button:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* ==========================================
   BUTTON ICONS
========================================== */

/* 🏷 Gutschein anwenden */
body.woocommerce-cart button[name="apply_coupon"]::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f3ff"; /* ticket-alt */
  margin-right: 8px;
}

/* 🔄 Warenkorb aktualisieren */
body.woocommerce-cart button[name="update_cart"]::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f021"; /* sync */
  margin-right: 8px;
}

/* 💳 Zur Kasse */
body.woocommerce-cart .checkout-button::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f53a"; /* money-bill-wave */
  margin-right: 8px;
}

/* ⬅️ Zurück zum Shop */
body.woocommerce-cart .wc-backward::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f060"; /* arrow-left */
  margin-right: 8px;
}

/* ==========================================
   MOBILE & TABLET
========================================== */
@media (max-width: 1024px) {
  body.woocommerce-cart .button,
  body.woocommerce-cart button,
  body.woocommerce-cart input.button {
    width: 100% !important;
    margin-top: 10px !important;
    height: 45px !important;
    padding: 12px 24px !important;
    border-radius: 18px !important;
    font-size: 17px !important;
  }
}
/* ==========================================
   WARENKORB – GUTSCHEINFELD ANPASSUNG
========================================== */

/* Eingabefeld für Gutscheincode */
body.woocommerce-cart .coupon input#coupon_code {
  height: 40px !important;
  padding: 0 12px !important;
  background-color: #eeeeee !important;
  border: 1px solid #54595F !important;
  border-radius: 10px !important;
  font-family: 'Istok Web', sans-serif !important;
  font-size: 16px !important;
  color: #54595F !important;
  box-shadow: none !important;
  width: 300px !important; /* Standard Desktop-Breite */
  box-sizing: border-box !important;
}

/* Fokuszustand (neutral) */
body.woocommerce-cart .coupon input#coupon_code:focus {
  outline: none !important;
  border-color: #54595F !important;
  box-shadow: none !important;
  background-color: #eeeeee !important;
}

/* Placeholder-Stil */
body.woocommerce-cart .coupon input#coupon_code::placeholder {
  color: #7a7a7a !important;
  opacity: 1 !important;
}

/* Mobile & Tablet – volle Breite */
@media (max-width: 1024px) {
  body.woocommerce-cart .coupon input#coupon_code {
    width: 100% !important;
    margin-bottom: 10px !important;
  }
}
/* ==========================================
   FOKUSRAHMEN ENTFERNEN – MENGENFELD
========================================== */

body.woocommerce-cart .quantity input.qty:focus {
  outline: none !important;
  border-color: #54595F !important;
  box-shadow: none !important;
  background-color: #eeeeee !important;
}
/* ==========================================
   DROPDOWNS & SELECT-FELDER – VOCALCOACH STYLE
========================================== */

/* Standard-Selectfelder */
body.woocommerce-cart select,
body.woocommerce-cart .shipping-calculator-form select,
body.woocommerce-cart .woocommerce-shipping-calculator select {
  background-color: #eeeeee !important;
  border: 1px solid #54595F !important;
  border-radius: 10px !important;
  height: 40px !important;
  padding: 0 12px !important;
  color: #54595F !important;
  font-family: 'Istok Web', sans-serif !important;
  font-size: 16px !important;
  box-shadow: none !important;
  appearance: none !important; /* Standard-Pfeil entfernen */
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M7 10l5 5 5-5z' fill='%2354595F'/>\
  </svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
}

/* Fokuszustand neutralisieren */
body.woocommerce-cart select:focus {
  outline: none !important;
  border-color: #54595F !important;
  box-shadow: none !important;
  background-color: #eeeeee !important;
}

/* ==========================================
   SELECT2 (modernes Dropdown von WooCommerce)
========================================== */
body.woocommerce-cart .select2-container--default .select2-selection--single {
  background-color: #eeeeee !important;
  border: 1px solid #54595F !important;
  border-radius: 10px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

body.woocommerce-cart .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #54595F !important;
  line-height: 40px !important;
  padding-left: 12px !important;
  font-family: 'Istok Web', sans-serif !important;
  font-size: 16px !important;
}

body.woocommerce-cart .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
  right: 10px !important;
}

body.woocommerce-cart .select2-dropdown {
  background-color: #eeeeee !important;
  border: 1px solid #54595F !important;
  border-radius: 10px !important;
  font-family: 'Istok Web', sans-serif !important;
  font-size: 16px !important;
}

/* Hover- & Aktiv-Effekt */
body.woocommerce-cart .select2-results__option--highlighted {
  background-color: #149bd7 !important;
  color: #ffffff !important;
}
/* ==========================================
   BUTTON: "Aktualisieren" im Versandbereich
========================================== */
body.woocommerce-cart button[name="calc_shipping"] {
  background-color: #149bd7 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 15px !important;
  height: 40px !important;
  padding: 10px 20px !important;
  font-family: 'Istok Web', sans-serif !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease !important;
}

/* 🔄 Icon (Font Awesome sync-alt) */
body.woocommerce-cart button[name="calc_shipping"]::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f021"; /* fa-sync-alt */
  font-size: 16px;
  color: #ffffff !important;
  display: inline-block;
  margin-right: 6px;
}

/* Hover-Effekt */
body.woocommerce-cart button[name="calc_shipping"]:hover {
  background-color: #616160 !important;
  color: #ffffff !important;
}

/* Disabled-Zustand */
body.woocommerce-cart button[name="calc_shipping"][disabled] {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}/* End custom CSS */