/* =====================================================================
 * cdpcommerce/assets/commerce.css
 * Warenkorb, Kasse und Bestellbestätigung aller CDP-Shops.
 *
 * Der zentrale Renderer gibt seit jeher diese Klassen aus - gestylt
 * waren sie in keinem Shop vollständig. Genau das war der sichtbare
 * Schaden: funktionierender Warenkorb, nacktes HTML.
 *
 * Zwei Regeln, die hier gelten und nicht verhandelbar sind:
 *
 * 1. Kein einziger Selektor greift auf ein blankes Element. Alles
 *    hängt an .cdp-commerce, dem Container des Renderers. Damit kann
 *    diese Datei das Layout eines Shops nicht überschreiben, egal in
 *    welcher Reihenfolge sie geladen wird.
 *
 * 2. Keine Farbe steht hier fest. Alles kommt aus den --cdp-Variablen,
 *    die jeder Shop selbst setzt - dieselben, die auch die zentrale
 *    Produktkomponente benutzt. Ohne Angabe gilt ein neutraler Wert.
 * ===================================================================== */

.cdp-commerce {
    max-width: 1120px;
    margin: 0 auto;
    padding: 32px 20px 56px;
    color: var(--cdp-ink, #15224e);
    font-size: var(--cdp-font-base, 16px);
    line-height: 1.6;
}

.cdp-commerce .page-title {
    margin: 0 0 24px;
    font-size: var(--cdp-font-h1, 34px);
    line-height: 1.15;
    color: var(--cdp-heading, #15224e);
}

.cdp-commerce h2 {
    font-size: var(--cdp-font-h3, 19px);
    color: var(--cdp-heading, #15224e);
    margin: 0 0 6px;
}

.cdp-commerce a { color: var(--cdp-link, #007b88); }

/* Knöpfe ---------------------------------------------------------- */
.cdp-commerce .button-primary {
    display: inline-block;
    padding: 13px 26px;
    background: var(--cdp-cta, #7cff3c);
    color: var(--cdp-cta-ink, #0a1b2e);
    font-size: var(--cdp-cta-size, 16px);
    font-weight: 700;
    text-decoration: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    text-align: center;
}
.cdp-commerce .button-primary:hover { background: var(--cdp-cta-hover, #62e828); }
/* AUFTRAG-296: in jedem Zustand sichtbar und lesbar - normal, Hover, Fokus, aktiv. */
.cdp-commerce .button-primary,
.cdp-commerce .button-primary:hover,
.cdp-commerce .button-primary:focus,
.cdp-commerce .button-primary:focus-visible,
.cdp-commerce .button-primary:active {
    color: var(--cdp-cta-ink, #0a1b2e);
    -webkit-text-fill-color: var(--cdp-cta-ink, #0a1b2e);
    opacity: 1;
    visibility: visible;
}
.cdp-commerce .button-primary:focus,
.cdp-commerce .button-primary:active { background: var(--cdp-cta-hover, #62e828); }
.cdp-commerce .button-primary:focus-visible { background: var(--cdp-cta-hover, #62e828); outline: 2px solid var(--cdp-ink, #15224e); outline-offset: 2px; }
/* AUFTRAG-296: PayPal direkt unter dem Gesamtbetrag in "Deine Bestellung" */
.cdp-commerce .order-summary__pay { margin: 16px 0 0; }
.cdp-commerce .order-summary__pay .cdp-paypal { margin: 0; max-width: none; }
.cdp-commerce .order-summary__pay .cdp-paypal__loading { margin: 0 0 8px; font-size: var(--cdp-font-note, 13px); color: var(--cdp-muted, #5b6b7a); }

.cdp-commerce .remove-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--cdp-cart-ink, var(--cdp-muted, #5b6b7a));
    font: inherit;
    font-size: var(--cdp-font-note, 13px);
    text-decoration: underline;
    cursor: pointer;
}
.cdp-commerce .remove-button:hover { color: var(--cdp-ink, #15224e); }

/* Leerer Warenkorb ------------------------------------------------ */
.cdp-commerce .empty-state {
    background: var(--cdp-surface, #f4f8fa);
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    padding: 32px;
    text-align: center;
}
.cdp-commerce .empty-state p { margin: 0 0 20px; color: var(--cdp-muted, #5b6b7a); }

/* Warenkorb ------------------------------------------------------- */
.cdp-commerce .cart-layout {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
}
/* AUFTRAG-296: gilt auch fuer die inneren Abgrenzungen - Eingabefelder,
 * Auswahlkaesten (Versand/Zahlung), Mengenfelder, Anmelde-/Konto-Karten.
 * Der Kundenbereich (.cdp-cust) behaelt sein globales Layout mit
 * --cdp-line/--cdp-border (auf Anordnung zu 296 wiederhergestellt).
 * Ein Token, je Shop.
 *
 * AUFTRAG-294: EINE Rahmenregel fuer alle sichtbaren Commerce-Karten.
 *
 * Produktbereich, Warenkorb (Positionen, Bild, Menge, Summenbox, leerer
 * Warenkorb), Kasse (jede Karte, ihr Kopf, die Bestelluebersicht) und
 * Bestaetigung tragen
 *
 *     border: 1px solid var(--cdp-commerce-border, var(--cdp-border));
 *
 * Die Farbe gehoert dem Shop und steht nur in seiner cdp-brand.css
 * (smarfie.shop: #15224e). Setzt ein Shop sie nicht, gilt sein
 * --cdp-border - ohne Aenderung seines bisherigen Aussehens. Die
 * frueheren Einzelwerte --cdp-cart-border (Auftrag 249) und
 * --cdp-checkout-border (Auftrag 246) sind damit abgeloest; eckig
 * (border-radius 0) bleibt alles.
 *
 * Unveraendert: --cdp-cart-ink (Texte des Warenkorbs) und der 4px-
 * Streifen unter der Summenbox in #f70000 (Markenakzent der Shopdatei,
 * zu Auftrag 249 bestaetigt - bei einer Farbrunde nicht mitfaerben).
 */

.cdp-commerce .cart-lines { display: grid; gap: 16px; }

.cdp-commerce .cart-line {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    background: var(--cdp-page, #fff);
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    padding: 16px;
}
.cdp-commerce .cart-line > img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    background: var(--cdp-page, #fff);
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
}
.cdp-commerce .cart-line h2 a { text-decoration: none; color: var(--cdp-heading, #15224e); }
.cdp-commerce .cart-line p {
    margin: 0 0 12px;
    color: var(--cdp-cart-ink, var(--cdp-muted, #5b6b7a));
    font-size: var(--cdp-font-note, 13px);
}
.cdp-commerce .cart-line > strong {
    font-size: var(--cdp-font-price, 26px);
    color: var(--cdp-brand, #0a1b2e);
    white-space: nowrap;
}

.cdp-commerce .cart-line__qty { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 8px; }
.cdp-commerce .cart-line__qty label { display: block; }
.cdp-commerce .cart-line__qty label span {
    display: block;
    font-size: var(--cdp-font-note, 13px);
    color: var(--cdp-cart-ink, var(--cdp-muted, #5b6b7a));
    margin-bottom: 4px;
}
.cdp-commerce .cart-line__qty input {
    width: 84px;
    padding: 8px 10px;
    background: var(--cdp-input-bg, #fff);
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    color: var(--cdp-ink, #15224e);
    border-radius: 0;
    font: inherit;
}
.cdp-commerce .cart-line__qty button {
    padding: 9px 16px;
    background: var(--cdp-surface, #f4f8fa);
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    color: var(--cdp-ink, #15224e);
    border-radius: 0;
    font: inherit;
    cursor: pointer;
}
.cdp-commerce .cart-line__qty button:hover { border-color: var(--cdp-brand, #0a1b2e); }
.cdp-commerce .cart-line__remove { margin: 0; }

/* Summe ----------------------------------------------------------- */
.cdp-commerce .order-summary {
    background: var(--cdp-surface, #f4f8fa);
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    padding: 20px;
    display: grid;
    gap: 12px;
    position: sticky;
    top: 16px;
}
.cdp-commerce .order-summary > div { display: flex; justify-content: space-between; gap: 16px; }
.cdp-commerce .order-summary > div:last-of-type {
    border-top: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    padding-top: 12px;
    font-size: var(--cdp-font-h3, 19px);
}
.cdp-commerce .order-summary span { color: var(--cdp-cart-ink, var(--cdp-muted, #5b6b7a)); }
.cdp-commerce .order-summary strong { color: var(--cdp-heading, #15224e); white-space: nowrap; }
.cdp-commerce .order-summary form { margin: 0; text-align: center; }

/* Kasse ------------------------------------------------------------ */
.cdp-commerce .checkout-layout {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
}
.cdp-commerce .checkout-card {
    background: var(--cdp-page, #fff);
    /* AUFTRAG-294: die eine Commerce-Rahmenregel (Farbe aus der Marke). */
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    margin: 0 0 18px;
}
/* AUFTRAG-246: PayPal-Buttons im Bereich Zahlung */
/* "hidden" bleibt versteckt, auch wenn Marken-CSS Knöpfe als block setzt */
.cdp-commerce [hidden] { display: none !important; }
.cdp-commerce .cdp-paypal { margin: var(--cdp-ui-gap, 16px) 0 0; max-width: 420px; }
.cdp-commerce .cdp-paypal__msg { margin: 12px 0 0; }
.cdp-commerce .checkout-card > h2 {
    margin: 0;
    padding: 14px 18px;
    background: var(--cdp-surface, #f4f8fa);
    border-bottom: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
}
.cdp-commerce .checkout-card__body { padding: 18px; }

/* .checkout-fields haelt die Karten, nicht die Felder - sie stehen
 * untereinander. Erst innerhalb einer Karte werden die Felder
 * nebeneinander gesetzt. */
.cdp-commerce .checkout-fields { display: block; }

.cdp-commerce .field-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.cdp-commerce .checkout-card__body > .checkout-field { margin: 0 0 14px; }
.cdp-commerce .checkout-card__body > .checkout-field:last-child { margin-bottom: 0; }
.cdp-commerce .checkout-field { display: block; }
.cdp-commerce .checkout-field span {
    display: block;
    font-size: var(--cdp-font-note, 13px);
    color: var(--cdp-muted, #5b6b7a);
    margin-bottom: 5px;
}
.cdp-commerce .checkout-field input,
.cdp-commerce .checkout-field select,
.cdp-commerce .checkout-field textarea {
    width: 100%;
    padding: 11px 12px;
    background: var(--cdp-input-bg, #fff);
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    color: var(--cdp-ink, #15224e);
    border-radius: 0;
    font: inherit;
}
.cdp-commerce .checkout-field input:focus,
.cdp-commerce .checkout-field select:focus {
    outline: 2px solid var(--cdp-accent, #00c3d7);
    outline-offset: 1px;
}

.cdp-commerce .checkout-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    margin: 0 0 10px;
    cursor: pointer;
}
.cdp-commerce .checkout-choice:hover { border-color: var(--cdp-brand, #0a1b2e); }
.cdp-commerce .checkout-choice input { margin-top: 3px; }
/* AUFTRAG-296: Zahlungsbedingungen des Shops unter der Zahlungsart */
.cdp-commerce .checkout-choice__terms { display: block; margin: 4px 0 0; font-size: var(--cdp-font-note, 13px); color: var(--cdp-muted, #5b6b7a); }

.cdp-commerce .checkout-account-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: var(--cdp-font-note, 13px);
    color: var(--cdp-muted, #5b6b7a);
}

.cdp-commerce .order-pay { margin-top: 18px; }
/* AUFTRAG-294: Angaben speichern, gespeicherte Adressen, markierte Felder */
.cdp-commerce .checkout-save {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    margin: 0 0 18px;
}
.cdp-commerce .checkout-save .checkout-account-toggle { margin: 0; }
.cdp-commerce .checkout-address-pick { margin: 14px 0 0; }
.cdp-commerce .checkout-address-pick select { width: 100%; max-width: 100%; }
.cdp-commerce .checkout-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }
.cdp-commerce .checkout-actions .button-secondary,
.cdp-commerce .checkout-save .button-secondary { white-space: normal; text-align: center; }
.cdp-commerce .checkout-field input[aria-invalid="true"] { border-color: #c0392b; outline: 1px solid #c0392b; outline-offset: 0; }
.cdp-commerce .checkout-identity__choice button.button-primary { font-family: inherit; }

/* Produktseite: Warenkorbzeile -------------------------------------- */
.cdp-commerce .pd-cart-row,
.pd-cart-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pd-qty { display: block; }
.pd-qty span { display: block; font-size: var(--cdp-font-note, 13px); color: var(--cdp-muted, #5b6b7a); margin-bottom: 4px; }
.pd-qty__input {
    width: 84px;
    padding: 10px 12px;
    background: var(--cdp-input-bg, #fff);
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    color: var(--cdp-ink, #15224e);
    border-radius: 0;
    font: inherit;
}
.pd-soldout { color: var(--cdp-muted, #5b6b7a); font-weight: 700; }

.cdp-commerce .visually-hidden,
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Meldungen -------------------------------------------------------- */
.cdp-commerce .status-message,
.status-message {
    max-width: 1120px;
    margin: 16px auto 0;
    padding: 12px 18px;
    background: var(--cdp-surface, #f4f8fa);
    border-left: 3px solid var(--cdp-accent, #00c3d7);
    color: var(--cdp-ink, #15224e);
}
.status-message--error { border-left-color: #c0392b; }

/* Schmale Geräte --------------------------------------------------- */
@media (max-width: 900px) {
    .cdp-commerce .cart-layout,
    .cdp-commerce .checkout-layout { grid-template-columns: 1fr; }
    .cdp-commerce .order-summary { position: static; }
}
@media (max-width: 600px) {
    .cdp-commerce { padding: 20px 16px 40px; }
    .cdp-commerce .cart-line { grid-template-columns: 72px minmax(0, 1fr); }
    .cdp-commerce .cart-line > img { width: 72px; height: 72px; }
    .cdp-commerce .cart-line > strong { grid-column: 1 / -1; }
    .cdp-commerce .cart-line__qty { flex-wrap: wrap; }
}

/* Konto oder Gast (AUFTRAG-244) ------------------------------------- */
.cdp-commerce .checkout-identity__choice {
    display: flex;
    align-items: center;
    gap: var(--cdp-ui-gap, 16px);
    flex-wrap: wrap;
}
.cdp-commerce .checkout-identity__or {
    color: var(--cdp-muted, #5b6b7a);
    font-size: var(--cdp-font-note, 13px);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.cdp-commerce .checkout-identity__guest {
    flex: 1 1 260px;
    min-width: 0;
    color: var(--cdp-ink, #15224e);
}
.cdp-commerce .checkout-identity__hint {
    margin: var(--cdp-ui-gap, 16px) 0 0;
    color: var(--cdp-muted, #5b6b7a);
    font-size: var(--cdp-font-note, 13px);
}
.cdp-commerce .checkout-identity__known {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--cdp-ui-gap-sm, 8px);
    flex-wrap: wrap;
}
.cdp-commerce .checkout-identity__nr {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--cdp-font-note, 13px);
    color: var(--cdp-muted, #5b6b7a);
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    padding: 2px 8px;
}
@media (max-width: 600px) {
    .cdp-commerce .checkout-identity__choice { flex-direction: column; align-items: stretch; }
    .cdp-commerce .checkout-identity__or { text-align: center; }
}

/* Kundenkonto (AUFTRAG-245) ----------------------------------------
 * Dieselbe Struktur wie der Kundenbereich von smarfie.shop, aber ohne
 * dessen Marke: Farben und Schriften kommen aus den --cdp-Variablen,
 * die jeder Shop selbst setzt. Die Größen sind die zentralen aus
 * Auftrag 244 - keine Sondergrößen für ein einzelnes Konto.
 */
.cdp-account__who {
    margin: 0 0 var(--cdp-ui-stack, 20px);
    display: flex; align-items: center; gap: var(--cdp-ui-gap-sm, 8px); flex-wrap: wrap;
    color: var(--cdp-muted, #5b6b7a);
}
.cdp-account__nr {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--cdp-ui-note, 13px);
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    padding: 2px 8px;
}

.cdp-account__layout {
    display: grid;
    gap: var(--cdp-ui-gap-lg, 24px);
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    align-items: start;
}
.cdp-account__nav {
    background: var(--cdp-surface, #f4f8fa);
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    display: flex; flex-direction: column;
}
.cdp-account__link {
    display: block;
    padding: var(--cdp-ui-pad-nav, 12px 20px);
    font-size: var(--cdp-ui-nav, 15px);
    line-height: var(--cdp-ui-lh, 1.55);
    color: var(--cdp-ink, #15224e);
    text-decoration: none;
    border-left: 3px solid transparent;
}
.cdp-account__link:hover { background: var(--cdp-page, #fff); text-decoration: none; }
.cdp-account__link.is-active {
    /* AUFTRAG-261: Die Markierung des aktiven Bereichs ist ein Akzent,
     * keine Kaufaktion. Eigener Wert, sonst folgt sie der Aktionsfarbe. */
    border-left-color: var(--cdp-nav-active, var(--cdp-cta, #7cff3c));
    background: var(--cdp-page, #fff);
    font-weight: 700;
}
.cdp-account__link--out {
    margin-top: var(--cdp-ui-gap-sm, 8px);
    border-top: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    color: var(--cdp-muted, #5b6b7a);
}

.cdp-account__body { min-width: 0; }
.cdp-account__body h2 {
    font-size: var(--cdp-ui-h3, 24px);
    color: var(--cdp-heading, #15224e);
    margin: 0 0 var(--cdp-ui-gap, 16px);
}
.cdp-account__empty, .cdp-account__note {
    color: var(--cdp-muted, #5b6b7a);
    font-size: var(--cdp-ui-note, 13px);
    background: var(--cdp-surface, #f4f8fa);
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    padding: var(--cdp-ui-pad-card, 24px);
    margin: 0 0 var(--cdp-ui-stack, 20px);
}

.cdp-account__kpis {
    display: grid; gap: var(--cdp-ui-gap, 16px);
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin: 0 0 var(--cdp-ui-stack, 20px);
}
.cdp-account__kpi {
    background: var(--cdp-surface, #f4f8fa);
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    padding: var(--cdp-ui-pad-card, 24px);
}
.cdp-account__kpi span {
    display: block; font-size: var(--cdp-ui-note, 13px);
    color: var(--cdp-muted, #5b6b7a); margin-bottom: 4px;
}
.cdp-account__kpi strong { font-size: var(--cdp-ui-h3, 24px); color: var(--cdp-brand, #0a1b2e); }

.cdp-account__scroll { overflow-x: auto; }
.cdp-account__table { width: 100%; border-collapse: collapse; font-size: var(--cdp-ui-text-sm, 16px); }
.cdp-account__table th, .cdp-account__table td {
    padding: var(--cdp-ui-pad-cell, 12px 16px);
    border-bottom: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    text-align: left;
    white-space: nowrap;
}
.cdp-account__table th {
    font-size: var(--cdp-ui-note, 13px);
    color: var(--cdp-muted, #5b6b7a);
    text-transform: uppercase; letter-spacing: .05em;
}
.cdp-account__table .cdp-num { text-align: right; font-variant-numeric: tabular-nums; }
.cdp-account .cdp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.cdp-account__cards {
    display: grid; gap: var(--cdp-ui-gap, 16px);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cdp-account__card {
    background: var(--cdp-page, #fff);
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border, #d7e4ea));
    padding: var(--cdp-ui-pad-card, 24px);
}
.cdp-account__card h3 { margin: 0 0 var(--cdp-ui-gap-sm, 8px); font-size: var(--cdp-ui-h4, 20px); }
.cdp-account__dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--cdp-ui-gap-sm, 8px) var(--cdp-ui-gap, 16px); }
.cdp-account__dl dt { color: var(--cdp-muted, #5b6b7a); font-size: var(--cdp-ui-note, 13px); }
.cdp-account__dl dd { margin: 0; }

@media (max-width: 800px) {
    .cdp-account__layout { grid-template-columns: 1fr; }
    .cdp-account__nav { flex-direction: row; flex-wrap: wrap; }
    .cdp-account__link { border-left: 0; border-bottom: 3px solid transparent; }
    .cdp-account__link.is-active { border-left: 0; border-bottom-color: var(--cdp-nav-active, var(--cdp-cta, #7cff3c)); }
    .cdp-account__link--out { margin-top: 0; border-top: 0; }
}

/* ---------------------------------------------------------------------
 * Anmeldung (AUFTRAG 245)
 * Eine schmale Karte, mehr braucht ein Anmeldeformular nicht. Die
 * Farben kommen aus der Marke, nie aus dieser Datei.
 * ------------------------------------------------------------------ */
.cdp-login__card {
    max-width: 480px;
    background: var(--cdp-page);
    border: 1px solid var(--cdp-commerce-border, var(--cdp-border));
    /* AUFTRAG-271: Flatstyle ist verbindlich, fuer jede Marke. Die
     * Rundung war seit 261 ein Marken-Token mit 12px als Vorgabe -
     * smarfie.com und smarfie.shop setzen das Token nicht und bekamen
     * so eine runde Karte. Die Form ist keine Markenentscheidung. */
    border-radius: 0;
    padding: var(--cdp-ui-pad-card);
}

.cdp-login__form {
    display: grid;
    gap: var(--cdp-ui-gap);
}

.cdp-login__hint {
    margin: var(--cdp-ui-gap) 0 0;
    color: var(--cdp-muted);
    font-size: var(--cdp-ui-note);
    line-height: var(--cdp-ui-lh);
}

.cdp-login__link {
    color: var(--cdp-link);
}

/* ---------------------------------------------------------------------
 * Die zweite Schaltflaeche am Produkt (AUFTRAG 246)
 * "Jetzt kaufen" steht neben "In den Warenkorb", nicht darueber. Sie
 * bekommt deshalb die ruhigere Form - dieselbe Groesse, weniger Farbe.
 * ------------------------------------------------------------------ */
.pd-cart-row .button-primary,
.pd-cart-row .button-secondary {
    font-size: var(--cdp-ui-button, 16px);
    line-height: 1.2;
}

.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border: 2px solid var(--cdp-brand);
    border-radius: 0; /* AUFTRAG-271: Flatstyle, 90 Grad */
    background: transparent;
    color: var(--cdp-brand);
    font-size: var(--cdp-ui-button, 16px);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.button-secondary:hover,
.button-secondary:focus-visible {
    background: var(--cdp-brand);
    color: var(--cdp-page);
}

.checkout-back {
    color: var(--cdp-link);
}

/* ---------------------------------------------------------------------
 * Der Kaufbereich der Produktseite (AUFTRAG 248)
 *
 * Mengenfeld und "In den Warenkorb" in der ersten Reihe, "Jetzt
 * kaufen" in der zweiten. Beide Schaltflaechen sind gleichwertig und
 * deshalb gleich gruen und gleich hoch - die Farbe kommt aus dem
 * Shop, die Hoehe aus derselben Zeile fuer beide.
 * ------------------------------------------------------------------ */
.pd-cart-row--stack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.pd-cart-row--stack .pd-qty {
    flex: 0 0 auto;
}

.pd-cart-row--stack .button-primary {
    /* Erste Reihe: neben dem Mengenfeld, den Rest der Breite.
     * Zweite Reihe: die volle Breite. Den Umbruch erzwingt die
     * Grundbreite der zweiten Schaltflaeche, nicht der Zufall. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 12px 20px;
    border-width: 2px;
    border-style: solid;
    font-size: var(--cdp-ui-button, 16px);
    line-height: 1.25;
    text-align: center;
}

.pd-cart-row--stack .pd-btn--cart {
    /* Neben dem Mengenfeld, nicht darunter: .pd-btn bringt aus dem
     * Shop width:100% mit und wuerde das Feld sonst in eine eigene
     * Reihe druecken. */
    flex: 1 1 auto;
    width: auto;
}

.pd-cart-row--stack .pd-btn--buy {
    flex: 1 1 100%;
    width: 100%;
}

/* ---------------------------------------------------------------------
 * Der Kundenbereich /customer/ (AUFTRAG 273)
 * Aufbau, Masse und Bedienkonzept 1:1 nach der Referenz
 * smarfie.shop/customer/dashboard.php (smarfie.css .sf-customer,
 * .sf-sidebar*, .sf-dash*). Die Farben kommen aus der Marke:
 *   --cdp-brand  (Referenz: Navy)      --cdp-accent (Referenz: Tuerkis)
 *   --cdp-cta    (Referenz: Gruen)     --cdp-surface, --cdp-page, --cdp-ink
 *   --cdp-line   Linien der Panels (Standard: --cdp-border)
 * Flatstyle, 90 Grad, keine Rundung.
 * ------------------------------------------------------------------ */
.cdp-cust-frame { display: block; width: 100%; }
.cdp-cust, .cdp-cust * { border-radius: 0; box-sizing: border-box; -webkit-text-fill-color: currentColor; } /* Shop-CSS (smarfie.css) setzt die Textfuellfarbe global - hier gilt die Farbe des Elements. */
.cdp-cust { display: flex; align-items: stretch; width: 100%; margin: 0; min-width: 0; color: var(--cdp-ink, #15224e); text-align: left; }
.cdp-cust__svg { width: 22px; height: 22px; flex: 0 0 22px; display: inline-block; vertical-align: middle; }

.cdp-cust__side { flex: 0 0 280px; width: 280px; min-width: 0; padding: 24px 0 32px; background: var(--cdp-page, #fff); border-right: 1px solid var(--cdp-ink, #15224e); }
.cdp-cust__mobile { display: none; margin: 0; }
.cdp-cust__toggle { display: flex; align-items: center; min-height: 56px; padding: 12px 20px; color: var(--cdp-ink, #15224e); font-size: 24px; line-height: 28px; font-weight: 700; cursor: pointer; list-style: none; background: var(--cdp-page, #fff); }
.cdp-cust__toggle::-webkit-details-marker { display: none; }
.cdp-cust__nav { min-width: 0; }
.cdp-cust__nav-list { margin: 0; padding: 0; list-style: none; }
.cdp-cust__nav-heading { margin: 28px 0 8px; padding: 0 20px; color: var(--cdp-ink, #15224e); font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.cdp-cust__nav-link { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 20px; color: var(--cdp-ink, #15224e); font-size: 20px; line-height: 28px; font-weight: 700; text-decoration: none; border-left: 4px solid transparent; overflow-wrap: anywhere; }
.cdp-cust__nav-link:hover, .cdp-cust__nav-link:focus-visible { color: var(--cdp-ink, #15224e); background: var(--cdp-surface, #f4f8fa); }
.cdp-cust__nav-link.is-active { border-left-color: var(--cdp-accent, #00c3d7); background: var(--cdp-surface, #f4f8fa); }
.cdp-cust__nav-link span { min-width: 0; }
.cdp-cust__nav-rule { height: 0; margin: 20px 20px 8px; border: 0; border-top: 1px solid var(--cdp-ink, #15224e); }

.cdp-cust__main { flex: 1 1 auto; min-width: 0; padding: 32px 24px; color: var(--cdp-ink, #15224e); }
.cdp-cust__main p { margin: 0 0 16px; font-size: 20px; line-height: 28px; }
.cdp-cust__title { margin: 0 0 12px; color: var(--cdp-heading, var(--cdp-ink, #15224e)); font-size: 32px; line-height: 40px; font-weight: 800; }
.cdp-cust__intro { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; margin: 0 0 28px; }
.cdp-cust__greeting { min-width: 0; }
.cdp-cust__main .cdp-cust__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 20px; line-height: 28px; }
.cdp-cust__intro-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.cdp-cust__badge { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--cdp-line, var(--cdp-border, #d7e4ea)); background: var(--cdp-surface, #f4f8fa); color: var(--cdp-ink, #15224e); font-size: 16px; line-height: 24px; font-weight: 700; white-space: nowrap; }
.cdp-cust__badge--ok { border-color: var(--cdp-cta, #198754); background: color-mix(in srgb, var(--cdp-cta, #198754) 22%, #fff); }
.cdp-cust__badge--info { border-color: var(--cdp-accent, #00c3d7); background: color-mix(in srgb, var(--cdp-accent, #00c3d7) 14%, #fff); }
.cdp-cust__badge--warn { border-color: var(--cdp-brand, #15224e); background: var(--cdp-brand, #15224e); color: var(--cdp-page, #fff); }
.cdp-cust__badge--muted { border-color: var(--cdp-line, var(--cdp-border, #d7e4ea)); background: var(--cdp-surface, #f4f8fa); color: var(--cdp-ink, #15224e); }

.cdp-cust__cta { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; min-height: 44px; padding: 10px 20px; border: 1px solid var(--cdp-cta, #198754); background: var(--cdp-cta, #198754); color: var(--cdp-cta-ink, #fff); font: inherit; font-size: 20px; line-height: 28px; font-weight: 700; text-decoration: none; cursor: pointer; }
.cdp-cust__cta:hover, .cdp-cust__cta:focus-visible { background: var(--cdp-cta-hover, var(--cdp-cta, #157347)); border-color: var(--cdp-cta-hover, var(--cdp-cta, #157347)); color: var(--cdp-cta-ink, #fff); }
.cdp-cust__cta--withdraw, .cdp-cust__cta--withdraw:hover, .cdp-cust__cta--withdraw:focus-visible { background: var(--cdp-alert, #f70000); border-color: var(--cdp-alert, #f70000); color: #fff; min-height: 56px; font-size: 24px; line-height: 32px; }
.cdp-cust__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--cdp-accent, #00c3d7); background: transparent; color: var(--cdp-ink, #15224e); font-size: 20px; line-height: 28px; font-weight: 700; text-decoration: none; }
.cdp-cust__link:hover, .cdp-cust__link:focus-visible { background: color-mix(in srgb, var(--cdp-accent, #00c3d7) 14%, #fff); color: var(--cdp-ink, #15224e); }
.cdp-cust__cta:focus-visible, .cdp-cust__link:focus-visible, .cdp-cust__icon-btn:focus-visible, .cdp-cust__nav-link:focus-visible { outline: 2px solid var(--cdp-focus, var(--cdp-link, #15224e)); outline-offset: 2px; }

.cdp-cust__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 28px; }
.cdp-cust__kpi { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 20px; border: 1px solid var(--cdp-line, var(--cdp-border, #d7e4ea)); background: var(--cdp-page, #fff); }
.cdp-cust__kpi-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; }
.cdp-cust__kpi-icon--open { background: var(--cdp-brand, #15224e); color: var(--cdp-accent, #00c3d7); }
.cdp-cust__kpi-icon--shipped { background: var(--cdp-cta, #198754); color: var(--cdp-cta-ink, #fff); }
.cdp-cust__kpi-icon--total { background: var(--cdp-accent, #00c3d7); color: var(--cdp-page, #fff); }
.cdp-cust__kpi-icon--revenue { background: var(--cdp-brand, #15224e); color: var(--cdp-cta, #198754); }
.cdp-cust__kpi-body { display: flex; flex-direction: column; min-width: 0; }
.cdp-cust__kpi-label { font-size: 16px; line-height: 24px; font-weight: 400; }
.cdp-cust__kpi-value { font-size: 32px; line-height: 40px; font-weight: 700; overflow-wrap: anywhere; }

.cdp-cust__panel { margin: 0 0 28px; border: 1px solid var(--cdp-line, var(--cdp-border, #d7e4ea)); background: var(--cdp-page, #fff); }
.cdp-cust__panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 20px; border-bottom: 1px solid var(--cdp-line, var(--cdp-border, #d7e4ea)); }
.cdp-cust__panel-title { margin: 0; color: var(--cdp-heading, var(--cdp-ink, #15224e)); font-size: 24px; line-height: 32px; font-weight: 700; }
.cdp-cust__panel-body { padding: 20px; }
.cdp-cust__main .cdp-cust__empty { margin: 0; padding: 20px; }
.cdp-cust__table-wrap { width: 100%; overflow-x: auto; }
.cdp-cust__table { width: 100%; border-collapse: collapse; font-size: 18px; line-height: 26px; }
.cdp-cust__table th, .cdp-cust__table td { padding: 12px 14px; border-bottom: 1px solid var(--cdp-line, var(--cdp-border, #d7e4ea)); text-align: left; vertical-align: middle; white-space: nowrap; color: var(--cdp-ink, #15224e); }
/* AUFTRAG-275: mehrere Angaben in einer Zelle bleiben ein Block - in der Kartenansicht sonst nebeneinander. */
.cdp-cust__stack > * { display: block; }
.cdp-cust__muted { color: var(--cdp-muted, #5b6b7a); }
/* AUFTRAG-278: Vertragsunterlagen einer Bestellung */
.cdp-cust__doclist { margin: 0 0 12px; padding-left: 18px; }
.cdp-cust__doclist li { margin: 0 0 4px; }
.cdp-cust__table thead th { background: var(--cdp-surface, #f4f8fa); font-size: 16px; line-height: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.cdp-cust__table tbody tr:last-child td { border-bottom: 0; }
.cdp-cust__strong { font-weight: 700; }
.cdp-cust__actions { text-align: right; }
.cdp-cust__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--cdp-line, var(--cdp-border, #d7e4ea)); background: var(--cdp-page, #fff); color: var(--cdp-ink, #15224e); text-decoration: none; }
.cdp-cust__icon-btn:hover, .cdp-cust__icon-btn:focus-visible { border-color: var(--cdp-accent, #00c3d7); background: color-mix(in srgb, var(--cdp-accent, #00c3d7) 14%, #fff); }
.cdp-cust__sums { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 20px; border-top: 1px solid var(--cdp-line, var(--cdp-border, #d7e4ea)); }
.cdp-cust__sums > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cdp-cust__sums dt, .cdp-cust__sums dd { margin: 0; font-size: 20px; line-height: 28px; }
.cdp-cust__sums-total dt, .cdp-cust__sums-total dd { font-weight: 700; }
.cdp-cust__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 20px; }
.cdp-cust__card { min-width: 0; padding: 16px; border: 1px solid var(--cdp-line, var(--cdp-border, #d7e4ea)); background: var(--cdp-surface, #f4f8fa); }
.cdp-cust__card-title { margin: 0 0 8px; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--cdp-ink, #15224e); }
.cdp-cust__main .cdp-cust__card-text { margin: 0; overflow-wrap: anywhere; }
.cdp-cust__summary { margin: 0; padding: 20px; }
.cdp-cust__panel-body .cdp-cust__summary { padding: 0 0 24px; }
.cdp-cust__summary > div { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: 8px 16px; margin: 0 0 10px; }
.cdp-cust__summary dt, .cdp-cust__summary dd { margin: 0; font-size: 20px; line-height: 28px; overflow-wrap: anywhere; }
.cdp-cust__summary dt { font-weight: 700; }
.cdp-cust__main .cdp-cust__note { padding: 0 20px 20px; }
.cdp-cust__main .cdp-cust__alert { margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--cdp-alert, #f70000); background: #fff5f5; font-weight: 700; }
.cdp-cust__form { max-width: 640px; }
.cdp-cust__field { margin: 0 0 20px; }
.cdp-cust__form label { display: block; margin: 0 0 8px; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--cdp-ink, #15224e); }
.cdp-cust__form select, .cdp-cust__form textarea, .cdp-cust__form .cdp-cust__input { display: block; width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--cdp-ink, #15224e); border-radius: 0; background: var(--cdp-input-bg, #fff); color: var(--cdp-ink, #15224e); font: inherit; font-size: 20px; line-height: 28px; }
.cdp-cust__form textarea { min-height: 120px; }
.cdp-cust--guest .cdp-cust__main { max-width: 1100px; margin: 0 auto; } /* AUFTRAG-275: Gast-Widerruf ohne Kontonavigation */
.cdp-cust__main .cdp-cust__hint { margin: 8px 0 0; font-size: 18px; line-height: 26px; }
.cdp-cust__form .cdp-cust__cta, .cdp-cust__form .cdp-cust__link { margin: 8px 12px 0 0; }

@media (max-width: 1199px) { .cdp-cust__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) {
  .cdp-cust { flex-direction: column; }
  .cdp-cust__side { flex: 0 0 auto; width: 100%; padding: 0 0 8px; border-right: 0; border-bottom: 1px solid var(--cdp-ink, #15224e); }
  .cdp-cust__mobile { display: block; }
  .cdp-cust__mobile:not([open]) ~ .cdp-cust__nav { display: none; }
  .cdp-cust__main { padding: 24px 16px; }
}
/* Unter 1400 px kompakter, damit die 8 Spalten neben der Sidebar Platz haben. */
@media (max-width: 1399px) {
  .cdp-cust__table { font-size: 16px; line-height: 24px; }
  .cdp-cust__table th, .cdp-cust__table td { padding: 10px 10px; }
  .cdp-cust__table thead th { font-size: 14px; letter-spacing: 0.02em; }
  .cdp-cust__table .cdp-cust__badge { white-space: normal; }
}
/* Ab hier steht die Sidebar oben - die Tabellen werden zu Karten, nichts muss seitlich gescrollt werden. */
@media (max-width: 991px) {
  .cdp-cust__table-wrap { overflow-x: visible; }
  .cdp-cust__table, .cdp-cust__table tbody, .cdp-cust__table tr, .cdp-cust__table td { display: block; width: 100%; }
  .cdp-cust__table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .cdp-cust__table tr { padding: 12px 16px; border-bottom: 1px solid var(--cdp-line, var(--cdp-border, #d7e4ea)); }
  .cdp-cust__table tbody tr:last-child { border-bottom: 0; }
  .cdp-cust__table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 0; white-space: normal; text-align: right; }
  .cdp-cust__table td::before { content: attr(data-label); flex: 0 0 auto; font-size: 16px; line-height: 24px; font-weight: 700; text-align: left; }
  .cdp-cust__actions { justify-content: space-between; }
}
@media (max-width: 767px) {
  .cdp-cust__intro, .cdp-cust__intro-actions { flex-direction: column; align-items: stretch; }
  .cdp-cust__cta, .cdp-cust__link--back, .cdp-cust__intro-actions .cdp-cust__link { justify-content: center; }
  .cdp-cust__cards { grid-template-columns: minmax(0, 1fr); }
  .cdp-cust__summary > div { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .cdp-cust__kpis { grid-template-columns: minmax(0, 1fr); }
  .cdp-cust__kpi-value { font-size: 28px; line-height: 36px; }
}
/* AUFTRAG-275: Profil/Adressen bearbeiten */
.cdp-cust__main .cdp-cust__ok { margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--cdp-cta, #198754); background: color-mix(in srgb, var(--cdp-cta, #198754) 12%, #fff); font-weight: 700; }
.cdp-cust__card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.cdp-cust__card-actions .cdp-cust__link { min-height: 40px; padding: 6px 12px; font-size: 16px; line-height: 24px; }
.cdp-cust__inline { display: inline; margin: 0; }
.cdp-cust__inline button.cdp-cust__link { font: inherit; font-size: 16px; line-height: 24px; font-weight: 700; cursor: pointer; }
.cdp-cust__textlink { color: var(--cdp-link, var(--cdp-ink, #15224e)); font-weight: 700; }