@charset "UTF-8";
/* WACAP custom.css – Version 0.5.8 */
/* =====================================================================
   WACAP Night Studio – custom.css
   Wird ohne Kompilieren geladen. Nur zusätzliche Klassen und gezielte
   Überschreibungen; Nova-IDs und -Klassen werden nicht umbenannt.
   ===================================================================== */

/* ---------- Schriften (selbst gehostet, lateinischer Zeichensatz) ---------- */
@font-face {
    font-family: 'Instrument Sans';
    src: url('fonts/instrument-sans-400-600.woff') format('woff');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Archivo';
    src: url('fonts/archivo-semiexpanded-800.woff') format('woff');
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/jetbrains-mono-600.woff') format('woff');
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Farb-Tokens (Aktionsfarbe kommt aus der Template-Einstellung) ---------- */
:root {
    --wa-night: #0E1116;
    --wa-graphite: #1A1F27;
    --wa-steel: #2A313C;
    --wa-chrome: #C9D1DB;
    --wa-paper: #FFFFFF;
    --wa-mist: #F3F5F7;
    --wa-text: #151A21;
    --wa-sub: #5E6773;
    --wa-accent-dark: #0A7D74;
    --wa-line: #E3E7EC;
    --wa-font-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
    --wa-font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --wa-font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

/* ---------- Typografie ---------- */
body {
    font-family: var(--wa-font-body);
    color: var(--wa-text);
}
h1, h2, h3, .h1, .h2, .h3,
.product-title {
    font-family: var(--wa-font-display);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--wa-text);
    text-wrap: balance;
}
.wa-mono { font-family: var(--wa-font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Header (Leiste dunkel) ---------- */
#jtl-nav-wrapper,
#header-top-bar {
    background-color: var(--wa-night);
}
#jtl-nav-wrapper .nav-link,
#jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link,
#header-top-bar a:not(.dropdown-item):not(.btn) {
    color: #FFFFFF;
}
#jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover,
#jtl-nav-wrapper .navbar-nav > .nav-item.active > .nav-link {
    color: var(--wa-accent, #2EE6D6);
}
#shop-logo { max-height: 56px; width: auto; }

/* Suche im Header: Graphit-Feld, Akzent-Button */
#jtl-nav-wrapper .search-wrapper .form-control {
    background-color: var(--wa-graphite);
    border-color: var(--wa-steel);
    color: #FFFFFF;
    border-radius: .625rem 0 0 .625rem;
}
#jtl-nav-wrapper .search-wrapper .form-control::placeholder { color: #8A94A3; }
#jtl-nav-wrapper .search-wrapper .btn {
    background-color: var(--wa-accent, #2EE6D6);
    border-color: var(--wa-accent, #2EE6D6);
    color: var(--wa-accent-ink, #04231F);
    border-radius: 0 .625rem .625rem 0;
}

/* ---------- Aufklappende Menüs im Header: hell ----------
   Mini-Warenkorb, Konto und Mega-Menü sind hell, damit Plugin-Texte
   (z. B. PayPal-Hinweise in Schwarz) lesbar bleiben. */
#jtl-nav-wrapper .dropdown-menu {
    background-color: var(--wa-paper);
    color: var(--wa-text);
    border: 1px solid var(--wa-line);
    border-radius: 0 0 .75rem .75rem;
    box-shadow: 0 18px 40px -18px rgba(14, 17, 22, .45);
}
#jtl-nav-wrapper .dropdown-menu .dropdown-item,
#jtl-nav-wrapper .dropdown-menu .table,
#jtl-nav-wrapper .dropdown-menu .nav-link,
#jtl-nav-wrapper .dropdown-menu a:not(.btn),
#cart-dropdown-container,
#cart-dropdown-container td,
#cart-dropdown-container a:not(.btn) {
    color: var(--wa-text);
}
#jtl-nav-wrapper .dropdown-menu a:not(.btn):hover,
#jtl-nav-wrapper .dropdown-menu .dropdown-item:hover {
    color: var(--wa-accent-dark);
    background-color: var(--wa-mist);
}
#cart-dropdown-container .text-muted,
#cart-dropdown-container small { color: var(--wa-sub); }

