/* =====================================================================
 * MusikBlog Shop – Kasse  (body.woocommerce-checkout)
 * ---------------------------------------------------------------------
 * Konsolidiert 2026-07-16 (Paket E): die fruehere Patch-Historie (Stufe 1–22,
 * 789 Zeilen mit teils gegenlaeufigen !important-Regeln) ist hier zu EINER nach
 * Komponenten geordneten Schicht zusammengefasst. KEINE Verhaltensaenderung –
 * das Rendern ist vorher/nachher pixelgleich (Beweis: CDP-Vergleich von
 * getBoundingClientRect + Paint-Properties ueber Desktop/Mobil × hell/dunkel,
 * plus Vorher/Nachher-Screenshots; Doc: docs/auftrag-2026-07-16-paket-e.md).
 *
 * Entfernte tote Regeln (kein Template emittiert die Klassen mehr): mb-co-header,
 * mb-co-minterm, mb-co-prod-meta, .product-quantity, WCs .recurring-total(s)
 * (eigene „danach X / Monat"-Zeile ersetzt sie), sowie durch spaetere Stufen
 * vollstaendig ueberschriebene Deklarationen (Grid auf form.checkout, display
 * flex/block-Zwischenstufen der Produktzeile, doppelte Coupon-/Error-Bloecke).
 *
 * Layout via .co-grid (Template form-checkout.php). Farben IMMER ueber var(--co-*),
 * nie hartkodiert – Dark Mode legt nur die Tokens um. Akzent produktabhaengig.
 * ===================================================================== */

