/* PWGermanShop — Kundenkonten-Modul CSS
 *
 * Wird vom GermanShopAccounts-Modul über die AssetRegistry mit Priority 50
 * (Modul-Schicht) angemeldet. Referenziert die Design-Tokens aus
 * `gs-theme.css` (--gs-*).
 *
 * Inhalt:
 *  - Konto-Seitencontainer & Formular-Komponenten (Login, Registrierung,
 *    Profil, Passwort-Reset).
 *  - Konto-spezifische Sections, „Danger-Zone" (Konto löschen),
 *    Logout-Footer und Form-Status-Banner.
 *
 * Die `gs-nav-account`-Link-Klasse im Header bleibt im Theme — sie gehört
 * zur Site-Navigation, nicht zum Konto-Subtree.
 */

.gs-account-page {
    max-width: 32rem;
    margin: 0 auto;
}
.gs-account-page h1 {
    margin-top: 0;
}
.gs-account-form p {
    margin: 0 0 0.9rem;
}
.gs-account-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
    color: var(--gs-ink);
}
.gs-account-form input[type="email"],
.gs-account-form input[type="password"],
.gs-account-form input[type="text"] {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font: inherit;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border-strong);
    border-radius: var(--gs-radius-sm);
    box-sizing: border-box;
}
.gs-account-form input[type="email"]:focus,
.gs-account-form input[type="password"]:focus,
.gs-account-form input[type="text"]:focus {
    border-color: var(--gs-accent);
    outline: none;
    box-shadow: 0 0 0 1px var(--gs-accent);
}
.gs-account-form input[type="checkbox"] {
    margin-right: 0.4rem;
    vertical-align: middle;
}
.gs-account-section {
    margin: 2rem 0;
    padding: 1.25rem;
    background: var(--gs-surface-alt);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
}
.gs-account-section h2 {
    margin-top: 0;
    font-size: 1.1rem;
}
.gs-account-danger {
    border-color: var(--gs-err);
    background: var(--gs-err-bg);
}
.gs-account-danger h2 {
    color: var(--gs-err);
}
.gs-account-links {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    font-size: 0.9rem;
}
.gs-account-links li {
    margin: 0.4rem 0;
}
.gs-account-logout-link {
    text-align: center;
    margin: 2rem 0 0;
}
.gs-form-error {
    background: var(--gs-err-bg);
    color: var(--gs-err);
    border: 1px solid var(--gs-err-border);
    padding: 0.6rem 0.85rem;
    border-radius: var(--gs-radius-sm);
    margin: 0 0 1rem;
    font-size: 0.9rem;
}
.gs-form-success {
    background: var(--gs-ok-bg);
    color: var(--gs-ok);
    border: 1px solid var(--gs-ok-border);
    padding: 0.6rem 0.85rem;
    border-radius: var(--gs-radius-sm);
    margin: 0 0 1rem;
    font-size: 0.9rem;
}
.gs-form-warning {
    background: var(--gs-warn-bg);
    color: var(--gs-warn);
    border: 1px solid var(--gs-warn-border);
    padding: 0.6rem 0.85rem;
    border-radius: var(--gs-radius-sm);
    margin: 0 0 1rem;
    font-size: 0.9rem;
}
/* Der Danger-Button (z. B. „Konto löschen") behält BEWUSST feste, satte
   Rot-Werte statt der --gs-err-Tokens: Ein destruktiver Button soll in jedem
   Theme und in Hell wie Dunkel gleich unmissverständlich rot sein (Ampel-Logik).
   Dunkelrot + Weiß trägt in beiden Modi > AA; die --gs-err-Tokens hellen im
   Dunkelmodus auf, wodurch Weiß darauf unlesbar würde. Die Danger-BOXEN dagegen
   (heller Grund + dunkler Text) laufen sehr wohl über die Tokens und kippen mit. */
.gs-btn-danger {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
}
.gs-btn-danger:not(:disabled):hover {
    background: #a93226;
    border-color: #a93226;
    text-decoration: none;
}

