.elementor-6827 .elementor-element.elementor-element-d256604{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields > h3{display:block;color:#3A3A3A;margin:0px 0px 25px 0px;}.elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields > .shopengine-billing-address-header{font-size:22px !important;}.rtl .elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields > h3{margin:0px 0px 25px 0px;}.elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper{background-color:#f7f8fb;padding:25px 30px 25px 30px;}.rtl .elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper{padding:25px 30px 25px 30px;}.elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields__field-wrapper .form-row label{color:#3A3A3A;font-size:16px;}.elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields__field-wrapper .form-row label abbr{color:#3A3A3A;}.elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields__field-wrapper :is(input, textarea, .woocommerce-input-wrapper .select2-selection, select){color:#555555;border-style:solid;border-width:1px 1px 1px 1px;border-color:#dee3ea;padding:10px 16px 10px 16px !important;border-radius:3px 3px 3px 3px !important;}.elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields__field-wrapper :is(input, textarea, .select2-selection, select){background-color:#ffffff;}.elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields__field-wrapper .form-row  :is(input, textarea, .select2-selection, select){font-size:16px !important;}.rtl .elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields__field-wrapper :is(input, textarea, .woocommerce-input-wrapper .select2-selection, select){border-width:1px 1px 1px 1px;padding:10px 16px 10px 16px !important;border-radius:3px 3px 3px 3px !important;}.elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields__field-wrapper :is(input, textarea, .select2-selection, select):focus{color:#555555;background-color:#ffffff;}.elementor-6827 .elementor-element.elementor-element-53fc410 .select2.select2-container .select2-selection--single::before{right:15px;}.elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields__field-wrapper :is(input, textarea, .woocommerce-input-wrapper .select2-selection, select)::placeholder{color:#555555;}.elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields > h3, .elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields__field-wrapper .form-row label{font-weight:400;}.elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields__field-wrapper .form-row input,
					.elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields__field-wrapper .form-row textarea,
					.elementor-6827 .elementor-element.elementor-element-53fc410 .shopengine-checkout-form-billing .woocommerce-billing-fields__field-wrapper .form-row .select2-selection{font-weight:400;}.elementor-6827 .elementor-element.elementor-element-42e5fb2 .shopengine-checkout-form-additional h3{display:block;}.elementor-6827 .elementor-element.elementor-element-42e5fb2 .shopengine-checkout-form-additional .form-row label{display:block;color:#3A3A3A;font-size:15px;font-weight:400;margin-bottom:9px;}.elementor-6827 .elementor-element.elementor-element-42e5fb2 .shopengine-checkout-form-additional .input-text{color:#3A3A3A;background-color:#ffffff !important;font-size:14px;font-weight:400;line-height:17px;padding:10px 18px 10px 18px;border-radius:3px 3px 3px 3px;}.elementor-6827 .elementor-element.elementor-element-42e5fb2 .shopengine-checkout-form-additional .input-text::placeholder{color:#555555;}.elementor-6827 .elementor-element.elementor-element-42e5fb2 .shopengine-checkout-form-additional textarea[name=order_comments]{height:90px;width:100%;background-image:none;}.rtl .elementor-6827 .elementor-element.elementor-element-42e5fb2 .shopengine-checkout-form-additional .input-text{padding:10px 18px 10px 18px;border-radius:3px 3px 3px 3px;}.elementor-6827 .elementor-element.elementor-element-42e5fb2 .shopengine-checkout-form-additional .form-row .input-text{border-style:solid;border-width:1px 1px 1px 1px;border-color:#dee3ea;}.rtl .elementor-6827 .elementor-element.elementor-element-42e5fb2 .shopengine-checkout-form-additional .form-row .input-text{border-width:1px 1px 1px 1px;}.elementor-6827 .elementor-element.elementor-element-42e5fb2 .shopengine-checkout-form-additional .form-row .input-text:focus{border-color:#dee3ea;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment .wc_payment_method label{color:#3A3A3A !important;font-size:14px;font-weight:600;line-height:17px;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment a{color:#4169E1;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment a:hover{color:#3A3A3A;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment #payment .payment_methods .payment_box{color:#979797;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment #payment .payment_methods .payment_box p{color:#979797;padding:13px 0px 0px 0px !important;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment #payment .payment_methods .payment_box a{color:#979797;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment #payment .woocommerce-privacy-policy-text p{color:#979797;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment #payment :is(.payment_box, .woocommerce-terms-and-conditions-wrapper, .payment_method_paypal) :is(p){font-size:13px;font-weight:400;line-height:16px;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment #payment .wc_payment_method input[type="radio"]{accent-color:#000;transform:translateY(0px);margin:0px 8px 0px 0px;}.rtl .elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment #payment .wc_payment_method input[type="radio"]{margin:0px 0px 0px 8px;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment #payment .payment_methods li{padding:10px 0px 10px 0px !important;}.rtl .elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment #payment .payment_methods li{padding:10px 0px 10px 0px !important;}.rtl .elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment #payment .payment_methods .payment_box p{padding:13px 0px 0px 0px !important;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .woocommerce-form__label-for-checkbox .woocommerce-terms-and-conditions-checkbox-text{color:#3A3A3A !important;font-size:14px;font-weight:600;line-height:17px;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine .woocommerce-terms-and-conditions-wrapper a{color:#3A3A3A !important;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .woocommerce-form__label-for-checkbox .woocommerce-form__input-checkbox{accent-color:#000;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment .woocommerce-terms-and-conditions-wrapper span a{font-size:14px;font-weight:600;line-height:17px;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .woocommerce-terms-and-conditions-wrapper{margin:0px 8px 0px 0px;}.rtl .elementor-6827 .elementor-element.elementor-element-9c37e1d .woocommerce-terms-and-conditions-wrapper{margin:0px 0px 0px 8px;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment .form-row.place-order{grid-template-columns:100%;grid-gap:20px 0;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment #payment #place_order{padding:15px 21px 15px 21px !important;border-style:solid;border-width:1px 1px 1px 1px;border-radius:3px 3px 3px 3px !important;font-size:15px;font-weight:500;text-decoration:none;color:#ffffff;background:#3A3A3A;}.rtl .elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment #payment #place_order{padding:15px 21px 15px 21px !important;border-width:1px 1px 1px 1px;border-radius:3px 3px 3px 3px !important;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment #payment #place_order:hover{color:#ffffff;background:#101010;}.elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment #payment .form-row.place-order{margin:10px 0px 0px 0px !important;}.rtl .elementor-6827 .elementor-element.elementor-element-9c37e1d .shopengine-checkout-payment #payment .form-row.place-order{margin:10px 0px 0px 0px !important;}.elementor-6827 .elementor-element.elementor-element-0545428{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6827 .elementor-element.elementor-element-207a181{padding:4rem 2rem 4rem 2rem;}/* Start custom CSS for container, class: .elementor-element-d256604 *//* ✅ Woo/ShopEngine Checkout im DOM lassen, aber visuell verstecken */
.wf-hide-native-checkout{
  position: absolute !important;
  left: -99999px !important;
  top: 0 !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ❌ WICHTIG: KEIN max-width / display / visibility auf Kindern! *//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-207a181 *//* =========================================================
   WEBFIRE – Checkout (wf-checkout-page)
   Drop-in CSS (scoped)
   - Layout: 2-col Desktop, 1-col Mobile
   - Cards: Webfire Dark Premium
   - Neutral focus (no orange ring)
   - Works with Woo blocks moved via JS mounts
========================================================= */

:root{
  --wf-bg:#020617;
  --wf-card-bg:#111827;

  --wf-border: rgba(148,163,184,.32);
  --wf-border-soft: rgba(148,163,184,.18);

  --wf-panel: rgba(15,23,42,.55);
  --wf-panel2: rgba(15,23,42,.75);

  --wf-text: rgba(249,250,251,.92);
  --wf-muted: rgba(156,163,175,.95);
  --wf-muted2: rgba(156,163,175,.75);

  --wf-accent:#e05f00;
  --wf-accent-grad: linear-gradient(120deg,#f97316,#fb923c,#fed7aa);

  --wf-r: 18px;
  --wf-shadow-outer: 0 28px 80px rgba(0,0,0,.70), 0 0 0 1px rgba(0,0,0,.35);
  --wf-shadow-card:  0 14px 38px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}

/* Wrapper */
.wf-checkout-page{
  color: var(--wf-text);
  border-radius: calc(var(--wf-r) + 6px);
  border: 1px solid var(--wf-border-soft);
  background:
    radial-gradient(circle at 0 0, rgba(148,163,184,.08), transparent 55%),
    radial-gradient(circle at 100% 20%, rgba(2,6,23,1), rgba(2,6,23,1) 55%, rgba(0,0,0,.92));
  box-shadow: var(--wf-shadow-outer);
  padding: 28px 22px;
}

.wf-checkout-page *{ box-sizing:border-box; }
.wf-checkout-page a, .wf-checkout-page a:hover, .wf-checkout-page a:visited{ color:inherit; }
.wf-checkout-page svg{ max-width:100%; height:auto; }

/* Header */
.wf-checkout-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin: 6px 0 18px;
}
.wf-checkout-title{
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.wf-checkout-sub{
  margin-top: 8px;
  font-size: 14px;
  color: var(--wf-muted2);
  max-width: 72ch;
}
.wf-checkout-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.wf-checkout-chip,
.wf-checkout-chip:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.42rem 1.05rem;
  border-radius:999px;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  text-decoration:none;

  background: var(--wf-accent-grad);
  color:#0b1120;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 0 1.2em -0.6em rgba(15,23,42,.85);
  transition: filter .18s ease, transform .18s ease;
}
.wf-checkout-chip:hover{ filter:brightness(1.03); transform: translateY(-1px); }

.wf-checkout-chip--ghost{
  background: rgba(15,23,42,.55);
  color: rgba(249,250,251,.92);
  border: 1px solid rgba(148,163,184,.28);
  box-shadow: none;
  text-transform:none;
  letter-spacing:.02em;
  font-weight: 900;
}

/* Layout Grid */
.wf-checkout-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .95fr);
  gap: 14px;
  align-items:start;
}
.wf-checkout-col{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.wf-checkout-aside{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Card */
.wf-checkout-card{
  position: relative;
  border-radius: var(--wf-r);
  border: 1px solid var(--wf-border);
  background: var(--wf-card-bg);
  box-shadow: var(--wf-shadow-card);
  padding: 18px 18px 16px;
  overflow:hidden;
}
.wf-checkout-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(650px 220px at 10% 0%, rgba(148,163,184,.06), transparent 55%);
  pointer-events:none;
}
.wf-checkout-card--soft{
  background: rgba(17,24,39,.75);
}
.wf-checkout-card--divider .wf-checkout-cta{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(148,163,184,.18);
}

/* Card top */
.wf-checkout-card-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom: 12px;
}

/* Icon box */
.wf-checkout-page .wf-ic{
  width: 42px;
  height: 42px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(15,23,42,.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.wf-checkout-page .wf-ic svg{
  width: 22px;
  height: 22px;
  color: rgba(255,255,255,.88);
  stroke: rgba(255,255,255,.88);
}

.wf-checkout-cardtitle{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -.01em;
}
.wf-checkout-cardsub{
  margin-top:2px;
  font-size: 14px;
  color: var(--wf-muted2);
}

/* Mount */
.wf-checkout-mount{
  position:relative;
  z-index:1;
  width:100%;
}

/* Primary button */
.wf-checkout-page .wf-btn-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: var(--wf-accent-grad);
  color:#0b1120;
  font-weight:900;
  font-size:14px;
  letter-spacing:.02em;
  cursor:pointer;
  width:100%;
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 0 1.2em -0.6em rgba(15,23,42,.85);
  transition: filter .18s ease, transform .18s ease;
}
.wf-checkout-page .wf-btn-submit:hover{
  filter: brightness(1.04);
  transform: translateY(-1px);
  color:#ffffff;
}
.wf-checkout-page .wf-btn-submit:disabled{
  opacity:.7;
  cursor:not-allowed;
  transform:none;
}

/* Help text */
.wf-checkout-page .wf-help{
  margin-top: 10px;
  font-size: 12px;
  color: var(--wf-muted2);
  line-height: 1.5;
}

/* =========================
   WooCommerce element smoothing inside mounts
========================= */

/* Remove Woo default margins that create “random height” */
.wf-checkout-page .woocommerce form.checkout,
.wf-checkout-page .woocommerce-checkout{
  margin: 0 !important;
}

/* Inputs */
.wf-checkout-page .woocommerce input.input-text,
.wf-checkout-page .woocommerce textarea.input-text,
.wf-checkout-page .woocommerce select,
.wf-checkout-page .select2-container .select2-selection{
  width:100% !important;
  background: rgba(15,23,42,.65) !important;
  border: 1px solid rgba(148,163,184,.32) !important;
  border-radius: 14px !important;
  color: rgba(249,250,251,.92) !important;
  font-size: 14px !important;
  outline: none !important;
}

/* Heights */
.wf-checkout-page .woocommerce input.input-text,
.wf-checkout-page .woocommerce select,
.wf-checkout-page .select2-container .select2-selection{
  min-height: 48px !important;
  padding: 10px 14px !important;
}
.wf-checkout-page .woocommerce textarea.input-text{
  min-height: 140px !important;
  padding: 12px 14px !important;
  line-height: 1.55 !important;
}

/* Neutral focus */
.wf-checkout-page .woocommerce input.input-text:focus,
.wf-checkout-page .woocommerce textarea.input-text:focus,
.wf-checkout-page .woocommerce select:focus,
.wf-checkout-page .select2-container--default.select2-container--focus .select2-selection{
  box-shadow:none !important;
  border-color: rgba(148,163,184,.55) !important;
  background: rgba(15,23,42,.70) !important;
}

/* Labels */
.wf-checkout-page .woocommerce form .form-row label{
  font-size: 13px !important;
  font-weight: 900 !important;
  color: rgba(156,163,175,.95) !important;
  margin-bottom: 8px !important;
}

/* Form rows spacing */
.wf-checkout-page .woocommerce form .form-row{
  margin: 0 0 14px !important;
}

/* Order review table */
.wf-checkout-page .woocommerce-checkout-review-order-table{
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 6px 0 0 !important;
}
.wf-checkout-page .woocommerce-checkout-review-order-table th,
.wf-checkout-page .woocommerce-checkout-review-order-table td{
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(148,163,184,.18) !important;
  color: rgba(249,250,251,.92) !important;
}
.wf-checkout-page .woocommerce-checkout-review-order-table th{
  color: rgba(156,163,175,.95) !important;
  font-weight: 900 !important;
}

/* Payment box */
.wf-checkout-page #payment,
.wf-checkout-page .woocommerce-checkout-payment{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.wf-checkout-page #payment ul.payment_methods{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.wf-checkout-page #payment ul.payment_methods li{
  border: 1px solid rgba(148,163,184,.24) !important;
  background: rgba(15,23,42,.55) !important;
  border-radius: 14px !important;
  padding: 12px 12px !important;
  margin-bottom: 10px !important;
}
.wf-checkout-page #payment .payment_box{
  background: rgba(15,23,42,.65) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  border-radius: 14px !important;
  margin-top: 10px !important;
  color: rgba(249,250,251,.92) !important;
}

/* Hide Woo place order button (we use proxy button) */
.wf-checkout-page #place_order,
.wf-checkout-page button[name="woocommerce_checkout_place_order"]{
  display:none !important;
}

/* =========================
   Responsive
========================= */
@media (max-width: 1024px){
  .wf-checkout-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .wf-checkout-page{
    padding: 22px 16px;
    border-radius: calc(var(--wf-r) + 2px);
  }
  .wf-checkout-head{
    flex-direction:column;
    align-items:stretch;
    gap: 12px;
  }
  .wf-checkout-actions{
    justify-content:flex-start;
    width:100%;
  }
  .wf-checkout-chip{
    width:100%;
  }
}

/* =========================================================
   WF CHECKOUT – INPUTS FORCE DARK (NUCLEAR DROP-IN)
   -> komplett ans ENDE deines Checkout-CSS
========================================================= */

/* 0) Reset: nix darf weiß sein */
#wfCheckout,
#wfCheckout *{
  --wf-inp-bg: rgba(15,23,42,.75);
  --wf-inp-bd: rgba(148,163,184,.35);
  --wf-inp-tx: rgba(249,250,251,.92);
}

/* 1) Alles was irgendwie ein Feld sein kann */
#wfCheckout input,
#wfCheckout select,
#wfCheckout textarea{
  background-color: var(--wf-inp-bg) !important;
  color: var(--wf-inp-tx) !important;
  border-color: var(--wf-inp-bd) !important;
}