/* ===================== Tokens ======================================== */
body.woocommerce-checkout {
  --co-accent:  #C22BF7;                 /* Default Newcomer-Violett; Fan -> Klasse unten */
  --co-bg:      #FFFFFF;
  --co-surface: #F5F5F5;
  --co-fg:      #222227;
  --co-fg-2:    #55555E;
  --co-fg-3:    #55555E;   /* war #84848E – zu blass im Lightmode; auf naechstdunklere Stufe angehoben */
  --co-border:  rgba(34,34,39,.14);
  --co-radius:  3px;
  --co-shadow:  0 8px 22px rgba(34,34,39,.10);
  --co-dur:     200ms;
  --co-ease:    cubic-bezier(.2,.6,.2,1);
}
/* produktabhaengiger Akzent (Body-Klasse anhand Warenkorb-Kategorie) */
body.woocommerce-checkout.mb-co--fan { --co-accent: #E36A34; }

/* Dark Mode: MusikBlog schaltet ueber body.mb-dark. NUR die Tokens umlegen –
 * alle Flaechen/Texte/Rahmen ziehen daraus (Palette = Design-Handbuch §Tokens). */
body.woocommerce-checkout.mb-dark {
  --co-surface: #2A2A30;   /* Seite */
  --co-bg:      #33333B;   /* Karten/Panels */
  --co-fg:      #F5F5F7;
  --co-fg-2:    #B6B6BE;
  --co-fg-3:    #B6B6BE;
  --co-border:  rgba(255,255,255,.14);
  --co-shadow:  0 8px 22px rgba(0,0,0,.45);
}

/* ===================== Seite + 2-Spalten-Layout ======================
 * Section-Breite kommt aus Elementor (1140px Kit-Default) – kein Breiten-Override.
 * Struktur aus form-checkout.php: form.checkout > .co-grid > (.co-left | .co-right).
 * Seite grau, damit die weissen Panels sich abheben (Design-Vorgabe). */
body.woocommerce-checkout { background: var(--co-surface) !important; }
body.woocommerce-checkout form.checkout { display: block; }

body.woocommerce-checkout .co-grid {
  display: grid;
  /* Uebersicht bis 480px, aber nie mehr als 45% – die linke Spalte kann nie zu
   * einem schmalen Streifen kollabieren, egal wie schmal die Section ist. */
  grid-template-columns: minmax(0,1fr) minmax(0, min(480px, 45%));
  gap: clamp(18px,2.4vw,32px);
  align-items: start;
}
body.woocommerce-checkout .co-left  { grid-column: 1; display: flex; flex-direction: column; gap: clamp(16px,2vw,22px); min-width: 0; }
body.woocommerce-checkout .co-right { grid-column: 2; }
/* wpautop wickelt Whitespace zwischen Template-Bloecken in leere <p> -> die
 * belegen sonst Grid-/Flex-Zellen. Ueberall ausblenden. */
body.woocommerce-checkout .co-grid > p,
body.woocommerce-checkout .co-left > p,
body.woocommerce-checkout .co-right > p { display: none !important; }

/* ===================== Panels ========================================
 * Linke Spalte: Rechnungsadresse + Zahlungsart. Rechte Spalte: Uebersicht.
 * Uebersicht NICHT sticky/floating – das ueberlagerte auf Mobile das Formular. */
body.woocommerce-checkout .woocommerce-billing-fields { background: transparent; border: 0; padding: 0; }

body.woocommerce-checkout .co-left #customer_details,
body.woocommerce-checkout .mb-co-zahlungsart {
  background: var(--co-bg); border: 1px solid var(--co-border);
  border-radius: var(--co-radius); padding: clamp(16px,2vw,22px); box-shadow: none;
}
body.woocommerce-checkout #customer_details { display: flex; flex-direction: column; gap: 0; }
/* WC legt die Rechnungsfelder als schmale .col2-set (float ~48%) an -> volle Breite */
body.woocommerce-checkout #customer_details > *,
body.woocommerce-checkout #customer_details .col2-set { width: 100%; float: none; max-width: none; }
/* „Zusaetzliche Information" (Bestellnotizen, col-2) + stray wpautop-<p> raus */
body.woocommerce-checkout #customer_details .col-2,
body.woocommerce-checkout #customer_details > p { display: none !important; }

body.woocommerce-checkout .co-right {
  position: static;
  background: var(--co-bg); border: 1px solid var(--co-border);
  border-radius: var(--co-radius); box-shadow: var(--co-shadow);
  padding: clamp(16px,2vw,22px);
}
/* #payment bzw. #order_review sitzen in ihren Panels -> kein Doppel-Panel */
body.woocommerce-checkout .mb-co-zahlungsart #payment { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
body.woocommerce-checkout .co-right #order_review { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }

/* ===================== Ueberschriften (nie fett) ===================== */
body.woocommerce-checkout h3,
body.woocommerce-checkout .mb-co-secheading,
body.woocommerce-checkout .woocommerce-billing-fields h3 { font-weight: 400; font-size: 23px; margin: 0 0 14px; }
body.woocommerce-checkout .co-right #order_review_heading { display: block !important; font-weight: 400; font-size: 23px; margin: 0 0 16px; }

/* „Sichere Zahlung"-Badge im Kopf der Zahlungsart-Box */
body.woocommerce-checkout .mb-co-zahlungsart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
body.woocommerce-checkout .mb-co-zahlungsart-head .mb-co-secheading { margin: 0; }
body.woocommerce-checkout .mb-co-secure {
  display: inline-flex; align-items: center; gap: 7px; font-size: 14px;
  font-weight: 600; color: var(--co-fg-2); white-space: nowrap;
}

/* ===================== Eingabefelder ================================= */
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .select2-container .select2-selection {
  border: 1px solid var(--co-border) !important;
  border-radius: var(--co-radius) !important;
  background: var(--co-bg) !important;
  color: var(--co-fg) !important;
  padding: 10px 12px !important;
  font-size: 15px;
  min-height: 44px;
  box-shadow: none !important;
  transition: border-color var(--co-dur) var(--co-ease), box-shadow var(--co-dur) var(--co-ease);
}
body.woocommerce-checkout .form-row input.input-text::placeholder,
body.woocommerce-checkout .form-row textarea::placeholder { color: var(--co-fg-3); opacity: 1; }
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .select2-container--focus .select2-selection {
  border-color: var(--co-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--co-accent) 18%, transparent) !important;
  outline: none;
}
body.woocommerce-checkout .form-row label { font-size: 14px; color: var(--co-fg-2); }
/* Adress-Feld-Labels: Abstand nach unten (klebten am Feld) + oben (Safari-Fix) */
body.woocommerce-checkout #customer_details .form-row > label { display: block; margin-bottom: 5px; margin-top: 2px; }
body.woocommerce-checkout #customer_details .form-row { margin-bottom: 14px; }