/* Kleinere Button-Variante für In-Card-Aktionen (Bearbeiten, Als Standard, …) */
.gs-btn-sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
}
.gs-btn-link--danger {
    color: var(--gs-err);
}
.gs-btn-link--danger:hover { color: var(--gs-err); }

/* ── Adressbuch & Bestellhistorie ──────────────────────────────────────────
 * Beide Subpages sind breitenmäßig nicht durch das schmale Konto-Formular
 * limitiert. Über :has() weitet sich der äußere `.gs-account-page`-Container
 * automatisch auf, sobald eines dieser Sektionen gerendert wird — der
 * Page-Wrapper im Theme braucht keine Modifier-Klasse zu wissen. */
.gs-account-page:has(.gs-address-book),
.gs-account-page:has(.gs-address-form),
.gs-account-page:has(.gs-order-history),
.gs-account-page:has(.gs-order-detail),
.gs-account-page:has(.gs-my-licenses),
.gs-account-page:has(.gs-my-subscriptions),
.gs-account-page:has(.gs-account-profile) {
    max-width: 56rem;
}

/* Profil-Layout: Stammdaten + Passwort als zwei Spalten, Danger-Zone bleibt
 * darunter volle Breite, Logout-Link am Ende zentriert. */
.gs-account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.25rem;
    margin: 1rem 0 1.5rem;
}
.gs-account-grid .gs-account-section {
    margin: 0;
}

.gs-address-book-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.gs-address-book-head h1 {
    margin: 0;
}
.gs-address-book-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gs-address-empty {
    background: var(--gs-surface-alt);
    border: 1px dashed var(--gs-border-strong);
    color: var(--gs-ink-muted, var(--gs-ink));
    padding: 1.25rem 1.5rem;
    border-radius: var(--gs-radius);
    margin: 0;
}

.gs-address-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
}

.gs-address-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.1rem 1.2rem;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gs-address-card:hover {
    border-color: var(--gs-accent-line, var(--gs-border-strong));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.gs-address-card--default {
    border-color: var(--gs-accent);
    box-shadow: 0 0 0 1px var(--gs-accent);
}

.gs-address-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.gs-address-card-title {
    font-weight: 600;
    color: var(--gs-ink);
}
.gs-address-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: var(--gs-accent);
    color: var(--gs-accent-ink, #fff);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.gs-address-meta {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--gs-ink-muted, #6b6b6b);
}

.gs-address-card-body {
    font-style: normal;
    line-height: 1.5;
    color: var(--gs-ink);
}

.gs-address-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.4rem;
    border-top: 1px solid var(--gs-border);
}
.gs-inline-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}
.gs-inline-form--end {
    margin-left: auto;
}

/* ── Adressbuch-Formular (Neu/Bearbeiten) ─────────────────────────────
 * Card-Panel-Look analog zum Checkout: <fieldset> mit Legend statt roher
 * <p>-Zeilen. Struktur & Optik spiegeln bewusst `.gs-checkout-fieldset`,
 * damit Adress-Erfassung im Konto und im Checkout gleich aussehen.
 */
.gs-address-form {
    max-width: 42rem;
    margin: 0 auto;
}
/* Rücksprung-Link + Überschrift folgen dem gleichen zentrierten Raster
 * wie das Formular selbst, damit der Kopfbereich nicht linksbündig
 * neben einem mittigen Formular steht. */