/* 2) Woo + ShopEngine typische Selektoren */
#wfCheckout .woocommerce input.input-text,
#wfCheckout .woocommerce textarea,
#wfCheckout .woocommerce select,
#wfCheckout .woocommerce form .form-row input.input-text,
#wfCheckout .woocommerce form .form-row textarea,
#wfCheckout .woocommerce form .form-row select,
#wfCheckout .shopengine input,
#wfCheckout .shopengine textarea,
#wfCheckout .shopengine select,
#wfCheckout .shopengine-checkout input,
#wfCheckout .shopengine-checkout textarea,
#wfCheckout .shopengine-checkout select,
#wfCheckout .elementor-widget-container input,
#wfCheckout .elementor-widget-container textarea,
#wfCheckout .elementor-widget-container select{
  width: 100% !important;
  background: var(--wf-inp-bg) !important;
  background-color: var(--wf-inp-bg) !important;
  color: var(--wf-inp-tx) !important;

  border: 1px solid var(--wf-inp-bd) !important;
  border-radius: 14px !important;

  padding: 14px 16px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;

  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* 3) Placeholder */
#wfCheckout input::placeholder,
#wfCheckout textarea::placeholder{
  color: rgba(156,163,175,.65) !important;
  opacity: 1 !important;
}

/* 4) Focus */
#wfCheckout input:focus,
#wfCheckout textarea:focus,
#wfCheckout select:focus{
  border-color: rgba(224,95,0,.65) !important;
  box-shadow: 0 0 0 2px rgba(224,95,0,.22) !important;
  background: rgba(15,23,42,.90) !important;
}