/* ---------- Buttons ---------- */
.btn { border-radius: .625rem; font-weight: 600; }
.btn-primary:focus-visible,
.btn:focus-visible,
a:focus-visible,
.form-control:focus {
    outline: 2px solid var(--wa-accent-dark);
    outline-offset: 2px;
    box-shadow: none;
}

/* Kauf-Button auf der Produktseite in der Aktionsfarbe.
   #add-to-cart bleibt unverändert (PayPal und Klarna hängen sich daran). */
#add-to-cart .btn-primary,
.wa-btn-buy {
    background-color: var(--wa-accent, #2EE6D6);
    border-color: var(--wa-accent-dark);
    color: var(--wa-accent-ink, #04231F);
    box-shadow: inset 0 0 0 1px var(--wa-accent-dark);
}
#add-to-cart .btn-primary:hover,
.wa-btn-buy:hover {
    background-color: var(--wa-accent, #2EE6D6);
    filter: brightness(.94);
    color: var(--wa-accent-ink, #04231F);
}

/* ---------- Footer ---------- */
#footer {
    background-color: var(--wa-night);
    color: var(--wa-chrome);
}
#footer .h1, #footer .h2, #footer .h3, #footer .h4, #footer .h5, #footer .h6,
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
#footer .productlist-filter-headline {
    color: #FFFFFF;
    font-family: var(--wa-font-display);
}
#footer a:not(.btn) { color: var(--wa-chrome); }
#footer a:not(.btn):hover { color: var(--wa-accent, #2EE6D6); }

/* ---------- Test-Hinweis (nur wenn in den Einstellungen aktiv) ---------- */
.wa-test-badge {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    z-index: 2000;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--wa-accent, #2EE6D6);
    color: var(--wa-accent-ink, #04231F);
    font: 700 12px/1 Arial, sans-serif;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- 0.2.2: Buttons in Mini-Warenkorb und Footer ----------
   Nova setzt diese Farben über mehrere verschachtelte Regeln (Header-Schriftfarbe,
   Footer-Linkfarbe, Button-Animation). Damit die Buttons sicher lesbar sind,
   werden hier ausnahmsweise !important-Regeln verwendet. */

/* Mini-Warenkorb: „Zur Kasse“ (Rahmen-Button) und „Zum Warenkorb“ (gefüllt) gleich gewichtet */
#cart-dropdown-container .btn.btn-outline-primary,
#cart-dropdown-container .btn.cart-dropdown-next {
    color: var(--wa-night) !important;
    background-color: #FFFFFF !important;
    border: 1px solid var(--wa-night) !important;
}
#cart-dropdown-container .btn.btn-outline-primary:hover,
#cart-dropdown-container .btn.cart-dropdown-next:hover {
    color: #FFFFFF !important;
    background-color: var(--wa-night) !important;
}
#cart-dropdown-container .btn.btn-primary {
    color: #FFFFFF !important;
    background-color: var(--wa-night) !important;
    border: 1px solid var(--wa-night) !important;
}
#cart-dropdown-container .btn.btn-primary:hover {
    background-color: var(--wa-steel) !important;
    border-color: var(--wa-steel) !important;
}
#cart-dropdown-container .btn::after { display: none !important; }

/* Footer: Widerrufs-Button muss gut sichtbar sein → gefüllt in der Aktionsfarbe */
#footer .btn.withdrawal-link {
    background-color: var(--wa-accent, #2EE6D6) !important;
    border: 1px solid var(--wa-accent, #2EE6D6) !important;
    color: var(--wa-accent-ink, #04231F) !important;
    font-weight: 700;
}
#footer .btn.withdrawal-link:hover {
    filter: brightness(.92);
}
#footer .btn.withdrawal-link::after { display: none !important; }

/* Übrige Footer-Buttons (z. B. Newsletter) */
#footer .btn.btn-primary:not(.withdrawal-link),
#footer .btn.btn-outline-primary {
    background-color: transparent !important;
    border: 1px solid var(--wa-chrome) !important;
    color: #FFFFFF !important;
}

/* Copyright-Leiste */
#copyright,
#copyright > div,
#copyright .container,
#copyright .container-fluid {
    background-color: #07090C !important;
    color: var(--wa-chrome) !important;
}
#copyright a { color: var(--wa-chrome) !important; }