.gs-account-page:has(.gs-address-form) > h1,
.gs-account-page:has(.gs-address-form) > p,
.gs-account-page:has(.gs-address-form) > .gs-form-error {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}
.gs-account-fieldset {
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    background: var(--gs-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    margin: 0 0 1.25rem;
    padding: 1.1rem 1.35rem 1.35rem;
}
.gs-account-fieldset legend {
    font-weight: 600;
    font-size: 1.05rem;
    padding: 0 0.5rem;
    color: var(--gs-ink);
}
.gs-address-form .gs-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0 0 0.85rem;
}
.gs-address-form .gs-form-row:last-child {
    margin-bottom: 0;
}
.gs-address-form .gs-form-row label {
    font-size: 0.9375rem;
    font-weight: 500;
    margin-bottom: 0;
}
.gs-address-form .gs-form-row input,
.gs-address-form .gs-form-row select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font: inherit;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border-strong);
    border-radius: var(--gs-radius-sm);
    box-sizing: border-box;
}
.gs-address-form .gs-form-row input:focus,
.gs-address-form .gs-form-row select:focus {
    border-color: var(--gs-accent);
    outline: none;
    box-shadow: 0 0 0 1px var(--gs-accent);
}
.gs-address-form .gs-form-row-two,
.gs-address-form .gs-form-row-zip-city {
    flex-direction: row;
    gap: 0.75rem;
}
.gs-address-form .gs-form-row-two > div,
.gs-address-form .gs-form-row-zip-city > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.gs-address-form .gs-form-row-zip-city > div:first-child {
    flex: 0 0 6.5rem;
}
.gs-address-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}
@media (max-width: 30rem) {
    .gs-address-form .gs-form-row-two {
        flex-direction: column;
    }
    /* PLZ/Ort-Doppelfeld: fehlte bisher in diesem Breakpoint — untereinander
     * statt nebeneinander, sonst wird das Ort-Feld auf schmalen Screens zu eng. */
    .gs-address-form .gs-form-row-zip-city {
        flex-direction: column;
    }
    .gs-address-form .gs-form-row-zip-city > div:first-child {
        flex: 1 1 auto;
    }
}

/* Bestelltabelle hübscher (war vorher rohes <table>) */
.gs-account-orders {
    width: 100%;
    border-collapse: collapse;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    overflow: hidden;
}
.gs-account-orders th,
.gs-account-orders td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--gs-border);
}
.gs-account-orders thead th {
    background: var(--gs-surface-alt);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gs-ink-muted, #555);
}
.gs-account-orders tbody tr:last-child td {
    border-bottom: none;
}
.gs-account-orders tbody tr:hover {
    background: var(--gs-surface-alt);
}

/* ── Bestelldetail ─────────────────────────────────────────────────────────
 * Aufbau:
 *  - Header mit Bestellnummer + Datum + Zurück-Button
 *  - Meta-Strip (Status, Zahlart, Gesamtbetrag) als horizontale Kachelreihe
 *  - Adressen als zwei nebeneinander liegende Karten
 *  - Positions-Tabelle in Card-Optik (analog `.gs-account-orders`)
 *  - Rechnungs-Downloads als auffällige Link-Karten
 */
.gs-order-subhead {
    margin: 0.2rem 0 0;
    font-size: 0.875rem;
    color: var(--gs-ink-muted, #6b6b6b);
}

.gs-order-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1px;
    margin: 0 0 1.5rem;
    background: var(--gs-border);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    overflow: hidden;
}
.gs-order-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1.1rem;
    background: var(--gs-surface);
}
.gs-order-meta-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gs-ink-muted, #6b6b6b);
}
.gs-order-meta-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--gs-ink);
}
.gs-order-total {
    font-size: 1.125rem;
    font-weight: 700;
}

.gs-order-status {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--gs-surface-alt);
    color: var(--gs-ink);
    width: max-content;
}
.gs-order-status--pending_payment {
    background: var(--gs-warn-bg);
    color: var(--gs-warn);
}
.gs-order-status--confirmed {
    background: var(--gs-ok-bg);
    color: var(--gs-ok);
}
.gs-order-status--shipped {
    background: var(--gs-info-bg);
    color: var(--gs-info);
}

.gs-order-addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
    margin: 0 0 1.5rem;
}
.gs-order-address-card {
    padding: 1rem 1.2rem;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
}
.gs-order-address-card h2 {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gs-ink-muted, #6b6b6b);
}
.gs-order-address-card address {
    font-style: normal;
    line-height: 1.5;
}

.gs-order-items h2,
.gs-order-invoices h2 {
    font-size: 1.0625rem;
    margin: 1.5rem 0 0.75rem;
}