/* 5) Autofill DARK (Chrome/Edge/Safari) */
#wfCheckout input:-webkit-autofill,
#wfCheckout input:-webkit-autofill:hover,
#wfCheckout input:-webkit-autofill:focus,
#wfCheckout textarea:-webkit-autofill,
#wfCheckout textarea:-webkit-autofill:hover,
#wfCheckout textarea:-webkit-autofill:focus,
#wfCheckout select:-webkit-autofill,
#wfCheckout select:-webkit-autofill:hover,
#wfCheckout select:-webkit-autofill:focus{
  -webkit-text-fill-color: rgba(249,250,251,.92) !important;
  caret-color: rgba(249,250,251,.92) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(15,23,42,.75) inset !important;
  box-shadow: 0 0 0 1000px rgba(15,23,42,.75) inset !important;
  border: 1px solid rgba(148,163,184,.35) !important;
}

/* 6) Labels + required Stern */
#wfCheckout .woocommerce form .form-row label,
#wfCheckout label{
  color: rgba(249,250,251,.86) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
}
#wfCheckout .required{ color: #ff6b3d !important; }

/* 7) Select Pfeil */
#wfCheckout select{
  padding-right: 42px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(249,250,251,.75) 50%),
    linear-gradient(135deg, rgba(249,250,251,.75) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px) !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}

