/* eit_bk_kasse 1.0.10 */
/* ============================================================================
   EIT Kasse (Beste Kumpels) - Optik
   ----------------------------------------------------------------------------
   Markup: frontend/template/checkout/*.tpl, Verhalten: frontend/js/eit_bk_kasse-*.js
   Vorlage: Kasse-Prototyp (assets/css/kasse.css), dort mit Klassen .co-*; hier .bk-k-*.

   Alles ist unter #checkout bzw. body.bk-k-page gescoped und wirkt nur auf der
   Bestellvorgangsseite, obwohl der Shop die Datei auf jeder Seite lädt.

   Farben kommen aus den --bk-*-Variablen des Templates EIT-BesteKumpels
   (BesteKumpels.css); fehlen sie, gelten die Ersatzwerte hier. Die Kassen-Tokens
   heißen --k-*, damit sie nicht mit dem Template kollidieren.

   Eckenregel: 15 px für Felder und Buttons, 6 px für Karten und Aufklapper,
   nirgends mehr als 15 px.
   ========================================================================== */
body.bk-k-page,
#checkout {
    --k-coral: var(--bk-primary, #CB5550);
    --k-coral-h: var(--bk-primary-hover, #A84335);
    --k-coral-s: var(--bk-primary-soft, #FBF1F1);
    --k-teal: var(--bk-accent, #107C92);
    --k-teal-h: var(--bk-accent-hover, #0C6272);
    --k-teal-s: var(--bk-accent-soft, #ECF5F6);

    --k-ink: var(--bk-text, #3B3535);
    --k-text: #4d4747;
    --k-muted: #7a7573;                 /* lesbar auf Weiß, 4,6:1 */
    --k-faint: var(--bk-muted, #AEAAA8); /* nur Dekoratives */

    --k-field: var(--bk-surface, #F8F6F5);
    --k-line: var(--bk-border, #DFDDDC);
    --k-line-s: var(--bk-border-soft, #EBEAE9);
    --k-control-border: var(--bk-muted, #AEAAA8);

    --k-ok: #29A645;
    --k-ok-s: #edf6f1;

    --k-scrim: rgba(0, 0, 0, .42);
    --k-shadow-panel: rgba(0, 0, 0, .18);
    --k-shadow-toast: rgba(0, 0, 0, .45);
    --k-shadow-soft: rgba(0, 0, 0, .2);
    --k-shadow-cta: rgba(203, 85, 80, .45);

    /* Ebenen: Bootstrap belegt bis 1050 */
    --k-z-sticky: 30;
    --k-z-bar: 35;
    --k-z-overlay: 1040;
    --k-z-sheet: 1041;
    --k-z-toast: 1080;

    --k-radius: 15px;
    --k-box: 6px;
    --k-ease: cubic-bezier(.32, .72, 0, 1);
    --k-spring: cubic-bezier(.34, 1.56, .64, 1);
    --k-indent: 43px;
}

/* ---------------------------------------------------------------------------
   Rahmen und Grundlayout
   ------------------------------------------------------------------------- */
#checkout.bk-k-root,
#checkout {
    color: var(--k-text);
    font-size: 15px;
    line-height: 1.6;
    max-width: 1260px;
    padding-bottom: 70px;
}
#checkout .bk-k-i {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.125em;
}
#checkout .bk-k {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr);
    gap: 46px;
    align-items: start;
}
#checkout .bk-k-title {
    grid-column: 1 / -1;
    margin: 30px 0 2px;
    font-size: 28px;
    font-weight: 800;
    color: var(--k-teal);
    letter-spacing: -.02em;
    line-height: 1.2;
    text-transform: none;
}
#checkout .bk-k-flow { min-width: 0; }
#checkout .bk-k-region { min-width: 0; }
#checkout .bk-k-region[data-stale="1"] [data-bk-sec="versand"],
#checkout .bk-k-region[data-stale="1"] [data-bk-sec="zahlung"] {
    opacity: .45;
    pointer-events: none;
    transition: opacity .25s var(--k-ease);
}

/* Kein Shop-Menü in der Kasse: der Kunde soll nur eine Richtung sehen. */
body.bk-k-page #mainNavigation,
body.bk-k-page .bk-menustrip { display: none !important; }

@keyframes bkKRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes bkKUp { from { transform: translateY(110%); } }
@keyframes bkKShake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes bkKSpin { to { transform: rotate(360deg); } }

/* Nur mit JavaScript: die eingebetteten Weiter-Buttons entfallen, gespeichert
   wird beim Ausfüllen bzw. Anklicken. Ohne JavaScript gilt der normale Ablauf. */
html.bk-js #checkout .bk-k-nojs { display: none !important; }
/* Sicherer Modus nach einem fehlgeschlagenen fetch (Skript setzt html.bk-k-safe): alles nativ */
html.bk-js.bk-k-safe #checkout .bk-k-nojs { display: block !important; }

/* ---------------------------------------------------------------------------
   Abschnittsköpfe (Nummernkreis grau -> Koralle -> Grün mit Haken)
   ------------------------------------------------------------------------- */
#checkout .bk-k-hd {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0 8px;
    margin-top: 10px;
    border-top: 1px solid var(--k-line);
    scroll-margin-top: 110px;
}
#checkout [data-bk-region="adressen"] > .bk-k-hd:first-child { border-top: 0; margin-top: 0; padding-top: 8px; }
#checkout .bk-k-num {
    position: relative;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dedede;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    transition: background .35s var(--k-ease);
}
#checkout .bk-k-num i { font-style: normal; transition: opacity .2s ease; }
#checkout .bk-k-hd[data-view="form"] .bk-k-num { background: var(--k-coral); }
#checkout .bk-k-hd[data-done="1"] .bk-k-num { background: var(--k-ok); }
#checkout .bk-k-hd[data-done="1"] .bk-k-num i { opacity: 0; }
#checkout .bk-k-num-check {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    stroke: #fff;
    stroke-width: 3.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity .15s ease;
}
#checkout .bk-k-num-check path { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .5s var(--k-ease) .08s; }
#checkout .bk-k-hd[data-done="1"] .bk-k-num-check { opacity: 1; }
#checkout .bk-k-hd[data-done="1"] .bk-k-num-check path { stroke-dashoffset: 0; }

#checkout .bk-k-hd-t { flex: 1; min-width: 0; }
#checkout .bk-k-hd-t h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--k-teal);
    letter-spacing: -.015em;
    line-height: 1.3;
    text-transform: none;
}
#checkout .bk-k-hd[data-view="ph"] .bk-k-hd-t h2 { color: var(--k-faint); }
#checkout .bk-k-hd[data-saving="1"] .bk-k-hd-t h2::after {
    content: " · wird gespeichert …";
    font-size: 13px;
    font-weight: 500;
    color: var(--k-muted);
    letter-spacing: 0;
}
#checkout .bk-k-hd-t small {
    display: none;
    font-size: 13.5px;
    color: var(--k-muted);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#checkout .bk-k-hd[data-view="card"] .bk-k-hd-t small { display: block; }
#checkout .bk-k-hd[data-view="card"] .bk-k-hd-t small:empty { display: none; }
#checkout .bk-k-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--k-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
    flex: 0 0 auto;
}
#checkout .bk-k-edit:hover { color: var(--k-teal-h); }
#checkout .bk-k-status {
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--k-muted);
}
#checkout .bk-k-status:empty { display: none; }
#checkout .bk-k-status.is-saved { color: var(--k-ok); }
#checkout .bk-k-status.is-error { color: var(--k-coral-h); }
#checkout .bk-k-secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--k-muted);
}
#checkout .bk-k-secure .bk-k-i { color: var(--k-ok); font-size: 15px; }
#checkout .bk-k-hd[data-view="ph"] .bk-k-secure { display: none; }