/* Land/Region-Select (select2) auf Feldhoehe 44px (rendert sonst 55px) */
body.woocommerce-checkout .select2-container .select2-selection--single {
  height: 44px !important; min-height: 44px !important;
  display: flex; align-items: center; padding: 0 12px !important;
}
/* ⚠ SCHRIFTFARBE gehoert dazu (Fix 05.10.2026, gemessen LIVE 1.0.47): Diese Regel
 * faerbt seit Paket E die BOX dunkel (Feld-Token), aber nie den TEXT darin — der
 * blieb auf WooCommerces select2-Wert #444. Im Dunkelmodus stand „Deutschland"
 * damit bei 1,29:1 auf #33333B, praktisch unlesbar; das Strassenfeld daneben hatte
 * 11,5:1. Kanon: Farbe ist ein EIGENER Messpunkt, getrennt von Groesse und Form.
 * Token statt Festwert, damit hell (#222227) und dunkel (#F5F5F7) beide stimmen.
 * Spezifitaet 0,4,1 schlaegt WCs 0,3,0 ohne !important. */
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered { line-height: normal !important; padding: 0 !important; color: var(--co-fg); }
/* Geschwister derselben Komponente: Platzhalter (#999 bei WC) laege dunkel bei
 * 4,4:1 — knapp unter AA. Selten sichtbar (Land hat einen Vorgabewert), aber
 * dieselbe Luecke. */
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__placeholder { color: var(--co-fg-2); }
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 42px !important; }
/* Select2-Dropdown (Land/Status) haengt an <body> -> ueber die Ergebnis-Listen-IDs */
#select2-billing_country-results .select2-results__option,
#select2-billing_state-results .select2-results__option,
#select2-shipping_country-results .select2-results__option,
#select2-shipping_state-results .select2-results__option { font-size: 15px; }

/* Feld-Fehler/Erfolg theme-konform (kein Woo-Rot/-Gruen) */
body.woocommerce-checkout .form-row.woocommerce-invalid label,
body.woocommerce-checkout .form-row.woocommerce-invalid-required-field label { color: var(--co-fg) !important; }
body.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .form-row.woocommerce-invalid textarea,
body.woocommerce-checkout .form-row.woocommerce-invalid select,
body.woocommerce-checkout .form-row.woocommerce-invalid .select2-container .select2-selection {
  border-color: var(--co-fg) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--co-fg) 12%, transparent) !important;
}
body.woocommerce-checkout .form-row.woocommerce-validated input.input-text,
body.woocommerce-checkout .form-row.woocommerce-validated select,
body.woocommerce-checkout .form-row.woocommerce-validated .select2-container .select2-selection {
  border-color: var(--co-border) !important; box-shadow: none !important;
}

/* ===================== Login-Hinweis (Panel) ========================= */
body.woocommerce-checkout .woocommerce-form-login-toggle { margin: 0 0 clamp(14px,2vw,20px); }
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
  display: flex; align-items: center; gap: 10px;
  background: var(--co-bg); border: 1px solid var(--co-border); border-radius: var(--co-radius);
  padding: 14px 18px; margin: 0; color: var(--co-fg-2); font-size: 15px; box-shadow: none;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before { display: none !important; }
body.woocommerce-checkout .mb-co-login-icon { flex: none; width: 18px; height: 18px; color: var(--co-fg-3); }
body.woocommerce-checkout .woocommerce-form-login-toggle a.showlogin {
  color: var(--co-fg) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}

/* ===================== Express-Checkout (WooPayments) ================
 * Stripe rendert die Apple/Google-Pay-Buttons als 1 Element (volle Breite);
 * 2-spaltig ist NICHT per CSS machbar. Nur den Abstand darunter setzen. */
body.woocommerce-checkout .wcpay-express-checkout-wrapper { margin: 0 !important; }

/* ===================== Zahlungsart-Methoden ==========================
 * Theme/WooPayments faerben #payment SCHWARZ (weisser Text) und .payment_box GRAU
 * -> Karten-Felder unlesbar. Ueber ID-Anker (#payment) hart auf clean/lesbar. */