/* 8) Spacing in Woo Rows */
#wfCheckout .woocommerce form .form-row{
  margin: 0 0 18px !important;
}

/* 9) Stripe iframe NICHT anfassen (nur Container) */
#wfCheckout .payment_box iframe,
#wfCheckout .wc-stripe-elements-field,
#wfCheckout .StripeElement{
  background: transparent !important;
}/* =========================================================
   WF CHECKOUT – INPUTS FORCE DARK (NUCLEAR DROP-IN)
   -> komplett ans ENDE deines Checkout-CSS
========================================================= */

/* 0) Reset: nix darf weiß sein */
#wfCheckout,
#wfCheckout *{
  --wf-inp-bg: rgba(15,23,42,.75);
  --wf-inp-bd: rgba(148,163,184,.35);
  --wf-inp-tx: rgba(249,250,251,.92);
}

/* 1) Alles was irgendwie ein Feld sein kann */
#wfCheckout input,
#wfCheckout select,
#wfCheckout textarea{
  background-color: var(--wf-inp-bg) !important;
  color: var(--wf-inp-tx) !important;
  border-color: var(--wf-inp-bd) !important;
}

/* 2) Woo + ShopEngine typische Selektoren */
#wfCheckout .woocommerce input.input-text,
#wfCheckout .woocommerce textarea,
#wfCheckout .woocommerce select,
#wfCheckout .woocommerce form .form-row input.input-text,
#wfCheckout .woocommerce form .form-row textarea,
#wfCheckout .woocommerce form .form-row select,
#wfCheckout .shopengine input,
#wfCheckout .shopengine textarea,
#wfCheckout .shopengine select,
#wfCheckout .shopengine-checkout input,
#wfCheckout .shopengine-checkout textarea,
#wfCheckout .shopengine-checkout select,
#wfCheckout .elementor-widget-container input,
#wfCheckout .elementor-widget-container textarea,
#wfCheckout .elementor-widget-container select{
  width: 100% !important;
  background: var(--wf-inp-bg) !important;
  background-color: var(--wf-inp-bg) !important;
  color: var(--wf-inp-tx) !important;

  border: 1px solid var(--wf-inp-bd) !important;
  border-radius: 14px !important;

  padding: 14px 16px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;

  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* 3) Placeholder */
#wfCheckout input::placeholder,
#wfCheckout textarea::placeholder{
  color: rgba(156,163,175,.65) !important;
  opacity: 1 !important;
}

/* 4) Focus */
#wfCheckout input:focus,
#wfCheckout textarea:focus,
#wfCheckout select:focus{
  border-color: rgba(224,95,0,.65) !important;
  box-shadow: 0 0 0 2px rgba(224,95,0,.22) !important;
  background: rgba(15,23,42,.90) !important;
}

/* 5) Autofill DARK (Chrome/Edge/Safari) */
#wfCheckout input:-webkit-autofill,
#wfCheckout input:-webkit-autofill:hover,
#wfCheckout input:-webkit-autofill:focus,
#wfCheckout textarea:-webkit-autofill,
#wfCheckout textarea:-webkit-autofill:hover,
#wfCheckout textarea:-webkit-autofill:focus,
#wfCheckout select:-webkit-autofill,
#wfCheckout select:-webkit-autofill:hover,
#wfCheckout select:-webkit-autofill:focus{
  -webkit-text-fill-color: rgba(249,250,251,.92) !important;
  caret-color: rgba(249,250,251,.92) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(15,23,42,.75) inset !important;
  box-shadow: 0 0 0 1000px rgba(15,23,42,.75) inset !important;
  border: 1px solid rgba(148,163,184,.35) !important;
}

/* 6) Labels + required Stern */
#wfCheckout .woocommerce form .form-row label,
#wfCheckout label{
  color: rgba(249,250,251,.86) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
}
#wfCheckout .required{ color: #ff6b3d !important; }

/* 7) Select Pfeil */
#wfCheckout select{
  padding-right: 42px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(249,250,251,.75) 50%),
    linear-gradient(135deg, rgba(249,250,251,.75) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px) !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}

/* 8) Spacing in Woo Rows */
#wfCheckout .woocommerce form .form-row{
  margin: 0 0 18px !important;
}

/* 9) Stripe iframe NICHT anfassen (nur Container) */
#wfCheckout .payment_box iframe,
#wfCheckout .wc-stripe-elements-field,
#wfCheckout .StripeElement{
  background: transparent !important;
}

/* =========================================================
   WF CHECKOUT – Focus nur subtil (kein Blau + kein Doppelring)
   + Stripe/Payment Rahmen clean (kein weißer Kasten)
   -> ganz ans ENDE
========================================================= */