/* ---------------------------------------------------------------------------
   Abschnittsrümpfe: Karten, Platzhalter, Formulare
   Die NOVA-Formulare bleiben ein Stück; die Einrückung sitzt am Formular, die
   Köpfe darin ziehen sich mit negativem Rand wieder heraus.
   ------------------------------------------------------------------------- */
#checkout .bk-k-body { padding: 6px 0 4px var(--k-indent); }
#checkout form#form-register,
#checkout form#neukunde,
#checkout form.checkout-shipping-form { padding-left: var(--k-indent); }
#checkout form .bk-k-body { padding-left: 0; }
#checkout form .bk-k-hd { margin-left: calc(-1 * var(--k-indent)); }
#checkout fieldset.bk-k-body { padding-left: 0; }

#checkout .bk-k-ph {
    display: block;
    margin: 4px 0 8px;
    padding: 14px 16px;
    border: 1px dashed var(--k-line);
    border-radius: var(--k-box);
    color: var(--k-muted);
    font-size: 14px;
    line-height: 1.5;
}
#checkout .bk-k-body[data-view="form"] .bk-k-ph { display: none; }
#checkout .bk-k-body[data-view="ph"] .bk-k-live { display: none; }

/* Karten erledigter Schritte */
#checkout .bk-k-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--k-ink);
    line-height: 1.5;
}
#checkout .bk-k-card > .bk-k-i { color: var(--k-teal); font-size: 18px; margin-top: 3px; }
#checkout .bk-k-card > span { flex: 1; min-width: 0; }
#checkout .bk-k-card > span small { display: block; font-size: 12.5px; color: var(--k-muted); }
#checkout .bk-k-card .bk-k-card-price { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
#checkout .bk-k-card--addr { gap: 28px; flex-wrap: wrap; }
#checkout .bk-k-addr { display: flex; flex-direction: column; min-width: 180px; }
#checkout .bk-k-addr small {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--k-muted);
    margin-bottom: 2px;
}

/* ---------------------------------------------------------------------------
   NOVA-Markup innerhalb der Abschnitte zähmen
   ------------------------------------------------------------------------- */
/* Login- und Gastspalte von step0 untereinander statt nebeneinander */
#checkout #register-customer > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
#checkout .checkout-existing-customer .card { border: 0; background: none; box-shadow: none; }
#checkout .checkout-existing-customer .card-body { padding: 0; }
/* Die Überschriftenspalten des Rechnungsadressformulars sind leer (Blöcke
   entfallen), die Feldspalte nimmt die volle Breite. */