.gs-order-items-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    overflow: hidden;
}
.gs-order-items-table th,
.gs-order-items-table td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--gs-border);
    vertical-align: top;
}
.gs-order-items-table thead th {
    background: var(--gs-surface-alt);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gs-ink-muted, #555);
}
.gs-order-items-table .gs-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gs-order-item-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed var(--gs-border);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.gs-order-item-link:hover,
.gs-order-item-link:focus-visible {
    color: var(--gs-accent, #4361ee);
    border-bottom-color: currentColor;
}
.gs-order-items-table tfoot th,
.gs-order-items-table tfoot td {
    background: var(--gs-surface-alt);
    text-align: right;
    border-top: 1px solid var(--gs-border);
}
.gs-order-items-table tfoot tr:not(:last-child) th,
.gs-order-items-table tfoot tr:not(:last-child) td {
    border-bottom: 1px solid var(--gs-border);
}
.gs-order-grandtotal th,
.gs-order-grandtotal td {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--gs-ink);
}

.gs-order-invoice-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.gs-order-invoice-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    color: var(--gs-ink);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.gs-order-invoice-link:hover {
    border-color: var(--gs-accent);
    background: var(--gs-surface-alt);
    text-decoration: none;
}
.gs-order-invoice-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex: 0 0 auto;
}
.gs-order-invoice-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 14rem;
    min-width: 0;
}
.gs-order-invoice-amount {
    font-size: 0.875rem;
    color: var(--gs-ink-muted, #6b6b6b);
}
.gs-order-invoice-action {
    color: var(--gs-accent-deep, var(--gs-accent));
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* =====================================================================
 * Checkout-Integration: Account-Gate + Adress-Picker
 * Wird vom Theme `gs_checkout.php` gerendert, sobald GermanShopAccounts
 * installiert ist (Aufruf über CheckoutAccountUi).
 * ===================================================================== */

/* ---------- Account-Gate: drei Karten vor dem Adress-Step ---------- */

.gs-checkout-gate {
    margin: 1.5rem 0 2rem;
}

.gs-checkout-gate h2 {
    margin: 0 0 0.5rem;
    font-size: 1.4rem;
}

.gs-checkout-gate-intro {
    color: var(--gs-muted, #666);
    margin: 0 0 1.5rem;
}

.gs-checkout-gate-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.gs-checkout-gate-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.25rem 1.5rem;
    border: 1px solid var(--gs-border, #d8d8d8);
    border-radius: 0.6rem;
    background: var(--gs-card-bg, #fff);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.gs-checkout-gate-card:hover,
.gs-checkout-gate-card:focus-visible {
    border-color: var(--gs-accent, #b3873a);
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.28);
    transform: translateY(-3px);
    outline: none;
}

/* Kachel ist ein <a>/<form> — globale a:hover-Unterstreichung unterbinden,
   auch für die Kind-Elemente (Titel/Text/Aktion). */
.gs-checkout-gate-card,
.gs-checkout-gate-card:hover,
.gs-checkout-gate-card:focus-visible,
.gs-checkout-gate-card:hover h3,
.gs-checkout-gate-card:hover .gs-checkout-gate-action {
    text-decoration: none;
}

.gs-checkout-gate-card h3 {
    margin: 0;
    font-size: 1.1rem;
}

.gs-checkout-gate-card p {
    margin: 0;
    color: var(--gs-muted, #666);
    font-size: 0.93rem;
    flex-grow: 1;
}

.gs-checkout-gate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--gs-accent, #b3873a) 14%, transparent);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gs-accent, #b3873a);
    transition: background 0.15s ease, transform 0.15s ease;
}

.gs-checkout-gate-card:hover .gs-checkout-gate-icon,
.gs-checkout-gate-card:focus-visible .gs-checkout-gate-icon {
    background: color-mix(in srgb, var(--gs-accent, #b3873a) 24%, transparent);
    transform: scale(1.06);
}

/* Aktion als gefüllter Pill-Button — klare CTA statt Text-Link */
.gs-checkout-gate-action {
    display: inline-block;
    align-self: flex-start;
    margin-top: 0.75rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: var(--gs-accent, #b3873a);
    color: var(--gs-accent-ink, #fff);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.gs-checkout-gate-card:hover .gs-checkout-gate-action,
.gs-checkout-gate-card:focus-visible .gs-checkout-gate-action {
    background: var(--gs-accent-deep, #8f6a2c);
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--gs-accent, #b3873a) 60%, transparent);
}

.gs-checkout-gate-card--guest {
    /* Form-Card: gleiches Layout, ohne Standard-Form-Margins */
    margin: 0;
}

/* ---------- Adress-Picker: Kacheln über dem Adress-Formular ---------- */

.gs-checkout-picker {
    margin: 1rem 0 1.5rem;
}

.gs-checkout-picker h2 {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
}

.gs-checkout-picker-intro {
    color: var(--gs-muted, #666);
    margin: 0 0 1rem;
    font-size: 0.93rem;
}

.gs-checkout-picker-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.75rem;
}

.gs-checkout-picker-tile {
    position: relative;
    display: block;
    padding: 0.85rem 0.9rem 1rem;
    border: 1px solid var(--gs-border, #d8d8d8);
    border-radius: 0.5rem;
    background: var(--gs-card-bg, #fff);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gs-checkout-picker-tile:hover,
.gs-checkout-picker-tile:focus-visible {
    border-color: var(--gs-accent, #b3873a);
    box-shadow: 0 3px 10px -6px rgba(0, 0, 0, 0.18);
    outline: none;
}

.gs-checkout-picker-tile--active {
    border-color: var(--gs-accent, #b3873a);
    border-width: 2px;
    /* Padding um 1px reduzieren, damit Border-Wachstum kein Layout-Shift gibt */
    padding: calc(0.85rem - 1px) calc(0.9rem - 1px) calc(1rem - 1px);
    background: var(--gs-accent-soft, #fbf5ea);
}

.gs-checkout-picker-tile h3 {
    margin: 0 0 0.3rem;
    font-size: 1rem;
}

.gs-checkout-picker-lines {
    margin: 0;
    color: var(--gs-muted, #555);
    font-size: 0.9rem;
    line-height: 1.4;
}

.gs-checkout-picker-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.05rem 0.5rem;
    font-size: 0.72rem;
    border-radius: 999px;
    background: var(--gs-accent-soft, #fbf5ea);
    color: var(--gs-accent-deep, var(--gs-accent, #b3873a));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gs-checkout-picker-tile--new {
    border-style: dashed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 6.5rem;
}

.gs-checkout-picker-tile--new .gs-checkout-picker-icon {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gs-accent, #b3873a);
    margin-bottom: 0.2rem;
}

.gs-checkout-picker-tile--new p {
    margin: 0.2rem 0 0;
    color: var(--gs-muted, #666);
    font-size: 0.88rem;
}

/* ---------- „Adresse merken"-Block unter dem Adress-Step ---------- */

.gs-checkout-remember {
    margin: 1rem 0 1.5rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--gs-border, #d8d8d8);
    border-radius: 0.4rem;
    background: var(--gs-card-bg, #fff);
}

.gs-checkout-remember-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
    /* Lange Texte („... in mein Adressbuch merken") dürfen umbrechen statt
     * die Row über den Container-Rand zu drücken — gleicher Schutz wie bei
     * .gs-checkbox-row (siehe checkout.css). */
    word-break: break-word;
    overflow-wrap: anywhere;
}

.gs-checkout-remember-row + .gs-checkout-remember-row {
    margin-top: 0.5rem;
}

.gs-checkout-remember-row--secondary {
    margin-left: 1.5rem;
    color: var(--gs-muted, #555);
    font-size: 0.9rem;
}

.gs-checkout-remember-row input[type="checkbox"] {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

/* ── Meine Lizenzen (GermanShopLicenses, Kundenkonto) ───────────────────────
 * Karten-Look statt Tabelle, weil der Schlüssel selbst prominent in einer
 * eigenen Code-Zeile stehen soll (kopierbar). Zurückgezogene/abgelaufene
 * Karten werden entfärbt, damit „aktiv" auf den ersten Blick auffällt. */
.gs-my-licenses-hint {
    margin: 0 0 1rem;
    color: var(--gs-muted, #555);
    font-size: 0.95rem;
}
.gs-my-licenses-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.9rem;
}
.gs-my-license {
    border: 1px solid var(--gs-border, #ddd);
    border-radius: 0.5rem;
    padding: 1rem 1.1rem;
    background: var(--gs-card-bg, #fff);
}
.gs-my-license--revoked,
.gs-my-license--expired {
    opacity: 0.62;
}
.gs-my-license-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
    flex-wrap: wrap;
}
.gs-my-license-title {
    margin: 0;
    font-size: 1.05rem;
}
.gs-my-license-state {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--gs-surface-alt);
    color: var(--gs-ink);
}
.gs-my-license-state--active {
    background: var(--gs-ok-bg);
    color: var(--gs-ok);
}
.gs-my-license-state--revoked {
    background: var(--gs-err-bg);
    color: var(--gs-err);
}
.gs-my-license-state--expired {
    background: var(--gs-warn-bg);
    color: var(--gs-warn);
}
.gs-my-license-key {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gs-surface-alt);
    border-radius: 0.35rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}
.gs-my-license-key-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.95rem;
    word-break: break-all;
    flex: 1 1 20ch;
}
.gs-my-license-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
}
.gs-my-license-meta div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.gs-my-license-meta dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gs-muted, #666);
}
.gs-my-license-meta dd {
    margin: 0;
    font-size: 0.95rem;
}
/* Token-Download-Zeile — steht am Fuß jeder aktiven Lizenzkarte. */
.gs-my-license-token {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--gs-border, #ddd);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
}
.gs-my-license-token-hint {
    color: var(--gs-muted, #666);
    font-size: 0.85rem;
    line-height: 1.35;
    flex: 1 1 20ch;
}
/* Aktivierte-Geräte-Sektion (Slot-Ledger) — Kopf mit Slot-Zähler,
 * darunter die Geräteliste mit Freigabe-Button pro aktivem Gerät. */
.gs-my-license-devices {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--gs-border, #ddd);
}
.gs-my-license-devices-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.gs-my-license-devices-head strong {
    font-size: 0.9rem;
}
.gs-my-license-devices-count {
    font-size: 0.8rem;
    color: var(--gs-muted, #666);
    background: var(--gs-surface-alt, #f4f4f4);
    padding: 0.1em 0.6em;
    border-radius: 999px;
}
.gs-my-license-devices-empty {
    margin: 0;
    font-size: 0.9rem;
    color: var(--gs-muted, #666);
}
.gs-my-license-devices-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}
.gs-my-license-device {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    border: 1px solid var(--gs-border, #e2e2e2);
    border-radius: 0.4rem;
    padding: 0.6rem 0.75rem;
    background: var(--gs-surface-alt, #fafafa);
}
.gs-my-license-device--inactive {
    opacity: 0.6;
}
.gs-my-license-device-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 12ch;
    min-width: 0;
}
.gs-my-license-device-name {
    font-weight: 600;
    font-size: 0.92rem;
    word-break: break-word;
}
.gs-my-license-device-badge {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--gs-surface-alt);
    color: var(--gs-ink-soft);
    padding: 0.1em 0.5em;
    border-radius: 999px;
}
.gs-my-license-device-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.2rem;
    margin: 0;
}
.gs-my-license-device-meta div {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.gs-my-license-device-meta dt {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gs-muted, #777);
}
.gs-my-license-device-meta dd {
    margin: 0;
    font-size: 0.85rem;
}
.gs-my-license-device-form {
    margin: 0;
    flex: 0 0 auto;
}
/* Public-Key-Zeile unter der Liste — für Entwickler:innen der Software. */
.gs-my-licenses-pubkey {
    margin-top: 1.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--gs-border, #ddd);
    color: var(--gs-muted, #555);
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
}
.gs-my-licenses-pubkey-kid {
    color: var(--gs-muted, #777);
    font-size: 0.8rem;
}
.gs-my-licenses-pubkey-kid code {
    background: var(--gs-code-bg, #f4f4f4);
    padding: 0.05rem 0.35rem;
    border-radius: 0.2rem;
}

/* ── Meine Downloads (GermanShopDigital, Kundenkonto) ─────────────────────
 * Zwei-Ebenen-Gruppierung: Bestellung → Tickets. Karten-Look analog zu
 * "Meine Lizenzen" — Farbschema für Status-Chip absichtlich identisch, damit
 * ein Käufer, der auch Lizenzen hat, „aktiv"/„abgelaufen"/„zurückgezogen"
 * überall gleich lesbar findet. */
.gs-my-downloads-hint {
    margin: 0 0 1rem;
    color: var(--gs-muted, #555);
    font-size: 0.95rem;
}
.gs-my-downloads-order {
    margin-top: 1.6rem;
}
.gs-my-downloads-order:first-of-type {
    margin-top: 0.5rem;
}
.gs-my-downloads-order-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--gs-border, #ddd);
    font-size: 1.05rem;
    font-weight: 600;
    flex-wrap: wrap;
}
.gs-my-downloads-order-date {
    color: var(--gs-muted, #666);
    font-size: 0.85rem;
    font-weight: 400;
}
.gs-my-downloads-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}
.gs-my-download {
    border: 1px solid var(--gs-border, #ddd);
    border-radius: 0.5rem;
    padding: 0.9rem 1.05rem;
    background: var(--gs-card-bg, #fff);
}
.gs-my-download--revoked,
.gs-my-download--expired {
    opacity: 0.62;
}
.gs-my-download-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
    flex-wrap: wrap;
}
.gs-my-download-title {
    margin: 0;
    font-size: 1rem;
}
.gs-my-download-state {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--gs-surface-alt);
    color: var(--gs-ink);
}
.gs-my-download-state--active {
    background: var(--gs-ok-bg);
    color: var(--gs-ok);
}
.gs-my-download-state--revoked {
    background: var(--gs-err-bg);
    color: var(--gs-err);
}
.gs-my-download-state--expired {
    background: var(--gs-warn-bg);
    color: var(--gs-warn);
}
.gs-my-download-filename {
    margin: 0 0 0.55rem;
    font-size: 0.9rem;
    color: var(--gs-muted, #555);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.gs-my-download-filename-label {
    color: var(--gs-muted, #666);
}
.gs-my-download-filename-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    background: var(--gs-surface-alt);
    padding: 0.05rem 0.4rem;
    border-radius: 0.2rem;
    word-break: break-all;
}
.gs-my-download-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
}
.gs-my-download-meta div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.gs-my-download-meta dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gs-muted, #666);
}
.gs-my-download-meta dd {
    margin: 0;
    font-size: 0.95rem;
}
.gs-my-download-last {
    display: block;
    font-size: 0.78rem;
    color: var(--gs-muted, #777);
    margin-top: 0.15rem;
}
.gs-my-download-action {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--gs-border, #ddd);
}
.gs-my-download-hint {
    margin: 0.7rem 0 0;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--gs-border, #ddd);
    color: var(--gs-muted, #666);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* ── Meine Abonnements (GermanShopSubscriptions, Kundenkonto) ─────────────
 * Karten-Look analog zu "Meine Lizenzen"/"Meine Downloads". Status-Chip mit
 * demselben Farbschema, damit der Kunde "aktiv" auf einen Blick erkennt;
 * gekündigte (auslaufende) und beendete Abos werden entfärbt, bleiben aber
 * lesbar (Transparenz: bis wann läuft das gekündigte Abo noch). */
.gs-my-subscriptions-hint {
    margin: 0 0 1rem;
    color: var(--gs-muted, #555);
    font-size: 0.95rem;
}
.gs-my-subscriptions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.9rem;
}
.gs-my-subscription {
    border: 1px solid var(--gs-border, #ddd);
    border-radius: 0.5rem;
    padding: 1rem 1.1rem;
    background: var(--gs-card-bg, #fff);
}
.gs-my-subscription--canceled,
.gs-my-subscription--ended {
    opacity: 0.62;
}
.gs-my-subscription-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
    flex-wrap: wrap;
}
.gs-my-subscription-title {
    margin: 0;
    font-size: 1.05rem;
}
.gs-my-subscription-state {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--gs-surface-alt);
    color: var(--gs-ink);
}
.gs-my-subscription-state--active {
    background: var(--gs-ok-bg);
    color: var(--gs-ok);
}
.gs-my-subscription-state--canceled {
    background: var(--gs-warn-bg);
    color: var(--gs-warn);
}
.gs-my-subscription-state--ended {
    background: var(--gs-err-bg);
    color: var(--gs-err);
}
.gs-my-subscription-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
}
.gs-my-subscription-meta div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.gs-my-subscription-meta dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gs-muted, #666);
}
.gs-my-subscription-meta dd {
    margin: 0;
    font-size: 0.95rem;
}
.gs-my-subscription-interval {
    color: var(--gs-muted, #777);
    font-size: 0.85rem;
}
/* Kündigungs-Formular / Hinweis am Fuß jeder Karte. */
.gs-my-subscription-cancel-form {
    margin: 0.9rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--gs-border, #ddd);
}
.gs-my-subscription-note {
    margin: 0.9rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--gs-border, #ddd);
    color: var(--gs-muted, #666);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════════════
 * Responsive — Bestell-Tabellen als Card-Layout
 *
 * Unter 48 rem (768 px) werden die Bestellübersicht (.gs-account-orders,
 * 5-spaltig) und die Bestelldetail-Positionen (.gs-order-items-table,
 * 4-spaltig) in gestapelte Cards umgeformt. Benötigt das data-label-Attribut
 * pro <td> aus OrderHistoryController. Das tfoot der Detail-Tabelle mit
 * colspan=3 wird mobil auf ein label/wert-Paar reduziert (Label aus dem th).
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 48rem) {
    .gs-account-orders,
    .gs-order-items-table {
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
    }
    .gs-account-orders thead,
    .gs-order-items-table thead {
        display: none;
    }
    .gs-account-orders tbody,
    .gs-account-orders tr,
    .gs-account-orders td,
    .gs-order-items-table tbody,
    .gs-order-items-table tr,
    .gs-order-items-table td {
        display: block;
        width: 100%;
    }
    .gs-account-orders tbody tr,
    .gs-order-items-table tbody tr {
        background: var(--gs-surface);
        border: 1px solid var(--gs-border);
        border-radius: var(--gs-radius);
        padding: 0.5rem 1rem;
        margin-bottom: 0.75rem;
    }
    .gs-account-orders td,
    .gs-order-items-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--gs-border);
        text-align: right;
    }
    .gs-account-orders tbody tr:last-child td,
    .gs-order-items-table tbody tr:last-child td {
        border-bottom: none;
    }
    .gs-account-orders td[data-label]::before,
    .gs-order-items-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--gs-ink-soft);
        font-size: 0.8125rem;
        margin-right: auto;
        text-align: left;
    }
    /* numerische Spalten rechts ausgerichtet behalten. */
    .gs-num { text-align: right; }

    /* tfoot der Detail-Tabelle: colspan=3-Zellen werden mobil zu label/wert-
     * Zeilen (th = Label, td = Wert), bleiben als Block erhalten. */
    .gs-order-items-table tfoot {
        display: block;
        width: 100%;
        margin-top: 0.5rem;
        padding: 0.5rem 1rem;
        background: var(--gs-accent-soft);
        border: 1px solid var(--gs-accent-line);
        border-radius: var(--gs-radius);
    }
    .gs-order-items-table tfoot tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.35rem 0;
        background: transparent;
        border: none;
        margin: 0;
    }
    .gs-order-items-table tfoot th,
    .gs-order-items-table tfoot td {
        display: inline;
        padding: 0;
        border: none;
        background: transparent;
        text-align: right;
        font-size: 0.9375rem;
        width: auto;
    }
    .gs-order-items-table tfoot th {
        font-weight: 600;
        color: var(--gs-ink-soft);
    }
}