.elementor-34 .elementor-element.elementor-element-237dbdfd{--display:flex;}/* Start custom CSS for container, class: .elementor-element-237dbdfd *//* =========================================================
   Lieblingschat – WooCommerce Checkout (Kasse)
   Scope: .lc-checkout ODER body.woocommerce-checkout
   ========================================================= */

:where(.lc-checkout, body.woocommerce-checkout){
  --lc-bg-card:#22131a;
  --lc-panel:#2a1820;
  --lc-text:#ffffff;
  --lc-subtle:#e8d7df;
  --lc-accent:#e5adc6;
  --lc-accent-hover:#ecbdd1;
  --lc-bordeaux:#b54562;
  --lc-radius:16px;
  --lc-shadow:0 10px 26px rgba(0,0,0,.28);
  color:var(--lc-subtle);
}

/* ---------- Headline / Sektionstitel ---------- */
:where(.lc-checkout, body.woocommerce-checkout) .entry-title,
:where(.lc-checkout, body.woocommerce-checkout) h1,
:where(.lc-checkout, body.woocommerce-checkout) h3,
:where(.lc-checkout, body.woocommerce-checkout) legend{
  color:var(--lc-text);
  font-weight:900;
  letter-spacing:.2px;
}

/* ---------- Formular-Karten (links/rechts) ---------- */
:where(.lc-checkout, body.woocommerce-checkout) .col2-set .col-1,
:where(.lc-checkout, body.woocommerce-checkout) .col2-set .col-2{
  background:var(--lc-bg-card);
  color:var(--lc-subtle);
  border-radius:var(--lc-radius);
  box-shadow:var(--lc-shadow);
  padding:16px 18px;
}

/* ---------- Inputs / Textareas / Select ---------- */
:where(.lc-checkout, body.woocommerce-checkout) .woocommerce form .form-row input.input-text,
:where(.lc-checkout, body.woocommerce-checkout) .woocommerce form .form-row textarea,
:where(.lc-checkout, body.woocommerce-checkout) .woocommerce form .form-row select{
  background:var(--lc-panel); color:#fff; border:0; border-radius:12px;
  padding:10px 12px; outline:none; box-shadow:none;
}
:where(.lc-checkout, body.woocommerce-checkout) .woocommerce-additional-fields textarea{
  background:var(--lc-panel) !important; color:#fff !important;
}

/* ---------- Select2 – Höhe/Zeilenhöhe ---------- */
:where(.lc-checkout, body.woocommerce-checkout) .select2-container{ width:100% !important; }
:where(.lc-checkout, body.woocommerce-checkout) .select2-container .select2-selection--single{
  height:44px !important; background:var(--lc-panel) !important; border:0 !important;
  border-radius:12px !important;
}
:where(.lc-checkout, body.woocommerce-checkout)
.select2-container .select2-selection--single .select2-selection__rendered{
  color:#fff !important; line-height:44px !important; padding-left:12px !important;
}
:where(.lc-checkout, body.woocommerce-checkout)
.select2-container .select2-selection--single .select2-selection__arrow{
  height:44px !important; right:10px !important;
}

/* ---------- Gutschein-Hinweis & Formular ---------- */
/* blaues Symbol entfernen + Hinweis als Card */
:where(.lc-checkout, body.woocommerce-checkout) .woocommerce-form-coupon-toggle .woocommerce-info{
  background:var(--lc-bg-card); color:var(--lc-subtle);
  border:0; border-radius:var(--lc-radius); box-shadow:var(--lc-shadow);
  padding:12px 16px;
}
:where(.lc-checkout, body.woocommerce-checkout) .woocommerce-info::before{
  content:none !important; display:none !important;
}
/* Coupon-Form als Card */
:where(.lc-checkout, body.woocommerce-checkout) form.checkout_coupon{
  background:var(--lc-bg-card); color:var(--lc-subtle);
  border:0; border-radius:var(--lc-radius); box-shadow:var(--lc-shadow);
  padding:16px 18px; margin-top:12px;

  /* FIX #1: Feld + Button auf einer Linie, sauber ausgerichtet */
  display:flex; align-items:center; gap:12px; flex-wrap:nowrap; box-sizing:border-box;
}
:where(.lc-checkout, body.woocommerce-checkout) form.checkout_coupon .form-row{ margin:0 !important; }
:where(.lc-checkout, body.woocommerce-checkout) form.checkout_coupon .form-row-first{ flex:1 1 auto; }
:where(.lc-checkout, body.woocommerce-checkout) form.checkout_coupon .form-row-last{ flex:0 0 auto; }
:where(.lc-checkout, body.woocommerce-checkout) form.checkout_coupon input.input-text{ width:100% !important; }
:where(.lc-checkout, body.woocommerce-checkout) form.checkout_coupon .button{
  height:42px !important; line-height:0 !important; padding:0 16px !important;
  display:inline-flex !important; align-items:center; justify-content:center;
}
/* Mobil: untereinander */
@media (max-width:600px){
  :where(.lc-checkout, body.woocommerce-checkout) form.checkout_coupon{ flex-wrap:wrap; }
  :where(.lc-checkout, body.woocommerce-checkout) form.checkout_coupon .form-row-first,
  :where(.lc-checkout, body.woocommerce-checkout) form.checkout_coupon .form-row-last{
    flex:1 1 100%;
  }
  :where(.lc-checkout, body.woocommerce-checkout) form.checkout_coupon .form-row-last{
    margin-top:8px !important;
  }
}