#checkout .inc-billing-address-form > .row > .col-md-4,
#checkout .inc-billing-address-form ~ fieldset > .row > .col-md-4 { display: none; }
#checkout .inc-billing-address-form > .row > .col-md-8,
#checkout .inc-billing-address-form ~ fieldset > .row > .col-md-8 { flex: 0 0 100%; max-width: 100%; }
#checkout .register-form-account > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
#checkout .register-form-account > .col-12 > hr { display: none; }
#checkout .inc-shipping-address > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
#checkout .select-shipping-address > .row > .col-md-4 { flex: 0 0 100%; max-width: 100%; }
#checkout .select-shipping-address > .row > .col-md-8 { flex: 0 0 100%; max-width: 100%; }
#checkout .bk-k-region hr { border-color: var(--k-line-s); margin: 14px 0; }
#checkout .bk-k-region fieldset { margin-bottom: 0; min-width: 0; }
#checkout .bk-k-region .h2,
#checkout .bk-k-region .h3,
#checkout .bk-k-region legend {
    font-size: 15px;
    font-weight: 800;
    color: var(--k-ink);
    letter-spacing: 0;
    margin: 10px 0 10px;
    text-transform: none;
}
#checkout .bk-k-required,
#checkout .bk-k-region .required-info { font-size: 13px; color: var(--k-muted); margin: 0 0 12px; }
#checkout .bk-k-region .required-info .required-star,
#checkout .bk-k-region .col-form-label::after { color: var(--k-coral); }
#checkout .bk-k-hint { display: block; font-size: 12.5px; color: var(--k-muted); margin: -4px 0 10px; }
#checkout .checkout-register-form-buttons-privacy { font-size: 13px; }
#checkout .bk-k-formfoot { margin-top: 12px; }
#checkout .bk-k-formfoot--extra { margin-top: 16px; }
#checkout .bk-k-signed {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 17px;
    margin-bottom: 14px;
    border-radius: var(--k-box);
    background: var(--k-field);
    font-size: 14.5px;
    color: var(--k-ink);
}
#checkout .bk-k-signed > .bk-k-i { color: var(--k-teal); font-size: 18px; }
#checkout .bk-k-signed .bk-k-link { margin-left: auto; }

/* Gespeicherte Lieferadressen angemeldeter Kunden (NOVA-Tabelle) */
#checkout #shipping-address-templates { font-size: 14px; }
#checkout #shipping-address-templates td { vertical-align: top; border-color: var(--k-line-s); }
#checkout .dataTables_wrapper .dataTables_length,
#checkout .dataTables_wrapper .dataTables_filter { font-size: 13px; }

/* ---------------------------------------------------------------------------
   Formularfelder - NOVA "label-slide" auf den Prototyp-Stil umbiegen
   (60 px hoch, ohne Rahmen auf Fläche, 11-px-Label im gefüllten Feld)
   ------------------------------------------------------------------------- */
#checkout .form-control,
#checkout .custom-select {
    height: 60px;
    padding: 26px 22px 9px;
    background: var(--k-field);
    border: 1px solid transparent;
    border-radius: var(--k-radius);
    font-size: 15px;
    line-height: 1.4;
    color: var(--k-ink);
    box-shadow: none;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#checkout textarea.form-control {
    height: auto;
    min-height: 116px;
    padding: 31px 22px 14px;
    line-height: 1.55;
    resize: vertical;
}
#checkout .custom-select {
    padding-right: 48px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%237C7C7C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 22px center;
    cursor: pointer;
}
#checkout .form-control:focus,
#checkout .custom-select:focus {
    background: #fff;
    border-color: var(--k-teal);
    box-shadow: 0 0 0 3px var(--k-teal-s);
    outline: 0;
}
#checkout .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) label,
#checkout .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) .col-form-label {
    top: 11px;
    left: 23px;
    transform: none;
    background: none;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--k-muted);
    max-width: calc(100% - 46px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#checkout .label-slide .form-group label::after { background: none; }
/* Leeres, unfokussiertes Feld: Label sitzt mittig als Platzhalter */
#checkout .label-slide .form-group .form-control:placeholder-shown:not(:focus) ~ label,
#checkout .label-slide .form-group .form-control:placeholder-shown:not(:focus) ~ .col-form-label,
#checkout .label-slide .form-group.typeahead-required label:not(.focused) {
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--k-muted);
}
#checkout .label-slide .form-group textarea.form-control:placeholder-shown:not(:focus) ~ label { top: 29px; }
/* PLZ und Ort: der Typeahead-Rahmen (.twitter-typeahead) steht zwischen Feld und Label, die
   Geschwisterregel oben greift dort nicht, und NOVAs .focused am Label hing nach einem Tausch
   auch an leeren Feldern. Deshalb hier direkt am Zustand des Feldes, unabhaengig von .focused. */
#checkout .label-slide .form-group .twitter-typeahead:has(> .tt-input:placeholder-shown:not(:focus)) ~ label,
#checkout .label-slide .form-group .twitter-typeahead:has(> .tt-input:placeholder-shown:not(:focus)) ~ label.focused {
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--k-muted);
}
#checkout .label-slide .form-group .twitter-typeahead:has(> .tt-input:focus) ~ label,
#checkout .label-slide .form-group .twitter-typeahead:has(> .tt-input:not(:placeholder-shown)) ~ label {
    top: 11px;
    transform: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
}
#checkout .label-slide .form-group .optional { font-weight: 400; }

/* PLZ- und Ortsfeld hängen im Shop in einem Typeahead-Wrapper (deshalb .focused) */
#checkout .twitter-typeahead { display: block !important; width: 100%; }
#checkout .twitter-typeahead .tt-menu {
    width: 100%;
    background: #fff;
    border: 1px solid var(--k-line);
    border-radius: var(--k-box);
    box-shadow: 0 8px 24px -8px var(--k-shadow-soft);
    padding: 6px 0;
    z-index: 20;
}
#checkout .twitter-typeahead .tt-suggestion { padding: 8px 20px; font-size: 14px; cursor: pointer; }
#checkout .twitter-typeahead .tt-suggestion:hover,
#checkout .twitter-typeahead .tt-suggestion.tt-cursor { background: var(--k-teal-s); }