/* 1) ALLES: kein Browser-Outline (blau) */
#wfCheckout input:focus,
#wfCheckout textarea:focus,
#wfCheckout select:focus,
#wfCheckout input:focus-visible,
#wfCheckout textarea:focus-visible,
#wfCheckout select:focus-visible,
#wfCheckout button:focus,
#wfCheckout button:focus-visible,
#wfCheckout a:focus,
#wfCheckout a:focus-visible{
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* 2) Subtiler Fokus NUR EINMAL (dezent) */
#wfCheckout input:focus,
#wfCheckout textarea:focus,
#wfCheckout select:focus{
  border-color: rgba(148,163,184,.60) !important; /* neutral/subtil */
  box-shadow: 0 0 0 2px rgba(148,163,184,.18) !important; /* sehr soft */
  background: rgba(15,23,42,.88) !important;
}

/* Optional: wenn du GAR KEINEN Ring willst, nur Border:
#wfCheckout input:focus,
#wfCheckout textarea:focus,
#wfCheckout select:focus{
  box-shadow: none !important;
  border-color: rgba(148,163,184,.65) !important;
}
*/

/* 3) STRIPE / PAYMENT: weißen Rahmen killen (Wrapper + Payment Box) */
#wfCheckout #payment,
#wfCheckout .woocommerce-checkout-payment,
#wfCheckout .payment_box,
#wfCheckout .wc_payment_methods,
#wfCheckout .wc_payment_method,
#wfCheckout .wc_payment_method > label,
#wfCheckout .wc-stripe-elements-field,
#wfCheckout .wc-stripe-iban-element-field,
#wfCheckout .wc-stripe-payment-request-wrapper,
#wfCheckout .stripe-card-group,
#wfCheckout .StripeElement,
#wfCheckout .stripe-source-errors{
  background: transparent !important;
  border-color: rgba(148,163,184,.28) !important;
  box-shadow: none !important;
}

/* 4) Spezifisch: Woo/Stripe packt oft eine helle Border um die Card Box */
#wfCheckout .payment_box,
#wfCheckout .woocommerce-checkout-payment{
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: 14px !important;
  padding: 14px !important;
}

/* 5) Falls irgendwo explizit weiß gesetzt wird */
#wfCheckout [style*="border: 1px solid"],
#wfCheckout [style*="border-color: #fff"],
#wfCheckout [style*="border-color: rgb(255"]{
  border-color: rgba(148,163,184,.22) !important;
}

/* 6) Iframe selbst: keine eigene Border (falls vorhanden) */
#wfCheckout iframe{
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* WF – Stripe UPE Wrapper: kein weißer Rahmen außen */
#wfCheckout #wc-stripe-upe-form,
#wfCheckout fieldset#wc-stripe-upe-form.wc-upe-form,
#wfCheckout .wc-stripe-upe-form,
#wfCheckout .wc-upe-form,
#wfCheckout .wc-stripe-upe-element,
#wfCheckout .wc-payment-form{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Iframe selber (außen) */
#wfCheckout #wc-stripe-upe-form iframe{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#wfCheckout #wc-stripe-upe-form *::before,
#wfCheckout #wc-stripe-upe-form *::after{
  box-shadow: none !important;
}

/* WF – Stripe Save-Checkbox: Fieldset-Rand killen */
#wfCheckout #wc-stripe-upe-form fieldset{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

/* Falls der Rand über legend/pseudo kommt */
#wfCheckout #wc-stripe-upe-form fieldset legend{
  display: none !important;
}
#wfCheckout #wc-stripe-upe-form fieldset::before,
#wfCheckout #wc-stripe-upe-form fieldset::after{
  content: none !important;
  display: none !important;
}

/* Checkbox-Zeile sauber (kein eigener Rahmen) */
#wfCheckout #wc-stripe-upe-form .woocommerce-SavedPaymentMethods-saveNew{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 10px 0 0 !important;
  padding: 10px 12px !important;          /* optional: Webfire spacing */
  border-radius: 14px !important;         /* optional */
  background: rgba(15,23,42,.35) !important; /* optional */
}

/* Label darf keinen Rahmen bekommen */
#wfCheckout #wc-stripe-upe-form .woocommerce-SavedPaymentMethods-saveNew label{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#wfCheckout #wc-stripe-upe-form fieldset:focus,
#wfCheckout #wc-stripe-upe-form fieldset:focus-within,
#wfCheckout #wc-stripe-upe-form .woocommerce-SavedPaymentMethods-saveNew:focus-within{
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
   WF – Checkout Payment: alle weißen Rahmen killen (scoped)
   -> GANZ UNTEN einfügen
========================================================= */

/* 0) Sicherheitsnetz: keine outlines */
#wfCheckout #payment,
#wfCheckout #payment *{
  outline: none !important;
}

/* 1) Häufigste Übeltäter in Woo Payment */
#wfCheckout #payment,
#wfCheckout #payment .woocommerce-checkout-payment,
#wfCheckout #payment .wc_payment_methods,
#wfCheckout #payment ul.wc_payment_methods,
#wfCheckout #payment ul.wc_payment_methods li,
#wfCheckout #payment .wc_payment_method,
#wfCheckout #payment .payment_box,
#wfCheckout #payment fieldset,
#wfCheckout #payment .form-row{
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-image: none !important;

  box-shadow: none !important;
  background: transparent !important;
}

/* 2) Manche Themes zeichnen Linien über ::before/::after */
#wfCheckout #payment *::before,
#wfCheckout #payment *::after{
  box-shadow: none !important;
  border: 0 !important;
}

/* 3) UL/LIs haben manchmal Default-Padding/Background + "Box" */
#wfCheckout #payment ul.wc_payment_methods{
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  background: transparent !important;
}
#wfCheckout #payment ul.wc_payment_methods > li{
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* 4) Speziell Stripe save-new fieldset/p-row (falls der "Rahmen" hier sitzt) */
#wfCheckout #payment .woocommerce-SavedPaymentMethods,
#wfCheckout #payment .woocommerce-SavedPaymentMethods-saveNew,
#wfCheckout #payment .woocommerce-SavedPaymentMethods-saveNew fieldset,
#wfCheckout #payment .woocommerce-SavedPaymentMethods-saveNew p{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 5) Wenn du trotzdem eine saubere WF-Fläche willst (OHNE Rand) */
#wfCheckout #payment .woocommerce-SavedPaymentMethods-saveNew{
  margin-top: 10px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(15,23,42,.35) !important;
}