body.woocommerce-checkout #payment.woocommerce-checkout-payment { background: var(--co-bg) !important; color: var(--co-fg) !important; }
body.woocommerce-checkout #payment ul.wc_payment_methods {
  list-style: none; margin: 0; padding: 0; border: 0;
  display: flex; flex-direction: column; gap: 10px;
}
body.woocommerce-checkout #payment ul.wc_payment_methods li {
  background: var(--co-bg); margin: 0; padding: 12px 14px;
  border: 1px solid var(--co-border); border-radius: var(--co-radius);
  transition: border-color var(--co-dur) var(--co-ease), background var(--co-dur) var(--co-ease);
}
/* Selected-Look strikt am ECHTEN Gateway-Radio (direktes Kind der li, name=
 * payment_method) – NICHT `:has(input:checked)`: die WooPayments-„Karte"-Box enthaelt
 * eine default-checked Checkbox (wc-...-new-payment-method), die auch nach Wechsel auf
 * PayPal checked bleibt (display:none entfernt sie nicht aus dem DOM). `:has(input:checked)`
 * matchte darum die Karte-li dauerhaft -> beide sahen gewaehlt aus. Der Kind-Kombinator
 * `> input:checked` ignoriert alle inneren UPE-/Token-Inputs. Generisch fuer alle Gateways.
 * :has() ist im Ziel-Safari (iOS 15.4+) verfuegbar; ohne :has() entfaellt nur die
 * Zusatz-Optik, WCs eigene Radio-Auswahl bleibt sichtbar (akzeptabler Fallback). */
body.woocommerce-checkout #payment ul.wc_payment_methods li:has(> input:checked) {
  border: 1.5px solid var(--co-accent);
  background: color-mix(in srgb, var(--co-accent) 8%, var(--co-bg));
}
body.woocommerce-checkout #payment ul.wc_payment_methods li label,
body.woocommerce-checkout #payment ul.wc_payment_methods li .wc-payment-gateway-method-name {
  font-weight: 600; font-size: 15px; color: var(--co-fg); cursor: pointer;
}
body.woocommerce-checkout #payment .wc_payment_methods label,
body.woocommerce-checkout #payment .payment_box,
body.woocommerce-checkout #payment .payment_box * { color: var(--co-fg) !important; }
body.woocommerce-checkout #payment .payment_box {
  background: transparent !important; border: 0; margin: 10px 0 0; padding: 0; font-size: 14px;
}
body.woocommerce-checkout #payment .payment_box::before { display: none; }
body.woocommerce-checkout #payment .payment_box label { color: var(--co-fg-2) !important; }
/* WooPayments-Stripe-Element (UPE) fuellt den Container nicht (kollabiert auf Mobile
 * zu einem schmalen Streifen) -> Zahlungsform + UPE-Element hart auf volle Breite.
 * WICHTIG: .payment_box NICHT mit display:block !important zwingen! WC blendet die Box
 * der NICHT gewaehlten Methode per inline `display:none` aus (Methodenwechsel); ein
 * !important-block liesse den Kreditkarten-Container beim Klick auf PayPal offen. Die
 * inneren UPE/Stripe-Elemente stecken IN der Box und werden mit ihr versteckt – sie
 * duerfen (und muessen fuer die Vollbreite) display:block bekommen, die Box selbst nicht. */
body.woocommerce-checkout #payment .payment_box,
body.woocommerce-checkout #payment .wcpay-upe-form,
body.woocommerce-checkout #payment .wc-payment-form,
body.woocommerce-checkout #payment .wcpay-upe-element,
body.woocommerce-checkout #payment .StripeElement {
  width: 100% !important; max-width: 100% !important; box-sizing: border-box;
}
body.woocommerce-checkout #payment .wcpay-upe-form,
body.woocommerce-checkout #payment .wc-payment-form,
body.woocommerce-checkout #payment .wcpay-upe-element,
body.woocommerce-checkout #payment .StripeElement { display: block !important; }
body.woocommerce-checkout #payment .wc-payment-form { min-width: 0 !important; }

/* ===================== Uebersicht: Tabelle + Summen ==================
 * Eigenes review-order.php-Markup: Produktzeile = Kachel + Name; Meta-Zeile
 * (Mindestvertragslaufzeit) als eigene volle Zeile; darunter „danach X / Monat".
 * Tabelle 100% breit, Zellen duerfen umbrechen (nie aus der Box schieben). */