/* Fehlerzustand (NOVA: .form-group.has-error + .form-error-msg) */
#checkout .form-group.has-error .form-control,
#checkout .form-group.has-error .custom-select { background: var(--k-coral-s); border-color: var(--k-coral-h); }
#checkout .form-error-msg { font-size: 12.5px; color: var(--k-coral-h); font-weight: 700; padding: 6px 22px 0; order: 9; }
#checkout .form-error-msg i { margin-right: 5px; }
#checkout .bk-k-shake { animation: bkKShake .38s var(--k-ease); }
#checkout .form-group { margin-bottom: 11px; }
#checkout .alert { border-radius: var(--k-box); font-size: 14px; }

@media (max-width: 640px) {
    /* unter 16px zoomt iOS beim Fokus in das Feld hinein */
    #checkout .form-control,
    #checkout .custom-select { font-size: 16px; }
}

/* Checkboxen (Bootstrap custom-control) */
#checkout .custom-control.custom-checkbox { padding-left: 30px; margin: 6px 0 12px; }
#checkout .custom-checkbox .custom-control-label { font-size: 13.5px; line-height: 1.5; color: var(--k-text); font-weight: 400; }
#checkout .custom-checkbox .custom-control-label::before {
    width: 19px;
    height: 19px;
    left: -30px;
    top: 2px;
    border: 1.5px solid var(--k-control-border);
    border-radius: 3px;
    background: #fff;
    transition: all .2s var(--k-ease);
}
#checkout .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background: var(--k-coral); border-color: var(--k-coral); }
#checkout .custom-checkbox .custom-control-label::after { width: 19px; height: 19px; left: -30px; top: 2px; }
#checkout .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px var(--k-teal-s); }

/* E-Mail-Tippfehlervorschlag */
#checkout .bk-k-sugg {
    display: none;
    margin: 6px 0 0 12px;
    padding: 7px 14px;
    border: 1px solid var(--k-teal);
    border-radius: var(--k-radius);
    background: var(--k-teal-s);
    font-size: 13px;
    font-weight: 700;
    color: var(--k-teal);
    cursor: pointer;
    animation: bkKRise .3s var(--k-ease);
}
#checkout .bk-k-sugg[data-on="true"] { display: inline-block; }

/* ---------------------------------------------------------------------------
   Options-Karten für Versandart und Zahlungsart (NOVA-custom-radios)
   ------------------------------------------------------------------------- */
#checkout .checkout-shipping-form-options .custom-control,
#checkout .checkout-payment-method .custom-control {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 9px;
    border: 1.5px solid var(--k-line);
    border-radius: var(--k-box);
    background: #fff;
    transition: border-color .24s var(--k-ease), background .24s var(--k-ease);
}
#checkout .checkout-shipping-form-options .custom-control:hover,
#checkout .checkout-payment-method .custom-control:hover { border-color: #d0d0d0; }
#checkout .checkout-shipping-form-options .custom-control-label,
#checkout .checkout-payment-method .custom-control-label {
    display: block;
    width: 100%;
    padding: 15px 17px 15px 52px;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
    color: var(--k-ink);
}
#checkout .checkout-shipping-form-options .custom-control-input:checked ~ .custom-control-label,
#checkout .checkout-payment-method .custom-control-input:checked ~ .custom-control-label { font-weight: 400; }
#checkout .checkout-shipping-form-options .custom-control:has(.custom-control-input:checked),
#checkout .checkout-payment-method .custom-control:has(.custom-control-input:checked),
#checkout .custom-control.bk-k-on { border-color: var(--k-coral); background: #fefaf9; }
#checkout .checkout-shipping-form-options .custom-control:focus-within,
#checkout .checkout-payment-method .custom-control:focus-within { box-shadow: 0 0 0 3px var(--k-teal-s); }
#checkout .checkout-shipping-form-options .custom-control-label::before,
#checkout .checkout-payment-method .custom-control-label::before {
    width: 18px;
    height: 18px;
    left: 18px;
    top: 17px;
    border: 1.5px solid var(--k-control-border);
    border-radius: 50%;
    background: #fff;
    box-shadow: none;
    transition: border-color .2s var(--k-ease);
}
#checkout .checkout-shipping-form-options .custom-control-input:checked ~ .custom-control-label::before,
#checkout .checkout-payment-method .custom-control-input:checked ~ .custom-control-label::before { background: #fff; border-color: var(--k-coral); }
#checkout .checkout-shipping-form-options .custom-control-label::after,
#checkout .checkout-payment-method .custom-control-label::after {
    width: 9px;
    height: 9px;
    left: 22.5px;
    top: 21.5px;
    border-radius: 50%;
    background: var(--k-coral);
    background-image: none;
    transform: scale(0);
    transition: transform .3s var(--k-spring);
}
#checkout .checkout-shipping-form-options .custom-control-input:checked ~ .custom-control-label::after,
#checkout .checkout-payment-method .custom-control-input:checked ~ .custom-control-label::after { transform: scale(1); }