/* =========================================================
   WF CHECKOUT – Icon Styling (Phosphor/FILL Icons)
   Drop-in Add-On
   - macht eure neuen SVGs automatisch "theme-proof"
   - sorgt für korrekte Größe/Centering
   - Fill wird weiß, kein schwarzes #000 mehr sichtbar
========================================================= */

/* Icon-Box (falls noch nicht vorhanden/überschrieben) */
#wfCheckout .wf-ic{
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.40);
  background: rgba(15,23,42,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 24px rgba(0,0,0,.35);
  overflow: hidden;
}

/* Kill theme pseudo elements */
#wfCheckout .wf-ic::before,
#wfCheckout .wf-ic::after{
  content: none !important;
  display: none !important;
}

/* SVG bulletproof */
#wfCheckout .wf-ic svg{
  display: block !important;
  visibility: visible !important;
  width: 32px !important;
  height: 32px !important;

  /* wichtig für deine SVGs mit fill="#000000" */
  fill: rgba(255,255,255,.92) !important;
  color: rgba(255,255,255,.92) !important;
  stroke: none !important;
  opacity: 1 !important;
}

/* manche Themes setzen fill/stroke auf children */
#wfCheckout .wf-ic svg *{
  fill: rgba(255,255,255,.92) !important;
  stroke: none !important;
  opacity: 1 !important;
}

/* Mobile: Icon minimal kleiner */
@media (max-width: 640px){
  #wfCheckout .wf-ic{
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }
  #wfCheckout .wf-ic svg{
    width: 30px !important;
    height: 30px !important;
  }
}

/* =========================================================
   WF – Select2 (Land / Bundesland)
========================================================= */

/* Hauptfeld */
#wfCheckout .select2-container--default .select2-selection--single{
  height: 52px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148,163,184,.35) !important;
  background: rgba(15,23,42,.65) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  box-shadow: none !important;
  transition: border .2s ease, box-shadow .2s ease;
}

/* Text */
#wfCheckout .select2-container--default .select2-selection__rendered{
  color: rgba(249,250,251,.92) !important;
  line-height: normal !important;
  padding: 0 !important;
}

/* Pfeil */
#wfCheckout .select2-container--default .select2-selection__arrow b{
  border-color: rgba(156,163,175,.7) transparent transparent transparent !important;
}

/* Fokus */
#wfCheckout .select2-container--default.select2-container--focus .select2-selection--single{
  border-color: rgba(224,95,0,.6) !important;
  box-shadow: 0 0 0 2px rgba(224,95,0,.15) !important;
}

/* Dropdown Container */
#wfCheckout .select2-dropdown{
  background: #0f172a !important;
  border: 1px solid rgba(148,163,184,.25) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.6) !important;
  overflow: hidden !important;
}

/* Optionen */
#wfCheckout .select2-results__option{
  padding: 10px 14px !important;
  color: rgba(249,250,251,.9) !important;
  background: transparent !important;
}

/* Hover */
#wfCheckout .select2-results__option--highlighted{
  background: rgba(224,95,0,.15) !important;
  color: #fff !important;
}

/* Ausgewählt */
#wfCheckout .select2-results__option[aria-selected="true"]{
  background: rgba(224,95,0,.25) !important;
  color: #fff !important;
}

/* =========================================================
   WF – Checkout Select2 (Land/Region + Bundesland)
   Wichtig: Select2-Dropdown wird an <body> angehängt,
   daher NICHT über #wfCheckout scopen, sondern über body.
========================================================= */

/* Scope: nur Checkout (Woo setzt body class) */
body.woocommerce-checkout .select2-container{
  font-family: inherit;
}

/* ========== Closed Select (sichtbares Feld) ========== */
body.woocommerce-checkout .select2-container--default .select2-selection--single{
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 14px !important;

  border: 1px solid rgba(148,163,184,.35) !important;
  background: rgba(15,23,42,.65) !important;

  display:flex !important;
  align-items:center !important;

  padding: 0 14px !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Text im Feld */
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: rgba(249,250,251,.92) !important;
  padding-left: 0 !important;
  line-height: 1.1 !important;
}

/* Placeholder */
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder{
  color: rgba(156,163,175,.75) !important;
}

/* Pfeil */
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 52px !important;
  right: 10px !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color: rgba(156,163,175,.75) transparent transparent transparent !important;
}

/* Fokus (subtil, kein blau/orange Doppelring) */
body.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
body.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single{
  border-color: rgba(148,163,184,.55) !important;
  box-shadow: 0 0 0 2px rgba(224,95,0,.12) !important;
}

/* ========== Open Dropdown (Liste) ========== */
body.woocommerce-checkout .select2-container--open .select2-dropdown{
  background: #0b1222 !important;
  border: 1px solid rgba(148,163,184,.25) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.65) !important;
  overflow: hidden !important;
}

/* Suchfeld oben */
body.woocommerce-checkout .select2-search--dropdown{
  padding: 10px !important;
  background: transparent !important;
}
body.woocommerce-checkout .select2-search--dropdown .select2-search__field{
  width: 100% !important;
  background: rgba(15,23,42,.75) !important;
  border: 1px solid rgba(148,163,184,.30) !important;
  border-radius: 12px !important;
  color: rgba(249,250,251,.92) !important;
  padding: 10px 12px !important;
  outline: none !important;
  box-shadow: none !important;
}
body.woocommerce-checkout .select2-search--dropdown .select2-search__field:focus{
  border-color: rgba(148,163,184,.55) !important;
  box-shadow: 0 0 0 2px rgba(224,95,0,.12) !important;
}

/* Options */
body.woocommerce-checkout .select2-results__option{
  padding: 10px 14px !important;
  color: rgba(249,250,251,.90) !important;
  background: transparent !important;
}

/* Hover/Active */
body.woocommerce-checkout .select2-results__option--highlighted{
  background: rgba(224,95,0,.16) !important;
  color: rgba(249,250,251,.96) !important;
}

/* Selected */
body.woocommerce-checkout .select2-results__option[aria-selected="true"]{
  background: rgba(224,95,0,.22) !important;
  color: rgba(249,250,251,.96) !important;
}

/* Divider-Linie unter dem Suchfeld killen (falls Theme eine setzt) */
body.woocommerce-checkout .select2-dropdown .select2-results{
  border-top: 0 !important;
}