/* ---------- Luft vor „Deine Bestellung“ ---------- */
:where(.lc-checkout, body.woocommerce-checkout) #order_review_heading{ margin-top:18px; }

/* ---------- Bestellübersicht / Tabellen-Card ---------- */
:where(.lc-checkout, body.woocommerce-checkout) table.shop_table{
  width:100%; border:0 !important; border-collapse:separate !important;
  border-spacing:0 !important; background:var(--lc-bg-card);
  border-radius:var(--lc-radius); box-shadow:var(--lc-shadow);
  overflow:hidden; color:var(--lc-subtle);
}
:where(.lc-checkout, body.woocommerce-checkout) table.shop_table th{
  color:var(--lc-text); font-weight:800; padding:14px 16px; background:transparent !important;

}
:where(.lc-checkout, body.woocommerce-checkout) .woocommerce-checkout-review-order-table th,
:where(.lc-checkout, body.woocommerce-checkout) .woocommerce-checkout-review-order-table td{
  background:transparent !important;
}

/* ---------- Zahlungsbereich als Card ---------- */
:where(.lc-checkout, body.woocommerce-checkout) #order_review #payment,
:where(.lc-checkout, body.woocommerce-checkout) .woocommerce-checkout #payment{
  background:var(--lc-bg-card) !important;
  border-radius:var(--lc-radius) !important;
  box-shadow:var(--lc-shadow) !important;
  padding:16px 18px !important;
  color:var(--lc-subtle);
}
:where(.lc-checkout, body.woocommerce-checkout) #payment .payment_methods > .wc_payment_method{
  border-top:1px solid rgba(255,255,255,.06);
}
:where(.lc-checkout, body.woocommerce-checkout) #payment .payment_box{
  background:var(--lc-panel) !important; color:#fff !important;
  border-radius:12px !important; border:0 !important;
}

/* ---------- Buttons (global) ---------- */
:where(.lc-checkout, body.woocommerce-checkout) .button,
:where(.lc-checkout, body.woocommerce-checkout) button.button,
:where(.lc-checkout, body.woocommerce-checkout) a.button{
  background:var(--lc-accent) !important; color:#fff !important;
  font-weight:800 !important; border:0 !important;
  border-radius:12px !important; padding:10px 14px !important;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
:where(.lc-checkout, body.woocommerce-checkout) .button:hover{
  background:var(--lc-accent-hover) !important;
}

/* === Place-Order: wie Warenkorb (46px / line-height 15px) === */
:where(.lc-checkout, body.woocommerce-checkout) #payment .place-order{ padding:0 !important; }
:where(.lc-checkout, body.woocommerce-checkout) #place_order{
  display:block !important; width:100% !important; max-width:420px !important;
  height:46px !important; padding:0 20px !important; margin:12px auto 0 !important;
  text-align:center !important; line-height:15px !important;
  background:var(--lc-accent) !important; color:#fff !important; font-weight:900 !important;
  border-radius:12px !important; box-shadow:0 10px 22px rgba(0,0,0,.28);
}
:where(.lc-checkout, body.woocommerce-checkout) #place_order::before,
:where(.lc-checkout, body.woocommerce-checkout) #place_order::after{ content:none !important; }

/* ---------- Mobile Tweaks ---------- */
@media (max-width:900px){
  :where(.lc-checkout, body.woocommerce-checkout) .col2-set{ gap:12px; }

  /* FIX #3: mehr Luft vor dem Block „Zusätzliche Informationen“ */
  :where(.lc-checkout, body.woocommerce-checkout) .woocommerce-additional-fields{
    margin-top:16px !important;
  }
}