body.woocommerce-checkout .woocommerce-checkout-review-order-table { border: 0; width: 100% !important; max-width: 100%; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead { display: none; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td { border: 0; padding: 9px 0; white-space: normal !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .tax_label { display: none !important; }

/* Produktzeile: Kachel (Beitragsbild oder Akzent-Icon) links, Name als Block */
body.woocommerce-checkout .cart_item td { border-bottom: 1px solid var(--co-border); background: transparent !important; vertical-align: top; }
body.woocommerce-checkout .cart_item .product-name {
  display: table-cell !important; vertical-align: top; position: relative;
  padding: 10px 0 10px 59px !important; min-height: 46px; background: transparent !important;
}
body.woocommerce-checkout .cart_item .product-name::before {
  content: ''; width: 46px; height: 46px; border-radius: var(--co-radius);
  background-color: var(--co-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  position: absolute !important; left: 0; top: 2px; margin: 0;
}
/* Beitragsbild vorhanden -> Akzent-Icon-Kachel weg */
body.woocommerce-checkout .cart_item .product-name:has(.mb-co-thumb)::before { display: none !important; }
body.woocommerce-checkout .cart_item .product-name .mb-co-thumb {
  position: absolute; left: 0; top: 2px; width: 46px; height: 46px;
  border-radius: var(--co-radius); object-fit: cover; display: block;
}
body.woocommerce-checkout .cart_item .mb-co-prod-name { display: block; font-size: 16px; font-weight: 400; color: var(--co-fg); background: transparent; }
body.woocommerce-checkout .cart_item .product-total {
  display: table-cell !important; vertical-align: top; text-align: right;
  white-space: nowrap !important; font-size: 16px; font-weight: 400; color: var(--co-fg);
}
/* Meta-Zeile (Mindestvertragslaufzeit): eigene volle Zeile, linksbuendig; die
 * Produktzeile darueber verliert ihre Unterlinie (Produkt + Meta = ein Block). */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item:has(+ .mb-co-meta-row) td { border-bottom: 0 !important; }
body.woocommerce-checkout .mb-co-meta-row td {
  padding: 6px 0 10px !important; border-bottom: 1px solid var(--co-border) !important;
  font-size: 14px; font-weight: 400; color: var(--co-fg-3); text-align: left; white-space: normal;
}

/* Summen: Zwischensumme/MwSt gedaempft, Gesamt = Label-Groesse (symmetrisch) */
body.woocommerce-checkout .cart-subtotal th, body.woocommerce-checkout .cart-subtotal td,
body.woocommerce-checkout .tax-rate th, body.woocommerce-checkout .tax-rate td { color: var(--co-fg-2); font-size: 14px; }
body.woocommerce-checkout .cart-subtotal td, body.woocommerce-checkout .tax-rate td { text-align: right; }
body.woocommerce-checkout .order-total { border-top: 1px solid var(--co-border); }
body.woocommerce-checkout .order-total th { font-weight: 600; color: var(--co-fg); }
body.woocommerce-checkout .order-total td,
body.woocommerce-checkout .order-total td .amount {
  font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--co-fg); text-align: right;
}
/* „danach X / Monat" – volle Zeile, rechtsbuendig, grau (Designvorgabe) */
body.woocommerce-checkout .mb-co-renewal td {
  padding: 3px 0 0 !important; border: 0 !important;
  font-size: 14px; font-weight: 400; color: var(--co-fg-3); text-align: right; white-space: normal;
}

/* ===================== Gutschein ===================================== */
body.woocommerce-checkout .mb-co-coupon { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
/* Der verwirrende Toggle-Link entfaellt – Feld + „Einloesen" stehen direkt. */
body.woocommerce-checkout .mb-co-coupon .woocommerce-form-coupon-toggle { display: none !important; }
body.woocommerce-checkout .mb-co-coupon-title { flex: 1 0 100%; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--co-accent); }
body.woocommerce-checkout .mb-co-coupon .checkout_coupon { display: block !important; border: 0 !important; padding: 8px 0 0 !important; margin: 0 !important; }
body.woocommerce-checkout .mb-co-coupon .checkout_coupon > p:not(.form-row) { display: none !important; }
body.woocommerce-checkout .mb-co-coupon .form-row-first { flex: 1; float: none !important; width: auto !important; margin: 0 !important; }
body.woocommerce-checkout .mb-co-coupon .form-row-last  { flex: none; float: none !important; width: auto !important; margin: 0 !important; }
body.woocommerce-checkout .mb-co-coupon .clear { display: none !important; }
/* WC rendert <label class="screen-reader-text">…</label><br><input> – das (unsichtbare)
 * Label-<br> schob das Feld nach unten, der Button klebte oben. <br> raus. */
body.woocommerce-checkout .mb-co-coupon .form-row br { display: none !important; }
body.woocommerce-checkout .mb-co-coupon input.input-text { font-size: 14px; }
/* „Einloesen"-Button: ID-Anker schlaegt das graue Default; gleiche Hoehe wie das Feld */
body.woocommerce-checkout #order_review .mb-co-coupon .button {
  background: transparent !important; color: var(--co-fg) !important;
  border: 1px solid var(--co-border) !important; border-radius: var(--co-radius) !important;
  box-shadow: none !important; font-weight: 600 !important; text-transform: none;
  font-size: 14px; min-height: 44px;
}
/* Gutschein-Rueckmeldung (Erfolg/Fehler) kompakt + neutral in der Coupon-Box */
body.woocommerce-checkout .mb-co-coupon-msg { flex: 1 0 100%; margin: 0 0 4px; }
body.woocommerce-checkout .mb-co-coupon-msg .woocommerce-message,
body.woocommerce-checkout .mb-co-coupon-msg .woocommerce-error,
body.woocommerce-checkout .mb-co-coupon-msg .woocommerce-info {
  background: var(--co-bg) !important; border: 1px solid var(--co-border) !important;
  border-left: 3px solid var(--co-fg) !important; border-radius: var(--co-radius) !important;
  color: var(--co-fg) !important; box-shadow: none !important; list-style: none !important;
  margin: 0 !important; padding: 8px 12px !important; font-size: 14px; font-weight: 600;
}
body.woocommerce-checkout .mb-co-coupon-msg .woocommerce-message::before,
body.woocommerce-checkout .mb-co-coupon-msg .woocommerce-error::before,
body.woocommerce-checkout .mb-co-coupon-msg .woocommerce-info::before { display: none !important; }
/* Gutschein-Link (falls doch als Toggle gerendert): Icon + Text in einer Zeile */
body.woocommerce-checkout .mb-co-coupon a.showcoupon { color: var(--co-accent) !important; font-weight: 600; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
body.woocommerce-checkout .mb-co-coupon .mb-co-coupon-icon { flex: none; }

/* ===================== AGB / Datenschutz ============================= */
/* Inline-Aufklappblock (WC-Seiteninhalt) hart weg – AGB oeffnet extern (neuer Tab). */
body.woocommerce-checkout .woocommerce-terms-and-conditions { display: none !important; }
/* Checkbox: Block + absolut positionierte Box, damit Text + „*" natuerlich fliessen. */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.checkbox,
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
  display: block !important; position: relative; padding-left: 28px; gap: 0;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label br { display: none !important; }
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  position: absolute; left: 0; top: 2px; margin: 0;
  width: 18px !important; height: 18px !important; min-height: 0 !important;
  border-radius: 3px !important; padding: 0 !important; flex: none; accent-color: var(--co-accent);
}
/* AGB/DS-Links neutral, unterstrichen (kein Magenta/Pille) */
body.woocommerce-checkout #order_review .woocommerce-terms-and-conditions-wrapper a,
body.woocommerce-checkout #order_review a.woocommerce-privacy-policy-link,
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
  background: none !important; background-color: transparent !important;
  color: inherit !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; font-weight: 400 !important;
  text-decoration: underline !important; text-underline-offset: 2px;
}

/* ===================== Haupt-CTA ===================================== */
/* = der Standard-Button der Preistabelle (.mb-pt-cta, preistabellen.css) — Stephan
 * E6 „A" 05.10.2026: ein Kauf-Knopf, eine Form. Bis 1.0.48 stand hier 600/16px,
 * Padding 14/24 und ein Hover, der HELLER wurde und 1px hochsprang; die
 * Preistabelle wird dunkler und bleibt stehen. Werte: 400/14px, Zeile 1.4,
 * Padding 12/24, min-height 44 (19,6 + 24 = 43,6 — die Tap-Grenze haelt erst die
 * Mindesthoehe), Hover Helligkeit .93. ⚠ Aendert sich einer der beiden Knoepfe,
 * zieht der andere mit — tests/smoke.php Abschnitt 6c vergleicht sie. */
body.woocommerce-checkout #place_order {
  width: 100%; display: block; min-height: 44px;
  background: var(--co-accent) !important; color: #fff !important;
  border: 0; border-radius: var(--co-radius);
  padding: 12px 24px; font-size: 14px; font-weight: 400; line-height: 1.4;
  text-transform: none; letter-spacing: 0; cursor: pointer;
  transition: filter .3s;
}
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #place_order:focus {
  background: var(--co-accent) !important; color: #fff !important;
  filter: brightness(.93);
}
/* Wie die Preistabelle: wer reduzierte Bewegung eingestellt hat, bekommt den
 * Hover ohne Uebergang (vorher fehlte das hier ganz — auch fuer das Anheben). */
