/* =====================================================================
   Viptamin One-Page-Checkout
   Styling für die neuen WooCommerce-Checkout-Templates (form-checkout.php etc.)
   Ersetzt die Inline-Styles des alten Multi-Step-Checkouts.
   ===================================================================== */

/* =====================================================================
   RESET · Altes Multi-Step-Checkout-CSS aus dem Theme-style.css neutralisieren
   ---------------------------------------------------------------------
   style.css (child-style) enthält noch das Styling des alten, mehrstufigen
   Checkouts: native Radios/Checkboxen werden global ausgeblendet
   (position:absolute; right:9000px) und per FontAwesome-Glyph auf einem
   .label-text-Span ersetzt; Feld-Labels sind pro Feld-ID ausgeblendet; Labels
   sind 30px groß; dazu .wpmc-* Reste. Im neuen One-Page-Checkout gibt es kein
   .label-text → Radios/Checkboxen (inkl. AGB-Häkchen!) wären unsichtbar und der
   Checkout sähe „teilweise alt" aus. Diese Regeln setzen das NUR im neuen
   Checkout (.vc-checkout / .woocommerce-checkout) zurück.
   ===================================================================== */

/* native Radios & Checkboxen wieder sichtbar/normal positionieren */
.vc-checkout input[type="checkbox"],
.vc-checkout input[type="radio"]{
  position:static !important; right:auto !important; left:auto !important;
  width:auto !important; height:auto !important; min-height:0 !important;
  margin:0 8px 0 0 !important; opacity:1 !important; clip:auto !important;
  vertical-align:middle;
}
/* FontAwesome-Ersatzglyphen des alten Systems im Checkout abschalten */
.vc-checkout input[type="checkbox"] + .label-text::before,
.vc-checkout input[type="radio"] + .label-text::before{ content:none !important; }

/* Feld-Labels wieder einblenden (Theme blendete sie pro Feld-ID per !important aus) */
#customer_details .form-row > label{ display:block !important; }

/* 30px-Labels des Themes im Checkout zurücknehmen (Feld-Labels überschreibt
   weiter unten die spezifischere .vc-checkout .form-row label-Regel) */
.vc-checkout label{ font-size:14px; line-height:1.5; padding-top:0; }

/* „Zahlungsart"-Überschrift auch mobil zeigen (Theme blendet div#payment>h2 < 976px aus) */
.woocommerce-checkout #payment > h2{ display:block !important; }

/* redundanten nativen „Returning customer?"-Hinweis oben ausblenden – Einstieg
   zum Login ist der „Einloggen"-Link im Kontaktblock (das Login-Formular bleibt
   für das Aufklappen per JS erhalten). Gutschein-Hinweis ist per Hook entfernt;
   hier zusätzlich defensiv ausgeblendet, falls ihn etwas anderes rendert. */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle{ display:none !important; }

/* ZAHLUNGSARTEN: das Theme floatet die <li> (float:left; width:48%; margin-right:2%)
   -> Methoden quetschten sich in eine ~halbe Spalte. Selektor des Themes hat
   Spezifität (0,3,1); hier mit (0,4,1)+!important sicher überschreiben:
   volle Breite, untereinander. */
.vc-checkout .wc_payment_methods.payment_methods.methods > li{
  float:none !important; width:auto !important; margin-right:0 !important; clear:both;
}
.vc-checkout .wc_payment_methods.payment_methods.methods > li > label{ background:transparent !important; }

/* CHECKOUT-FELDER: das Theme gibt #billing_*/#shipping_*-Feldern feste Breiten
   (width:32%/49%) + float:left (teils !important, ID-Spezifität 1,0,0). Das kollidiert
   mit unserem Grid. Mit (1,1,0)+!important im Checkout-Scope (#customer_details)
   sicher aufheben -> unser .__field-wrapper-Grid übernimmt das Layout. */
#customer_details .form-row{ width:auto !important; float:none !important; clear:none !important; }
#customer_details #billing_country_field,
#customer_details #shipping_country_field{ grid-column:1 / -1; }
/* E-Mail-Feld in der Kontaktspalte: WooCommerce-Core gibt form-row-first/last
   (Klasse am #billing_email_field) width:47% -> das Feld blieb schmal in seiner
   Flex-Spalte. Per ID (1,1,0, hinter Z.62) explizit auf volle Spaltenbreite. */
.vc-checkout #billing_email_field{ width:100% !important; max-width:100% !important; float:none !important; clear:none !important; }
/* style.css zwängt Vor-/Nachname per ID auf width:49%+float:left (1,0,0). Sie sollen
   als 50/50-Paar nebeneinander im Grid stehen -> width:auto (füllt die 1fr-Zelle),
   float weg. Explizit per Feld-ID (unabhängig von #customer_details), da diese
   style.css-Breitenregeln immer wieder auftauchen. NICHT 100% (sind ein Paar!). */
.vc-checkout #billing_first_name_field, .vc-checkout #billing_last_name_field,
.vc-checkout #shipping_first_name_field, .vc-checkout #shipping_last_name_field{
  width:auto !important; float:none !important; clear:none !important; }