#checkout .checkout-shipping-form-options .custom-control-label .row.content { display: flex; align-items: center; margin: 0; gap: 6px 0; }
#checkout .checkout-shipping-form-options .custom-control-label .row.content > [class*="col"] { padding-left: 0; padding-right: 0; }
#checkout .checkout-shipping-form-options .custom-control-label .title { font-size: 15.5px; font-weight: 800; color: var(--k-ink); }
#checkout .checkout-shipping-form-options .custom-control-label .title small { display: block; font-size: 13.5px; font-weight: 400; color: var(--k-muted); margin-top: 2px; }
#checkout .checkout-shipping-form-options .custom-control-label .desc { font-size: 13.5px; color: var(--k-muted); }
#checkout .checkout-shipping-form-options .custom-control-label .price-col,
#checkout .checkout-payment-method .checkout-payment-method-badge {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--k-ink);
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
#checkout .checkout-payment-method .checkout-payment-method-badge { float: right; margin-left: 12px; }
#checkout .checkout-payment-method .title { font-size: 15.5px; font-weight: 800; color: var(--k-ink); }
#checkout .checkout-payment-method .checkout-payment-method-note { display: block; font-size: 13.5px; color: var(--k-muted); margin-top: 2px; }
#checkout .checkout-payment-method img { max-height: 26px; width: auto; }
#checkout .checkout-shipping-form-options-specific-cost { display: block; width: 100%; font-size: 13px; color: var(--k-muted); margin-top: 6px; }
#checkout .checkout-shipping-form-options-specific-cost ul { padding-left: 0; list-style: none; margin: 0; }
#checkout .checkout-payment-options { margin: 0; }

/* Verpackungsarten als flachere Variante derselben Karte */
#checkout .checkout-shipping-form-packaging .custom-control { display: block; width: 100%; padding-left: 44px; margin-bottom: 9px; border: 1px solid var(--k-line); border-radius: var(--k-box); }
#checkout .checkout-shipping-form-packaging .custom-control-label { display: block; padding: 13px 15px 13px 0; cursor: pointer; }
#checkout .checkout-shipping-form-packaging-title { font-weight: 700; color: var(--k-ink); }
#checkout .checkout-shipping-form-packaging-desc { color: var(--k-muted); }

/* Zahlungsmodul-Formulare (Plugins) unterhalb der gewählten Karte */
#checkout .payment-method-inner,
#checkout .checkout-additional-payment { padding: 0 0 15px; font-size: 13.5px; color: var(--k-text); }
#checkout fieldset#fieldset-payment > hr { display: none; }

@media (max-width: 560px) {
    #checkout .checkout-shipping-form-options .custom-control-label,
    #checkout .checkout-payment-method .custom-control-label { padding: 14px 13px 14px 46px; }
    #checkout .checkout-shipping-form-options .custom-control-label::before,
    #checkout .checkout-payment-method .custom-control-label::before { left: 14px; top: 16px; }
    #checkout .checkout-shipping-form-options .custom-control-label::after,
    #checkout .checkout-payment-method .custom-control-label::after { left: 18.5px; top: 20.5px; }
}

/* ---------------------------------------------------------------------------
   Buttons und Links
   ------------------------------------------------------------------------- */
#checkout .btn { border-radius: var(--k-radius); font-weight: 700; letter-spacing: 0; text-transform: none; }
#checkout .btn-primary {
    min-height: 52px;
    padding: 12px 34px;
    background: var(--k-coral);
    border-color: var(--k-coral);
    color: #fff;
    font-size: 15.5px;
    transition: background .2s var(--k-ease), border-color .2s var(--k-ease), transform .12s var(--k-ease);
}
/* Timos Button-Regel: Hover ganzer Hintergrund Petrol, Schrift bleibt weiß */
#checkout .btn-primary:hover,
#checkout .btn-primary:focus { background: var(--k-teal); border-color: var(--k-teal); color: #fff; }
#checkout .btn-primary:active { transform: scale(.985); }
#checkout .btn-outline-primary { min-height: 52px; padding: 12px 24px; background: #fff; color: var(--k-coral-h); border: 1.5px solid var(--k-coral); font-size: 15px; }
#checkout .btn-outline-primary:hover { background: var(--k-coral-s); color: var(--k-coral-h); border-color: var(--k-coral); }
#checkout .btn-link { color: var(--k-teal); }
#checkout .bk-k-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--k-teal);
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#checkout .bk-k-link:hover { color: var(--k-teal-h); }
#checkout .bk-k-link--sm { font-size: 13.5px; }

/* ---------------------------------------------------------------------------
   Aufklapper (Login, Anmerkung, Gutschein)
   ------------------------------------------------------------------------- */
#checkout .bk-k-coll {
    border: 1.5px dashed var(--k-line);
    border-radius: var(--k-box);
    margin: 0 0 16px;
    transition: border-color .25s var(--k-ease), background .25s var(--k-ease);
}
#checkout .bk-k-coll--filled { border-style: solid; background: var(--k-field); border-color: transparent; }
#checkout .bk-k-coll[data-open="true"] { border-style: solid; border-color: var(--k-teal); background: #fcfefe; }
#checkout .bk-k-coll-t {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 15px 17px;
    background: none;
    border: 0;
    text-align: left;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--k-ink);
    cursor: pointer;
}
#checkout .bk-k-coll-t > span { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
#checkout .bk-k-coll-t > span .bk-k-i { color: var(--k-teal); font-size: 17px; }
#checkout .bk-k-coll-t em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--k-muted); }
#checkout .bk-k-coll-arr { transition: transform .32s var(--k-ease); font-size: 17px; color: var(--k-muted); }
#checkout .bk-k-coll[data-open="true"] .bk-k-coll-arr { transform: rotate(180deg); }
#checkout .bk-k-coll-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--k-ease); }
#checkout .bk-k-coll[data-open="true"] .bk-k-coll-b { grid-template-rows: 1fr; }
#checkout .bk-k-coll-b > div { overflow: hidden; min-height: 0; }
#checkout .bk-k-coll-in { padding: 2px 17px 17px; }
#checkout .bk-k-coll--filled .form-control { background: #fff; }
#checkout .bk-k-coll .customer-login-buttons { margin-bottom: 0; }
#checkout .bk-k-coll .customer-login-buttons-forgot { padding-left: 0; font-size: 13.5px; }