@media (prefers-reduced-motion: reduce) {
  body.woocommerce-checkout #place_order { transition: none; }
}

/* ===================== Trust-Bullets ================================= */
body.woocommerce-checkout .mb-co-trust {
  list-style: none; width: 100%; margin: 16px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
body.woocommerce-checkout .mb-co-trust li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--co-fg-3); white-space: normal; }
body.woocommerce-checkout .mb-co-trust .mb-co-check { color: var(--co-accent); flex: none; }

/* ===================== Notices ======================================
 * WC-Notices theme-neutralisieren. „... wurde dem Warenkorb hinzugefuegt" (hat
 * .wc-forward) ausblenden (kein Warenkorb-Konzept). Icon-Glyphen aller drei
 * Notice-Typen aus (das absolute \e016-Glyph lag im schmalen Kasten auf dem Text). */
body.woocommerce-checkout .woocommerce-message:has(.wc-forward) { display: none !important; }
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info {
  border: 1px solid var(--co-border) !important; border-radius: var(--co-radius) !important;
  background: var(--co-bg) !important; color: var(--co-fg) !important; box-shadow: none !important;
}
body.woocommerce-checkout .woocommerce-error {
  background: var(--co-bg) !important; border: 1px solid var(--co-border) !important;
  border-left: 3px solid var(--co-fg) !important; border-radius: var(--co-radius) !important;
  color: var(--co-fg) !important; box-shadow: none !important; list-style: none !important;
  padding: 14px 18px !important; margin: 0 0 16px !important; font-size: 14px;
}
body.woocommerce-checkout .woocommerce-error li,
body.woocommerce-checkout .woocommerce-error li strong,
body.woocommerce-checkout .woocommerce-error li a { background: none !important; color: var(--co-fg) !important; padding: 2px 0 !important; font-weight: 600 !important; }
/* Theme-Pille (#BC16F8) am Fehler-Feld-Link hart schlagen (inkl. Hover/Focus) */
body.woocommerce-checkout .woocommerce-error.woocommerce-error.woocommerce-error li a,
body.woocommerce-checkout .woocommerce-error.woocommerce-error.woocommerce-error li a:hover,
body.woocommerce-checkout .woocommerce-error.woocommerce-error.woocommerce-error li a:focus {
  background: none !important; background-color: transparent !important;
  color: var(--co-fg) !important; padding: 0 !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; font-weight: 600 !important;
  text-decoration: underline !important; text-underline-offset: 2px;
}
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-info::before { content: none !important; display: none !important; }
/* „Weiter einkaufen"-Button in einer Meldung -> neutral statt Magenta */
body.woocommerce-checkout .woocommerce-message .button.button {
  background: var(--co-surface) !important; color: var(--co-fg) !important;
  border: 1px solid var(--co-border) !important; border-radius: var(--co-radius) !important;
  box-shadow: none !important; font-weight: 400 !important;
}

/* ===================== Mobile (≤ 820px) =============================== */
@media (max-width: 820px) {
  body.woocommerce-checkout .co-grid { grid-template-columns: 1fr; }
  /* Explizite Spalten-Platzierung zuruecksetzen – sonst erzwingt grid-column:2 eine
   * implizite 2. Spalte und das Layout bliebe 2-spaltig (Felder/Stripe kollabieren). */
  body.woocommerce-checkout .co-left,
  body.woocommerce-checkout .co-right { grid-column: 1 / -1 !important; }
  body.woocommerce-checkout .co-right { position: static !important; }
  /* Zahlungs-Box + Methoden voll breit (App-Webview kollabierte sie schmal) */
  body.woocommerce-checkout .mb-co-zahlungsart,
  body.woocommerce-checkout #payment,
  body.woocommerce-checkout #payment .wc_payment_methods,
  body.woocommerce-checkout #payment .wc_payment_methods li { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
}