/* === Quick Fix: Abstand zwischen den beiden Checkout-Cards === */
/* Wenn die Spalten untereinander stehen (mobil), etwas Luft davor */
@media (max-width:900px){
  :where(.lc-checkout, body.woocommerce-checkout) .col2-set .col-2{
    margin-top:18px !important;   /* Abstand über „Zusätzliche Informationen“ */
  }
}

/* Falls dein Theme die Spalten nebeneinander stellt (Desktop),
   sorgen wir zusätzlich für eine kleine horizontale Lücke. */
@media (min-width:901px){
  :where(.lc-checkout, body.woocommerce-checkout) .col2-set{
    column-gap:18px !important;   /* sanfter Spalt zwischen den Cards */
  }
}

/* === Checkout-Karten: Plum-Verlauf + Pink-Glow ===================== */
/* wir ändern NICHT den bestehenden background, sondern ergänzen nur
   background-image – so bleibt der Fallback (var(--lc-bg-card)) erhalten */

/* Karten/Container */
:where(.lc-checkout, body.woocommerce-checkout) .col2-set .col-1,
:where(.lc-checkout, body.woocommerce-checkout) .col2-set .col-2,
:where(.lc-checkout, body.woocommerce-checkout) .woocommerce-form-coupon-toggle .woocommerce-info,
:where(.lc-checkout, body.woocommerce-checkout) form.checkout_coupon,
:where(.lc-checkout, body.woocommerce-checkout) table.shop_table,
:where(.lc-checkout, body.woocommerce-checkout) #order_review #payment,
:where(.lc-checkout, body.woocommerce-checkout) .woocommerce-checkout #payment{
  position: relative;                 /* für ::before */
  overflow: hidden;                   /* runde Ecken sauber */
  border-radius: var(--lc-radius);    /* falls nicht schon gesetzt */
  /* Verlauf wie auf der Coins-Seite */
  background-image: linear-gradient(145deg, #321823 0%, #1d0e14 100%) !important;
  background-repeat: no-repeat !important;
}

/* Pink-Glow Overlay */
:where(.lc-checkout, body.woocommerce-checkout) .col2-set .col-1::before,
:where(.lc-checkout, body.woocommerce-checkout) .col2-set .col-2::before,
:where(.lc-checkout, body.woocommerce-checkout) .woocommerce-form-coupon-toggle .woocommerce-info::before,
:where(.lc-checkout, body.woocommerce-checkout) form.checkout_coupon::before,
:where(.lc-checkout, body.woocommerce-checkout) table.shop_table::before,
:where(.lc-checkout, body.woocommerce-checkout) #order_review #payment::before,
:where(.lc-checkout, body.woocommerce-checkout) .woocommerce-checkout #payment::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(320px 260px at 6% 12%, rgba(255,142,189,0.15), transparent 70%) !important;
}


/* Kasse: rechte (leere) Spalte komplett ausblenden + linke auf 100% */
:where(.lc-checkout, body.woocommerce-checkout) .col2-set .col-2{
  display:none !important;
}
:where(.lc-checkout, body.woocommerce-checkout) .col2-set .col-1{
  width:100% !important;
  float:none !important;
}


/* =========================================================
   FINAL MOBILE FIX: Felder 100% + Checkout wieder mittig
   Scope: nur .lc-checkout
   ========================================================= */