#checkout .bk-k-orl { display: flex; align-items: center; gap: 13px; margin: 2px 0 18px; color: var(--k-faint); }
#checkout .bk-k-orl::before,
#checkout .bk-k-orl::after { content: ""; flex: 1; height: 1px; background: var(--k-line); }
#checkout .bk-k-orl span { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }

/* ---------------------------------------------------------------------------
   Bestätigungsschritt (Region abschluss)
   ------------------------------------------------------------------------- */
#checkout .bk-k-note { padding-top: 14px; }
#checkout .checkout-confirmation .row > [class*="col-"]:has(> .bk-k-note) { flex: 0 0 100%; max-width: 100%; }
#checkout .checkout-confirmation .row > [class*="col-"]:not(:has(*)) { display: none; }
#checkout .checkout-confirmation .card { border: 1px solid var(--k-line); border-radius: var(--k-box); box-shadow: none; }
#checkout .checkout-confirmation .card-header { background: #fff; border-bottom: 1px solid var(--k-line-s); padding: 13px 17px; }
#checkout .checkout-confirmation .card-body { padding: 15px 17px; }
#checkout .checkout-confirmation-heading { font-size: 15px; font-weight: 800; color: var(--k-ink); text-transform: none; }
#checkout .checkout-confirmation-legal-notice { font-size: 12.5px; color: var(--k-muted); line-height: 1.55; padding-left: var(--k-indent); }
#checkout .checkout-confirmation-legal-notice p { margin: 0 0 8px; }
#checkout .checkout-confirmation .card-products { display: none; }
/* Ohne JavaScript ist die Übersicht auf dem Smartphone nicht erreichbar (Sheet);
   dann zeigt die Seite NOVAs Artikelliste wieder. */
html:not(.bk-js) #checkout .checkout-confirmation .card-products { display: block; }
#checkout .order-submit { padding-left: var(--k-indent); }
#checkout #complete_order > hr { display: none; }
#checkout .bk-k-pay--flow { padding: 6px 0 10px; }
#checkout .bk-k-pay--flow .bk-k-cta { max-width: 420px; }
/* Mit JavaScript übernimmt auf dem Desktop der Button in der Übersicht; dort steht
   auch der Rechtstext. Bleibt der echte Button unsichtbar oder wird er von einem
   Zahlungs-Plugin ersetzt (html.bk-k-foreign-submit), zeigt die Seite ihn wieder. */
@media (min-width: 992px) {
    html.bk-js:not(.bk-k-foreign-submit) #checkout .bk-k-pay--flow,
    html.bk-js:not(.bk-k-foreign-submit) #checkout .checkout-confirmation-legal-notice { display: none; }
}
@media (max-width: 991.98px) {
    #checkout .checkout-confirmation-legal-notice,
    #checkout .order-submit { padding-left: 0; }
}

/* ---------------------------------------------------------------------------
   Bestellübersicht (Aside), mobil als Sheet
   ------------------------------------------------------------------------- */
#checkout .bk-k-aside { position: sticky; top: 92px; min-width: 0; }
#checkout .bk-k-grab { display: none; }
#checkout .bk-k-card-ov { background: #fff; border: 1px solid var(--k-line); border-radius: var(--k-box); overflow: hidden; }
#checkout .bk-k-ov-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--k-line); }
#checkout .bk-k-ov-hd h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--k-teal); text-transform: none; letter-spacing: 0; }
#checkout .bk-k-ov-hd em { font-style: normal; font-size: 13.5px; color: var(--k-muted); margin-left: auto; }
#checkout .bk-k-ov-close { display: none; }

#checkout .bk-k-items { padding: 0 20px; }
#checkout .bk-k-it { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--k-line-s); }
#checkout .bk-k-it:last-child { border-bottom: 0; }
#checkout .bk-k-it--empty { display: block; color: var(--k-muted); font-size: 14px; }
#checkout .bk-k-it-ph { position: relative; width: 52px; height: 52px; border-radius: var(--k-box); background: var(--k-field); overflow: hidden; display: grid; place-items: center; color: var(--k-faint); font-size: 22px; }
#checkout .bk-k-it-ph picture,
#checkout .bk-k-it-ph a { display: block; width: 100%; height: 100%; }
#checkout .bk-k-it-ph img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
#checkout .bk-k-it-n { font-size: 14.5px; font-weight: 700; color: var(--k-ink); line-height: 1.35; }
#checkout .bk-k-it-n a { color: inherit; text-decoration: none; }
#checkout .bk-k-it-n a:hover { color: var(--k-teal); }
#checkout .bk-k-it-s { font-size: 12.5px; color: var(--k-muted); margin-top: 3px; }
#checkout .bk-k-it-p { font-size: 15px; font-weight: 800; color: var(--k-ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#checkout .bk-k-items[data-collapsed="true"] .bk-k-it[data-extra="true"] { display: none; }
#checkout .bk-k-more {
    width: 100%;
    padding: 12px 0;
    border: 0;
    border-top: 1px solid var(--k-line-s);
    background: none;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--k-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
}
#checkout .bk-k-more .bk-k-i { transition: transform .3s var(--k-ease); }
#checkout .bk-k-more[aria-expanded="true"] .bk-k-i { transform: rotate(180deg); }
#checkout .bk-k-cartlink { display: block; padding: 0 20px 14px; font-size: 13px; color: var(--k-muted); text-decoration: underline; text-underline-offset: 2px; }
#checkout .bk-k-cartlink:hover { color: var(--k-teal); }