/* header.php blendet auf der Kasse-Seite (page 2335) per inline-<style> noch
   Felder des ALTEN Multi-Step-Checkouts aus (#billing_email, Vor-/Nachname,
   Anrede, Bestellnotiz). Der One-Page-Checkout rendert und braucht diese Felder
   regulär -> im Checkout-Scope wieder einblenden. Selektor-Spezifität (1,1,0) +
   !important schlägt die #id-Regel der header.php. Die sr-only-Headings
   (#order_review_heading etc.) bleiben bewusst unberührt/ausgeblendet. */
.vc-checkout #billing_email,
.vc-checkout #billing_first_name,
.vc-checkout #billing_last_name,
.vc-checkout #billing_first_name_field,
.vc-checkout #billing_last_name_field,
.vc-checkout #billing_anrede_field,
.vc-checkout #order_comments_field{ display:block !important; }

/* =====================================================================
   Multi-Step-Plugin-Chrome (wp-multi-step-checkout) hart unterdrücken
   ---------------------------------------------------------------------
   Auch wenn das Plugin in wp-admin nicht deaktiviert ist (oder ein Cache eine
   alte Seite liefert), darf es seine Schritt-Navigation, Tab-Kreise und
   Weiter/Zurück-Buttons NICHT mehr rendern. Sonst erscheinen über/zwischen
   unseren Sektionen die nummerierten Schritte (z. B. „3 Kundenkonto") und der
   Checkout sieht „teilweise alt" aus. Wir blenden das Chrome aus und heben das
   vom Plugin per JS verteilte Tab-Hiding der Inhalte wieder auf. */
.woocommerce-checkout .wpmc-tabs-wrapper,
.woocommerce-checkout .wpmc-tabs-list,
.woocommerce-checkout ul.wpmc-tabs,
.woocommerce-checkout .wpmc-progress,
.woocommerce-checkout .wpmc-step-title,
.woocommerce-checkout .wpmc-steps-wrapper > .wpmc-nav-wrapper,
.woocommerce-checkout .wpmc-nav-wrapper,
.woocommerce-checkout .wpmc-nav-buttons,
.woocommerce-checkout .wpmc-footer-right.wpmc-nav-buttons,
.woocommerce-checkout .wpmc-prev,
.woocommerce-checkout .wpmc-next,
.woocommerce-checkout #nextButtons{ display:none !important; }

/* Plugin versteckt Nicht-aktive Schritte (display:none / .wpmc-current-Logik) und
   wickelt Felder in .wpmc-step-Container. Alles wieder sichtbar erzwingen, damit
   der One-Page-Checkout vollständig dargestellt wird. */
.woocommerce-checkout .wpmc-step,
.woocommerce-checkout .wpmc-tab-content,
.woocommerce-checkout [class*="wpmc-step-"]{
  display:block !important; opacity:1 !important; visibility:visible !important;
  height:auto !important; max-height:none !important; overflow:visible !important;
}

:root{
  --vc-green:#00bb64; --vc-green-dark:#00a657; --vc-green-tint:#e6f8ef;
  --vc-ink:#1d2430; --vc-muted:#6b7280; --vc-line:#e6e8ec; --vc-bg:#f5f6f8;
  --vc-card:#fff; --vc-radius:14px; --vc-r-sm:9px;
  --vc-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 28px rgba(16,24,40,.06);
  --vc-paypal:#ffc439;
}

/* ---- page chrome: blende GeneratePress-Titel/Seitenrand am Checkout aus ---- */
.woocommerce-checkout .entry-header,
.woocommerce-checkout .page-header{ display:none; }
/* (kein grauer Content-Hintergrund mehr – auf Wunsch entfernt) */
.woocommerce-checkout #primary{ max-width:1080px; margin:0 auto; }

/* ---- layout ---- */
.vc-checkout{ display:grid; grid-template-columns:1fr 388px; gap:30px; align-items:start;
  font-size:15px; color:var(--vc-ink); line-height:1.5; }
.vc-main{ min-width:0; display:flex; flex-direction:column; gap:16px; }
.vc-aside{ position:sticky; top:20px; display:flex; flex-direction:column; gap:16px; min-width:0; }
.vc-checkout *{ box-sizing:border-box; }

/* ---- cards / sections ---- */
.vc-card{ background:var(--vc-card); border:1px solid var(--vc-line); border-radius:var(--vc-radius); box-shadow:var(--vc-shadow); }
.vc-sec{ padding:22px 24px; border-bottom:1px solid var(--vc-line); }
.vc-sec:last-child{ border-bottom:0; }
.vc-sec-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.vc-num{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--vc-ink); color:#fff;
  font-size:14px; font-weight:700; display:grid; place-items:center; }
.vc-sec-head h2{ font-size:17px; font-weight:700; letter-spacing:-.01em; margin:0; }
.vc-hint{ margin-left:auto; font-size:13px; color:var(--vc-muted); }
.vc-hint a, .vc-link{ color:var(--vc-green-dark); font-weight:600; cursor:pointer; }

/* =====================================================================
   Formularfelder – WooCommerce-Markup (.form-row / .input-text) umstylen
   ===================================================================== */