/* =========================================================
   WF – Checkout Select2 Scrollbar
========================================================= */

/* Chrome / Edge / Safari */
body.woocommerce-checkout .select2-results__options::-webkit-scrollbar{
  width: 10px;
}

body.woocommerce-checkout .select2-results__options::-webkit-scrollbar-track{
  background: rgba(15,23,42,.6);
  border-radius: 10px;
}

body.woocommerce-checkout .select2-results__options::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.45);
  border-radius: 10px;
  border: 2px solid rgba(15,23,42,.6);
}

body.woocommerce-checkout .select2-results__options::-webkit-scrollbar-thumb:hover{
  background: rgba(224,95,0,.6);
}

/* Firefox */
body.woocommerce-checkout .select2-results__options{
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.45) rgba(15,23,42,.6);
}

/* ==============================
   WF Mobile Checkout Steps
================================= */

@media (max-width: 768px){

  /* Standard: alles verstecken */
  .wf-step{
    display:none;
  }

  /* Aktiver Step sichtbar */
  .wf-step.is-active{
    display:block;
  }

  /* Step Navigation Button */
  .wf-step-next{
    margin-top:16px;
    width:100%;
    padding:14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background: linear-gradient(120deg,#f97316,#fb923c,#fed7aa);
    font-weight:900;
    color:#0b1120;
    cursor:pointer;
  }

}

/* =========================================================
   WF CHECKOUT – MOBILE STEPPER (oben)
   benötigt: .wf-stepper + .wf-stepper__btn im DOM
========================================================= */
@media (max-width: 900px){
  #wfCheckout .wf-stepper{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0 16px;
  }

  /* 3. Button auf volle Breite (Übersicht) */
  #wfCheckout .wf-stepper .wf-stepper__btn:nth-child(3){
    grid-column: 1 / -1;
  }

  #wfCheckout .wf-stepper__btn{
    appearance:none;
    -webkit-appearance:none;
    border: 1px solid rgba(148,163,184,.25) !important;
    background: rgba(15,23,42,.55) !important;
    color: rgba(249,250,251,.92) !important;

    border-radius: 14px !important;
    padding: 12px 12px !important;
    min-height: 54px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap: 3px !important;

    text-align:left !important;
    cursor:pointer !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03),
      0 10px 24px rgba(0,0,0,.28) !important;

    transition: transform .15s ease, filter .15s ease, border-color .15s ease;
  }

  #wfCheckout .wf-stepper__kicker{
    font-size: 11px !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    opacity: .75 !important;
    line-height: 1.1 !important;
  }

  #wfCheckout .wf-stepper__label{
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    line-height: 1.1 !important;
  }

  #wfCheckout .wf-stepper__btn.is-active{
    border-color: rgba(249,115,22,.60) !important;
    background:
      radial-gradient(220px 80px at 10% 0%, rgba(249,115,22,.20), transparent 60%),
      rgba(15,23,42,.70) !important;
    transform: translateY(-1px);
    box-shadow:
      0 14px 34px rgba(0,0,0,.38),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  #wfCheckout .wf-stepper__btn:focus,
  #wfCheckout .wf-stepper__btn:focus-visible{
    outline:none !important;
    box-shadow:
      0 0 0 2px rgba(249,115,22,.14),
      0 12px 28px rgba(0,0,0,.35) !important;
  }
}

/* =========================================================
   WF CHECKOUT – MOBILE NAV (Weiter/Zurück Buttons unten)
   JS erstellt: .wf-mob-nav, .wf-mob-nav__back, .wf-mob-nav__next
========================================================= */
@media (max-width: 900px){

  #wfCheckout .wf-mob-nav{
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(148,163,184,.18);
  }

  #wfCheckout .wf-mob-nav__row{
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items:center;
  }

  /* ab Step 2 gibt's Zurück + Weiter nebeneinander */
  #wfCheckout .wf-mob-nav__row:has(.wf-mob-nav__back){
    grid-template-columns: .95fr 1.05fr;
  }

  /* Safari fallback (falls :has() nicht greift) */
  #wfCheckout .wf-mob-nav__back{
    display:inline-flex;
  }
  #wfCheckout .wf-mob-nav__back + .wf-mob-nav__next{
    width:100%;
  }

  #wfCheckout .wf-mob-nav__back,
  #wfCheckout .wf-mob-nav__next{
    appearance:none;
    -webkit-appearance:none;
    border-radius: 14px;
    min-height: 54px;
    padding: 12px 14px;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: .01em;
    cursor:pointer;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 10px;

    outline:none !important;
    box-shadow: none;
    border: 1px solid rgba(148,163,184,.28);
    transition: transform .15s ease, filter .15s ease, border-color .15s ease;
  }

  /* Zurück = ghost */
  #wfCheckout .wf-mob-nav__back{
    background: rgba(15,23,42,.55);
    color: rgba(249,250,251,.92);
  }

  /* Weiter = primary (wie dein Gradient) */
  #wfCheckout .wf-mob-nav__next{
    background: var(--wf-accent-grad);
    color: #0b1120;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow:
      0 10px 24px rgba(0,0,0,.35),
      inset 0 0 1.2em -0.6em rgba(15,23,42,.85);
  }

  #wfCheckout .wf-mob-nav__back:hover,
  #wfCheckout .wf-mob-nav__next:hover{
    filter: brightness(1.04);
    transform: translateY(-1px);
  }

  #wfCheckout .wf-mob-nav__back:active,
  #wfCheckout .wf-mob-nav__next:active{
    transform: translateY(0px);
  }

  #wfCheckout .wf-mob-nav__back:focus-visible,
  #wfCheckout .wf-mob-nav__next:focus-visible{
    box-shadow: 0 0 0 2px rgba(249,115,22,.14), 0 12px 28px rgba(0,0,0,.35);
  }

  #wfCheckout .wf-mob-nav__hint{
    margin-top: 8px;
    font-size: 12px;
    color: rgba(156,163,175,.75);
    text-align:center;
    line-height: 1.35;
  }
}