/* Fortschritt zur Versandkostenfreiheit */
#checkout .bk-k-prog { padding: 15px 20px; background: var(--k-field); border-top: 1px solid var(--k-line); transition: background .5s var(--k-ease); }
#checkout .bk-k-prog-t { display: flex; gap: 9px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--k-text); }
#checkout .bk-k-prog-t b { color: var(--k-ink); font-weight: 800; }
#checkout .bk-k-prog-t .bk-k-i { flex: 0 0 auto; margin-top: 3px; font-size: 17px; color: var(--k-muted); }
#checkout .bk-k-prog-bar { height: 8px; border-radius: 4px; background: #e2e2e2; overflow: hidden; margin-top: 10px; }
#checkout .bk-k-prog-f { height: 100%; border-radius: 4px; background: var(--k-coral); transition: width .6s var(--k-ease), background .5s var(--k-ease); }
#checkout .bk-k-prog.is-done { background: var(--k-ok-s); }
#checkout .bk-k-prog.is-done .bk-k-prog-f { background: var(--k-ok); }
#checkout .bk-k-prog.is-done .bk-k-prog-t b,
#checkout .bk-k-prog.is-done .bk-k-prog-t .bk-k-i { color: var(--k-ok); }

/* Gutschein (NOVA coupon_form.tpl als Aufklapper) */
#checkout .bk-k-cp { border: 0; border-top: 1px solid var(--k-line); border-radius: 0; margin: 0; }
#checkout .bk-k-cp[data-open="true"] { background: #fff; }
#checkout .bk-k-cp .bk-k-coll-t { padding: 14px 20px; font-weight: 400; font-size: 14.5px; color: var(--k-text); }
#checkout .bk-k-cp .bk-k-coll-in { padding: 0 20px 16px; }
#checkout .bk-k-cp .input-group { flex-wrap: nowrap; }
#checkout .bk-k-cp .form-control { border-radius: var(--k-radius) 0 0 var(--k-radius); padding: 18px 22px; }
#checkout .bk-k-cp .input-group-append .btn { border-radius: 0 var(--k-radius) var(--k-radius) 0; min-height: 60px; }
#checkout .bk-k-cp .credit-description { font-size: 12.5px; color: var(--k-muted); margin-bottom: 10px; }

/* Summen */
#checkout .bk-k-sums { padding: 16px 20px 6px; border-top: 1px solid var(--k-line); }
#checkout .bk-k-row { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 14.5px; }
#checkout .bk-k-row > :last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
#checkout .bk-k-row--sm { font-size: 12.5px; color: var(--k-muted); }
#checkout .bk-k-row--gr { margin-top: 11px; padding: 14px 0 5px; border-top: 1px solid var(--k-line); font-size: 18px; font-weight: 800; color: var(--k-ink); align-items: baseline; }
#checkout .bk-k-row--gr b { font-size: 26px; font-weight: 900; letter-spacing: -.025em; }
#checkout .bk-k-row .is-pending { color: var(--k-muted); }
#checkout .bk-k-row .is-ok { color: var(--k-ok); }

/* Bestellbutton */
#checkout .bk-k-pay { padding: 16px 20px 20px; }
#checkout .bk-k-cta,
#checkout .btn.bk-k-cta {
    width: 100%;
    min-height: 58px;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--k-radius);
    background: var(--k-coral);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    text-transform: none;
    box-shadow: 0 3px 12px -3px var(--k-shadow-cta);
    transition: background .3s var(--k-ease), transform .12s var(--k-ease), opacity .2s;
}
#checkout .bk-k-cta:hover:not(:disabled),
#checkout .btn.bk-k-cta:hover:not(:disabled) { background: var(--k-teal); color: #fff; }
#checkout .bk-k-cta:active:not(:disabled) { transform: scale(.99); }
#checkout .bk-k-cta small { font-size: 12.5px; font-weight: 600; opacity: .92; }
#checkout .bk-k-cta small:empty { display: none; }
#checkout .bk-k-cta:disabled,
#checkout .bk-k-cta[disabled] { background: var(--k-line); color: var(--k-muted); box-shadow: none; cursor: not-allowed; transform: none; }
#checkout .bk-k-cta.is-busy { opacity: .75; pointer-events: none; }
#checkout .bk-k-legal { margin: 12px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--k-muted); text-align: center; }
#checkout .bk-k-legal p { margin: 0; }
#checkout .bk-k-legal a { color: var(--k-teal); }
#checkout .bk-k-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 18px; padding: 0 20px 20px; }
#checkout .bk-k-trust div { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--k-muted); }
#checkout .bk-k-trust .bk-k-i { color: var(--k-teal); font-size: 15px; }
#checkout .bk-k-trust a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Mobil: Summenleiste oben, Übersicht als Sheet, feste Bestellleiste unten
   ------------------------------------------------------------------------- */
#checkout .bk-k-mtop,
#checkout .bk-k-mbar { display: none; }
#checkout .bk-k-ov { position: fixed; inset: 0; z-index: var(--k-z-overlay); background: var(--k-scrim); }
#checkout .bk-k-ov[hidden] { display: none; }