/* =====================================================================
   0.3.0: Produktseite
   ===================================================================== */

/* Kopfzeile über der H1 */
.wa-eyebrow {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    align-items: center;
    margin: 0 0 .375rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wa-sub);
}
.wa-eyebrow-brand { color: var(--wa-accent-dark); }
.wa-eyebrow-sep { color: var(--wa-chrome); }

/* Antwortbox „Wofür ist das?“ */
.wa-answer {
    margin: 1rem 0;
    padding: 1rem 1.125rem;
    background: var(--wa-mist);
    border-left: 4px solid var(--wa-accent, #2EE6D6);
    border-radius: 0 .75rem .75rem 0;
}
.wa-answer-label {
    margin: 0 0 .25rem;
    font-family: var(--wa-font-display);
    font-weight: 800;
    font-size: .9375rem;
    color: var(--wa-text);
}
.wa-answer-text { margin: 0; line-height: 1.55; }

/* Fakten-Kacheln */
.wa-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin: 0 0 1rem;
}
.wa-facts-1 { grid-template-columns: minmax(0, 1fr); max-width: 14rem; }
.wa-facts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wa-fact {
    padding: .5rem .625rem;
    border: 1px solid var(--wa-line);
    border-radius: .625rem;
    background: #FFFFFF;
    min-width: 0;
}
.wa-fact dt {
    margin: 0;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--wa-sub);
}
.wa-fact dd {
    margin: .125rem 0 0;
    font-size: .9375rem;
    overflow-wrap: anywhere;
    font-weight: 600;
    color: var(--wa-text);
}

/* Abschnitte unter dem Kaufbereich */
.wa-guide { margin-top: 2rem; }
.wa-section {
    margin: 0 0 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wa-line);
    scroll-margin-top: 6rem;
}
.wa-section-title {
    margin: 0 0 1rem;
    font-size: 1.375rem;
}

/* Schritte */
.wa-steps-meta { margin: -.5rem 0 1rem; color: var(--wa-sub); }
.wa-steps {
    counter-reset: wa-step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .625rem;
    max-width: 48rem;
}
.wa-step {
    counter-increment: wa-step;
    position: relative;
    padding: .75rem .875rem .75rem 3.25rem;
    min-height: 3rem;
    background: var(--wa-mist);
    border-radius: .625rem;
    line-height: 1.45;
}
.wa-step::before {
    content: counter(wa-step);
    position: absolute;
    left: .75rem;
    top: .625rem;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wa-night);
    color: #FFFFFF;
    font: 700 .875rem/1 var(--wa-font-mono);
}

/* Verdünnungsrechner */
.wa-calc {
    max-width: 48rem;
}
.wa-calc-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}
@media (min-width: 576px) {
    .wa-calc-form { grid-template-columns: 2fr 1fr; }
}
.wa-calc-field { display: grid; gap: .25rem; margin: 0; }
.wa-calc-field > span { font-size: .875rem; font-weight: 600; color: var(--wa-sub); }
.wa-calc-result {
    margin: 1rem 0 .25rem;
    padding: .875rem 1rem;
    background: var(--wa-night);
    color: #FFFFFF;
    border-radius: .625rem;
    font-size: 1.0625rem;
}
.wa-calc-result strong { color: var(--wa-accent, #2EE6D6); font-size: 1.25rem; }
.wa-calc-note { font-size: .8125rem; color: var(--wa-sub); margin: 0; }

/* Nicht geeignet / bitte beachten */
.wa-caution-list {
    margin: 0;
    padding: 1rem 1.125rem 1rem 2.5rem;
    max-width: 48rem;
    background: #FFF6F7;
    border: 1px solid #F3C6CC;
    border-radius: .75rem;
}
.wa-caution-list li + li { margin-top: .375rem; }
.wa-caution-list li::marker { color: var(--wa-danger, #D2283A); }

/* FAQ */
.wa-faq { max-width: 48rem; }
.wa-faq-item {
    border: 1px solid var(--wa-line);
    border-radius: .625rem;
    background: #FFFFFF;
}
.wa-faq-item + .wa-faq-item { margin-top: .5rem; }
.wa-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: .875rem 2.75rem .875rem 1rem;
    position: relative;
    font-weight: 600;
}
.wa-faq-item summary::-webkit-details-marker { display: none; }
.wa-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font: 700 1.25rem/1 var(--wa-font-mono);
    color: var(--wa-accent-dark);
}
.wa-faq-item[open] summary::after { content: "–"; }
.wa-faq-item p { margin: 0; padding: 0 1rem 1rem; line-height: 1.55; }

/* Nova-Abschnitte (Accordion) im gleichen Stil */
#tabAccordion .card {
    border: 1px solid var(--wa-line);
    border-radius: .625rem;
    overflow: hidden;
}
#tabAccordion .card + .card { margin-top: .5rem; }
#tabAccordion .card-header {
    background: #FFFFFF;
    font-family: var(--wa-font-display);
    font-weight: 800;
}

