/* Kajinga Checkout — CI: #179AFC / #33CC33 / #07234B */
.kchk { --kchk-primary: #179AFC; --kchk-success: #33CC33; --kchk-navy: #07234B;
    max-width: 480px; margin: 32px auto; font-family: Poppins, Helvetica, Arial, sans-serif; color: var(--kchk-navy); }
/* 1.4.1: Zusammenfassung und Schritte als weiße Karten auf dem Seitenhintergrund. */
.kchk-summary, .kchk-step { background: #fff; border: 1px solid #e3e9f1; border-radius: 10px; box-shadow: 0 1px 3px rgba(7, 35, 75, .06); }
.kchk-summary { padding: 24px; margin-bottom: 20px; }
.kchk .kchk-summary h3 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; }
.kchk-price { font-size: 24px; margin: 8px 0 0; }
.kchk-price span { font-size: 15px; font-weight: normal; }
.kchk-tax-note { font-size: 12px; color: #667; margin: 4px 0 0; }
.kchk-abandon-hint { font-size: 12px; color: #667; margin: 4px 0 0; } /* Task 5 */
.kchk-step { padding: 24px; }
.kchk .kchk-step h4 { margin: 0 0 16px; font-size: 18px; font-weight: 600; line-height: 1.3; }
/* 1.4.1: Theme und Seiten-Shell (z. B. kleverkart `.klk-shell p { margin: 0 }`) setzen Absatz-Abstände auf 0 —
   jedes Feld bekommt seinen Abstand selbst, mit `.kchk`-Präfix, damit die später geladene Shell nicht gewinnt. */
.kchk .kchk-step > p, .kchk .kchk-address-fields p { margin: 0 0 16px; }
.kchk label { display: block; font-size: 14px; margin-bottom: 6px; font-weight: 600; }
.kchk input[type="email"], .kchk input[type="text"], .kchk select {
    width: 100%; min-height: 48px; font-size: 16px; padding: 10px 14px;
    border: 1px solid #ccd5e0; border-radius: 10px; box-sizing: border-box; }
.kchk input:focus, .kchk select:focus { outline: 2px solid var(--kchk-primary); border-color: var(--kchk-primary); }
/* 1.4.1: Einwilligungen — Abstand zum letzten Feld, großes Kästchen, Text eingerückt daneben (auch beim Umbruch). */
.kchk .kchk-step > .kchk-check { margin: 0 0 12px; }
.kchk .kchk-step > :not(.kchk-check) + .kchk-check { margin-top: 24px; }
.kchk-check label { position: relative; padding-left: 30px; margin: 0; font-weight: normal; font-size: 14px; line-height: 1.5; cursor: pointer; }
.kchk-check input { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; margin: 0; accent-color: var(--kchk-primary); cursor: pointer; }
.kchk .kchk-check a { color: var(--kchk-primary); text-decoration: underline; text-underline-offset: 2px; }
.kchk-check input:focus-visible { outline: 2px solid var(--kchk-primary); outline-offset: 2px; }
.kchk-btn { display: block; width: 100%; min-height: 52px; margin-top: 24px; cursor: pointer;
    background: var(--kchk-success); color: #fff; font-size: 17px; font-weight: 600;
    border: 0; border-radius: 10px; }
.kchk-btn:hover { filter: brightness(0.95); }
.kchk-btn:focus-visible { outline: 3px solid var(--kchk-primary); outline-offset: 2px; }
.kchk-btn[disabled] { opacity: 0.6; cursor: wait; }
.kchk .kchk-secure { text-align: center; font-size: 12px; color: #667; margin-top: 12px; }
.kchk-message { background: #fdecea; color: #b71c1c; border-radius: 10px; padding: 12px 16px; margin-top: 14px; font-size: 14px; }
/* 1.10.3: Fortschrittsmeldung neutral (kein Fehler-Eindruck). */
.kchk-message.kchk-message--info { background: #eef3f8; color: #33475b; }
.kchk-success { background: #edfaed; border: 1px solid var(--kchk-success); border-radius: 10px; padding: 20px; text-align: center; }
@media (max-width: 600px) { .kchk { padding: 0 4px; margin: 16px auto; } .kchk-summary, .kchk-step { padding: 18px; } }

/* Conversion-Layer V1 — Templates, Trust, Headline */
.kchk-headline { font-size: 13px; font-weight: 600; color: var(--kchk-primary); margin: 0 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.kchk-subline { font-size: 14px; color: #556; margin: 4px 0 0; }
.kchk-total { font-size: 15px; margin: 8px 0 0; border-top: 1px solid #dbe5f0; padding-top: 8px; }
.kchk-total strong { font-size: 18px; }
/* 1.1.1 (F3/F12): Gesamtbetrag unmittelbar vor dem Bestellknopf — bewusst ohne display-Angabe, damit `hidden` wirkt. */
.kchk .kchk-pay-total { font-size: 16px; margin: 16px 0 0; text-align: right; }
.kchk-pay-total strong { font-size: 20px; }
/* 1.8.4: gekürzter SEPA-Mandatshinweis — bewusst ohne display-Angabe, damit `hidden` wirkt. */
.kchk .kchk-sepa-mandate { font-size: 12px; line-height: 1.5; color: #556; margin: 12px 0 0; }
.kchk .kchk-sepa-mandate p { margin: 0; }
.kchk .kchk-sepa-mandate summary { cursor: pointer; margin-top: 4px; color: var(--kchk-primary); }
.kchk .kchk-sepa-mandate details p { margin-top: 6px; }
/* 1.9.0: Express Checkout — bewusst ohne display-Angabe am Block, damit `hidden` wirkt. */
.kchk .kchk-express { margin: 0 0 20px; }
.kchk .kchk-express-total { font-size: 16px; margin: 8px 0; text-align: right; }
.kchk .kchk-express-total strong { font-size: 20px; }
.kchk .kchk-express-sep { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font-size: 13px; color: #556; }
.kchk .kchk-express-sep::before, .kchk .kchk-express-sep::after { content: ''; flex: 1; border-top: 1px solid #dbe5f0; }
.kchk-trust { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 16px; }
.kchk-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #4a5a6a; }
.kchk-badge svg { color: var(--kchk-success); flex-shrink: 0; }
.kchk-badge em { font-style: normal; }
/* modern/trust: 2-Spalten ab Desktop (Formular links, Zusammenfassung rechts) */
@media (min-width: 860px) {
    .kchk-tpl-modern, .kchk-tpl-trust { max-width: 900px; display: grid; grid-template-columns: 1fr 340px; grid-template-areas: "main summary" "proof summary" "assure summary" ". summary"; grid-template-rows: auto auto auto 1fr; column-gap: 32px; row-gap: 0; align-items: start; }
    /* Zeilenabstand über margin-top statt row-gap: fehlt ein Block (kein Siegel, keine Stimmen), bliebe sonst je
       leere Zeile eine 24-px-Lücke stehen. */
    /* 1.5.4: Links der ganze Kaufweg — Schritte (.kchk-main mit Meldung/Erfolgsbox), darunter Stimmen, dann
       .kchk-assure (Siegel links, Badges + Support daneben; 1.5.5). Rechts nur die Zusammenfassung über alle Zeilen. Bis 1.5.3 stand der Vertrauensblock rechts
       unter der Zusammenfassung; mit Bild, Zahlungswegen, Vorteilen und drei Stimmen wurde die rechte Spalte rund
       dreimal so hoch wie die linke. Die 1fr-Zeile nimmt die Mehrhöhe auf, falls die Zusammenfassung länger ist.
       Die Zusammenfassung bleibt bewusst nicht sticky: sie ist mit Bild und Vorteilen oft höher als das Fenster,
       der untere Teil wäre dann bis zum Ende des Formulars nicht erreichbar. */
    .kchk-tpl-modern .kchk-main, .kchk-tpl-trust .kchk-main { grid-area: main; }
    .kchk-tpl-modern .kchk-summary, .kchk-tpl-trust .kchk-summary { grid-area: summary; margin-bottom: 0; }
    .kchk-tpl-modern #kchk-step-contact, .kchk-tpl-trust #kchk-step-contact,
    .kchk-tpl-modern #kchk-step-payment, .kchk-tpl-trust #kchk-step-payment { grid-area: main; }
    .kchk-tpl-modern .kchk-assure, .kchk-tpl-trust .kchk-assure { grid-area: assure; }
    .kchk-tpl-modern .kchk-trust, .kchk-tpl-trust .kchk-trust { justify-content: flex-start; }
    /* Gecachtes HTML vor 1.5.2 (ohne .kchk-main): Schritte oben per grid-area main (im Stapel wirkungslos),
       Meldung und Erfolgsbox links unter dem Grid — wie bis 1.5.1 unter der rechten Spalte. */
    .kchk-tpl-modern > #kchk-message, .kchk-tpl-trust > #kchk-message,
    .kchk-tpl-modern > #kchk-success, .kchk-tpl-trust > #kchk-success { grid-column: 1; }
    .kchk-tpl-modern .kchk-proof, .kchk-tpl-trust .kchk-proof { grid-area: proof; margin-top: 24px; }
    .kchk.kchk-tpl-modern .kchk-support, .kchk.kchk-tpl-trust .kchk-support { text-align: left; }
}
/* T5 — Adressblock (optional, eingeklappt) + PLZ-Autofill */
.kchk-address { margin: 4px 0 12px; }
.kchk-address-toggle { background: none; border: 0; color: var(--kchk-primary); font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 0; }
.kchk-address-fields { margin-top: 8px; }
.kchk-address-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
@media (max-width: 480px) { .kchk-address-row { grid-template-columns: 1fr; } }

.kchk-bumps { margin: 4px 0 16px; }
.kchk-bump { display: flex; gap: 12px; align-items: flex-start; border: 2px dashed var(--kchk-success); border-radius: 10px; background: #f4fdf4; padding: 14px 16px; margin-bottom: 12px; cursor: pointer; }
.kchk-bump input { margin-top: 3px; width: 20px; height: 20px; flex-shrink: 0; }
.kchk-bump-body { display: flex; flex-direction: column; gap: 4px; }
.kchk-bump-headline { font-size: 15px; }
.kchk-bump-desc { font-size: 13px; color: #556; white-space: pre-line; }
.kchk-bump-cta { font-size: 13px; font-weight: 600; color: #1b7d1b; }
.kchk-bump-price strong { font-size: 16px; }
.kchk-bump-price del { font-size: 13px; color: #889; margin-left: 6px; }

/* 1.1.5 — Auswahlkarten je Zahlungsweg (kajinga-pay ≥ 2.7.8) */
.kchk-options { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; }
.kchk-option { display: flex; gap: 12px; align-items: flex-start; border: 2px solid #dfe3ea; border-radius: 10px; background: #fff; padding: 12px 14px; cursor: pointer; }
.kchk-option:has(input:checked) { border-color: var(--kchk-primary); background: #f3f9ff; }
.kchk-option input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
/* 1.5.8: kein eckiger Fokus-Rahmen um den Radio-Knopf (kam von `.kchk input:focus`) — die Karte zeigt die Auswahl
   schon mit ihrem Rand. Tastatur-Fokus stattdessen als Schein um die ganze Karte. */
.kchk .kchk-option input:focus { outline: none; }
.kchk-option:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(23, 154, 252, .25); }
.kchk-option-body { display: flex; flex-direction: column; gap: 2px; }
.kchk-option-label { font-size: 15px; }
.kchk-option-amount { font-size: 18px; font-weight: 700; }
.kchk-option-desc { font-size: 13px; color: #556; }

/* T8 — PayPal-Buttons unter dem Stripe Payment Element */
/* 1.5.10: größer, mehr Luft zum Button. Selektor mit .kchk, sonst setzt das Theme die Absatz-Abstände (p-Regel). */
.kchk .kchk-paypal-separator { text-align: center; font-size: 15px; color: #556; margin: 22px 0 16px; }
#kchk-paypal-buttons { min-height: 45px; }
.kchk .kchk-paypal-sub-note { font-size: 14px; color: #556; text-align: center; margin: 8px 0 0; }

/* 1.3.0 — Upsell-Angebotsseiten (Shortcodes [kajinga_upsell_ja] / [kajinga_upsell_nein]) */
.kchk-upsell { margin: 24px auto; }
.kchk-upsell-title { margin: 0 0 6px; font-size: 20px; }
.kchk-upsell-price { font-size: 20px; font-weight: 700; margin: 0 0 14px; }
.kchk-upsell-price-inline { font-weight: 700; }
.kchk-upsell-expired { background: #fdecea; color: #b71c1c; border-radius: 10px; padding: 12px 16px; font-size: 14px; }
.kchk-upsell-waiver { margin: 0 0 8px; }
a.kchk-btn.kchk-upsell-link { text-decoration: none; text-align: center; line-height: 52px; box-sizing: border-box; }
.kchk-upsell-no, .kchk-upsell-no-plain { display: inline-block; margin-top: 14px; font-size: 14px; color: #667; }
.kchk-upsell-done { background: #edfaed; border: 1px solid var(--kchk-success); border-radius: 10px; padding: 16px; text-align: center; margin-top: 16px; }
/* 1.4.3: Produktbeschreibung mit Absätzen/Aufzählung (kajinga-pay description_html). */
.kchk .kchk-desc { margin: 0 0 12px; color: #334155; line-height: 1.55; }
.kchk .kchk-desc p { margin: 0 0 10px; }
.kchk .kchk-desc ul { margin: 0 0 10px 1.2em; padding: 0; list-style: disc; }
.kchk .kchk-desc li { margin: 0 0 4px; }
.kchk .kchk-desc > :last-child { margin-bottom: 0; }
/* 1.4.4: Sticky-Leiste mobil — Summe + Sprung zum Knopf des aktiven Schritts. Ab 860px nie sichtbar. */
.kchk-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e3e9f1;
    box-shadow: 0 -4px 16px rgba(7, 35, 75, .10); box-sizing: border-box; }
.kchk-sticky[hidden] { display: none; }
.kchk-sticky-sum { flex: 1; min-width: 0; font-size: 12px; line-height: 1.3; color: #556; }
.kchk-sticky-sum strong { display: block; font-size: 18px; color: var(--kchk-navy); }
.kchk-sticky-btn { flex-shrink: 0; min-height: 48px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--kchk-success); color: #fff; font-size: 15px; font-weight: 600; }
.kchk-sticky-btn:focus-visible { outline: 3px solid var(--kchk-primary); outline-offset: 2px; }
.kchk.kchk-has-sticky { padding-bottom: 80px; }
@media (min-width: 860px) { .kchk-sticky { display: none !important; } .kchk.kchk-has-sticky { padding-bottom: 0; } }
/* 1.4.5: Käufer-Übergabe */
.kchk-buyer-pending #kchk-buyer-fields { visibility: hidden; }
.kchk .kchk-buyer-known { margin: 0 0 16px; padding: 12px 14px; background: #f4f8fd; border-radius: 8px; }

/* 1.5.0: Verkaufsargumente + Trust-Elemente */
.kchk .kchk-image { display: block; width: calc(100% + 48px); max-width: none; margin: -24px -24px 16px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px 10px 0 0; height: auto; }
@media (max-width: 600px) { .kchk .kchk-image { width: calc(100% + 36px); margin: -18px -18px 14px; } }
.kchk .kchk-benefits { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #dbe5f0; }
.kchk .kchk-benefits li { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
.kchk-benefits svg { color: var(--kchk-success); flex-shrink: 0; margin-top: 1px; }
.kchk-guarantee { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: #f4fdf4; border: 1px solid #cfeecf; }
.kchk-guarantee svg { color: var(--kchk-success); flex-shrink: 0; }
.kchk-guarantee strong { display: block; font-size: 15px; }
.kchk-guarantee span { display: block; font-size: 13px; color: #556; margin-top: 2px; }
.kchk-proof { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.kchk .kchk-testimonial { display: flex; gap: 12px; margin: 0; padding: 14px 16px; background: #fff; border: 1px solid #e3e9f1; border-radius: 10px; }
.kchk-testimonial img, .kchk-initials { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.kchk-initials { display: flex; align-items: center; justify-content: center; background: #e8f3fe; color: var(--kchk-primary); font-weight: 700; font-size: 16px; }
.kchk .kchk-testimonial blockquote { margin: 0 0 6px; padding: 0; border: 0; font-size: 14px; line-height: 1.5; font-style: normal; }
.kchk-testimonial figcaption { font-size: 13px; color: #556; }
.kchk .kchk-reviews-note { font-size: 11px; color: #778; margin: 0; }
.kchk .kchk-support { font-size: 13px; color: #556; text-align: center; margin: 12px 0 0; }
/* 1.5.9: 20 px Abstand, eine Zeile. `.kchk-step >` im Selektor, sonst gewinnt `.kchk .kchk-step > p { margin: 0 0 16px }`. */
.kchk .kchk-legal, .kchk .kchk-step > .kchk-legal { font-size: 12px; color: #667; text-align: center; margin: 20px 0 0; line-height: 1.5; }
@media (max-width: 400px) { .kchk .kchk-legal, .kchk .kchk-step > .kchk-legal { font-size: 11px; letter-spacing: -0.1px; } }
.kchk .kchk-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* 1.5.1: Angaben nach Schritt 1 korrigieren */
.kchk .kchk-edit-row { font-size: 13px; color: #556; margin: -8px 0 16px; }
.kchk .kchk-edit-row a { color: var(--kchk-primary); }

/* 1.5.3/1.5.5: Siegel + Badges + Support als ein Block. Mit ProvenExpert-Siegel (kajinga-proseal--inline) steht das
   Siegel links, Badges untereinander und die Support-Zeile rechts daneben — in jedem Layout, auch mobil. */
.kchk .kchk-assure { margin-top: 24px; }
.kchk .kchk-assure.has-proven { display: flex; gap: 24px; align-items: center; }
.kchk .kchk-proven { flex-shrink: 0; }
.kchk .kchk-proven a { text-decoration: none; }
.kchk .kchk-assure-list { min-width: 0; }
.kchk .kchk-assure .kchk-trust { margin-top: 0; }
.kchk .kchk-assure.has-proven .kchk-trust { flex-direction: column; align-items: flex-start; gap: 10px; }
.kchk .kchk-assure.has-proven .kchk-support { text-align: left; }

/* 1.5.11: `hidden` gewinnt immer — `.kchk-btn { display: block }` u. ä. überschrieben es, der Stripe-Bestellknopf blieb im
   PayPal-Modus (und schon vorher im Nur-PayPal-Fall) sichtbar. */
.kchk [hidden] { display: none !important; }

/* 1.5.11: Zahlart-Auswahl oben in Schritt 2 — zwei Kacheln wie die Zahlungsweg-Karten. */
.kchk .kchk-paychoice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px; }
.kchk .kchk-paychoice[hidden] { display: none; }
.kchk .kchk-paychoice-opt { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px; border: 2px solid #dfe3ea; border-radius: 10px; background: #fff; cursor: pointer; font-weight: normal; }
.kchk .kchk-paychoice-opt:has(input:checked) { border-color: var(--kchk-primary); background: #f3f9ff; }
.kchk .kchk-paychoice-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(23, 154, 252, .25); }
.kchk .kchk-paychoice-opt input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--kchk-primary); }
.kchk .kchk-paychoice-opt input:focus { outline: none; }
.kchk .kchk-paychoice-body { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; line-height: 1.3; }
.kchk .kchk-paychoice-body svg { color: var(--kchk-primary); flex-shrink: 0; }
.kchk .kchk-paypal-word { font-size: 20px; font-style: italic; font-weight: 800; letter-spacing: -0.3px; }
.kchk .kchk-paypal-word b:first-child { color: #003087; }
.kchk .kchk-paypal-word b:last-child { color: #009cde; }
@media (max-width: 480px) { .kchk .kchk-paychoice-opt { padding: 12px 10px; gap: 8px; } .kchk .kchk-paychoice-body { font-size: 14px; } .kchk .kchk-paychoice-body svg { display: none; } }

/* 1.6.0: Gutschein-Feld */
.kchk-coupon { margin: 8px 0 12px; }
.kchk-coupon-toggle, .kchk-coupon-remove { background: none; border: 0; padding: 0; color: var(--kchk-primary, #179AFC); text-decoration: underline; cursor: pointer; font: inherit; }
.kchk-coupon-form { display: flex; gap: 8px; margin-top: 8px; }
.kchk-coupon-form input { flex: 1; min-width: 0; text-transform: uppercase; }
.kchk-coupon-apply { white-space: nowrap; }
.kchk-coupon-line { margin: 6px 0 0; color: #1a7f37; font-weight: 600; }
.kchk-coupon-error { margin: 6px 0 0; color: #b42318; }

/* 2.29.0: automatische Angebotsseite */
.kchk-offer { max-width: 640px; margin: 0 auto; }
.kchk-offer-image { width: 100%; height: auto; border-radius: 12px; margin-bottom: 1rem; }
.kchk-offer-title { margin: 0 0 .75rem; }
.kchk-offer-benefits { padding-left: 1.2rem; }
.kchk-offer-actions { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
/* 2.32.2: Bestellübersicht am Kettenende */
.kchk-summary-lines { list-style: none; padding: 0; margin: 1rem 0; border-top: 1px solid #e5e7eb; }
.kchk-summary-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid #e5e7eb; }