@media (max-width: 1199px) { #checkout .bk-k { gap: 32px; } }
@media (max-width: 991.98px) {
    #checkout { padding-bottom: 150px; }
    #checkout .bk-k { grid-template-columns: 1fr; gap: 18px; }
    #checkout .bk-k-title { font-size: 23px; margin-top: 14px; }
    #checkout .bk-k-hd { scroll-margin-top: 140px; }

    #checkout .bk-k-mtop {
        display: block;
        position: sticky;
        top: var(--k-mtop-top, 0px); /* Skript misst den sticky Kopfbereich */
        z-index: var(--k-z-sticky);
        background: rgba(255, 255, 255, .97);
        border-bottom: 1px solid var(--k-line);
        margin: 0 -15px 4px;
        padding: 10px 15px;
    }
    #checkout .bk-k-mtop-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    #checkout .bk-k-mtop-lb { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--k-muted); }
    #checkout .bk-k-mtop b { display: block; font-size: 20px; font-weight: 900; color: var(--k-ink); letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.2; }
    #checkout .bk-k-mtop small { display: block; font-size: 11.5px; color: var(--k-muted); font-weight: 700; }
    #checkout .bk-k-mtop small.is-free { color: var(--k-ok); }
    #checkout .bk-k-mtop button {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--k-teal);
        background: none;
        border: 1.5px solid var(--k-line);
        border-radius: var(--k-radius);
        padding: 9px 14px;
        flex: 0 0 auto;
        cursor: pointer;
    }
    #checkout .bk-k-mtop button .bk-k-i { font-size: 16px; }

    /* Die Übersichtskarte wird zum Sheet */
    #checkout .bk-k-aside {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--k-z-sheet);
        max-height: 87vh;
        background: #fff;
        border-radius: 15px 15px 0 0;
        transform: translateY(101%);
        transition: transform .46s var(--k-ease), visibility 0s linear .46s;
        visibility: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 -8px 40px var(--k-shadow-panel);
    }
    #checkout .bk-k-aside.is-open { transform: none; visibility: visible; transition: transform .46s var(--k-ease); }
    /* Ohne JavaScript gibt es kein Sheet: Übersicht als normale Karte unter dem Ablauf */
    html:not(.bk-js) #checkout .bk-k-aside { position: static; transform: none; visibility: visible; max-height: none; box-shadow: none; border-radius: 0; }
    html:not(.bk-js) #checkout .bk-k-grab { display: none; }
    html:not(.bk-js) #checkout .bk-k-aside .bk-k-card-ov { border: 1px solid var(--k-line); border-radius: var(--k-box); }
    html:not(.bk-js) #checkout .bk-k-mtop { display: none; }
    #checkout .bk-k-grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: #dadada; margin: 10px auto 2px; flex: 0 0 auto; }
    #checkout .bk-k-aside .bk-k-card-ov { border: 0; border-radius: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    #checkout .bk-k-ov-hd { padding: 10px 20px 12px; }
    #checkout .bk-k-ov-hd em { margin-left: 0; }
    #checkout .bk-k-ov-close { display: grid; place-items: center; width: 34px; height: 34px; border: 0; background: none; color: var(--k-muted); cursor: pointer; font-size: 21px; margin-left: auto; }
    /* Bestellt wird mobil über den echten Button unter dem Rechtstext, nicht im Sheet */
    #checkout .bk-k-aside .bk-k-pay,
    #checkout .bk-k-aside .bk-k-trust { display: none; }

    #checkout .bk-k-mbar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--k-z-bar);
        background: rgba(255, 255, 255, .97);
        border-top: 1px solid var(--k-line);
        padding: 8px 16px calc(11px + env(safe-area-inset-bottom));
        animation: bkKUp .5s var(--k-ease) .3s backwards;
        transition: transform .3s var(--k-ease), opacity .3s var(--k-ease);
    }
    #checkout .bk-k-mbar.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
    #checkout .bk-k-mbar .bk-k-cta { min-height: 54px; }
    /* Vor dem Zustand „bereit“ nur weiß umrandet: der Button führt zum offenen Schritt */
    #checkout .bk-k-cta--mbar[data-ready="0"] { background: #fff; color: var(--k-ink); border: 1.5px solid var(--k-line); box-shadow: none; }
    #checkout .bk-k-cta--mbar[data-ready="0"]:hover:not(:disabled) { background: var(--k-field); color: var(--k-ink); }
    html:not(.bk-js) #checkout .bk-k-mbar { display: none; }

    /* Die App-Bottombar des Shops würde sich mit der Bestellleiste stapeln */
    body.bk-k-page .bk-mobile-bottombar { display: none !important; }
}
@media (max-width: 640px) {
    #checkout { --k-indent: 0px; }
    #checkout .bk-k-hd-t h2 { font-size: 18px; }
    #checkout .bk-k-hd { gap: 11px; }
    #checkout .bk-k-card--addr { gap: 14px; }
}

/* ---------------------------------------------------------------------------
   Toasts (dunkel, rechts unten)
   ------------------------------------------------------------------------- */
.bk-k-toasts {
    position: fixed;
    z-index: 1080;
    right: 22px;
    bottom: 22px;
    display: flex;
    flex-direction: column-reverse;
    gap: 9px;
    pointer-events: none;
}
@media (max-width: 991.98px) { .bk-k-toasts { left: 14px; right: 14px; bottom: calc(96px + env(safe-area-inset-bottom)); } }
.bk-k-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: var(--bk-text, #3B3535);
    color: #f2f2f2;
    padding: 14px 17px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    max-width: 380px;
    box-shadow: 0 8px 28px -8px rgba(0, 0, 0, .45);
    animation: bkKRise .44s cubic-bezier(.32, .72, 0, 1);
}
.bk-k-toast svg { flex: 0 0 auto; margin-top: 1px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: #f0a093; }
.bk-k-toast.is-info svg { color: #74d6a0; }
.bk-k-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }

/* Ladezustand während eines Austauschs */
#result-wrapper.bk-k-loading .bk-k-region { opacity: .6; transition: opacity .2s ease; }

@media (prefers-reduced-motion: reduce) {
    #checkout *,
    .bk-k-toasts * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
    }
}