/* Bewertungs-Hinweis */
.wa-review-note {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    font-size: .875rem;
    color: var(--wa-sub);
    background: var(--wa-mist);
    border-radius: .625rem;
}

/* Mobile Kaufleiste */
.wa-sticky-buy { display: none; }
@media (max-width: 991.98px) {
    .wa-sticky-buy:not([hidden]) {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .625rem 16px calc(.625rem + env(safe-area-inset-bottom, 0px));
        background: var(--wa-night);
        color: #FFFFFF;
        box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .5);
    }
    .wa-sticky-info { flex: 1 1 auto; min-width: 0; display: grid; }
    .wa-sticky-name {
        font-size: .8125rem;
        color: var(--wa-chrome);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .wa-sticky-price { font-weight: 700; font-size: 1.0625rem; }
    .wa-sticky-buy .wa-btn-buy { flex: 0 0 auto; white-space: nowrap; }
    body.wa-sticky-on { padding-bottom: 4.5rem; }
    /* 0.5.6: Nova-Buttons verdecken die Kaufleiste nicht mehr */
    body.wa-sticky-on #consent-settings-btn {
        bottom: calc(var(--wa-sticky-h, 4.5rem) + .75rem);
    }
    body.wa-sticky-on .smoothscroll-top.show {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* 0.3.1: Kurzbeschreibung */
.product-info .shortdesc { margin: 0 0 1.25rem; line-height: 1.55; }
.product-info .shortdesc > :last-child { margin-bottom: 0; }
.product-info .shortdesc-lead {
    margin: 0 0 .5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--wa-text);
}
.product-info .shortdesc-lead strong { font-weight: 600; }

/* =====================================================================
   0.4.0: Kategorie-, Hersteller- und Problemseiten
   ===================================================================== */

.wa-list-eyebrow { margin-bottom: .25rem; }

/* Beschreibung mit „Mehr lesen“ */
.wa-desc { max-width: 52rem; line-height: 1.6; color: var(--wa-text); }
.wa-desc p { margin: 0 0 .75rem; }
.wa-desc-more { margin: 0 0 1rem; }
.wa-desc-more > summary {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--wa-accent-dark);
}
.wa-desc-more > summary::-webkit-details-marker { display: none; }
.wa-desc-more > summary::after { content: "▾"; font-size: .875em; transition: transform .2s; }
.wa-desc-more[open] > summary::after { transform: rotate(180deg); }
.wa-more-close { display: none; }
.wa-desc-more[open] .wa-more-open { display: none; }
.wa-desc-more[open] .wa-more-close { display: inline; }