/* =========================================================
   WF CHECKOUT – MOBILE SPACING FIX
   (mehr Luft zwischen Cards & Nav)
========================================================= */
@media (max-width: 900px){

  /* Mehr Abstand zwischen einzelnen Cards */
  #wfCheckout .wf-step .wf-checkout-card{
    margin-bottom: 20px;
  }

  /* Letzte Card im Step nicht extra pushen */
  #wfCheckout .wf-step .wf-checkout-card:last-of-type{
    margin-bottom: 0;
  }

  /* Abstand zwischen Card-Inhalt und Step-Navigation */
  #wfCheckout .wf-mob-nav{
    margin-top: 22px;
    padding-top: 18px;
  }

  /* Optional: etwas mehr Innenabstand in Cards */
  #wfCheckout .wf-checkout-card{
    padding: 20px 18px 18px;
  }

  /* Mehr Abstand zwischen Titel und Formular */
  #wfCheckout .wf-checkout-card-top{
    margin-bottom: 16px;
  }

  /* Mehr Abstand zwischen Form-Feldern */
  #wfCheckout .woocommerce form .form-row{
    margin: 0 0 18px !important;
  }

  /* Etwas Luft über Konto / Additional Karten */
  #wfCheckout #wfAccountCard{
    margin-top: 6px;
  }

}

/* =========================================================
   WF CHECKOUT – VAT/TAX Row + Desktop Aside Order
   -> ANS ENDE anhängen
========================================================= */

/* ---------- 1) MwSt-Zeile (vom JS injected) ---------- */
#wfCheckout .wf-tax-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;

  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,.18);

  font-size: 13px;
  color: rgba(249,250,251,.92);
}

#wfCheckout .wf-tax-row span{
  color: rgba(156,163,175,.95);
  font-weight: 900;
  letter-spacing: -.01em;
}

#wfCheckout .wf-tax-row strong{
  font-weight: 950;
  color: rgba(249,250,251,.92);
  white-space: nowrap;
}

/* Optional: wenn du die MwSt-Zeile bewusst "muted" willst */
#wfCheckout .wf-tax-row.is-muted strong{
  color: rgba(156,163,175,.95);
}

/* ---------- 2) Woo Totals: spacing passt zu deiner UI ---------- */
/* Classic table totals */
#wfCheckout .woocommerce-checkout-review-order-table tfoot th,
#wfCheckout .woocommerce-checkout-review-order-table tfoot td{
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(148,163,184,.18) !important;
}

/* Gesamt (falls Woo eine "order-total" row rendert) */
#wfCheckout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
#wfCheckout .woocommerce-checkout-review-order-table tfoot tr.order-total td{
  padding-top: 12px !important;
  font-weight: 950 !important;
}

/* Blocks Order Summary (falls aktiv) */
#wfCheckout .wc-block-components-order-summary-item,
#wfCheckout .wc-block-components-totals-item{
  border-color: rgba(148,163,184,.18) !important;
}
#wfCheckout .wc-block-components-totals-item__label{
  color: rgba(156,163,175,.95) !important;
  font-weight: 900 !important;
}
#wfCheckout .wc-block-components-totals-item__value{
  color: rgba(249,250,251,.92) !important;
  font-weight: 950 !important;
}

/* ---------- 3) Desktop: Bestellübersicht rechts ÜBER Zahlung ---------- */
/*
  Voraussetzung: deine HTML-Struktur ist:
  - .wf-checkout-col (links, Step 1)
  - .wf-checkout-aside (rechts, Step 2 / Zahlung)
  - Step 3 (Review) ist aktuell als dritte Grid-Child im selben Grid
  Wir ziehen Step 3 auf Desktop in die rechte Spalte nach oben.
*/
@media (min-width: 901px){
  /* Step 3 (Review) in rechte Spalte, ganz oben */
  #wfCheckout .wf-checkout-grid > .wf-step[data-step="3"]{
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  /* Step 2 (Payment) ebenfalls rechte Spalte, darunter */
  #wfCheckout .wf-checkout-grid > .wf-checkout-aside.wf-step[data-step="2"]{
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  /* Step 1 links bleibt links */
  #wfCheckout .wf-checkout-grid > .wf-checkout-col.wf-step[data-step="1"]{
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  /* Optional: rechte Spalte sticky (sieht sehr clean aus) */
  #wfCheckout .wf-checkout-grid > .wf-step[data-step="3"]{
    position: sticky;
    top: 18px;
  }
}

/* Mobile bleibt wie gehabt: JS Stepper zeigt jeweils nur den aktiven Step */

/* =========================================================
   WF CHECKOUT – AGB Checkbox (Drop-in)
========================================================= */

#wfCheckout .wf-checkout-legal{
  margin: 14px 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15,23,42,.45);
  border: 1px solid rgba(148,163,184,.22);
}

#wfCheckout .wf-checkout-legal__checkbox{
  display:flex;
  gap:10px;
  align-items:flex-start;
  cursor:pointer;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(249,250,251,.92);
}

#wfCheckout .wf-checkout-legal__checkbox input{
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: #f97316;
  cursor:pointer;
}

#wfCheckout .wf-checkout-legal__checkbox a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   WF CHECKOUT – FIXES (neutral focus + desktop order)
   -> ganz ans ENDE anhängen
========================================================= */

/* 1) Fokus wirklich neutral (überschreibt den orange Nuclear-Focus) */
#wfCheckout input:focus,
#wfCheckout textarea:focus,
#wfCheckout select:focus{
  border-color: rgba(148,163,184,.60) !important;
  box-shadow: 0 0 0 2px rgba(148,163,184,.18) !important;
  background: rgba(15,23,42,.88) !important;
}

/* 2) Desktop Reihenfolge: Zahlung (Step 2) oben, Bestellübersicht (Step 3) darunter */
@media (min-width: 901px){
  #wfCheckout .wf-checkout-grid > .wf-checkout-col.wf-step[data-step="1"]{
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  #wfCheckout .wf-checkout-grid > .wf-checkout-aside.wf-step[data-step="2"]{
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  #wfCheckout .wf-checkout-grid > .wf-step[data-step="3"]{
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    position: static; /* sticky aus, damit Reihenfolge klar bleibt */
    top: auto;
  }
}

#wfCheckout #wfCheckoutPlaceOrder.is-disabled{
  filter: grayscale(.2);
  opacity: .75;
}/* End custom CSS */