@media (max-width: 900px){

  /* verhindert horizontales "Rausziehen" durch Stripe/iframes/calc-width */
  .lc-checkout{
    overflow-x: hidden !important;
  }

  /* Outer Wrapper mittig + volle Breite */
  .lc-checkout,
  .lc-checkout .woocommerce,
  .lc-checkout .elementor-widget-container,
  .lc-checkout form.checkout,
  .lc-checkout #customer_details,
  .lc-checkout #order_review{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Woo Layout: 2 Spalten auf 1 Spalte */
  .lc-checkout .woocommerce form .form-row-first,
  .lc-checkout .woocommerce form .form-row-last{
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
  }

  /* Wrapper nicht shrinken */
  .lc-checkout .woocommerce form .form-row,
  .lc-checkout .woocommerce form .form-row .woocommerce-input-wrapper{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Inputs/Selects/Textareas volle Breite (Pill-Fix) */
  .lc-checkout .woocommerce form .form-row input.input-text,
  .lc-checkout .woocommerce form .form-row input[type="text"],
  .lc-checkout .woocommerce form .form-row input[type="email"],
  .lc-checkout .woocommerce form .form-row input[type="tel"],
  .lc-checkout .woocommerce form .form-row input[type="password"],
  .lc-checkout .woocommerce form .form-row textarea,
  .lc-checkout .woocommerce form .form-row select{
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Select2 immer volle Breite */
  .lc-checkout .select2-container{
    width: 100% !important;
    max-width: none !important;
  }

  /* Payment Box / Stripe Wrapper volle Breite + kein Shrink */
  .lc-checkout #payment,
  .lc-checkout #payment .payment_box,
  .lc-checkout #payment .wc-payment-form,
  .lc-checkout #payment fieldset{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* falls ein Kind 100vw nutzt: zentrieren statt "links kleben" */
  .lc-checkout [style*="100vw"]{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================================================
   MOBILE: Rahmen/Shadow bei Rechnungsdetails + Zahlungsarten entfernen
   Desktop bleibt unverändert
   Scope: nur .lc-checkout
   ========================================================= */
@media (max-width: 900px){

  /* 1) Rechnungsdetails-Card "flat" machen */
  .lc-checkout .col2-set .col-1{
    background: transparent !important;
    background-image: none !important;   /* kill gradient-card */
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  /* auch das Pink-Glow Overlay deaktivieren (kommt von ::before) */
  .lc-checkout .col2-set .col-1::before{
    content: none !important;
  }

  /* 2) Zahlungsarten-Card (#payment) "flat" machen */
  .lc-checkout #order_review #payment,
  .lc-checkout .woocommerce-checkout #payment{
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .lc-checkout #order_review #payment::before,
  .lc-checkout .woocommerce-checkout #payment::before{
    content: none !important;
  }

  /* 3) Optional: damit die Payment-Methoden trotzdem sauber wirken,
        geben wir NUR den inneren Boxen etwas "Spacing" */
  .lc-checkout #payment ul.wc_payment_methods{
    margin: 0 !important;
    padding: 0 !important;
  }

  .lc-checkout #payment ul.wc_payment_methods > li.wc_payment_method{
    margin: 0 0 12px 0 !important;
  }
}


/* =========================================================
   MOBILE: Stripe/WooPayments Payment-Form volle Breite
   Problem: interne Wrapper setzen max-width/inline width -> wirkt "zu schmal"
   Scope: nur .lc-checkout
   ========================================================= */
@media (max-width: 900px){

  /* Payment Container darf nicht "schmal" sein */
  .lc-checkout #payment,
  .lc-checkout #payment .payment_box,
  .lc-checkout #payment .wcpay-upe-form,
  .lc-checkout #payment .wc-payment-form,
  .lc-checkout #payment .wcpay-upe-element,
  .lc-checkout #payment .StripeElement,
  .lc-checkout #payment .__PrivateStripeElement{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* WooPayments setzt teils display/align die Breite “zusammen” -> neutralisieren */
  .lc-checkout #payment .wcpay-upe-form,
  .lc-checkout #payment .wc-payment-form{
    display: block !important;
  }

  /* Das ist oft der visuelle "kleine Rahmen": fieldset + evtl. ein Wrapper mit border */
  .lc-checkout #payment fieldset.wc-payment-form{
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  /* Falls WooPayments dem inneren "Card Input Container" eine max-width gibt */
  .lc-checkout #payment .wcpay-upe-form *{
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 900px){
  .lc-checkout #payment{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* Checkout Order Review: graue Tabellenlinien entfernen */
.lc-checkout table.woocommerce-checkout-review-order-table,
.lc-checkout table.woocommerce-checkout-review-order-table th,
.lc-checkout table.woocommerce-checkout-review-order-table td,
.lc-checkout table.shop_table.woocommerce-checkout-review-order-table,
.lc-checkout table.shop_table.woocommerce-checkout-review-order-table th,
.lc-checkout table.shop_table.woocommerce-checkout-review-order-table td{
  border: 0 !important;
}

/* falls ein Theme „separators“ via box-shadow/outline macht */
.lc-checkout table.woocommerce-checkout-review-order-table tr,
.lc-checkout table.woocommerce-checkout-review-order-table thead,
.lc-checkout table.woocommerce-checkout-review-order-table tbody,
.lc-checkout table.woocommerce-checkout-review-order-table tfoot{
  box-shadow: none !important;
  outline: none !important;
}

/* optional: damit’s sauber bleibt */
.lc-checkout table.woocommerce-checkout-review-order-table{
  border-collapse: collapse !important;
}/* End custom CSS */