/* Unterkategorien: Desktop als Kacheln, Handy als wischbare Chips */
.content-cats-small .sub-categories {
    border: 1px solid var(--wa-line);
    border-radius: .75rem;
    background: #FFFFFF;
    transition: border-color .15s, box-shadow .15s;
}
.content-cats-small .sub-categories:hover {
    border-color: var(--wa-accent-dark);
    box-shadow: 0 10px 24px -16px rgba(14, 17, 22, .45);
}
.content-cats-small .sub-categories .caption a {
    font-weight: 600;
    color: var(--wa-text);
    text-decoration: none;
}
@media (max-width: 767.98px) {
    .content-cats-small {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: .5rem;
        margin: 0 -16px 1rem;
        padding: .25rem 16px .5rem;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .content-cats-small::-webkit-scrollbar { display: none; }
    .content-cats-small > [class*="col-"] {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding: 0;
        margin: 0;
        scroll-snap-align: start;
    }
    .content-cats-small .sub-categories {
        height: auto;
        margin: 0;
        padding: 0;
        border-radius: 999px;
        background: var(--wa-mist);
    }
    .content-cats-small .sub-categories .caption { margin: 0; padding: 0; }
    .content-cats-small .sub-categories .caption a {
        display: block;
        padding: .5rem .875rem;
        white-space: nowrap;
        font-size: .875rem;
    }
}

/* Produktkacheln in Listen */
.productbox .productbox-inner {
    border-radius: .75rem;
}
.productbox-title {
    font-weight: 600;
    line-height: 1.35;
}
.productbox-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--wa-text);
}
.productbox .productbox-price,
.productbox .price {
    font-family: var(--wa-font-display);
    font-weight: 800;
    color: var(--wa-text);
}
.productbox .productbox-image img { border-radius: .5rem; }

/* Filter-Button */
#js-filters {
    border-radius: 999px;
    font-weight: 600;
}

/* Filter am Handy und Tablet als Bottom-Sheet (Nova-Modal #collapseFilter) */
@keyframes wa-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (max-width: 991.98px) {
    #collapseFilter.modal .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        transform: none;
    }
    #collapseFilter.modal.show .modal-dialog { animation: wa-sheet-up .25s ease-out; }
    #collapseFilter .modal-content {
        border: 0;
        border-radius: 1rem 1rem 0 0;
        max-height: 85vh;
        max-height: 85dvh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    #collapseFilter .modal-header {
        position: relative;
        padding-top: 1.25rem;
        border-bottom: 1px solid var(--wa-line);
    }
    #collapseFilter .modal-header::before {
        content: "";
        position: absolute;
        top: .5rem;
        left: 50%;
        width: 2.5rem;
        height: 4px;
        margin-left: -1.25rem;
        border-radius: 2px;
        background: var(--wa-chrome);
    }
    #collapseFilter .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    #collapseFilter .productlist-filter-wrapper { max-height: none; }
}

/* =====================================================================
   0.5.0: Warenkorb, Kasse, Kundenkonto
   Nur Gestaltung – kein Markup geändert. Plugin-Andockpunkte
   (#cart-form, #cart-checkout-btn, #fieldset-payment, #shipping-method,
   #order_register_or_login, #complete_order) bleiben unberührt.
   ===================================================================== */

/* Formulare: größere Felder, 16px gegen Zoom auf iPhones */
.form-control,
.custom-select {
    border-radius: .5rem;
    border-color: #CBD2DA;
}
@media (max-width: 991.98px) {
    .form-control,
    .custom-select {
        min-height: 3rem;
        font-size: 16px;
    }
}
.form-control:focus,
.custom-select:focus {
    border-color: var(--wa-accent-dark);
}

/* Überschriften Warenkorb und Kasse */
.basket-heading,
.checkout-confirmation-heading {
    font-family: var(--wa-font-display);
    font-weight: 800;
}

/* Warenkorb: Zusammenfassung als ruhige Karte */
.cart-summary .card {
    border: 1px solid var(--wa-line);
    border-radius: .75rem;
    background: var(--wa-mist);
}
.cart-summary .card-body { padding: 1.25rem; }

/* Hauptaktionen in der Aktionsfarbe: „Zur Kasse“ und „Zahlungspflichtig bestellen“ */
#cart-checkout-btn,
#complete-order-button {
    display: block;
    width: 100%;
    min-height: 3.25rem;
    padding: .875rem 1rem;
    font-size: 1.0625rem;
    font-weight: 700;
    background-color: var(--wa-accent, #2EE6D6) !important;
    border: 1px solid var(--wa-accent-dark) !important;
    color: var(--wa-accent-ink, #04231F) !important;
}
#cart-checkout-btn:hover,
#complete-order-button:hover {
    filter: brightness(.94);
}
#cart-checkout-btn::after,
#complete-order-button::after { display: none !important; }

/* Hinweis „Versandkostenfrei ab …“ */
.cart-summary + .font-weight-bold,
.cart-summary ~ .font-weight-bold { color: var(--wa-text); }