.vc-checkout .form-row{ margin:0 0 13px; padding:0; display:block; }
.vc-checkout .form-row label{ display:block; font-size:13px; font-weight:600; color:#42505f; margin-bottom:6px; }
.vc-checkout .form-row label .required{ color:var(--vc-green-dark); text-decoration:none; }
.vc-checkout .form-row .optional{ color:var(--vc-muted); }

.vc-checkout input.input-text,
.vc-checkout textarea,
.vc-checkout select,
.vc-checkout .select2-container--default .select2-selection--single{
  width:100%; height:46px; min-height:46px; padding:0 14px; line-height:44px;
  border:1.5px solid var(--vc-line); border-radius:var(--vc-r-sm);
  font-size:15px; color:var(--vc-ink); background:#fff;
  transition:border-color .15s, box-shadow .15s; box-shadow:none;
}
.vc-checkout textarea{ height:auto; min-height:84px; padding:11px 14px; line-height:1.5; }
.vc-checkout input.input-text:focus,
.vc-checkout textarea:focus,
.vc-checkout select:focus{ outline:0; border-color:var(--vc-green); box-shadow:0 0 0 3px rgba(0,187,100,.15); }
.vc-checkout input::placeholder{ color:#aab1bb; }

/* select2 (Land) an die Felder angleichen */
.vc-checkout .select2-container .select2-selection--single .select2-selection__rendered{ line-height:44px; padding-left:0; color:var(--vc-ink); }
.vc-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{ height:44px; }
.vc-checkout .select2-container--open .select2-selection--single{ border-color:var(--vc-green); box-shadow:0 0 0 3px rgba(0,187,100,.15); }

/* zwei Spalten für ausgewählte Felder (Vor-/Nachname kommen via Woo form-row-first/last) */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-shipping-fields__field-wrapper > .form-row{ width:auto !important; float:none !important; }
/* volle Breite: Firma, Straße, Adresszusatz, Telefon (sonst stünde Telefon als
   einzelnes halbes Feld mit Leerrach daneben) */
#billing_company_field, #billing_address_1_field, #billing_address_2_field, #billing_phone_field,
#shipping_company_field, #shipping_address_1_field, #shipping_address_2_field, #shipping_phone_field,
.vc-checkout .form-row-wide{ grid-column:1 / -1; }

/* ---- Adresssuche (Photon) auf dem Straßenfeld ---- */
.vc-ac-row{ position:relative; }
/* Pin im Straßenfeld bewusst AUSGEBLENDET (war in der WP/Elementor-Umgebung nie
   zuverlässig zu positionieren). Das Straßenfeld behält seine grüne „Autocomplete
   aktiv"-Optik; Padding zurück auf Normalmaß (kein 40px-Pin-Platz mehr). Das JS
   hängt den Pin zwar noch ein, er bleibt durch display:none unsichtbar. */
.vc-ac-row .vc-ac-pin{ display:none !important; }
.vc-ac-row input.input-text{ border-color:var(--vc-green); background:#fbfffd; }
.vc-ac-note{ font-size:12px; color:var(--vc-muted); margin:3px 0 14px; display:flex; gap:6px; align-items:flex-start; grid-column:1 / -1; }
.vc-ac-note svg{ flex:0 0 auto; width:13px; height:13px; margin-top:2px; }
.vc-suggestions{ position:absolute; z-index:40; left:0; right:0; top:calc(100% + 5px);
  background:#fff; border:1px solid var(--vc-line); border-radius:var(--vc-r-sm);
  box-shadow:0 12px 32px rgba(16,24,40,.14); overflow:hidden; display:none; }
.vc-suggestions.open{ display:block; }
.vc-sug{ display:flex; gap:11px; align-items:center; padding:11px 14px; cursor:pointer; border-bottom:1px solid var(--vc-line); }
.vc-sug:last-child{ border-bottom:0; }
.vc-sug:hover, .vc-sug.active{ background:var(--vc-green-tint); }
.vc-sug svg{ flex:0 0 auto; width:17px; height:17px; color:var(--vc-muted); }
.vc-sug .l1{ font-weight:600; font-size:14.5px; }
.vc-sug .l2{ font-size:12.5px; color:var(--vc-muted); }
.vc-sug-msg{ padding:12px 14px; font-size:13.5px; color:var(--vc-muted); }

/* ---- Kontakt: PayPal-Express + „oder“ ---- */
.vc-contact-express{ margin-bottom:6px; }
.vc-paypal-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:48px;
  background:var(--vc-paypal); border:0; border-radius:24px; cursor:pointer; font-weight:800; font-size:16px; color:#003087; text-decoration:none; }
.vc-paypal-btn .i{ color:#009cde; }
.vc-ordiv{ display:flex; align-items:center; gap:12px; color:var(--vc-muted); font-size:12.5px; font-weight:600; margin:16px 0 14px; }
.vc-ordiv::before, .vc-ordiv::after{ content:""; flex:1; height:1px; background:var(--vc-line); }

/* =====================================================================
   PayPal-Express-Banner ÜBER dem Formular
   ---------------------------------------------------------------------
   Der Button stammt aus dem separaten Plugin (Gateway "eh_paypal_express",
   Ausgabe auf woocommerce_before_checkout_form) und wird bewusst NICHT
   verschoben. Hier wird der vorhandene Ausgabe-Container nur zentriert und in
   der Breite begrenzt, damit er wie ein bewusster „Express-Checkout"-Banner
   über der zweispaltigen Kasse sitzt (statt links-bündig & roh).
   Hinweis: Der genaue Wrapper des Plugins ist hier nicht bekannt; deshalb
   defensiv mehrere übliche Container abgedeckt (u. a. <center>). Falls der
   Button doppelt erscheint, bitte HTML schicken -> exakter Selektor.
   ===================================================================== */
.woocommerce-checkout #primary > center,
.woocommerce-checkout .woocommerce > center,
.woocommerce-checkout .woocommerce-checkout-payment-express,
.woocommerce-checkout .eh-paypal-express,
.woocommerce-checkout .eh_paypal_express,
.woocommerce-checkout #eh-paypal-express-checkout{
  display:block; max-width:420px; margin:0 auto 20px; text-align:center;
}
/* den eigentlichen PayPal-Button auf Banner-Breite/-Optik bringen */
.woocommerce-checkout #primary > center .paypal-buttons,
.woocommerce-checkout .woocommerce > center .paypal-buttons,
.woocommerce-checkout .eh-paypal-express .paypal-buttons{ margin:0 auto !important; }

/* ---- Kontakt: drei Optionen nebeneinander (Neukunde / Login / Express) ---- */
.vc-contact-3col{ display:flex; align-items:stretch; }
.vc-copt{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:10px; padding:2px 16px; }
/* Die E-Mail-Spalte ist das einzige echte Eingabefeld der Kontaktzeile (die
   anderen zwei Spalten sind nur Buttons) -> mehr Breite, damit das Feld nicht
   schmaler wirkt als die Adressfelder darunter. */
.vc-copt-email{ flex:1.7 1 0; }
.vc-copt:first-child{ padding-left:0; }
.vc-copt:last-child{ padding-right:0; }
.vc-copt-h{ font-size:13px; font-weight:700; color:#42505f; line-height:1.35; min-height:36px; }
.vc-copt .form-row{ margin-bottom:0; }
.vc-copt-btn{ display:flex; align-items:center; justify-content:center; gap:8px; height:46px;
  border:1.5px solid var(--vc-green); border-radius:var(--vc-r-sm); background:#fff; color:var(--vc-green-dark);
  font-weight:700; font-size:15px; text-decoration:none; cursor:pointer; transition:background .15s, color .15s; }
.vc-copt-btn svg{ width:18px; height:18px; }
.vc-copt-btn:hover{ background:var(--vc-green); color:#fff; }
.vc-copt-express .vc-contact-express{ margin:0; }
.vc-copt-express .vc-contact-express *{ max-width:100%; }

/* senkrechte „oder"-Trenner zwischen den Spalten */
.vc-copt-or{ position:relative; flex:0 0 auto; display:grid; place-items:center; width:34px;
  color:var(--vc-muted); font-size:12px; font-weight:700; }
.vc-copt-or::before{ content:""; position:absolute; top:6px; bottom:6px; left:50%; width:1px; background:var(--vc-line); }
.vc-copt-or span{ position:relative; background:var(--vc-card); padding:6px 0; }

/* Express-Spalte ausblenden, wenn (trotz konfiguriertem Selektor) kein Button da ist */
.vc-contact-3col.vc-no-express .vc-copt-express,
.vc-contact-3col.vc-no-express .vc-copt-login + .vc-copt-or{ display:none; }

@media (max-width:620px){
  .vc-contact-3col{ flex-direction:column; }
  .vc-copt{ padding:14px 0; }
  .vc-copt-h{ min-height:0; }
  .vc-copt-or{ width:auto; padding:2px 0; }
  .vc-copt-or::before{ left:0; right:0; top:50%; bottom:auto; width:auto; height:1px; }
  .vc-copt-or span{ padding:0 10px; }
}

/* ---- Hinweise (grün) ---- */
.vc-notice{ display:flex; gap:11px; background:var(--vc-green-tint); border:1px solid #bdebd3; border-radius:var(--vc-r-sm);
  padding:13px 14px; font-size:13.5px; color:#0b6b42; margin-bottom:14px; }
.vc-notice svg{ flex:0 0 auto; width:18px; height:18px; color:var(--vc-green-dark); }
.vc-notice > span{ flex:1; min-width:0; }

/* ---- Login-Form (Bestandskunde) ---- */
.vc-login-toggle{ display:none; padding-top:12px; }
.vc-login-toggle.open{ display:block; }
.woocommerce-checkout form.login{ border:1px solid var(--vc-line); border-radius:var(--vc-r-sm); padding:16px; margin:0; }

/* Das native Login-Formular wird via Hook (woocommerce_before_checkout_form) als
   #newWooLogin.boxShadow ÜBER der zweispaltigen Kasse ausgegeben. style.css macht
   daraus float:right; width:30% -> es erschien als leerer, schwebender Kasten
   („3. Spalte ganz rechts"). Jetzt: nicht mehr schwebend und standardmäßig
   ausgeblendet; der „Einloggen"-Link im Kontaktblock (vc-checkout.js) setzt
   .vc-login-open und zeigt es als zentrierte Login-Karte über der Kasse. */
.woocommerce-checkout #newWooLogin{
  display:none !important; float:none !important; width:auto !important;
  max-width:460px; margin:0 auto 16px !important;
}
.woocommerce-checkout #newWooLogin.vc-login-open{ display:block !important; }
.woocommerce-checkout #newWooLogin.vc-login-open form.login{ display:block !important; }

/* Das native Login-Formular (Hook woocommerce_before_checkout_form) liegt
   AUSSERHALB von .vc-checkout. Dort greifen die globalen style.css-Altregeln
   noch: label{font-size:30px} und input[type=checkbox]{position:absolute;right:9000px}.
   Folge: 30px-Labels und ein unsichtbares „Angemeldet bleiben"-Häkchen. Hier
   gezielt im Login-Formular zurücksetzen (kein Einfluss auf Produkt-/Kontoseiten). */
.woocommerce-checkout form.login label{ font-size:14px; line-height:1.5; padding-top:0; }
.woocommerce-checkout form.login input[type="checkbox"]{
  position:static !important; right:auto !important; left:auto !important;
  width:auto !important; height:auto !important; min-height:0 !important;
  margin:0 8px 0 0 !important; opacity:1 !important; clip:auto !important; vertical-align:middle;
}
.woocommerce-checkout form.login input[type="checkbox"] + .label-text::before{ content:none !important; }

/* =====================================================================
   Rechte Spalte: Bestellübersicht + Zahlung (review-order.php / payment.php)
   ===================================================================== */
.vc-summary{ padding:20px 22px; }
.vc-summary h3{ font-size:16px; font-weight:700; margin:0 0 16px; display:flex; align-items:center; justify-content:space-between; }
.vc-summary h3 .vc-count{ font-size:12px; font-weight:700; color:var(--vc-green-dark); background:var(--vc-green-tint); border-radius:20px; padding:3px 9px; }
.vc-summary h3 a{ font-size:13px; font-weight:600; color:var(--vc-green-dark); }

.vc-item{ display:flex; gap:13px; padding:12px 0; border-bottom:1px solid var(--vc-line); }
.vc-item .vc-thumb{ flex:0 0 auto; width:58px; height:58px; border-radius:10px; overflow:hidden; border:1px solid var(--vc-line); background:#f1f3f6; }
.vc-item .vc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; margin:0; }
.vc-item .vc-info{ flex:1; min-width:0; }
.vc-item .vc-nm{ font-weight:600; font-size:14px; line-height:1.3; }
.vc-item .vc-meta{ font-size:12.5px; color:var(--vc-muted); margin-top:4px; }
.vc-item .vc-pr{ font-weight:700; font-size:14px; white-space:nowrap; }
.vc-abo-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#fff;
  background:var(--vc-green); border-radius:20px; padding:2px 9px; margin-top:5px; width:max-content; }
.vc-convert{ display:block; font-size:12.5px; color:var(--vc-green-dark); font-weight:600; margin-top:6px; }

/* Menge bearbeiten (− N +) + Entfernen pro Artikel in der Übersicht */
.vc-qty{ display:inline-flex; align-items:center; gap:3px; margin-top:8px; }
.vc-qty-btn{ width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; padding:0;
  border:1.5px solid var(--vc-line); background:#fff; border-radius:7px; cursor:pointer;
  font-size:17px; line-height:1; font-weight:700; color:var(--vc-ink); transition:border-color .15s, color .15s; }
.vc-qty-btn:hover:not(:disabled){ border-color:var(--vc-green); color:var(--vc-green-dark); }
.vc-qty-btn:disabled{ opacity:.4; cursor:default; }
.vc-qty-n{ min-width:30px; text-align:center; font-size:14px; font-weight:700; }
.vc-item-remove{ width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; padding:0;
  margin-left:6px; border:0; background:transparent; border-radius:7px; cursor:pointer;
  color:var(--vc-muted); transition:background .15s, color .15s; }
.vc-item-remove:hover{ background:#fdeaea; color:#c0392b; }
.vc-item-remove svg{ width:15px; height:15px; }
.vc-item.vc-busy{ opacity:.5; pointer-events:none; }

/* Ein-Klick-Upsell „Einzelkauf -> Spar-Abo" (pro Warenkorb-Artikel) */
.vc-convert-abo{ display:flex; align-items:center; gap:10px; margin-top:9px; padding:9px 11px;
  background:var(--vc-green-tint); border:1px solid #bdebd3; border-radius:var(--vc-r-sm);
  text-decoration:none; color:#0b6b42; transition:background .15s; }
.vc-convert-abo:hover{ background:#d6f4e4; }
.vc-convert-abo .vc-convert-ic{ flex:0 0 auto; display:grid; place-items:center; width:24px; height:24px; }
.vc-convert-abo .vc-convert-ic svg{ width:18px; height:18px; color:var(--vc-green-dark); }
.vc-convert-abo .vc-convert-txt{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.vc-convert-abo .vc-convert-txt strong{ font-size:13px; font-weight:700; }
.vc-convert-abo .vc-convert-sub{ font-size:11.5px; color:#3a7a59; }
.vc-convert-abo .vc-convert-sub .woocommerce-Price-amount{ font-weight:700; }
.vc-convert-abo .vc-convert-go{ flex:0 0 auto; font-size:12px; font-weight:700; color:#fff;
  background:var(--vc-green); border-radius:20px; padding:6px 13px; white-space:nowrap; }
.vc-convert-abo:hover .vc-convert-go{ background:var(--vc-green-dark); }

.vc-upsell{ display:flex; gap:12px; align-items:center; background:var(--vc-green-tint); border:1px solid #bdebd3;
  border-radius:var(--vc-r-sm); padding:12px 13px; margin:14px 0 2px; }
.vc-upsell .vc-txt{ font-size:12.5px; color:#0b6b42; font-weight:600; }
.vc-upsell svg{ flex:0 0 auto; }

.vc-totals{ margin-top:16px; font-size:14px; }
.vc-totals .vc-l{ display:flex; justify-content:space-between; margin-bottom:9px; }
.vc-totals .vc-free{ color:var(--vc-green-dark); font-weight:700; }
.vc-totals .vc-abo-save{ font-size:12.5px; color:var(--vc-green-dark); font-weight:600; margin-bottom:9px; }
.vc-totals hr{ border:0; border-top:1px solid var(--vc-line); margin:13px 0; }
.vc-grand{ display:flex; justify-content:space-between; align-items:baseline; font-size:20px; font-weight:800; }
.vc-grand small{ font-size:11.5px; color:var(--vc-muted); font-weight:500; }

/* Gutschein */
.vc-coupon-head{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-size:14px; font-weight:600; padding:14px 0 0; }
.vc-coupon-head .vc-chev{ transition:transform .2s; }
.vc-coupon-head.open .vc-chev{ transform:rotate(180deg); }
.vc-coupon-body{ display:none; padding-top:12px; }
.vc-coupon-body.open{ display:block; }
.vc-coupon-row{ display:flex; gap:8px; }
.vc-coupon-row input{ height:42px !important; min-height:42px !important; line-height:40px !important; }
.vc-btn-ghost{ height:42px; padding:0 16px; border:1.5px solid var(--vc-line); background:#fff; border-radius:var(--vc-r-sm);
  font-weight:600; font-size:14px; cursor:pointer; white-space:nowrap; }
.vc-btn-ghost:hover{ border-color:var(--vc-green); color:var(--vc-green-dark); }

/* ---- Zahlung ---- */
.vc-payment{ padding:20px 22px; }
/* WooCommerce-Core gibt #payment einen grauen Hintergrund + 5px-Radius
   (.woocommerce #payment{background:#ebe9eb;border-radius:5px}, Spezifität 1,1,0)
   -> schlägt .vc-card (0,1,0), die Zahlungs-Card erschien grau. Mit (1,2,0) sicher
   auf die weiße Card-Optik zurücksetzen. */
.woocommerce-checkout #payment.vc-card{ background:var(--vc-card); border-radius:var(--vc-radius); }
/* Überschrift „Zahlungsart" rendert als nummerierter Schritt 4 (.vc-sec-head
   .vc-num) – Styling kommt aus der gemeinsamen .vc-sec-head h2-Regel oben. */
.vc-checkout .wc_payment_methods{ list-style:none; margin:0; padding:0; }
.vc-checkout .wc_payment_methods li{ border:1.5px solid var(--vc-line); border-radius:var(--vc-r-sm); padding:13px 15px; margin-bottom:10px; list-style:none; }
.vc-checkout .wc_payment_methods li:last-of-type{ margin-bottom:0; }
.vc-checkout .wc_payment_methods li input[type=radio]{ accent-color:var(--vc-green); margin-right:8px; }
.vc-checkout .wc_payment_methods li label{ font-size:14.5px !important; font-weight:600; cursor:pointer; }
.vc-checkout .wc_payment_methods li.vc-chosen{ border-color:var(--vc-green); background:#fbfffd; }
/* Hintergrund mit !important, weil WooCommerce-Core `.woocommerce #payment
   div.payment_box{background:#dfdcde}` (Spezifität 1,2,1) sonst grau gewinnt. */
.vc-checkout .payment_box{ background:#fff !important; border:1px solid var(--vc-line); border-radius:var(--vc-r-sm); padding:11px 13px; margin-top:10px; font-size:13px; }
.vc-checkout .payment_box::before{ display:none !important; }

/* Vorkasse-Info (payment-method.php): „Sie erhalten unsere Bankverbindung …" steckt
   in einem <span class="tooltiptext"> mit inline margin-left:-90px. Ohne Tooltip-CSS
   lief der Text sichtbar inline aus der Card heraus (links). Jetzt als echter
   Hover-Tooltip am ⓘ-Icon: standardmäßig versteckt + position:absolute (out of flow,
   schiebt also nichts mehr), erscheint als Bubble über dem Icon. */
.vc-checkout .wc_payment_methods .tooltip{ position:relative; display:inline-block; vertical-align:middle; line-height:0; }
.vc-checkout .wc_payment_methods .bi-info-circle{ color:var(--vc-muted); cursor:help; vertical-align:middle; }
.vc-checkout .wc_payment_methods .tooltiptext{
  visibility:hidden; opacity:0; position:absolute; z-index:60; left:50%; bottom:calc(100% + 9px);
  transform:translateX(-50%); width:248px; max-width:74vw; margin:0 !important;
  background:var(--vc-ink); color:#fff; font-size:12.5px; font-weight:500; line-height:1.45; text-align:left;
  padding:9px 11px; border-radius:8px; box-shadow:0 8px 24px rgba(16,24,40,.18); transition:opacity .15s; pointer-events:none; }
.vc-checkout .wc_payment_methods .tooltiptext::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--vc-ink); }
.vc-checkout .wc_payment_methods .bi-info-circle:hover + .tooltip .tooltiptext,
.vc-checkout .wc_payment_methods .tooltip:hover .tooltiptext{ visibility:visible; opacity:1; }

/* AGB + Kaufen */
.vc-checkout .woocommerce-terms-and-conditions-wrapper{ font-size:13px; color:#42505f; margin:16px 0; }
/* WooCommerce-Core floatet den Bestellbutton (.woocommerce #payment #place_order{
   float:right}, Spezifität 2,1,0) -> schlug unser float:none und drückte die
   darunterliegende .vc-trust-Zeile in die schmale Float-Lücke links (jedes Wort
   eine Zeile). Mit !important + clear sicher aufheben. */
.vc-checkout #place_order,
.vc-checkout .vc-btn-buy{ width:100%; height:54px; background:var(--vc-green); color:#fff; border:0; border-radius:11px;
  font-size:18px; font-weight:800; cursor:pointer; box-shadow:0 6px 16px rgba(0,187,100,.3); transition:background .15s, transform .05s; float:none !important; clear:both; }
.vc-checkout #place_order:hover{ background:var(--vc-green-dark); }
.vc-checkout #place_order:active{ transform:translateY(1px); }
.vc-trust{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:13px; color:var(--vc-muted); font-size:12.5px; clear:both; }
.vc-trust svg{ width:14px; height:14px; }
.vc-paylogos{ display:flex; gap:7px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.vc-paylogos span{ font-size:11px; font-weight:800; color:#9aa2ad; border:1px solid var(--vc-line); border-radius:5px; padding:3px 7px; background:#fff; }

/* Vertrauens-Zeile: volle Breite als erste Grid-Zeile (grid-column:1/-1), damit
   die linke Karte (.vc-card) und die rechte Sidebar (.vc-aside) oben bündig sind.
   order:-2 hält die Zeile auch mobil (wo .vc-aside per order:-1 nach oben rückt)
   ganz oben. Abstand nach unten kommt über den Grid-gap (kein eigenes margin). */
.vc-secure-top{ grid-column:1 / -1; order:-2; display:flex; align-items:center; justify-content:center; gap:7px; color:var(--vc-muted); font-size:13px; font-weight:600; margin:0; }
.vc-secure-top svg{ width:16px; height:16px; }

/* =====================================================================
   2026-06-24 · Fixes für die Elementor-Einbettung (Warenkorb-Seite 2335)
   ---------------------------------------------------------------------
   Der Checkout steckt in einem Elementor-„HTML"-Widget. Dadurch existiert
   weder #primary (→ Zentrierung griff nicht, Kasse klebte links mit großer
   weißer Leerfläche rechts) noch .content-area (→ grauer Seiten-BG fehlte,
   weiße Cards verschwanden auf Weiß). Außerdem gibt das eh_paypal_express-
   Plugin den Express-Button DOPPELT aus und WP Gift Voucher rendert eine
   „Haben Sie einen Geschenkgutschein?"-Box über dem Formular.
   Geprüft per Headless-Render des echten Seiten-HTML (nicht blind).
   ===================================================================== */

/* 0) Breiten-Fesseln der Elementor/Theme-Wrapper lösen: das HTML-Widget, der
      .woocommerce-Container und das Formular sollen die volle Spaltenbreite
      einnehmen – sonst greift die Zentrierung von .vc-checkout nicht und die
      Kasse klebt schmal links. */
.woocommerce-checkout .elementor-widget-html > .elementor-widget-container,
.woocommerce-checkout .elementor-widget-html .woocommerce,
.woocommerce-checkout form.vc-checkout-form{
  width:100% !important; max-width:none !important; float:none !important; margin:0 !important;
}

/* 1) Zentrierung (ohne grauen Panel-Hintergrund – auf Wunsch entfernt; die
      Cards heben sich über ihre eigene Border + Shadow ab). */
.woocommerce-checkout .vc-checkout{
  max-width:1080px; margin-left:auto !important; margin-right:auto !important;
  background:transparent; padding:22px 0;
}

/* 2) PayPal-Express-Banner entdoppeln (Plugin gibt desc/link 2× aus) + zentrieren.
      Reihenfolge der Geschwister: desc1, link1, desc2, link2 → das 2. Paar weg. */
.woocommerce-checkout .eh_paypal_express_description ~ .eh_paypal_express_description,
.woocommerce-checkout .eh_paypal_express_description ~ .eh_paypal_express_description ~ .eh_paypal_express_link{
  display:none !important;
}
.woocommerce-checkout .eh_paypal_express_description,
.woocommerce-checkout .eh_paypal_express_link{
  display:block !important; text-align:center; max-width:420px; margin:6px auto !important; float:none !important;
}
.woocommerce-checkout .eh_paypal_express_image{ display:inline-block; }

/* 3) Stray-Boxen über dem Formular ausblenden: WP-Gift-Voucher-Prompt/-Form +
      nativer Coupon-Toggle (eigenes Gutscheinfeld sitzt rechts in der Übersicht) */
.woocommerce-checkout .woocommerce-info.whiteBtn,
.woocommerce-checkout .checkout_wpgv_gift_voucher,
.woocommerce-checkout #wpgv-redeem-error,
.woocommerce-checkout .woocommerce-form-coupon-toggle{ display:none !important; }

/* 4) Zentrierung: die Breite fällt bei .site-content von 1298px (#page) auf
      1080px, aber linksbündig. .site-content auf volle Breite bringen und das
      1080px-#primary darin zentrieren (margin:auto). */
.woocommerce-checkout .site-content{ width:100% !important; max-width:100% !important; margin:0 !important; }
.woocommerce-checkout #primary,
.woocommerce-checkout .content-area{ margin-left:auto !important; margin-right:auto !important; }

/* 5) Ein Fremd-Plugin injiziert MEHRFACH inline `label{display:contents!important}`
      (+ Radio/Checkbox-Reposition). display:contents löst die Label-BOX auf →
      Zahlungsart-/Konto-/Toggle-Labels zerfallen und Beschreibungstexte laufen
      aus der Card heraus. Im Checkout gezielt zurückholen (höhere Spezifität +
      !important schlägt die injizierte Regel). */
.woocommerce-checkout .vc-checkout label,
.woocommerce-checkout form.login label{ display:block !important; }
.woocommerce-checkout .vc-checkout .wc_payment_methods li label{ display:block !important; }
/* Pflichtstern bleibt inline im Label */
.woocommerce-checkout .vc-checkout .form-row label .required,
.woocommerce-checkout .vc-checkout .form-row label .optional{ display:inline !important; }

/* =====================================================================
   2026-06-25 · PayPal-Express als 3. Kontakt-Spalte (statt Banner oben)
   ---------------------------------------------------------------------
   Der Express-Button (Plugin eh_paypal_express) ist ein einfacher
   <a class="… eh_paypal_express_link"><img class="… eh_paypal_express_image">
   (KEIN gerenderter PayPal-SDK-Button). vc-checkout.js verschiebt ihn aus dem
   Banner ÜBER dem Formular in #vc-express-slot (3. Spalte) und blendet die Reste
   oben aus. Hier wird der verschobene Button auf Spaltenbreite/-höhe gebracht und
   die Banner-Regeln des 2026-06-24-Blocks gezielt überschrieben (höhere
   Spezifität #vc-express-slot + !important schlägt deren .…_link{…!important}).
   ===================================================================== */
#vc-express-slot{ display:flex; align-items:center; min-height:46px; }
#vc-express-slot .eh_paypal_express_link{
  display:flex !important; align-items:center; justify-content:center;
  width:100% !important; max-width:none !important; min-height:46px; height:46px;
  margin:0 !important; padding:0 !important; float:none !important;
  background:transparent; border:0; border-radius:24px; line-height:1; text-align:center;
}
#vc-express-slot .eh_paypal_express_image{
  display:block !important; width:auto !important; max-width:100% !important;
  height:38px !important; margin:0 !important;
}

/* ---- responsive ---- */
@media (max-width:920px){
  .vc-checkout{ grid-template-columns:1fr; gap:18px; }
  .vc-aside{ position:static; order:-1; }
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper{ grid-template-columns:1fr; }
  #billing_first_name_field, #billing_last_name_field,
  #shipping_first_name_field, #shipping_last_name_field{ grid-column:1 / -1; }
}

/* =====================================================================
   2026-06-29 — Zahlungsarten auf ZWEI reduziert (payment-method.php):
   bacs („Normale Banküberweisung / Vorkasse") + eh_paypal_express
   („PayPal, alle Debit- und Kreditkarten, Apple Pay, Google Pay").
   Hier nur das Layout der Marken-Icons an der PayPal-Sammeloption.
   ===================================================================== */
.vc-pay-label{ vertical-align:middle; }
.vc-pay-icons{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px;
  vertical-align:middle; margin-left:10px;
}
.vc-pay-icons svg{ height:24px; width:auto; display:block; }
@media (max-width:520px){
  .vc-pay-icons{ margin-left:0; margin-top:6px; }
}