/* Kasse: Schritt-Anzeige */
.checkout-steps .badge-pill {
    min-width: 1.75rem;
    height: 1.75rem;
    display: inline-grid;
    place-items: center;
    font: 700 .875rem/1 var(--wa-font-mono);
}
.checkout-steps .step-active .badge-primary {
    background-color: var(--wa-night);
    color: #FFFFFF;
}
.checkout-steps .step-current .badge-primary {
    background-color: var(--wa-accent, #2EE6D6);
    color: var(--wa-accent-ink, #04231F);
}
.checkout-steps .step-current .step-text { font-weight: 700; color: var(--wa-text); }
.checkout-steps .step-check { color: var(--wa-success, #1F7A4D); }

/* Kasse: Versand- und Zahlungsarten als auswählbare Karten */
.checkout-shipping-form-options .custom-control,
.checkout-payment-method .custom-control {
    padding: 0;
    margin-bottom: .5rem;
}
.checkout-shipping-form-options .custom-control-label,
.checkout-payment-method .custom-control-label {
    display: block;
    width: 100%;
    padding: .875rem 1rem .875rem 2.75rem;
    border: 1px solid var(--wa-line);
    border-radius: .75rem;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.checkout-shipping-form-options .custom-control-label::before,
.checkout-shipping-form-options .custom-control-label::after,
.checkout-payment-method .custom-control-label::before,
.checkout-payment-method .custom-control-label::after {
    left: 1rem;
    top: 1.05rem;
}
.checkout-shipping-form-options .custom-control-input:checked ~ .custom-control-label,
.checkout-payment-method .custom-control-input:checked ~ .custom-control-label {
    border-color: var(--wa-accent-dark);
    box-shadow: 0 0 0 2px rgba(10, 125, 116, .18);
}
.checkout-shipping-form-options .custom-control-input:focus-visible ~ .custom-control-label,
.checkout-payment-method .custom-control-input:focus-visible ~ .custom-control-label {
    outline: 2px solid var(--wa-accent-dark);
    outline-offset: 2px;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--wa-accent-dark);
    border-color: var(--wa-accent-dark);
}
.checkout-payment-method-badge { color: var(--wa-text); }
.checkout-payment-method-note { display: block; color: var(--wa-sub); font-size: .875rem; }

/* Bestellübersicht */
.checkout-items-item-title { font-weight: 600; }
.checkout-items-total-total { font-family: var(--wa-font-display); font-weight: 800; }
.checkout-confirmation-legal-notice { color: var(--wa-sub); font-size: .875rem; }

/* Kundenkonto: Bereiche als Karten */
#account .account-data-item {
    border: 1px solid var(--wa-line);
    border-radius: .75rem;
    background: #FFFFFF;
    overflow: hidden;
}
#account .account-data-item .card-header {
    background: var(--wa-mist);
    font-family: var(--wa-font-display);
    font-weight: 800;
}
#account .account-head-data { color: var(--wa-sub); }

/* 0.5.1: Zahlungsarten über die volle Breite (Nova setzt sie nebeneinander) */
.checkout-payment-method .custom-control,
.checkout-payment-method .custom-control-inline {
    display: block;
    width: 100%;
    margin-right: 0;
}
.checkout-payment-method .custom-control-label img { max-height: 1.75rem; width: auto; vertical-align: middle; }
/* Kurzbeschreibung in Warenkorb, Kasse und Konto */
li.shortdescription { color: var(--wa-sub); font-size: .875rem; }

/* 0.5.3: Abstände zwischen den Produktseiten-Abschnitten straffen
   (Nova/Bootstrap setzen zusätzliche Außenabstände an section, ol, ul und h2) */
.wa-guide { margin-top: 1.5rem; }
.wa-guide .wa-section {
    margin: 0 !important;
    padding: 1.5rem 0 1.75rem;
}
.wa-guide .wa-section > :last-child { margin-bottom: 0 !important; }
.wa-guide .wa-section-title { margin: 0 0 .875rem; }
.wa-guide .wa-steps,
.wa-guide .wa-caution-list,
.wa-guide .wa-calc-note { margin-bottom: 0 !important; }
.wa-guide + * { margin-top: .5rem; }