@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

/*
Theme Name: XGLD Theme
Description: Eigenes, custom-codiertes Theme fuer den XGLD Onlineshop
Author: XGLD
Version: 1.0
*/

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #0B1620;
    color: #EDEDED;
}

ul.products {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 32px;
    padding: 0 40px;
}

ul.products li.product a {
    text-decoration: none;
    color: #EDEDED;
}

ul.products li.product img {
    border-radius: 6px;
}

ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px;
    font-weight: 500;
    margin: 16px 0 4px;
    color: #EDEDED;
}

ul.products li.product .price {
    color: #D5A137;
    font-size: 15px;
}

.button.add_to_cart_button,
a.button {
    display: inline-block;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid #D5A137;
    border-radius: 6px;
    color: #D5A137 !important;
    text-decoration: none !important;
    font-size: 13px;
}

ul.products li.product a.button.add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

ul.products li.product a.button.add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button {
    border: 1px solid #D5A137 !important;
    border-radius: 6px !important;
}

.woocommerce-product-gallery,
.woocommerce div.product div.images {
    background-color: transparent !important;
    max-width: 420px !important;
}

.woocommerce div.product div.images img {
    max-height: 420px !important;
    object-fit: contain;
    border-radius: 8px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: #D5A137 !important;
}

.woocommerce div.product .product_meta a {
    color: #D5A137 !important;
}

.woocommerce div.product .product_meta {
    display: none !important;
}

.woocommerce div.product form.cart .quantity input.qty {
    background-color: #0B1620 !important;
    color: #EDEDED !important;
    border: 1px solid #2A3B4A !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    height: auto !important;
    font-size: 12px !important;
}

.quantity {
    display: flex;
    align-items: center;
    border: 1px solid #24384A;
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
}

.quantity input.qty {
    background: transparent !important;
    border: none !important;
    color: #EDEDED !important;
    width: 32px !important;
    text-align: center !important;
    font-size: 11px !important;
    padding: 8px 0 !important;
    -moz-appearance: textfield;
}

.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.xgld-qty-btn {
    width: 29px;
    height: 35px;
    background: transparent;
    border: none;
    color: #8FA3B3;
    font-size: 13px;
    cursor: pointer;
}

.xgld-qty-btn:hover {
    color: #EDEDED;
}

.woocommerce div.product form.cart .button {
    background: #D5A137 !important;
    color: #0B1620 !important;
    border: none !important;
    font-weight: 500 !important;
    padding: 12px 28px !important;
}

/* Aeussere Galerie-Kachel entfernt, damit Bild/Video einheitlich frei auf dem
   Seitenhintergrund stehen (kein Card-Background/-Border/-Radius/-Padding mehr
   um das Hauptmedium). max-width:420px (Bildgroesse/Spaltenbreite) bleibt in
   der Regel oben unveraendert. Wiederherstellen ("Galerie-Kachel aus dem
   letzten Prompt wiederherstellen") = diese 4 Deklarationen wieder aktivieren:
.woocommerce div.product div.images {
    background: #101E2C !important;
    border: 1px solid #1C2E3F !important;
    border-radius: 10px !important;
    padding: 20px !important;
}
*/

.xgld-eyebrow {
    font-size: 12px;
    color: #8FA3B3;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.xgld-stats-row {
    display: flex;
    gap: 32px;
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid #1C2E3F;
}

.xgld-stats-row > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.xgld-stat-label {
    font-size: 11px;
    color: #5C7185;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.xgld-stat-value {
    font-size: 14px;
    color: #EDEDED;
}

.quantity input.qty {
    border: none !important;
    outline: none !important;
}

.woocommerce div.product form.cart .quantity input.qty {
    border: none !important;
    outline: none !important;
}

.quantity input.qty {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 400 !important;
}

.xgld-qty-btn {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.woocommerce-breadcrumb {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    color: #5C7185 !important;
}

.woocommerce-breadcrumb a {
    color: #5C7185 !important;
    text-decoration: none !important;
}

.woocommerce-breadcrumb a:hover {
    color: #8FA3B3 !important;
}

body, input, button, select, textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.woocommerce-breadcrumb {
    padding: 26px 38px 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 32px !important;
}

.woocommerce div.product {
    padding: 0 38px !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.woocommerce div.product::after {
    content: "";
    display: table;
    clear: both;
}

/* Abstand Galerie/Produktdetails (Desktop, nur >900px):
   WooCommerce-Core positioniert div.images und div.summary unabhaengig per
   Float (je width:48%). Da div.images durch das Theme bewusst auf
   max-width:420px begrenzt ist (Bildgroesse bleibt unveraendert), bleibt
   zwischen der schmalen Galerie-Spalte und der rechts an den Container-Rand
   gefloateten Summary-Spalte ein mit der Fensterbreite wachsender Leerraum
   (bei max-width:1400px >250px). Fix: beide Spalten werden stattdessen ueber
   Grid mit festem, bewusstem Abstand nebeneinander ausgerichtet. Bildgroesse,
   Spaltenbreiten und die mobile/tablet Stapelung (WooCommerce smallscreen.css,
   <=768px) bleiben unberuehrt. Zum Rueckgaengigmachen genuegt das Entfernen
   dieses Blocks. */
@media (min-width: 901px) {
    .woocommerce div.product {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        column-gap: 64px !important;
        align-items: start !important;
    }

    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        float: none !important;
        width: auto !important;
    }

    .woocommerce div.product .xgld-tabs {
        grid-column: 1 / -1 !important;
    }
}



.xgld-tabs {
    margin-top: 38px;
    padding: 0 38px;
    box-sizing: border-box;
}

.xgld-tab-nav {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid #1C2E3F;
}

.xgld-tab-link {
    background: transparent;
    border: none;
    color: #5C7185;
    font-size: 15px;
    padding: 11px 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.xgld-tab-link:hover {
    color: #8FA3B3;
}

.xgld-tab-link.active {
    color: #EDEDED;
    border-bottom-color: #D5A137;
}

.xgld-tab-content {
    display: none;
    padding: 22px 0;
    color: #C7D0D8;
    font-size: 15px;
    line-height: 1.7;
}

.xgld-tab-content.active {
    display: block;
}

.xgld-tabs {
    clear: both !important;
    width: 100% !important;
}

.xgld-tab-link {
    border-bottom: 2px solid #24384A !important;
}

.xgld-tab-link.active {
    border-bottom-color: #D5A137 !important;
}

.xgld-tab-nav {
    border-bottom: none !important;
}







.xgld-price-note {
    font-size: 13px;
    color: #5C7185;
    margin-top: -12px;
    margin-bottom: 20px;
}

.xgld-price-note a {
    color: #8FA3B3;
    text-decoration: underline;
}

.xgld-price-note a:hover {
    color: #D5A137;
}

.woocommerce div.product form.cart button.button[type="submit"] {
    font-weight: 600 !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.woocommerce div.product form.cart button.button[type="submit"]::before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: #0B1620;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m-10 0a2 2 0 100 4 2 2 0 000-4zm10 0a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m-10 0a2 2 0 100 4 2 2 0 000-4zm10 0a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.xgld-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.xgld-highlights li {
    font-size: 14px;
    color: #C7D0D8;
    padding: 4px 0;
}

.xgld-highlights li::before {
    content: "»";
    color: #D5A137;
    margin-right: 8px;
}

.xgld-highlights-divider {
    height: 1px;
    background: #1C2E3F;
    margin: 20px 0;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 21px !important;
}

.quantity,
.woocommerce div.product form.cart button.button[type="submit"] {
    height: 48px !important;
    box-sizing: border-box !important;
}

.woocommerce div.product form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.woocommerce div.product .woocommerce-product-gallery__trigger {
    display: none !important;
}

.zoomContainer .zoomWindow,
.zoomContainer .zoomWindowContainer {
    background-color: #101E2C !important;
}

.flex-direction-nav {
    margin: 0 !important;
}

.flex-direction-nav li {
    list-style: none;
}

.flex-direction-nav a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(16, 30, 44, 0.15);
    border: none;
    border: 1px solid #24384A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D5A137 !important;
    font-size: 0;
    opacity: 1 !important;
    z-index: 10;
    cursor: pointer;
}

.flex-direction-nav a::before {
    font-size: 18px;
    line-height: 1;
}

.flex-direction-nav a.flex-prev {
    left: 16px;
}

.flex-direction-nav a.flex-prev::before {
    content: "‹";
}

.flex-direction-nav a.flex-next {
    right: 16px;
}

.flex-direction-nav a.flex-next::before {
    content: "›";
}

.xgld-gallery-arrow {
    width: 32px;
    height: 32px;
    font-size: 13px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(16, 30, 44, 0.15);
    border: none;
    border: 1px solid #24384A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D5A137;
    cursor: pointer;
    z-index: 10;
}

.xgld-gallery-prev {
    left: 16px;
    transform: translateY(-50%);
}

.xgld-gallery-next {
    right: 16px;
    transform: translateY(-50%);
}

.woocommerce-product-gallery {
    position: relative;
}


.xgld-gallery-arrow {
    background: transparent !important;
    border: none !important;
    color: transparent !important;
    font-size: 0 !important;
}

.xgld-gallery-arrow::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-top: 1.5px solid #D5A137;
    border-right: 1.5px solid #D5A137;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.xgld-gallery-arrow:hover::after {
    opacity: 1;
}

.xgld-gallery-prev::after {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.xgld-gallery-next::after {
    transform: rotate(45deg);
    margin-right: 3px;
}

/* ===== Größenauswahl (Variantenselektor) ===== */
.xgld-size-select {
    margin: 20px 0;
}

.xgld-size-select-label {
    font-size: 12px;
    color: #8FA3B3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.xgld-size-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.xgld-size-btn {
    flex: 1 1 0;
    max-width: 70px;
    min-width: 8px;
    padding: 8px 2px;
    background: transparent;
    border: 1px solid #24384A;
    border-radius: 8px;
    color: #8FA3B3;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
}

.xgld-size-btn:hover:not(.active) {
    border-color: #3C5468;
    color: #EDEDED;
}

.xgld-size-btn.active {
    border-color: #D5A137;
    background: rgba(213, 161, 55, 0.12);
    color: #D5A137;
}

.xgld-size-subtext {
    margin-top: 8px;
    font-size: 12px;
    color: #5C7185;
    min-height: 16px;
}

/* Native WooCommerce-Dropdown ausblenden - ersetzt durch .xgld-size-buttons */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart .reset_variations_alert {
    display: none !important;
}

/* Der variable-Produkt-Wrapper rueckt an die Stelle, an der zuvor Menge+Button direkt in .cart lagen */
.woocommerce div.product form.cart .single_variation_wrap {
    width: 100%;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.woocommerce div.product form.cart .woocommerce-variation {
    margin-bottom: 12px;
    color: #C7D0D8;
    font-size: 13px;
}

.woocommerce div.product form.cart .woocommerce-variation-price {
    display: none !important;
}
.woocommerce div.product form.cart .woocommerce-variation-availability {
    display: none !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ===== Footer ===== */
.xgld-footer {
    background: #090D12;
    border-top: 1px solid #1C252D;
    margin-top: 80px;
    padding: 56px 40px 0;
}

.xgld-footer-trust {
    display: flex;
    justify-content: space-between;
    gap: 64px;
    max-width: 1160px;
    margin: 0 auto;
    padding-bottom: 40px;
    flex-wrap: wrap;
}

.xgld-trust-col {
    display: flex;
    flex-direction: column;
    flex: 0 1 240px;
    min-width: 200px;
    max-width: 260px;
}

.xgld-trust-col--payment {
    flex: 0 1 200px;
    max-width: 210px;
}

.xgld-trust-col--shipping {
    flex: 0 1 210px;
    max-width: 225px;
}

/* Payment-Kachel-Breite (Feinschliff, additiv): reduziert nur die sichtbare
   Kachelbreite von Bitcoin/BTCPay Server um ~12,5% ggü. der 200px-Spaltenbreite.
   Spalte, Grid, Gaps und Position bleiben unberührt. Zum vollständigen
   Rückgängigmachen dieser Anpassung genügt das Entfernen dieses @media-Blocks. */
@media (min-width: 901px) {
    .xgld-trust-col--payment .xgld-trust-item {
        box-sizing: border-box;
        width: 175px;
    }
}

.xgld-trust-heading {
    font-size: 11px;
    color: #5C7185;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 12px;
}

.xgld-trust-items {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 1 auto;
}

.xgld-trust-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xgld-trust-text-main {
    font-size: 14px;
    color: #EDEDED;
}

.xgld-trust-text-sub {
    font-size: 12px;
    font-weight: 400;
    color: #5C7185;
}

.xgld-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #0E151C;
    border: 1px solid #1C2E3F;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #EDEDED;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.xgld-trust-item:last-child {
    margin-bottom: 0;
}

.xgld-trust-item:hover {
    border-color: rgba(213, 161, 55, 0.45);
    background: #101B26;
}

.xgld-trust-item svg {
    flex-shrink: 0;
    transition: stroke 0.15s ease;
}

.xgld-trust-item:hover svg {
    stroke: #E9BE6D;
}

.xgld-flag {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    display: block;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.xgld-footer-divider {
    height: 1px;
    background: #1C252D;
    width: 100%;
}

.xgld-footer-lang {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 18px 0;
    flex-wrap: wrap;
}

.xgld-footer-lang a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 13px;
    color: #94A0AA;
    padding: 6px 4px;
    transition: color 0.15s ease;
}

.xgld-footer-lang a:hover {
    color: #F5F5F5;
}

.xgld-footer-lang a.active {
    color: #D5A137;
}

.xgld-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    flex-wrap: wrap;
    padding: 22px 0 32px;
}

.xgld-footer-copy {
    font-size: 13px;
    line-height: 1;
    color: #5C7185;
    flex-shrink: 0;
}

.xgld-footer-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    justify-content: center;
}

.xgld-footer-legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    flex-shrink: 0;
}

.xgld-footer-nav a,
.xgld-footer-legal a {
    font-size: 13px;
    line-height: 1;
    color: #94A0AA;
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.15s ease;
}

.xgld-footer-nav a:hover,
.xgld-footer-legal a:hover {
    color: #D5A137;
}

@media (max-width: 900px) {
    .xgld-footer {
        padding: 44px 24px 0;
    }

    .xgld-footer-trust {
        justify-content: flex-start;
        gap: 28px;
    }

    .xgld-trust-col {
        flex: 1 1 45%;
        min-width: 200px;
        max-width: 320px;
    }
}

@media (max-width: 640px) {
    .xgld-footer {
        margin-top: 56px;
        padding: 40px 20px 0;
    }

    .xgld-footer-trust {
        flex-direction: column;
        justify-content: flex-start;
        gap: 28px;
    }

    .xgld-trust-col {
        min-width: 0;
        max-width: none;
    }

    .xgld-footer-lang {
        justify-content: flex-start;
        gap: 28px;
    }

    .xgld-footer-lang a {
        padding: 10px 6px;
    }

    .xgld-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .xgld-footer-nav,
    .xgld-footer-legal {
        justify-content: flex-start;
        width: 100%;
    }

    .xgld-footer-nav a,
    .xgld-footer-legal a {
        padding: 8px 0;
    }
}

/* ===== Overflow-Fix: WooCommerce "Neu im Shop"-Block (leerer Warenkorb) =====
   WooCommerce Core (all-products.css) setzt auf .wc-block-grid__products eine
   negative Margin (margin:0 -8px 16px) als Gutter-Trick. Das Theme deklariert
   kein add_theme_support('align-wide') und <main> hat kein Padding, wodurch
   dieser Bleed direkt gegen den Viewport lief und einen horizontalen
   Seiten-Overflow auf der leeren Warenkorbseite verursachte. Fix sitzt an der
   Quelle (Margin neutralisiert), kein overflow-x:hidden auf body/html.
   Reversibel: nur diesen Block entfernen. */
.wc-block-grid__products {
    margin-left: 0;
    margin-right: 0;
}
/* ===== Ende Overflow-Fix ===== */

/* ===== XGLD Warenkorb (ersetzt WooCommerce Cart Block) =====
   Eigenstaendige Komponente. Wird ueber template_include (functions.php,
   siehe "XGLD Warenkorb"-Block) statt des WooCommerce-Cart-Blocks gerendert.
   Ausschliesslich XGLD-eigene Klassen, kein WooCommerce-Standard-Markup.
   Reversibel: diesen Block, den "XGLD Warenkorb"-Abschnitt in functions.php
   und die Datei xgld-cart-template.php entfernen. */

.xgld-cart-page {
    padding: 48px 40px 100px;
    box-sizing: border-box;
}

.xgld-cart-wrap {
    max-width: 1160px;
    margin: 0 auto;
}

.xgld-cart-title {
    font-size: 26px;
    font-weight: 500;
    color: #F5F5F5;
    margin: 0 0 32px;
}

/* --- leerer Warenkorb --- */
.xgld-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 72px 24px;
    background: #101E2C;
    border: 1px solid #1C2E3F;
    border-radius: 10px;
}

.xgld-cart-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #0E151C;
    border: 1px solid #1C2E3F;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.xgld-cart-empty-title {
    font-size: 18px;
    font-weight: 500;
    color: #F5F5F5;
    margin: 0 0 7px;
}

.xgld-cart-empty-text {
    font-size: 14px;
    color: #8FA3B3;
    margin: 0 0 25px;
    max-width: 40ch;
}

.xgld-cart-empty-cta {
    display: inline-flex;
    align-items: center;
    background: #D5A137;
    color: #0B1620;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.xgld-cart-empty-cta:hover {
    background: #E9BE6D;
}

/* --- Layout --- */
.xgld-cart-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
}

.xgld-cart-items {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #1C2E3F;
}

.xgld-cart-head {
    display: grid;
    grid-template-columns: 104px 1fr 110px 120px 110px 28px;
    align-items: center;
    gap: 24px;
    padding: 14px 0;
    border-bottom: 1px solid #1C2E3F;
}

.xgld-cart-head span {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5C7185;
}

.xgld-cart-head span:nth-child(1) {
    grid-column: 1 / span 2;
}

.xgld-cart-head span:nth-child(2) {
    text-align: right;
}

.xgld-cart-head span:nth-child(3) {
    text-align: center;
}

.xgld-cart-head span:nth-child(4) {
    text-align: right;
}

.xgld-cart-row {
    display: grid;
    grid-template-columns: 104px 1fr 110px 120px 110px 28px;
    align-items: center;
    gap: 24px;
    padding: 14px 0;
    border-bottom: 1px solid #1C2E3F;
    transition: opacity 0.15s ease;
}

.xgld-cart-row:last-child {
    border-bottom: none;
}

.xgld-cart-row-loading {
    opacity: 0.45;
    pointer-events: none;
}

.xgld-cart-row-media {
    display: block;
    width: 104px;
    height: 104px;
    border-radius: 6px;
    overflow: hidden;
    background: #0B1620;
    flex-shrink: 0;
}

.xgld-cart-row-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.xgld-cart-row-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.xgld-cart-row-name {
    font-size: 15px;
    font-weight: 500;
    color: #F5F5F5;
    text-decoration: none;
}

.xgld-cart-row-name:hover {
    color: #D5A137;
}

.xgld-cart-row-variant {
    font-size: 12px;
    color: #6B7A88;
}

.xgld-cart-row-price,
.xgld-cart-row-total {
    font-size: 14px;
    color: #8FA3B3;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.xgld-cart-row-total {
    color: #F5F5F5;
    font-weight: 500;
}

.xgld-cart-qty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.xgld-cart-qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #6B7A88;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.xgld-cart-qty-btn:hover {
    background: rgba(213, 161, 55, 0.12);
    color: #D5A137;
}

.xgld-cart-qty-value {
    min-width: 22px;
    text-align: center;
    font-size: 13px;
    color: #EDEDED;
    font-variant-numeric: tabular-nums;
}

.xgld-cart-row-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    color: #5C7185;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.xgld-cart-row-remove:hover,
.xgld-cart-row-remove:focus-visible {
    color: #D5A137;
}

/* --- Zusammenfassung --- */
.xgld-cart-summary {
    background: #101E2C;
    border: 1px solid #1C2E3F;
    border-radius: 10px;
    padding: 24px;
    position: sticky;
    top: 24px;
}

.xgld-cart-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #C7D0D8;
    padding: 8px 0;
}

.xgld-cart-summary-note {
    font-size: 12px;
    color: #5C7185;
    padding-bottom: 12px;
    border-bottom: 1px solid #1C2E3F;
    margin-bottom: 4px;
}

/* Master-Pass: Die Trennlinie vor der Gesamtsumme sass zuvor als
   border-bottom an der Versandzeile. Da zwischen Versandzeile und
   Gesamtsumme jetzt der Versandmethodenname stehen kann, haengt die Linie
   nun oben an der Gesamtsumme - optisch identisch, aber unabhaengig davon,
   was dazwischen steht. */
.xgld-cart-summary-shipping {
    padding-bottom: 4px;
}

/* Versandmethodenname unter dem Betrag - Quelle sind die WooCommerce-
   Instance-Settings der gewaehlten Methode, nicht das Theme. */
.xgld-cart-summary-shipping-name {
    font-size: 11.5px;
    line-height: 1.35;
    color: #6B7A88;
    padding-bottom: 12px;
}

/* Lieferland noch nicht bekannt: kein Betrag, sondern ein klarer Hinweis. */
.xgld-cart-summary-pending {
    font-size: 12.5px;
    color: #8FA3B3;
    font-weight: 400;
}

.xgld-cart-summary-total .xgld-cart-summary-pending {
    color: #8FA3B3;
}

/* --- Lieferland-Auswahl im Warenkorb --- */
.xgld-cart-destination {
    padding: 14px 0 12px;
    margin-bottom: 4px;
    border-top: 1px solid #1C2E3F;
}

.xgld-cart-destination-label {
    display: block;
    font-size: 12px;
    color: #8FA3B3;
    margin-bottom: 6px;
}

.xgld-cart-destination-field {
    position: relative;
}

/* Eigener Chevron, damit das Feld dieselbe Formularsprache wie der Checkout
   spricht statt der Browser-Standardoptik. */
.xgld-cart-destination-field::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 1.5px solid #8FA3B3;
    border-bottom: 1.5px solid #8FA3B3;
    transform: rotate(45deg);
    pointer-events: none;
}

body.woocommerce-cart .xgld-cart-summary select.xgld-cart-country-select {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    background: #0E151C;
    background-color: #0E151C;
    background-image: none;
    border: 1px solid #24384A;
    border-radius: 6px;
    padding: 0 34px 0 13px;
    color: #EDEDED;
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s ease;
}

body.woocommerce-cart .xgld-cart-summary select.xgld-cart-country-select:focus {
    border-color: #D5A137;
}

/* Die Optionsliste selbst rendert das Betriebssystem - dunkle Werte setzen,
   damit auf Systemen mit hellem Standard kein weisser Block erscheint. */
body.woocommerce-cart .xgld-cart-summary select.xgld-cart-country-select option {
    background: #101E2C;
    color: #EDEDED;
}

/* Waehrend des AJAX-Wechsels kurz gedaempft, damit kein veralteter Betrag
   als aktuell missverstanden wird. */
.xgld-cart-summary-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.xgld-cart-summary-total {
    font-size: 16px;
    font-weight: 600;
    color: #F5F5F5;
    padding-top: 14px;
    border-top: 1px solid #1C2E3F;
}

.xgld-cart-summary-total span:last-child {
    color: #D5A137;
}

.xgld-cart-checkout-btn {
    display: block;
    text-align: center;
    margin-top: 20px;
    background: #D5A137;
    color: #0B1620;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 14px 20px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.xgld-cart-checkout-btn:hover {
    background: #E9BE6D;
}

.xgld-cart-trust {
    list-style: none;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #1C2E3F;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xgld-cart-trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #8FA3B3;
}

.xgld-cart-trust svg {
    flex-shrink: 0;
    color: #5C7185;
}

/* --- Tablet --- */
@media (max-width: 1024px) {
    .xgld-cart-layout {
        grid-template-columns: 1fr;
    }
    .xgld-cart-summary {
        position: static;
    }
}

@media (max-width: 900px) {
    .xgld-cart-page {
        padding: 36px 24px 80px;
    }
    .xgld-cart-head {
        display: none;
    }
    .xgld-cart-row {
        grid-template-columns: 72px 1fr 1fr 1fr 28px;
        grid-template-areas:
            "media info info info remove"
            "media price qty total total";
        row-gap: 12px;
        padding: 20px 0;
    }
    .xgld-cart-row-media { grid-area: media; width: 72px; height: 72px; }
    .xgld-cart-row-info { grid-area: info; }
    .xgld-cart-row-price { grid-area: price; text-align: left; }
    .xgld-cart-row-qty { grid-area: qty; display: flex; justify-content: center; }
    .xgld-cart-row-total { grid-area: total; }
    .xgld-cart-row-remove { grid-area: remove; height: auto; align-self: start; }
    .xgld-cart-qty-btn { width: 30px; height: 30px; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
    .xgld-cart-page {
        padding: 28px 16px 64px;
    }
    .xgld-cart-title {
        font-size: 21px;
        margin-bottom: 20px;
    }
    .xgld-cart-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px 14px;
        grid-template-columns: none;
        grid-template-areas: none;
        padding: 18px 0;
    }
    .xgld-cart-row-media { width: 64px; height: 64px; flex: 0 0 64px; }
    .xgld-cart-row-info { flex: 1 1 auto; min-width: 0; }
    .xgld-cart-row-remove { flex: 0 0 auto; width: 32px; height: 32px; margin-left: auto; }
    .xgld-cart-row-price { flex: 0 0 auto; text-align: left; order: 3; margin-right: auto; }
    .xgld-cart-row-qty { flex: 0 0 auto; order: 4; }
    .xgld-cart-row-total { flex: 0 0 auto; order: 5; margin-left: auto; }
    .xgld-cart-qty-btn { width: 30px; height: 30px; }
    .xgld-cart-summary { padding: 20px; }
}
/* ===== Ende XGLD Warenkorb ===== */

/* ===== Warenkorb-Header-Fix =====
   Der Header ist sitewide per Inline-Style sticky (header.php, top:0,
   z-index:1000) und ueberlagert dadurch den sticky Summenblock im neuen
   XGLD-Warenkorb. Nur auf der Warenkorbseite (body.woocommerce-cart, von
   WooCommerce automatisch gesetzt) wird der Header auf normalen Fluss
   zurueckgesetzt; auf allen anderen Seiten bleibt er unveraendert sticky.
   !important noetig, da sonst der Inline-Style Vorrang haette.
   Reversibel: nur diesen Block entfernen. */
body.woocommerce-cart header {
    position: static !important;
}
/* ===== Ende Warenkorb-Header-Fix ===== */

/* ===== XGLD Produktseite (ersetzt natives WooCommerce Single-Product-Frontend) =====
   Ausschliesslich neue, eigenstaendige Regeln: der Produktbereich selbst
   (Titel, Highlights, Groessenauswahl, Preis, Mengenwaehler, Button) nutzt
   bewusst dieselben bestehenden Klassennamen/Selektoren wie zuvor (siehe
   xgld-product-template.php), damit das bereits fertige Erscheinungsbild ohne
   jede CSS-Aenderung erhalten bleibt. Hier nur echte Neuzugaenge: der
   Nichtverfuegbar-Hinweis und die neue XGLD-Add-to-Cart-Benachrichtigung
   (ersetzt die weisse WooCommerce-Notice).
   Reversibel: diesen Block, den "XGLD Produktseite"-Abschnitt in functions.php,
   xgld-product-template.php entfernen und die zwei add_theme_support-Zeilen
   in xgld_theme_setup() wiederherstellen. */

.xgld-unavailable-text {
    display: none;
    font-size: 12px;
    color: #8FA3B3;
    margin-top: 10px;
}

.single_add_to_cart_button.disabled ~ .xgld-unavailable-text {
    display: block;
}

/* TOAST-POSITION-HOTFIX 14.08.2026
   Der Toast startete bei top:28px und lag damit mitten im Kopfbereich - auf
   Hoehe von Konto/Merkzettel/Warenkorb und teilweise ueber der Kursleiste.

   Gemessene Geometrie (Produktseite, DE und EN identisch):
       header              0 - 134 px   (position: relative, im Fluss)
       Kursleiste        134 - 178 px   ab 1360px Breite
       Kursleiste        134 - 192 px   bis 1280px Breite
   Beide Leisten liegen im normalen Fluss, es gibt keine Header-/Ticker-
   Variable und keine sticky-Positionierung.

   NACHTRAG 14.08.2026 (zweiter Toast-Hotfix) - warum die festen Werte weg sind:
   Hier standen zuvor top:202px bzw. ab 1360px top:188px, abgeleitet aus der
   gemessenen Unterkante der Kursleiste. Diese Rechnung setzt voraus, dass die
   Seite immer bei y=0 beginnt. Sobald etwas den Seitenanfang verschiebt,
   stimmt sie nicht mehr - reproduziert mit der WordPress-Adminleiste:
   sie setzt html{margin-top:32px} und schiebt Kopfbereich UND Kursleiste um
   32px nach unten, waehrend der feste Toastwert stehen blieb.

       ohne Adminleiste: Leiste unten 178, Toast 188  ->  +10px
       mit  Adminleiste: Leiste unten 210, Toast 188  ->  -22px (Ueberlappung)

   Dasselbe gilt fuer jede andere Verschiebung (Hinweisleisten, umbrechende
   Kopfzeile, andere Schriftmetrik). Ein fester Wert kann das nicht abbilden.

   Die Position wird deshalb jetzt beim Anzeigen des Toasts aus der TATSAECHLICH
   sichtbaren Kursleiste berechnet (xgld-product-template.php, positionToast()).
   Hier steht nur noch der Startwert, bis das Skript gemessen hat - bewusst
   grosszuegig, damit auch ohne JavaScript nichts ueber der Leiste liegt.
   Breite, Farben, Text, Icons, Animation und Auto-Dismiss sind unberuehrt.
   Rollback: .xgld-toast-visible-position-hotfix-20260814/rollback.sh */
#xgld-toast-root {
    position: fixed;
    top: 202px;
    right: 28px;
    z-index: 1200;
    pointer-events: none;
}

.xgld-toast {
    position: relative;
    pointer-events: none;
    width: 360px;
    max-width: calc(100vw - 40px);
    background: #101E2C;
    border: 1px solid #1C2E3F;
    border-radius: 10px;
    padding: 14px 16px 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.xgld-toast-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.xgld-toast-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-right: 16px;
}

.xgld-toast-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: #D5A137;
}

.xgld-toast-error .xgld-toast-icon {
    color: #B4544A;
}

.xgld-toast-body {
    flex: 1 1 auto;
    min-width: 0;
}

.xgld-toast-title {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #F5F5F5;
    line-height: 1.4;
}

.xgld-toast-sub {
    margin: 3px 0 0;
    font-size: 12px;
    color: #8FA3B3;
    line-height: 1.4;
}

.xgld-toast-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #5C7185;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.xgld-toast-close:hover {
    color: #8FA3B3;
}

.xgld-toast-link {
    display: inline-block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #1C2E3F;
    font-size: 12px;
    color: #D5A137;
    text-decoration: none;
}

.xgld-toast-link:hover {
    color: #E9BE6D;
}

@media (max-width: 480px) {
    #xgld-toast-root {
        /* Startwert wie oben; die tatsaechliche Position setzt
           positionToast() zur Laufzeit. Die seitlichen Werte bleiben
           unveraendert - auf schmalen Viewports spannt der Toast weiterhin
           ueber die volle Breite. */
        top: 202px;
        right: 14px;
        left: 14px;
    }
    .xgld-toast {
        width: auto;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xgld-toast {
        transition: opacity 0.15s linear;
        transform: none;
    }
}
/* ===== Ende XGLD Produktseite ===== */

/* ===== XGLD Checkout (ersetzt sichtbares WooCommerce-Checkout-Frontend) =====
   Gestaltet ausschliesslich die Kassenseite. Die WooCommerce-Klassen im DOM
   (form.checkout, #order_review, .form-row, .woocommerce-invalid, select2 ...)
   bleiben funktional erhalten und werden hier so ueberschrieben, dass keinerlei
   WooCommerce-Standardoptik sichtbar bleibt. Alle Regeln sind auf
   body.woocommerce-checkout bzw. .xgld-checkout-* gescoped, damit Warenkorb,
   Produktseite und uebrige Seiten unberuehrt bleiben.
   Reversibel: diesen Block entfernen. */

.xgld-checkout-page {
    padding: 36px 40px 80px;
    box-sizing: border-box;

    /* Abstand der Sticky-Summary zur Viewport-Oberkante. Der Seitenheader ist
       position:sticky;top:0;z-index:1000 - die Summary muss darunter beginnen,
       sonst schoebe sie sich hinter den Header. Der Wert ist die einzige
       Stellschraube dafuer und bewusst als Variable gehalten. */
    --xgld-checkout-sticky-top: 150px;
}

.xgld-checkout-wrap {
    max-width: 1240px;
    margin: 0 auto;
}

.xgld-checkout-title {
    font-size: 24px;
    font-weight: 500;
    color: #F5F5F5;
    margin: 0 0 22px;
}

/* Der WooCommerce-Shortcode-Wrapper darf keine eigene Optik einbringen. */
body.woocommerce-checkout .xgld-checkout-wrap .woocommerce {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.xgld-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 40px;
    align-items: start;
}

/* --- linke Spalte --- */
.xgld-checkout-section + .xgld-checkout-section {
    margin-top: 28px;
}

.xgld-checkout-section-title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #F5F5F5;
    margin: 0 0 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid #1C2E3F;
}

.xgld-checkout-section-title--spaced {
    margin-top: 28px;
}

/* Zwoelfspaltiges Feldraster.
   Die Spaltenzuordnung erfolgt bewusst ueber die stabilen WooCommerce-Feld-IDs
   und NICHT ueber .form-row-first/.form-row-last/.form-row-wide: diese Klassen
   werden von address-i18n.js bei jedem Laenderwechsel aus den Locale-Daten neu
   gesetzt (removeClass/addClass) und sind daher keine verlaessliche
   Layoutgrundlage. Die IDs bleiben unveraendert.

   Genau hier lag die Hauptursache der extremen Checkout-Laenge: WooCommerce
   vergibt fuer Telefon, E-Mail, Land, Strasse, Adresszusatz, PLZ, Ort und
   Bundesland durchgaengig .form-row-wide - alle acht Felder standen dadurch
   jeweils allein auf voller Breite untereinander. */
.xgld-field-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px 14px;
    align-items: start;
}

/* WooCommerce-Breitenklassen auf das XGLD-Grid abbilden */
body.woocommerce-checkout .xgld-field-grid .form-row {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    float: none;
    width: auto;
    grid-column: span 12;
}

body.woocommerce-checkout .xgld-field-grid .form-row-first,
body.woocommerce-checkout .xgld-field-grid .form-row-last {
    grid-column: span 6;
}

/* Kontakt: E-Mail etwas breiter als Telefon */
body.woocommerce-checkout .xgld-field-grid #billing_email_field {
    grid-column: span 7;
}

body.woocommerce-checkout .xgld-field-grid #billing_phone_field {
    grid-column: span 5;
}

/* Adresse: Vorname | Nachname, Land | Bundesland, Strasse, Zusatz, PLZ | Ort */
body.woocommerce-checkout .xgld-field-grid #billing_first_name_field,
body.woocommerce-checkout .xgld-field-grid #billing_last_name_field,
body.woocommerce-checkout .xgld-field-grid #billing_country_field,
body.woocommerce-checkout .xgld-field-grid #billing_state_field {
    grid-column: span 6;
}

body.woocommerce-checkout .xgld-field-grid #billing_address_1_field,
body.woocommerce-checkout .xgld-field-grid #billing_address_2_field {
    grid-column: span 12;
}

body.woocommerce-checkout .xgld-field-grid #billing_postcode_field {
    grid-column: span 4;
}

body.woocommerce-checkout .xgld-field-grid #billing_city_field {
    grid-column: span 8;
}

/* Hat das gewaehlte Land keine Bundeslaender, blendet country-select.js die
   Bundesland-Zeile per inline display:none aus ($parent.hide()). Dann soll
   "Land / Region" die Zeile allein fuellen statt eine halbe Leerspalte zu
   hinterlassen. Ohne :has()-Unterstuetzung bleibt lediglich diese Leerspalte -
   kein Layoutfehler. */
body.woocommerce-checkout .xgld-field-grid:has(#billing_state_field[style*="display: none"]) #billing_country_field {
    grid-column: span 12;
}

body.woocommerce-checkout .xgld-field-grid label {
    display: block;
    font-size: 12px;
    line-height: 1.3;
    color: #8FA3B3;
    margin-bottom: 6px;
    font-weight: 400;
}

body.woocommerce-checkout .xgld-field-grid label .required {
    color: #D5A137;
    text-decoration: none;
    border: none;
}

body.woocommerce-checkout .xgld-field-grid label .optional {
    color: #5C7185;
}

body.woocommerce-checkout .woocommerce-input-wrapper {
    display: block;
    width: 100%;
}

/* Eingabefelder */
body.woocommerce-checkout form.xgld-checkout-form input[type="text"],
body.woocommerce-checkout form.xgld-checkout-form input[type="email"],
body.woocommerce-checkout form.xgld-checkout-form input[type="tel"],
body.woocommerce-checkout form.xgld-checkout-form input[type="password"],
body.woocommerce-checkout form.xgld-checkout-form textarea,
body.woocommerce-checkout form.xgld-checkout-form select {
    width: 100%;
    box-sizing: border-box;
    background: #0E151C;
    border: 1px solid #24384A;
    border-radius: 6px;
    /* 13 + 13 Padding + 19.6 Zeilenhoehe + 2 Rahmen = ca. 47.6 px */
    padding: 13px 14px;
    color: #EDEDED;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.15s ease;
    outline: none;
    box-shadow: none;
}

/* URSACHE der weissen Bestellhinweis-Textarea:
   WooCommerce gibt die Textarea mit class="input-text" aus. Dafuer gilt
       .woocommerce form .form-row .input-text { background-color:
        var(--wc-form-color-background,#fff); color:...; padding:.5em; }
   mit drei Klassen (0,3,1). Die bisherige XGLD-Regel
   "body.woocommerce-checkout form.xgld-checkout-form textarea" hat nur zwei
   Klassen (0,2,3) und verlor damit fuer jede Eigenschaft, die beide
   deklarieren - Hintergrund, Textfarbe, Innenabstand und Rahmen kamen also
   von WooCommerce. Bei den uebrigen Feldern gewinnt XGLD, weil dort
   zusaetzlich der Attributselektor [type="..."] mitzaehlt; nur die Textarea
   hatte diesen Ausgleich nicht.
   Deshalb hier eine eigene Regel mit .form-row im Selektor (0,3,3). */
body.woocommerce-checkout form.xgld-checkout-form textarea,
body.woocommerce-checkout form.xgld-checkout-form .form-row textarea,
body.woocommerce-checkout form.xgld-checkout-form .form-row textarea.input-text {
    box-sizing: border-box;
    width: 100%;
    min-height: 88px;
    height: auto;
    background: #0E151C;
    background-color: #0E151C;
    border: 1px solid #24384A;
    border-radius: 6px;
    padding: 12px 14px;
    color: #EDEDED;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s ease;
}

body.woocommerce-checkout form.xgld-checkout-form .form-row textarea::placeholder {
    color: #5C7185;
}

body.woocommerce-checkout form.xgld-checkout-form .form-row textarea:focus {
    border-color: #D5A137;
}

/* Bestellhinweise: eingeklappt (siehe form-shipping.php-Override).
   Zwischen Adressblock und dieser Zeile steht der (leere) Container
   .woocommerce-shipping-fields, weshalb der Abschnittsabstand hier direkt
   gesetzt wird. */
.xgld-notes {
    margin-top: 26px;
}

.xgld-notes-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #8FA3B3;
    cursor: pointer;
    list-style: none;
    padding: 0;
    user-select: none;
    transition: color 0.15s ease;
}

.xgld-notes-summary::-webkit-details-marker,
.xgld-notes-summary::marker {
    display: none;
    content: "";
}

.xgld-notes-summary:hover {
    color: #D5A137;
}

.xgld-notes-summary-icon {
    display: inline-flex;
    color: #5C7185;
    transition: transform 0.15s ease, color 0.15s ease;
}

.xgld-notes-summary:hover .xgld-notes-summary-icon {
    color: #D5A137;
}

/* Geoeffnet: senkrechter Strich weg -> aus "+" wird "-".
   Zuvor wurde das Icon um 45 Grad gedreht, was optisch ein Loeschen-"x"
   ergab. */
.xgld-notes[open] .xgld-notes-icon-bar {
    display: none;
}

.xgld-notes-body {
    margin-top: 12px;
}

/* Das Label ist im geoeffneten Zustand redundant zur Summary-Zeile - visuell
   ausgeblendet, fuer Screenreader erhalten. */
body.woocommerce-checkout .xgld-notes-body label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

body.woocommerce-checkout form.xgld-checkout-form input::placeholder,
body.woocommerce-checkout form.xgld-checkout-form textarea::placeholder {
    color: #5C7185;
}

body.woocommerce-checkout form.xgld-checkout-form input:focus,
body.woocommerce-checkout form.xgld-checkout-form textarea:focus,
body.woocommerce-checkout form.xgld-checkout-form select:focus {
    border-color: #D5A137;
}

/* SelectWoo/Select2: native Optik vollstaendig neutralisieren */
body.woocommerce-checkout .select2-container--default .select2-selection--single {
    background: #0E151C;
    border: 1px solid #24384A;
    border-radius: 6px;
    height: auto;
    min-height: 47px;
    outline: none;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #EDEDED;
    line-height: 1.4;
    padding: 13px 30px 13px 14px;
    font-size: 14px;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #5C7185;
}

/* HOTFIX 14.08.2026: auf die Account-Referenz vereinheitlicht (20px breit,
   9px Abstand rechts). Zuvor 8px und - durch woocommerce.css - 16px breit. */
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 9px;
    width: 20px;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #8FA3B3 transparent transparent transparent;
}

body.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #D5A137;
}

/* Dropdown-Panel haengt am body, daher ohne body-Scope */
.select2-container--default .select2-dropdown,
.select2-dropdown {
    background: #101E2C;
    border: 1px solid #24384A;
    border-radius: 6px;
    color: #EDEDED;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: #0E151C;
    border: 1px solid #24384A;
    border-radius: 4px;
    color: #EDEDED;
    padding: 8px 10px;
    outline: none;
}

.select2-container--default .select2-results__option {
    background: transparent;
    color: #C7D0D8;
    font-size: 14px;
    padding: 8px 12px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background: rgba(213, 161, 55, 0.14);
    color: #F5F5F5;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    background: rgba(213, 161, 55, 0.08);
    color: #D5A137;
}

/* Feldfehler: seriös, nicht grell */
body.woocommerce-checkout .form-row.woocommerce-invalid input,
body.woocommerce-checkout .form-row.woocommerce-invalid textarea,
body.woocommerce-checkout .form-row.woocommerce-invalid select,
body.woocommerce-checkout .form-row.woocommerce-invalid .select2-container--default .select2-selection--single {
    border-color: #B4544A;
}

body.woocommerce-checkout .form-row.woocommerce-invalid label {
    color: #C9695D;
}

body.woocommerce-checkout .form-row.woocommerce-validated input,
body.woocommerce-checkout .form-row.woocommerce-validated select {
    border-color: #24384A;
}

/* --- rechte Spalte --- */
.xgld-checkout-side {
    /* Standardmaessig im normalen Fluss. Sticky wird weiter unten nur bei
       ausreichender Viewport-Breite UND -Hoehe zugeschaltet, damit die
       Summary nie oben abgeschnitten wird und CTA/Trust immer erreichbar
       bleiben. */
    position: static;
    background: #101E2C;
    border: 1px solid #1C2E3F;
    border-radius: 10px;
    padding: 20px 22px;
}

.xgld-checkout-side-title {
    font-size: 14px;
    font-weight: 500;
    color: #F5F5F5;
    margin: 0 0 12px;
}

.xgld-checkout-side-title--payment {
    margin: 18px 0 10px;
    padding-top: 16px;
    border-top: 1px solid #1C2E3F;
}

/* Order Review */
.xgld-review-items {
    display: flex;
    flex-direction: column;
}

.xgld-review-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid #1C2E3F;
}

.xgld-review-item:first-child {
    padding-top: 0;
}

/* Blockcontainer statt Flex-Spalte: dadurch koennen Produktdetail und Menge
   inline in EINER gedaempften Zeile stehen statt zwei eigene Zeilen zu
   belegen - bei mehreren Positionen spart das spuerbar Hoehe. */
.xgld-review-item-info {
    min-width: 0;
}

.xgld-review-item-name {
    display: block;
    font-size: 13.5px;
    line-height: 1.35;
    color: #F5F5F5;
}

.xgld-review-item-meta,
.xgld-review-item-qty {
    display: inline;
    font-size: 11.5px;
    line-height: 1.35;
    color: #6B7A88;
}

.xgld-review-item-meta + .xgld-review-item-qty::before {
    content: "·";
    margin: 0 5px;
    color: #3C5468;
}

.xgld-review-item-total {
    font-size: 13.5px;
    color: #EDEDED;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.xgld-review-totals {
    padding-top: 10px;
}

.xgld-review-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    font-size: 13.5px;
    color: #C7D0D8;
    padding: 5px 0;
    font-variant-numeric: tabular-nums;
}

/* Versandzeile zweizeilig:
     Zeile 1  Versand ................. Betrag
     Zeile 2  Name der Versandmethode
   Die Zeile ist dadurch nicht mehr gedraengt und der Betrag steht sauber
   rechtsbuendig bei den uebrigen Summen. */
.xgld-review-row--shipping {
    display: block;
    padding: 5px 0;
}

.xgld-shipping-methods {
    list-style: none;
    margin: 0;
    padding: 0;
}

.xgld-shipping-method + .xgld-shipping-method {
    margin-top: 8px;
}

.xgld-shipping-method-label {
    display: block;
    color: #C7D0D8;
    font-size: 13.5px;
    cursor: pointer;
}

.xgld-shipping-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.xgld-shipping-line-price {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.xgld-shipping-line-name {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.35;
    color: #6B7A88;
}

.xgld-shipping-method input.shipping_method {
    margin-right: 6px;
    accent-color: #D5A137;
}

/* Bei genau einer Rate ist der Input ein Hidden-Feld - dann darf die Zeile
   nicht wie ein anklickbares Auswahlelement wirken. */
.xgld-shipping-method input[type="hidden"] + .xgld-shipping-method-label {
    cursor: default;
}

.xgld-shipping-note {
    font-size: 12.5px;
    color: #6B7A88;
    display: inline-block;
    max-width: 210px;
}

.xgld-shipping-note--warn {
    color: #C9695D;
}

.xgld-review-row--total {
    margin-top: 6px;
    padding-top: 11px;
    border-top: 1px solid #1C2E3F;
    font-size: 16px;
    font-weight: 600;
    color: #F5F5F5;
}

.xgld-review-row--total span:last-child {
    color: #D5A137;
}

/* Zahlung
   ------------------------------------------------------------------------
   WICHTIG - Spezifitaet: woocommerce.css gestaltet den Zahlungsbereich ueber
   ID-Selektoren (.woocommerce-checkout #payment ...). Die frueheren reinen
   Klassenregeln (.xgld-payment-box usw.) haben diese Regeln NICHT geschlagen.
   Genau daher stammten im echten Browser:
     - die helle Flaeche des gesamten Zahlungsblocks
       (.woocommerce-checkout #payment{background:rgba(129,110,153,.14)})
     - die grosse helle BTCPay-Sprechblase inkl. Pfeilspitze
       (#payment div.payment_box{background-color:#dcd7e2} + ::before-Dreieck)
     - zusaetzliche 1em-Innenabstaende an ul.payment_methods und div.form-row
   Alle folgenden Regeln sind deshalb bewusst mit #payment im Selektor
   geschrieben, damit sie die WooCommerce-Vorgaben sicher ueberschreiben. */
body.woocommerce-checkout #payment.xgld-payment {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

body.woocommerce-checkout #payment ul.xgld-payment-methods {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.woocommerce-checkout #payment ul.xgld-payment-methods li.xgld-payment-method {
    margin: 0;
    padding: 0;
    line-height: 1.4;
    background: transparent;
    border-radius: 8px;
}

body.woocommerce-checkout #payment ul.xgld-payment-methods li.xgld-payment-method input {
    margin: 0;
}

/* WooCommerce setzt an ul.payment_methods und deren li Clearfix-Pseudoelemente
   (content:" ";display:table). Im Flex-Layout erzeugen sie nur ueberfluessige
   Hoehe. */
body.woocommerce-checkout #payment ul.xgld-payment-methods::before,
body.woocommerce-checkout #payment ul.xgld-payment-methods::after,
body.woocommerce-checkout #payment ul.xgld-payment-methods li.xgld-payment-method::before,
body.woocommerce-checkout #payment ul.xgld-payment-methods li.xgld-payment-method::after {
    content: none;
    display: none;
}

.xgld-payment-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Eine kompakte Zahlungszeile: 13+13 Padding + 2 Rahmen + ca. 43 Inhalt
   (Name 19 + 2 Abstand + Zusatz 16) = ca. 71 px */
.xgld-payment-label {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid #1C2E3F;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.xgld-payment-label:hover {
    border-color: #2A3B4A;
}

.xgld-payment-radio:checked + .xgld-payment-label {
    border-color: rgba(213, 161, 55, 0.5);
    background: rgba(213, 161, 55, 0.06);
}

.xgld-payment-radio:focus-visible + .xgld-payment-label {
    border-color: #D5A137;
}

.xgld-payment-mark {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #3C5468;
    position: relative;
}

.xgld-payment-radio:checked + .xgld-payment-label .xgld-payment-mark {
    border-color: #D5A137;
}

.xgld-payment-radio:checked + .xgld-payment-label .xgld-payment-mark::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #D5A137;
}

.xgld-payment-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.xgld-payment-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #F5F5F5;
}

.xgld-payment-icon {
    flex-shrink: 0;
}

.xgld-payment-sub {
    font-size: 12px;
    color: #8FA3B3;
}

/* Kein eigener Container mehr, nur noch eine gedaempfte Textzeile unter der
   Bitcoin-Zeile. Alle Eigenschaften der hellen WooCommerce-Sprechblase werden
   hier explizit zurueckgesetzt. */
body.woocommerce-checkout #payment div.xgld-payment-box {
    position: static;
    width: auto;
    padding: 8px 2px 0;
    margin: 0;
    background: none;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    box-shadow: none;
}

/* Die Pfeilspitze der Sprechblase (1em-Rahmendreieck) vollstaendig entfernen. */
body.woocommerce-checkout #payment div.xgld-payment-box::before,
body.woocommerce-checkout #payment div.xgld-payment-box::after {
    content: none;
    display: none;
    border: none;
}

body.woocommerce-checkout #payment div.xgld-payment-box p.xgld-payment-note {
    margin: 0;
    font-size: 12.5px;
    color: #6B7A88;
    line-height: 1.5;
}

.xgld-payment-empty {
    font-size: 13px;
    color: #C9695D;
}

/* Bestellbereich
   ------------------------------------------------------------------------
   URSACHE der Button-/Trust-Ueberlappung:
   woocommerce-layout.css enthaelt
       .woocommerce #payment #place_order{float:right}
   Dieser Selektor traegt ZWEI IDs und schlug damit die bisherige Regel
   "body.woocommerce-checkout #place_order{float:none}" (eine ID). Der
   Bestellbutton war dadurch im echten Browser ein Float, stand also ausserhalb
   des normalen Flusses: die nachfolgende Trust-Liste rutschte hinter bzw.
   neben ihn ("Versicherter Wertversand" im Button) und ihre Zeilenboxen
   wurden vom Float verkuerzt - daher der zerstueckelte Umbruch von
   "Zahlung sicher ueber BTCPay".
   Der Bereich wird deshalb jetzt als Flex-Spalte im normalen Dokumentfluss
   aufgebaut; float wird mit gleichwertiger Spezifitaet (zwei IDs)
   zurueckgesetzt. Es gibt in diesem Bereich keinerlei position:absolute. */
body.woocommerce-checkout #payment div.xgld-place-order {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 16px 0 0;
    padding: 0;
    float: none;
    width: auto;
}

body.woocommerce-checkout #payment div.xgld-place-order::before,
body.woocommerce-checkout #payment div.xgld-place-order::after {
    content: none;
    display: none;
}

/* Datenschutzhinweis: Inhalt und Link unveraendert, nur visuell
   zurueckgenommen. Er soll weniger Aufmerksamkeit erhalten als Gesamtsumme,
   Zahlung und CTA. */
body.woocommerce-checkout .xgld-place-order .woocommerce-terms-and-conditions-wrapper {
    margin: 0 0 10px;
}

body.woocommerce-checkout .xgld-place-order .woocommerce-privacy-policy-text {
    margin: 0;
}

body.woocommerce-checkout .xgld-place-order .woocommerce-privacy-policy-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #61707E;
}

body.woocommerce-checkout .xgld-place-order .woocommerce-privacy-policy-text a {
    color: #8FA3B3;
    text-decoration: underline;
}

body.woocommerce-checkout .xgld-place-order .woocommerce-privacy-policy-text a:hover {
    color: #D5A137;
}

/* URSACHE des unlesbaren CTA:
   Weiter oben in dieser Datei steht eine GLOBALE Theme-Regel fuer den Shop
       .woocommerce a.button, .woocommerce button.button {
           background: transparent !important;
           border: 1px solid #D5A137 !important;
       }
   #place_order traegt class="button alt" und liegt im .woocommerce-Wrapper.
   Wegen !important schlug diese Regel jede Spezifitaet - der Bestellbutton
   hatte also gar keine Goldflaeche, sondern war transparent. Sichtbar blieb
   die dunkle Summenkarte (#101E2C) mit dem dunklen Buttontext (#0B1620):
   Kontrast rund 1.1:1, praktisch unlesbar. Es war damit der ACTIVE-Zustand,
   nicht der Disabled-Zustand.
   Gegenmassnahme bewusst eng begrenzt auf #place_order im Checkout-
   Zahlungsbereich - die globale Shop-Buttonoptik bleibt unveraendert. */
body.woocommerce-checkout #payment #place_order,
body.woocommerce-checkout #payment .xgld-place-order-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    background: #D5A137 !important;
    background-color: #D5A137 !important;
    color: #0B1620 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 15px 20px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.15s ease;
    box-shadow: none !important;
    text-shadow: none;
    /* KRITISCH: hebt .woocommerce #payment #place_order{float:right} auf */
    float: none;
    position: static;
}

body.woocommerce-checkout #payment #place_order:hover,
body.woocommerce-checkout #payment .xgld-place-order-btn:hover {
    background: #E9BE6D !important;
    background-color: #E9BE6D !important;
    color: #0B1620 !important;
}

body.woocommerce-checkout #payment #place_order:focus-visible {
    outline: 2px solid #F5F5F5;
    outline-offset: 2px;
}

/* Disabled/Busy: bewusst OHNE opacity auf dem gesamten Element. Die frueher
   verwendete opacity:0.55 liess die dunkle Karte durch die Goldflaeche
   scheinen und senkte den Textkontrast auf rund 3.2:1. Stattdessen
   gedaempfte Flaeche mit hellem Text - klar als inaktiv erkennbar und mit
   rund 5.4:1 weiterhin gut lesbar. */
body.woocommerce-checkout #payment #place_order:disabled,
body.woocommerce-checkout #payment #place_order[disabled],
body.woocommerce-checkout #payment #place_order.disabled,
body.woocommerce-checkout #payment #place_order.xgld-busy {
    background: #6E5A2E !important;
    background-color: #6E5A2E !important;
    color: #E4E8EC !important;
    opacity: 1;
    cursor: not-allowed;
}

/* Trust-Zeilen: eigene Flex-Spalte unterhalb des Buttons, im normalen Fluss.
   clear:both ist die zusaetzliche Absicherung, falls in einer kuenftigen
   WooCommerce-Version erneut ein Float im Zahlungsbereich auftaucht. */
.xgld-checkout-trust {
    list-style: none;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #1C2E3F;
    display: flex;
    flex-direction: column;
    gap: 7px;
    clear: both;
}

.xgld-checkout-trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #8FA3B3;
    margin: 0;
}

/* Schuetzt "Versicherter Wertversand" / "Zahlung sicher ueber BTCPay" vor
   zerstueckeltem Umbruch. Bei 12 px belegen beide Texte rund 150 px und
   passen damit auch in der schmalsten Spalte (ab 360 px Viewport bleiben
   ueber 250 px nutzbare Breite). */
.xgld-checkout-trust li span {
    white-space: nowrap;
}

.xgld-checkout-trust svg {
    flex-shrink: 0;
    color: #5C7185;
}

/* Gutschein
   ------------------------------------------------------------------------
   URSACHE der riesigen Coupon-Flaeche:
   woocommerce.css enthaelt
       .woocommerce form.checkout_coupon{border:1px solid #cfc8d8;padding:20px;
        margin:2em 0;border-radius:5px}
   Dieser Selektor (zwei Klassen + ein Element) schlug die bisherige Regel
   ".xgld-coupon-form" (eine Klasse). Nach Klick auf "Einloesen" erschien
   deshalb eine helle, umrandete Box mit 20 px Innen- und 2em Aussenabstand
   ueber die volle Breite.

   URSACHE des weissen Eingabefelds:
   Das Gutscheinformular wird ueber woocommerce_before_checkout_form
   ausgegeben und liegt damit AUSSERHALB von form.checkout - die
   XGLD-Feldregeln waren aber auf .xgld-checkout-form gescoped und griffen
   dort nicht. Sichtbar blieb
       .woocommerce form .form-row .input-text{background-color:
        var(--wc-form-color-background,#fff)}
   also das weisse WooCommerce-Standardfeld. Die folgenden Regeln adressieren
   das Feld deshalb ueber form.checkout_coupon mit hoeherer Spezifitaet. */
.xgld-coupon {
    max-width: 480px;
    margin-bottom: 20px;
}

.xgld-coupon-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #6B7A88;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.xgld-coupon-link {
    color: #D5A137;
    text-decoration: none;
}

.xgld-coupon-link:hover {
    color: #E9BE6D;
}

body.woocommerce-checkout form.checkout_coupon.xgld-coupon-form {
    margin: 10px 0 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    text-align: left;
    max-width: 480px;
}

body.woocommerce-checkout form.checkout_coupon .xgld-coupon-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    padding: 0;
}

body.woocommerce-checkout form.checkout_coupon input.xgld-coupon-input {
    flex: 1 1 300px;
    min-width: 0;
    box-sizing: border-box;
    height: 47px;
    background: #0E151C;
    border: 1px solid #24384A;
    border-radius: 6px;
    padding: 13px 14px;
    color: #EDEDED;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s ease;
}

body.woocommerce-checkout form.checkout_coupon input.xgld-coupon-input::placeholder {
    color: #5C7185;
}

body.woocommerce-checkout form.checkout_coupon input.xgld-coupon-input:focus {
    border-color: #D5A137;
}

/* Ungueltiger Code: checkout.js setzt .has-error auf das Feld und haengt ein
   <span class="coupon-error-notice"> in dieselbe .form-row. Ohne die
   Umbruchregel wuerde dieser Span als drittes Flex-Element Feld und Button
   zusammenquetschen. */
body.woocommerce-checkout form.checkout_coupon input.xgld-coupon-input.has-error {
    border-color: #B4544A;
}

body.woocommerce-checkout form.checkout_coupon .coupon-error-notice {
    flex: 1 0 100%;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #C9695D;
}

body.woocommerce-checkout form.checkout_coupon button.xgld-coupon-btn {
    flex: 0 0 auto;
    width: 124px;
    height: 47px;
    background: transparent;
    border: 1px solid #24384A;
    border-radius: 6px;
    color: #C7D0D8;
    padding: 0 16px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    text-shadow: none;
    box-shadow: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

body.woocommerce-checkout form.checkout_coupon button.xgld-coupon-btn:hover {
    border-color: #D5A137;
    color: #D5A137;
    background: transparent;
}

/* Notices/Errors: WooCommerce-Klassen bleiben, Optik vollstaendig XGLD */
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-notice {
    list-style: none;
    margin: 0 0 22px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #101E2C;
    border: 1px solid #1C2E3F;
    border-left: 3px solid #5C7185;
    color: #EDEDED;
    font-size: 13.5px;
    line-height: 1.55;
}

body.woocommerce-checkout .woocommerce-error {
    border-left-color: #B4544A;
    background: rgba(180, 84, 74, 0.08);
}

body.woocommerce-checkout .woocommerce-message {
    border-left-color: #D5A137;
}

body.woocommerce-checkout .woocommerce-error li,
body.woocommerce-checkout .woocommerce-message li,
body.woocommerce-checkout .woocommerce-info li {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.woocommerce-checkout .woocommerce-error li + li {
    margin-top: 6px;
}

body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-notice::before {
    display: none;
}

body.woocommerce-checkout .woocommerce-error a,
body.woocommerce-checkout .woocommerce-message a,
body.woocommerce-checkout .woocommerce-info a {
    color: #D5A137;
    text-decoration: none;
}

body.woocommerce-checkout .woocommerce-message .button,
body.woocommerce-checkout .woocommerce-info .button {
    background: transparent;
    border: 1px solid #24384A;
    border-radius: 6px;
    color: #C7D0D8;
    padding: 7px 14px;
    font-size: 12.5px;
    margin-left: 10px;
}

/* Ladezustand: BlockUI-Standardoptik neutralisieren */
body.woocommerce-checkout .blockUI.blockOverlay {
    background: rgba(11, 22, 32, 0.55) !important;
    opacity: 1 !important;
}

body.woocommerce-checkout .blockUI.blockOverlay::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid rgba(213, 161, 55, 0.25);
    border-top-color: #D5A137;
    border-radius: 50%;
    background: none;
    animation: xgld-checkout-spin 0.7s linear infinite;
}

@keyframes xgld-checkout-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    body.woocommerce-checkout .blockUI.blockOverlay::before {
        animation: none;
    }
}

/* Reste des WooCommerce-Standardlayouts sicher unterdruecken */
body.woocommerce-checkout form.xgld-checkout-form .col2-set,
body.woocommerce-checkout form.xgld-checkout-form .clear {
    display: block;
    width: auto;
    float: none;
}

body.woocommerce-checkout .xgld-checkout-wrap form.checkout::after,
body.woocommerce-checkout .xgld-checkout-wrap form.checkout::before {
    display: none;
}

body.woocommerce-checkout .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* --- Responsive --- */

/* Sticky-Summary nur, wenn sie sicher passt: zweispaltiges Layout UND genug
   Viewporthoehe fuer die komplette Summary inklusive CTA und Trust-Zeilen.
   Auf 1920x1080 (nutzbare Hoehe ca. 950 px) greift die Regel, auf niedrigen
   Fenstern sowie Tablet/Mobile bleibt die Summary im normalen Fluss und kann
   damit weder oben abgeschnitten noch unten unerreichbar werden. */
@media (min-width: 1200px) and (min-height: 900px) {
    .xgld-checkout-side {
        position: sticky;
        top: var(--xgld-checkout-sticky-top, 150px);
    }
}

@media (max-width: 1200px) {
    .xgld-checkout-grid {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 28px;
    }
}

@media (max-width: 1024px) {
    .xgld-checkout-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .xgld-checkout-side {
        position: static;
    }
}

@media (max-width: 900px) {
    .xgld-checkout-page {
        padding: 32px 24px 72px;
    }
}

@media (max-width: 640px) {
    .xgld-checkout-page {
        padding: 24px 16px 56px;
    }
    .xgld-checkout-title {
        font-size: 21px;
        margin-bottom: 18px;
    }

    /* Einspaltig: jedes Feld ueber die volle Breite. Die Zuweisungen oben
       arbeiten mit span-Werten, die hier geschlossen ueberschrieben werden. */
    body.woocommerce-checkout .xgld-field-grid .form-row,
    body.woocommerce-checkout .xgld-field-grid .form-row-first,
    body.woocommerce-checkout .xgld-field-grid .form-row-last,
    body.woocommerce-checkout .xgld-field-grid #billing_email_field,
    body.woocommerce-checkout .xgld-field-grid #billing_phone_field,
    body.woocommerce-checkout .xgld-field-grid #billing_first_name_field,
    body.woocommerce-checkout .xgld-field-grid #billing_last_name_field,
    body.woocommerce-checkout .xgld-field-grid #billing_country_field,
    body.woocommerce-checkout .xgld-field-grid #billing_state_field,
    body.woocommerce-checkout .xgld-field-grid #billing_postcode_field,
    body.woocommerce-checkout .xgld-field-grid #billing_city_field {
        grid-column: 1 / -1;
    }

    /* Etwas groessere Touchflaechen auf Mobile */
    body.woocommerce-checkout form.xgld-checkout-form input[type="text"],
    body.woocommerce-checkout form.xgld-checkout-form input[type="email"],
    body.woocommerce-checkout form.xgld-checkout-form input[type="tel"],
    body.woocommerce-checkout form.xgld-checkout-form input[type="password"],
    body.woocommerce-checkout form.xgld-checkout-form select {
        padding: 14px;
    }
    body.woocommerce-checkout .select2-container--default .select2-selection--single {
        min-height: 49px;
    }
    body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding: 14px 30px 14px 14px;
    }

    .xgld-checkout-side {
        padding: 18px;
    }
    .xgld-coupon,
    body.woocommerce-checkout form.checkout_coupon.xgld-coupon-form {
        max-width: none;
    }
    body.woocommerce-checkout form.checkout_coupon input.xgld-coupon-input {
        flex: 1 1 100%;
        height: 49px;
    }
    body.woocommerce-checkout form.checkout_coupon button.xgld-coupon-btn {
        flex: 1 1 100%;
        width: 100%;
        height: 49px;
    }
    .xgld-shipping-note {
        max-width: none;
    }
}

/* Sehr schmale Geraete (360/390 px): Umbruch statt Ueberlauf in der
   Gutscheinzeile und in den Review-Zeilen. */
@media (max-width: 400px) {
    .xgld-coupon-toggle {
        flex-wrap: wrap;
        gap: 4px;
    }
    .xgld-review-row {
        gap: 10px;
    }
}
/* ===== Ende XGLD Checkout ===== */

/* ===== XGLD Unified Country Selector (Warenkorb + Kasse) =================
   Eine gemeinsame Darstellung fuer beide Laenderfelder. Die Regeln sind auf
   die XGLD-Kontexte gescoped (Dropdown haengt am body, deshalb ueber die
   eigene Klasse .xgld-country-dropdown bzw. den Checkout-Body).
   Reversibel: diesen Block entfernen. */

/* --- Hoehe und Scrolling: GENAU EINE scrollbare Ebene ---------------------
   Begrenzt auf hoechstens 360 px bzw. die halbe Fensterhoehe. Dadurch kann
   das Dropdown selbst bei geringer Fensterhoehe nicht bis in den
   Sticky-Header hineinwachsen; gescrollt wird INNERHALB der Liste.

   URSACHE der zuvor sichtbaren DOPPELTEN Scrollbar:
   SelectWoo rendert Optgroups verschachtelt - die Inhalte jeder Gruppe
   liegen in einem eigenen
       <ul class="select2-results__options select2-results__options--nested">
   also mit derselben Basisklasse wie die aeussere Ergebnisliste. Die
   frueheren Regeln benutzten den Nachfahren-Kombinator
   (".select2-results__options") und trafen dadurch BEIDE Ebenen: sowohl die
   aeussere Liste als auch die verschachtelte Gruppe "Alle Laender" mit ihren
   244 Eintraegen bekamen max-height plus overflow-y:auto - und damit je
   einen eigenen Scrollbalken.

   Korrektur: Die Hoehen-/Overflow-Regel gilt jetzt ausschliesslich fuer die
   direkte Ergebnisliste unterhalb von .select2-results (Kindkombinator, so
   wie es auch Select2 selbst handhabt:
   ".select2-container--default .select2-results > .select2-results__options").
   Die verschachtelten Gruppenlisten werden weiter unten ausdruecklich
   zurueckgesetzt - die zweite Scrollflaeche wird also technisch entfernt und
   nicht nur optisch verborgen. */
.select2-container--open .select2-results > .select2-results__options,
.xgld-country-dropdown .select2-results > .select2-results__options,
body.woocommerce-checkout .select2-results > .select2-results__options,
body.woocommerce-cart .select2-results > .select2-results__options {
    max-height: min(360px, 50vh);
    overflow-y: auto;
    overflow-x: hidden;
    /* Verhindert, dass am Listenende die Seite weiterscrollt (Scroll-Chaining). */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #2A3B4A transparent;
}

/* Verschachtelte Gruppenlisten: KEINE eigene Scrollflaeche. Ohne diesen
   ausdruecklichen Reset behielte die Gruppe "Alle Laender" die 200-px-
   Begrenzung samt overflow-y:auto aus select2.css und waere weiterhin eine
   zweite Scrollebene. */
.select2-results__options--nested,
.xgld-country-dropdown .select2-results__options--nested,
body.woocommerce-checkout .select2-results__options--nested,
body.woocommerce-cart .select2-results__options--nested {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
}

/* Die umschliessenden Container duerfen ebenfalls nicht scrollen, damit das
   Suchfeld oben stehen bleibt und rechts aussen kein zweiter Balken
   entsteht. */
.xgld-country-dropdown,
.xgld-country-dropdown .select2-results,
body.woocommerce-checkout .select2-container--open .select2-dropdown,
body.woocommerce-checkout .select2-container--open .select2-results,
body.woocommerce-cart .select2-container--open .select2-dropdown,
body.woocommerce-cart .select2-container--open .select2-results {
    max-height: none;
    overflow: visible;
}

.xgld-country-dropdown .select2-results > .select2-results__options::-webkit-scrollbar,
body.woocommerce-checkout .select2-results > .select2-results__options::-webkit-scrollbar,
body.woocommerce-cart .select2-results > .select2-results__options::-webkit-scrollbar {
    width: 8px;
}

.xgld-country-dropdown .select2-results > .select2-results__options::-webkit-scrollbar-thumb,
body.woocommerce-checkout .select2-results > .select2-results__options::-webkit-scrollbar-thumb,
body.woocommerce-cart .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    background: #2A3B4A;
    border-radius: 4px;
}

/* --- Gruppenueberschriften (Haeufige Lieferlaender / Alle Laender) --- */
.xgld-country-dropdown .select2-results__group,
body.woocommerce-checkout .select2-results__group,
body.woocommerce-cart .select2-results__group {
    padding: 10px 12px 5px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #5C7185;
    background: transparent;
    cursor: default;
}

/* Dezente Trennlinie vor der zweiten Gruppe */
.xgld-country-dropdown .select2-results__option--group + .select2-results__option--group .select2-results__group,
body.woocommerce-checkout .select2-results__option--group + .select2-results__option--group .select2-results__group,
body.woocommerce-cart .select2-results__option--group + .select2-results__option--group .select2-results__group {
    margin-top: 4px;
    border-top: 1px solid #1C2E3F;
    padding-top: 10px;
}

/* Verschachtelte Optionen einer Gruppe wieder auf normale Einrueckung */
.xgld-country-dropdown .select2-results__group + .select2-results__options .select2-results__option,
body.woocommerce-checkout .select2-results__group + .select2-results__options .select2-results__option,
body.woocommerce-cart .select2-results__group + .select2-results__options .select2-results__option {
    padding-left: 12px;
}

/* --- Warenkorb: SelectWoo-Trigger in XGLD-Formularsprache --- */
body.woocommerce-cart .xgld-cart-destination .select2-container--default .select2-selection--single {
    background: #0E151C;
    border: 1px solid #24384A;
    border-radius: 6px;
    height: auto;
    min-height: 44px;
    outline: none;
}

body.woocommerce-cart .xgld-cart-destination .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #EDEDED;
    line-height: 1.4;
    padding: 12px 30px 12px 13px;
    font-size: 13.5px;
}

body.woocommerce-cart .xgld-cart-destination .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #5C7185;
}

/* HOTFIX 14.08.2026: identisch zur Account-Referenz, siehe Checkout. */
body.woocommerce-cart .xgld-cart-destination .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 9px;
    width: 20px;
}

body.woocommerce-cart .xgld-cart-destination .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #8FA3B3 transparent transparent transparent;
}

body.woocommerce-cart .xgld-cart-destination .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #D5A137;
}

/* Der eigene Chevron des nativen Feldes wird nicht mehr gebraucht, sobald
   SelectWoo aktiv ist - sonst stuenden zwei Pfeile uebereinander. */
body.woocommerce-cart .xgld-cart-destination-field:has(.select2-container)::after {
    display: none;
}

/* Ohne JavaScript bleibt das native <select> sichtbar und behaelt seine
   bisherige XGLD-Optik (siehe Warenkorb-Block weiter oben). */

/* --- Suchfeld --- */
.xgld-country-dropdown .select2-search--dropdown,
body.woocommerce-checkout .select2-search--dropdown,
body.woocommerce-cart .select2-search--dropdown {
    padding: 8px;
    border-bottom: 1px solid #1C2E3F;
}

/* ===== Ende XGLD Unified Country Selector ===== */

/* ===== XGLD Payment-Meta-Ausrichtung ====================================
   Der BTCPay-Redirect-Hinweis lag im .xgld-payment-box (2 px Innenabstand
   links, verschachtelt in ul > li), der Datenschutztext dagegen direkt im
   .xgld-place-order ohne Einzug. Dadurch begannen beide Absaetze an leicht
   unterschiedlichen Kanten und wirkten wie zwei fremde Komponenten.
   Beide Meta-Bereiche nutzen jetzt exakt dieselbe linke und rechte
   Contentkante; die typografische Hierarchie bleibt bewusst erhalten.
   Nur auf dem XGLD-Checkout gescoped - kein sitewide WooCommerce-CSS. */
body.woocommerce-checkout #payment div.xgld-payment-box {
    padding-left: 0;
    padding-right: 0;
}

body.woocommerce-checkout #payment div.xgld-payment-box p.xgld-payment-note {
    font-size: 14px;
    line-height: 1.45;
    color: #8FA3B3;
}

body.woocommerce-checkout .xgld-place-order .woocommerce-privacy-policy-text,
body.woocommerce-checkout .xgld-place-order .woocommerce-terms-and-conditions-wrapper {
    padding-left: 0;
    padding-right: 0;
}

body.woocommerce-checkout .xgld-place-order .woocommerce-privacy-policy-text p {
    font-size: 13px;
    line-height: 1.45;
    color: #61707E;
    font-family: inherit;
}
/* ===== Ende XGLD Payment-Meta-Ausrichtung ===== */

/* ===== XGLD Customer Account - Stufe 1 ======================================
   Optik der Kontoseite. Gleiche Designfamilie wie Warenkorb/Checkout
   (Navy/Anthrazit, Gold als Akzent, identische Feldsprache), aber eigenes
   Layout - der Checkout wird nicht kopiert.

   Alle Selektoren haengen an .xgld-account-* und greifen ausschliesslich auf
   der Kontoseite. Es wird keine bestehende Regel veraendert oder ueberschrieben.
   Vollstaendig reversibel durch Entfernen dieses Blocks.
   ========================================================================= */

.xgld-account-page {
    padding: 36px 40px 90px;
    box-sizing: border-box;
}

.xgld-account-wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.xgld-account-title {
    font-size: 24px;
    font-weight: 500;
    color: #F5F5F5;
    margin: 0 0 22px;
}

/* Nur fuer Screenreader - wird fuer das Label des Passwort-Umschalters
   gebraucht. Das Theme bringt die Klasse bislang nicht mit. */
.xgld-account-page .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Karten --------------------------------------------------------------- */

/* Anmelden links, Konto erstellen rechts. Beide Karten gleich hoch, damit
   keine Stufe entsteht. */
.xgld-account-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.xgld-account-single {
    max-width: 480px;
}

.xgld-account-card {
    background: #101E2C;
    border: 1px solid #1C2E3F;
    border-radius: 10px;
    padding: 28px 28px 30px;
    box-sizing: border-box;
    min-width: 0;
}

.xgld-account-card-title {
    font-size: 17px;
    font-weight: 500;
    color: #F5F5F5;
    margin: 0 0 8px;
}

.xgld-account-card-intro {
    font-size: 13.5px;
    line-height: 1.55;
    color: #8FA3B3;
    margin: 0 0 22px;
}

/* --- Formularfelder -------------------------------------------------------
   Bewusst dieselbe Feldsprache wie im Checkout: Hoehe, Radius, Rahmenfarbe und
   Goldfokus stimmen ueberein. */
.xgld-account-form {
    margin: 0;
}

.xgld-account-field {
    margin-bottom: 16px;
}

.xgld-account-field label {
    display: block;
    font-size: 12px;
    line-height: 1.3;
    color: #8FA3B3;
    margin-bottom: 6px;
    font-weight: 400;
}

/* CONSOLIDATION 14.08.2026: input[type="tel"] gehoert AB HIER in dieselbe
   Aufzaehlung. Es hatte zuvor einen eigenen, deutlich spaeteren Regelsatz -
   der den Autofill-Zustand ueberschrieben und damit das wiederkehrende
   weisse Telefonfeld verursacht hat (Begruendung im entfernten Block
   "1. Telefonfeld" weiter unten). Entscheidend ist nicht nur, DASS tel
   gestylt wird, sondern DASS es hier steht: vor der Autofill-Regel. */
.xgld-account-page input[type="email"],
.xgld-account-page input[type="password"],
.xgld-account-page input[type="tel"],
.xgld-account-page input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    background: #0E151C;
    border: 1px solid #24384A;
    border-radius: 6px;
    padding: 13px 14px;
    color: #EDEDED;
    /* 16px verhindert den automatischen Zoom von iOS beim Fokussieren -
       darunter zoomt Safari das Layout und der Kunde verliert den Ueberblick. */
    font-size: 16px;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.xgld-account-page input::placeholder {
    color: #5C7185;
}

.xgld-account-page input[type="email"]:focus,
.xgld-account-page input[type="password"]:focus,
.xgld-account-page input[type="tel"]:focus,
.xgld-account-page input[type="text"]:focus {
    border-color: #D5A137;
}

/* Sichtbarer Fokus fuer Tastaturbedienung. :focus-visible statt :focus, damit
   der Ring nicht bei jedem Mausklick erscheint. */
.xgld-account-page input:focus-visible,
.xgld-account-page button:focus-visible,
.xgld-account-page a:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 2px;
}

/* Autofill von Chrome faerbt Felder sonst hellblau. */
.xgld-account-page input:-webkit-autofill,
.xgld-account-page input:-webkit-autofill:hover,
.xgld-account-page input:-webkit-autofill:focus {
    -webkit-text-fill-color: #EDEDED;
    -webkit-box-shadow: 0 0 0 1000px #0E151C inset;
    caret-color: #EDEDED;
    transition: background-color 5000s ease-in-out 0s;
}

/* Fehlerhafte Felder: Rahmen UND Meldung mit Symbol - die Information steckt
   nie allein in der Farbe. */
.xgld-account-page input[aria-invalid="true"] {
    border-color: #B4544A;
}

.xgld-account-field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 7px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #E08C82;
}

.xgld-account-field-error-mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    border-radius: 50%;
    background: #B4544A;
    color: #F5F5F5;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.xgld-account-hint {
    margin: -4px 0 18px;
    font-size: 12px;
    line-height: 1.5;
    color: #5C7185;
}

/* --- Passwortfeld mit Umschalter ------------------------------------------
   Der Knopf liegt im Feld. Das Eingabefeld bekommt rechts Platz, damit lange
   Passwoerter nicht unter dem Symbol verschwinden. */
.xgld-account-password {
    position: relative;
}

.xgld-account-password input {
    padding-right: 46px;
}

.xgld-account-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: #5C7185;
    cursor: pointer;
    border-radius: 0 6px 6px 0;
    transition: color 0.15s ease;
}

.xgld-account-password-toggle:hover {
    color: #D5A137;
}

.xgld-account-password-toggle[hidden] {
    display: none;
}

/* --- Zeile "Angemeldet bleiben" / "Passwort vergessen?" ------------------- */
.xgld-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 4px 0 20px;
}

.xgld-account-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #8FA3B3;
    cursor: pointer;
    user-select: none;
}

.xgld-account-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #D5A137;
    cursor: pointer;
    flex-shrink: 0;
}

.xgld-account-link {
    font-size: 13px;
    color: #D5A137;
    text-decoration: none;
    transition: color 0.15s ease;
}

.xgld-account-link:hover {
    color: #E9BE6D;
    text-decoration: underline;
}

/* --- Buttons -------------------------------------------------------------- */
.xgld-account-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: #D5A137;
    color: #0B1620;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    border: 1px solid #D5A137;
    border-radius: 6px;
    padding: 14px 20px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.xgld-account-btn:hover {
    background: #E9BE6D;
    border-color: #E9BE6D;
}

.xgld-account-foot {
    margin: 18px 0 0;
    font-size: 13px;
}

/* --- Hinweise / Fehler ----------------------------------------------------
   Gleiche Formensprache wie die Checkout-Notices, aber eigene Klassen - die
   WooCommerce-Notice-Regeln werden nicht angefasst. */
.xgld-account-alert {
    margin: 0 0 20px;
    padding: 13px 15px;
    border-radius: 8px;
    background: #101E2C;
    border: 1px solid #1C2E3F;
    border-left: 3px solid #5C7185;
    color: #EDEDED;
    font-size: 13.5px;
    line-height: 1.55;
}

.xgld-account-alert--error {
    border-left-color: #B4544A;
    background: rgba(180, 84, 74, 0.08);
}

.xgld-account-alert--info {
    border-left-color: #D5A137;
}

/* Der globale Hinweis oberhalb der Karten braucht dieselbe Breite wie diese. */
.xgld-account-wrap > .xgld-account-alert {
    max-width: 100%;
}

/* --- Eingeloggte Uebersicht ----------------------------------------------- */
.xgld-account-welcome {
    margin-bottom: 26px;
}

.xgld-account-greeting {
    font-size: 18px;
    font-weight: 500;
    color: #F5F5F5;
    margin: 0 0 6px;
    /* Lange E-Mail-Adressen duerfen auf schmalen Geraeten nicht ueberlaufen. */
    overflow-wrap: anywhere;
}

.xgld-account-modules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* Noch nicht gebaute Bereiche sind bewusst KEINE Links: sie sind als Kachel
   sichtbar, aber nicht klickbar und klar als "Demnaechst" gekennzeichnet. */
.xgld-account-module {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #101E2C;
    border: 1px solid #1C2E3F;
    border-radius: 10px;
    padding: 20px 22px;
    min-width: 0;
}

.xgld-account-module--soon {
    opacity: 0.72;
}

.xgld-account-module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.xgld-account-module-label {
    font-size: 14.5px;
    font-weight: 500;
    color: #F5F5F5;
}

.xgld-account-badge {
    flex-shrink: 0;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8FA3B3;
    border: 1px solid #24384A;
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}

.xgld-account-module-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: #8FA3B3;
}

.xgld-account-logout {
    display: inline-block;
    font-size: 13.5px;
    color: #C7D0D8;
    text-decoration: none;
    border: 1px solid #24384A;
    border-radius: 6px;
    padding: 11px 22px;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.xgld-account-logout:hover {
    border-color: #D5A137;
    color: #D5A137;
}

/* --- Responsive -----------------------------------------------------------
   Der Umbruch der beiden Karten erfolgt bei 860px: darunter wird die
   Formularspalte so schmal, dass Labels und Buttons gedraengt wirken. */
@media (max-width: 1024px) {
    .xgld-account-page {
        padding: 30px 28px 70px;
    }
}

@media (max-width: 860px) {
    .xgld-account-split,
    .xgld-account-modules {
        grid-template-columns: minmax(0, 1fr);
    }

    .xgld-account-single {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .xgld-account-page {
        padding: 22px 16px 60px;
    }

    .xgld-account-title {
        font-size: 21px;
        margin-bottom: 18px;
    }

    .xgld-account-card {
        padding: 22px 18px 24px;
        border-radius: 8px;
    }

    .xgld-account-split {
        gap: 16px;
    }
}

/* Ab hier wuerde "Angemeldet bleiben" neben "Passwort vergessen?" umbrechen
   und dabei unruhig wirken - deshalb bewusst untereinander. */
@media (max-width: 400px) {
    .xgld-account-page {
        padding: 20px 12px 56px;
    }

    .xgld-account-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .xgld-account-card {
        padding: 20px 15px 22px;
    }

    .xgld-account-module {
        padding: 17px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xgld-account-page * {
        transition: none !important;
    }
}
/* ===== Ende XGLD Customer Account - Stufe 1 ===== */

/* ===== XGLD Account Single Card (UI-Pass 20260812) ==========================
   Ergaenzung zum Block "XGLD Customer Account - Stufe 1". Dieser Block wird
   bewusst ANGEHAENGT statt in den bestehenden Block hineingeschrieben: er
   laesst sich dadurch als Ganzes wieder entfernen, ohne Stufe 1 anzufassen.

   Inhalt:
   1. eine einzige, zentrierte Kontokarte statt zweier Karten nebeneinander
   2. Fusszeile zum Wechsel zwischen Anmelden und Konto erstellen
   3. Korrektur des doppelten Auges im Passwortfeld

   Alle Selektoren haengen an .xgld-account-* bzw. an .xgld-account-page und
   greifen ausschliesslich auf der Kontoseite. Header, Suche, Warenkorb,
   Checkout und Produktseite werden nicht beruehrt; insbesondere entsteht hier
   KEINE globale Autofill- oder Eingabefeldregel.
   Rollback: .xgld-account-single-card-20260812/rollback.sh
   ========================================================================= */

/* --- 1. Eine Karte, zentriert --------------------------------------------
   440px ist bewusst gewaehlt: schmal genug, damit auf grossen Bildschirmen
   kein Formular ueber die halbe Breite laeuft, breit genug fuer lange
   E-Mail-Adressen und die Zeile "Angemeldet bleiben / Passwort vergessen?".
   Der Wrapper begrenzt zusaetzlich Seitentitel und Hinweisleiste, damit alles
   exakt buendig ueber der Karte steht. */
.xgld-account-wrap--single {
    max-width: 440px;
}

.xgld-account-wrap--single .xgld-account-title {
    font-size: 22px;
    text-align: center;
    margin-bottom: 16px;
}

.xgld-account-view {
    max-width: 440px;
    margin: 0 auto;
}

/* Anmelden, Konto erstellen, Passwort vergessen und Passwort zuruecksetzen
   erscheinen dadurch an exakt derselben Stelle und in derselben Breite - beim
   Wechsel springt das Layout nicht. */
.xgld-account-view .xgld-account-card {
    padding: 26px 26px 24px;
}

/* --- 2. Wechsel zwischen den Ansichten ------------------------------------
   Ein normaler Link, keine per JavaScript versteckte zweite Karte: Refresh,
   Zurueck-Taste und direkte URLs funktionieren dadurch unveraendert. */
.xgld-account-switch {
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid #1C2E3F;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: #8FA3B3;
}

.xgld-account-switch-text {
    margin-right: 6px;
}

/* --- 3. Passwort-Auge -----------------------------------------------------
   Pro Passwortfeld existiert genau EIN <svg>. Der Zustand entsteht innerhalb
   dieses Symbols: die Diagonale ist im Normalfall unsichtbar und erscheint
   erst, wenn der Knopf gedrueckt ist (aria-pressed="true"). Es gibt kein
   zweites Symbol und kein hidden-Attribut mehr, das versehentlich sichtbar
   werden koennte. */
.xgld-account-password-toggle .xgld-account-eye {
    display: block;
}

.xgld-account-eye-slash {
    opacity: 0;
    transition: opacity 0.12s ease;
}

.xgld-account-password-toggle[aria-pressed="true"] .xgld-account-eye-slash {
    opacity: 1;
}

/* Edge/IE blenden in Passwortfeldern ein EIGENES Enthuellen-Symbol ein. Es
   liegt an derselben Stelle wie der XGLD-Knopf - dadurch standen dort zwei
   Augen uebereinander. Bewusst nur hier, nur fuer Passwortfelder der
   Kontoseite; Suche, Checkout und uebrige Formulare bleiben unberuehrt.
   Die Autofill-Knoepfe von Safari/WebKit werden ausdruecklich NICHT
   unterdrueckt, damit Passwortmanager weiterhin normal arbeiten. */
.xgld-account-page input[type="password"]::-ms-reveal,
.xgld-account-page input[type="password"]::-ms-clear {
    display: none;
}

/* --- 4. Responsive --------------------------------------------------------
   Es gibt keine zweispaltige Anmelde-/Registrierungsanordnung mehr, deshalb
   auch keinen Umbruchpunkt dafuer. Unterhalb von 480px nutzt die Karte die
   volle verfuegbare Breite; der Seitenabstand kommt weiterhin aus
   .xgld-account-page. */
@media (max-width: 480px) {
    .xgld-account-wrap--single,
    .xgld-account-view {
        max-width: none;
    }

    .xgld-account-wrap--single .xgld-account-title {
        font-size: 20px;
    }

    .xgld-account-view .xgld-account-card {
        padding: 22px 18px 22px;
    }
}

@media (max-width: 400px) {
    .xgld-account-view .xgld-account-card {
        padding: 20px 15px 20px;
    }
}
/* ===== Ende XGLD Account Single Card ===== */

/* ===== XGLD Account UI Polish - 2026-08-12 START =============================
   Vier eng begrenzte UI-Korrekturen an der Kontooberflaeche. KEINE neue
   Funktion, KEINE Aenderung an Markup, PHP oder Header - dieser Pass besteht
   ausschliesslich aus diesem CSS-Block.

   Die Bloecke "XGLD Customer Account - Stufe 1" und "XGLD Account Single Card"
   bleiben bewusst unangetastet. Wo eine ihrer Regeln korrigiert werden muss,
   geschieht das hier per Ueberschreibung (gleiche oder hoehere Spezifitaet,
   spaetere Position) - so bleiben die Rollbacks beider frueheren Passes
   weiterhin gueltig und voneinander unabhaengig.

   1. Seitenstabilitaet: Scrollleisten-Platz auf der Kontoseite reservieren
   2. Focus: EIN Goldrahmen statt Rahmen + zusaetzlichem Outline-Ring
   3. Hilfstext und Auge-Symbol lesbarer
   4. Auge-Semantik: verborgen = durchgestrichen, sichtbar = offen

   Rollback: .xgld-account-ui-polish-20260812/rollback.sh
   ========================================================================= */

/* --- 1. Seitenstabilitaet -------------------------------------------------
   URSACHE des horizontalen Springens: Der Header ist global
   position:sticky (header.php, Inline-Style). Ein sticky Element liegt im
   normalen Fluss, seine Breite folgt also der Breite des Bodys. Die
   Kontoansichten sind unterschiedlich hoch - "Anmelden", "Passwort vergessen"
   und der ungueltige Reset-Link ergeben eine kurze Seite, "Konto erstellen"
   und das Reset-Formular eine deutlich laengere. Kreuzt die Dokumenthoehe
   dabei die Fensterhoehe, erscheint bzw. verschwindet die Scrollleiste: das
   Fenster wird um deren Breite schmaler, und Header, Kopfzeilen-Icons,
   Seitentitel und Karte verschieben sich sichtbar seitlich.

   LOESUNG ohne jede Aenderung am Header: Auf der Kontoseite wird der Platz
   der Scrollleiste dauerhaft reserviert. Ist die Wurzel overflow:visible -
   wie hier -, wird der overflow-Wert des Bodys auf das Viewport uebertragen;
   die Regel wirkt dadurch auf die Fenster-Scrollleiste, ohne einen zweiten
   Scrollbereich zu erzeugen. Streng auf body.woocommerce-account begrenzt
   (Klasse von WooCommerce) - Startseite, Shop, Produktseite, Warenkorb und
   Checkout bleiben unveraendert. Auf Systemen mit ueberlagerten Scrollleisten
   (macOS, iOS, Android) belegt die Leiste ohnehin keinen Platz; dort aendert
   die Regel nichts. */
body.woocommerce-account {
    overflow-y: scroll;
}

/* --- 2. Focus-State -------------------------------------------------------
   URSACHE des doppelten Rahmens: Stufe 1 faerbt bei :focus den Rahmen gold
   UND legt bei :focus-visible zusaetzlich outline:2px solid #D5A137 mit
   outline-offset:2px darum. Textfelder erfuellen :focus-visible auch beim
   Mausklick - deshalb erschienen dort immer zwei goldene Ringe mit Luecke
   dazwischen.

   NEU: genau ein Ring. Der Feldrahmen selbst wird gold, dazu ein sehr
   dezenter Schimmer aus derselben Goldfarbe. box-shadow beeinflusst das
   Layout nicht, es gibt also keinen Versatz und keine Feldgroessenaenderung.
   Der Ersatz fuer den entfernten Outline-Ring ist damit weiterhin deutlich
   sichtbar; Tastatur- und Mausfokus sehen bewusst gleich aus.
   Checkboxen, Links und Buttons behalten den Outline-Ring aus Stufe 1. */
/* CONSOLIDATION 14.08.2026: tel ergaenzt - es fehlte hier und bekam dadurch
   nicht denselben Fokusring wie die uebrigen Felder.
   ACHTUNG fuer spaetere Passes: diese Regel setzt box-shadow und steht NACH
   der Autofill-Regel weiter oben. Der Autofill-Zustand wird deshalb am Ende
   dieser Datei (Block "ACCOUNT/CHECKOUT CONSOLIDATION", Punkt 1) abschliessend
   festgelegt - dort ist der Fuellschatten mit dem Fokusring KOMBINIERT. Wer
   hier etwas aendert, muss dort nachsehen. */
.xgld-account-page input[type="email"]:focus,
.xgld-account-page input[type="password"]:focus,
.xgld-account-page input[type="tel"]:focus,
.xgld-account-page input[type="text"]:focus,
.xgld-account-page input[type="email"]:focus-visible,
.xgld-account-page input[type="password"]:focus-visible,
.xgld-account-page input[type="tel"]:focus-visible,
.xgld-account-page input[type="text"]:focus-visible {
    border-color: #D5A137;
    outline: none;
    box-shadow: 0 0 0 3px rgba(213, 161, 55, 0.16);
}

/* Ein fehlerhaftes Feld bleibt auch im Fokus rot - der Hinweis darf durch das
   Antippen nicht verschwinden. Die Meldung darunter bleibt ohnehin stehen,
   die Information steckt also nie allein in der Farbe. */
.xgld-account-page input[aria-invalid="true"]:focus,
.xgld-account-page input[aria-invalid="true"]:focus-visible {
    border-color: #B4544A;
    box-shadow: 0 0 0 3px rgba(180, 84, 74, 0.16);
}

/* Der Umschalter liegt innerhalb des Feldes. Sein Ring aus Stufe 1 saesse mit
   outline-offset:2px teilweise ausserhalb des Feldrahmens und wuerde dort
   angeschnitten - deshalb hier nach innen versetzt. */
.xgld-account-password-toggle:focus-visible {
    outline-offset: -3px;
    border-radius: 6px;
}

/* Im Kontrastmodus von Windows werden Farben und Schatten ersetzt. Dort tritt
   der Outline-Ring wieder an die Stelle des Schimmers.
   CONSOLIDATION (.xgld-support-exact-form-component-parity-v1-20260826):
   textarea ergaenzt - die Komponente existierte bei der urspruenglichen
   Fassung dieser Regel noch nicht (siehe Block "XGLD SUPPORT EXACT FORM
   PARITY V1"), verlor dadurch im Kontrastmodus ersatzlos ihren Fokusring. */
@media (forced-colors: active) {
    .xgld-account-page input:focus-visible,
    .xgld-account-page textarea:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 1px;
    }
}

/* --- 3. Lesbarkeit --------------------------------------------------------
   Der Hilfstext unter den Passwortfeldern stand auf #5C7185 und erreichte auf
   der Karte (#101E2C) nur ein Kontrastverhaeltnis von 3,3:1 - unterhalb der
   4,5:1 aus WCAG AA fuer kleine Schrift. Er nutzt jetzt #8FA3B3, die im Theme
   bereits durchgaengig verwendete sekundaere Textfarbe (Labels, Kartentexte):
   6,5:1. Keine neue Farbe, keine neue Farbfamilie. Sekundaer bleibt er durch
   Groesse (12px) und Position unterhalb des Feldes. */
.xgld-account-hint {
    color: #8FA3B3;
}

/* Dasselbe fuer das Auge: es traegt seit der Semantikkorrektur eine echte
   Aussage (verborgen/sichtbar) und war auf #5C7185 im Feld (#0E151C) mit
   3,2:1 nur knapp wahrnehmbar. Gold beim Hover bleibt unveraendert. */
.xgld-account-password-toggle {
    color: #8FA3B3;
}

/* --- 4. Semantik des Passwort-Auges ---------------------------------------
   URSACHE: Der Single-Card-Pass hat die Durchstreichung an den gedrueckten
   Zustand gehaengt (aria-pressed="true" = Passwort sichtbar). Damit zeigte
   ein verborgenes Passwort ein offenes Auge und ein sichtbares Passwort ein
   durchgestrichenes - genau verkehrt herum.

   RICHTIG und ab hier gueltig:
     Passwort verborgen (aria-pressed="false", Startzustand aller Felder)
       -> Diagonale sichtbar  = durchgestrichenes Auge
     Passwort sichtbar  (aria-pressed="true")
       -> Diagonale unsichtbar = offenes Auge

   Es bleibt bei genau EINEM <svg> je Passwortfeld; die Diagonale ist Teil
   desselben Symbols. Der Block "XGLD Account Single Card" wird nicht
   veraendert, seine beiden Regeln werden hier nur ueberschrieben (hoehere
   bzw. gleiche Spezifitaet bei spaeterer Position). */
.xgld-account-password-toggle .xgld-account-eye-slash {
    opacity: 1;
}

.xgld-account-password-toggle[aria-pressed="true"] .xgld-account-eye-slash {
    opacity: 0;
}
/* ===== XGLD Account UI Polish - 2026-08-12 END ===== */

/* ===== XGLD Customer Account - Stufe 2 - 2026-08-12 START ===================
   Optik der eingeloggten Kontobereiche (Uebersicht, Bestellungen, Adressen,
   Kontodaten, Sicherheit). Angehaengter Block, damit er als Ganzes entfernbar
   ist; die Bloecke von Stufe 1, Single Card und UI Polish bleiben unangetastet.

   Wiederverwendet werden bewusst die vorhandenen Bausteine (.xgld-account-card,
   .xgld-account-field, .xgld-account-btn, .xgld-account-alert, .xgld-account-
   badge, Feld- und Fokusregeln). Neu ist nur, was es bisher nicht gab:
   Kontonavigation, Bestellliste, Bestelldetails, Adressraster und Auswahlfelder.
   Rollback: .xgld-account-stufe2-20260812/rollback.sh
   ========================================================================= */

/* --- Grundraster ---------------------------------------------------------- */
.xgld-account2 {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.xgld-account2-content {
    min-width: 0;
}

.xgld-account2-title {
    font-size: 18px;
    font-weight: 500;
    color: #F5F5F5;
    margin: 0 0 16px;
}

.xgld-account2-subtitle {
    font-size: 14.5px;
    font-weight: 500;
    color: #F5F5F5;
    margin: 0 0 12px;
}

.xgld-account2-intro {
    font-size: 13px;
    line-height: 1.6;
    color: #8FA3B3;
    margin: -6px 0 18px;
}

.xgld-account2-label {
    display: block;
    font-size: 12px;
    color: #8FA3B3;
    margin-bottom: 2px;
}

/* --- Kontonavigation ------------------------------------------------------
   Ausschliesslich innerhalb des Kundenkontos. Die WooCommerce-My-Account-
   Navigation wird nirgends verwendet. */
.xgld-account2-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xgld-account2-nav-link {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13.5px;
    color: #C7D0D8;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.xgld-account2-nav-link:hover {
    background: #101E2C;
    color: #F5F5F5;
}

.xgld-account2-nav-link.is-active {
    background: #101E2C;
    border-left-color: #D5A137;
    color: #F5F5F5;
}

.xgld-account2-nav-logout {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #1C2E3F;
}

.xgld-account2-nav-logout .xgld-account2-nav-link {
    color: #8FA3B3;
}

/* --- Uebersicht: Kacheln sind jetzt echte Links --------------------------- */
.xgld-account2-module {
    padding: 0;
}

.xgld-account2-module-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    text-decoration: none;
    border-radius: 10px;
    transition: border-color 0.15s ease;
}

.xgld-account2-module-link:hover .xgld-account-module-label {
    color: #D5A137;
}

/* --- Bestellliste ---------------------------------------------------------
   Bewusst Karten statt einer breiten Tabelle: auf schmalen Geraeten entsteht
   dadurch kein horizontales Scrollen. */
.xgld-account2-orders {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xgld-account2-order {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 18px;
    align-items: center;
    background: #101E2C;
    border: 1px solid #1C2E3F;
    border-radius: 10px;
    padding: 16px 20px;
}

.xgld-account2-order-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.xgld-account2-order-number {
    font-size: 14px;
    font-weight: 500;
    color: #F5F5F5;
    overflow-wrap: anywhere;
}

.xgld-account2-order-date {
    font-size: 12.5px;
    color: #8FA3B3;
}

.xgld-account2-order-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 13px;
    color: #8FA3B3;
}

.xgld-account2-order-total {
    color: #EDEDED;
    font-weight: 500;
    white-space: nowrap;
}

.xgld-account2-order-link {
    grid-column: 1 / -1;
}

/* Statusfarben folgen der Bedeutung, nicht der Dekoration - und die Information
   steckt nie allein in der Farbe, der Statustext steht immer daneben. */
.xgld-account2-status {
    color: #C7D0D8;
}

.xgld-account2-status--completed {
    border-color: #3E6B52;
    color: #8FCBA6;
}

.xgld-account2-status--processing,
.xgld-account2-status--on-hold,
.xgld-account2-status--pending {
    border-color: #6B5A2C;
    color: #E9BE6D;
}

.xgld-account2-status--cancelled,
.xgld-account2-status--failed,
.xgld-account2-status--refunded {
    border-color: #6B3B36;
    color: #E08C82;
}

/* --- Bestelldetails ------------------------------------------------------- */
.xgld-account2-order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 20px;
}

.xgld-account2-items {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.xgld-account2-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px 16px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid #1C2E3F;
    font-size: 13.5px;
}

.xgld-account2-item-name {
    color: #EDEDED;
    overflow-wrap: anywhere;
}

.xgld-account2-item-name a {
    color: #EDEDED;
    text-decoration: none;
}

.xgld-account2-item-name a:hover {
    color: #D5A137;
    text-decoration: underline;
}

.xgld-account2-item-qty {
    color: #8FA3B3;
    font-size: 12.5px;
    white-space: nowrap;
}

.xgld-account2-item-total {
    color: #EDEDED;
    white-space: nowrap;
}

.xgld-account2-totals {
    margin: 0;
}

.xgld-account2-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: 13.5px;
    color: #8FA3B3;
    padding: 5px 0;
}

.xgld-account2-total-row dt,
.xgld-account2-total-row dd {
    margin: 0;
}

.xgld-account2-total-row dd {
    color: #EDEDED;
    white-space: nowrap;
}

.xgld-account2-total-row--tax {
    font-size: 12.5px;
}

.xgld-account2-total-row--grand {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid #1C2E3F;
    font-size: 15px;
    color: #F5F5F5;
}

.xgld-account2-total-row--grand dd {
    font-weight: 500;
    color: #D5A137;
}

/* --- Adressen ------------------------------------------------------------- */
.xgld-account2-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.xgld-account2-address {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: #EDEDED;
    overflow-wrap: anywhere;
}

.xgld-account2-payment {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid #1C2E3F;
    font-size: 13.5px;
    color: #EDEDED;
}

/* --- Formulare ------------------------------------------------------------
   Auswahlfelder in derselben Feldsprache wie die Eingabefelder aus Stufe 1.
   Fokus und Fehlerzustand kommen unveraendert von dort bzw. aus dem
   UI-Polish-Block - hier wird bewusst keine zweite Fokusregel gebaut. */
.xgld-account2-form-card {
    max-width: 560px;
}

.xgld-account-page select.xgld-account2-select {
    width: 100%;
    box-sizing: border-box;
    background: #0E151C;
    border: 1px solid #24384A;
    border-radius: 6px;
    padding: 13px 14px;
    color: #EDEDED;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238FA3B3' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

.xgld-account-page select.xgld-account2-select:focus {
    border-color: #D5A137;
    box-shadow: 0 0 0 3px rgba(213, 161, 55, 0.16);
}

.xgld-account-page select.xgld-account2-select[aria-invalid="true"] {
    border-color: #B4544A;
}

.xgld-account-page select.xgld-account2-select option {
    background: #0E151C;
    color: #EDEDED;
}

/* Die E-Mail-Adresse ist bis zum sicheren XGLD-Mailversand nicht editierbar -
   das Feld zeigt das auch optisch. */
.xgld-account-page input[readonly][disabled] {
    color: #8FA3B3;
    cursor: not-allowed;
}

.xgld-account2-optional {
    color: #5C7185;
    font-size: 11.5px;
}

.xgld-account2-empty {
    text-align: left;
}

.xgld-account2-soon {
    margin-top: 16px;
    opacity: 0.85;
}

.xgld-account2-soon .xgld-account-module-head {
    margin-bottom: 8px;
}

/* --- Seitenweise Blaettern ------------------------------------------------ */
.xgld-account2-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    font-size: 13px;
}

.xgld-account2-pagination-info {
    color: #8FA3B3;
}

/* --- Responsive -----------------------------------------------------------
   Ab 860px wandert die Kontonavigation ueber den Inhalt und laeuft dort
   waagerecht um; darunter gibt es keine zweispaltigen Bereiche mehr. */
@media (max-width: 860px) {
    .xgld-account2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .xgld-account2-nav-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .xgld-account2-nav-link {
        border-left: none;
        border-bottom: 2px solid transparent;
        padding: 8px 12px;
    }

    .xgld-account2-nav-link.is-active {
        border-left-color: transparent;
        border-bottom-color: #D5A137;
    }

    .xgld-account2-nav-logout {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        margin-left: auto;
    }

    .xgld-account2-address-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .xgld-account2-order {
        grid-template-columns: minmax(0, 1fr);
        padding: 15px 16px;
    }

    .xgld-account2-order-meta {
        justify-content: flex-start;
    }

    .xgld-account2-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .xgld-account2-item-qty {
        grid-column: 1;
    }

    .xgld-account2-form-card {
        max-width: none;
    }
}
/* ===== XGLD Customer Account - Stufe 2 - 2026-08-12 END ===== */

/* ===== XGLD Account Premium UI - 2026-08-13 START ===========================
   Rein visueller Pass ueber den bereits funktionierenden Kontobereich
   (Stufe 1 + Single Card + UI Polish + Stufe 2). Keine Funktion, keine
   Route, keine Sicherheitslogik wird hier beruehrt.

   AUSGANGSPROBLEM
   Der Bereich bestand fast vollstaendig aus gleich aussehenden dunklen
   Karten mit Rahmen und Radius - Navigation, Begruessung, Kacheln, jede
   Bestellung, jedes Formular. Das ergibt den Eindruck eines Admin-/SaaS-
   Panels statt einer Kundenoberflaeche eines Edelmetallhaendlers.

   VORGEHEN
   1. Flaechen reduzieren: statt Karten ueberwiegend Bereiche mit feinen
      Haarlinien; Karten nur noch dort, wo sie strukturell etwas trennen.
   2. Ruhiges Spacing auf Basis 4/8/12/16/24/32/48.
   3. Klare Typo-Hierarchie: Seitentitel > Bereichstitel > Label > Fliesstext.
   4. Gold nur noch als Akzent: aktive Navigation, kleine Symbole, Links,
      Fokus, Gesamtbetraege, genau eine Primaeraktion je Formular.
   5. Kompakte Primaerbuttons statt Vollbreiten-CTAs.
   6. Kleine eigene Linien-Symbole (Inline-SVG, keine Bibliothek).

   Alle Selektoren haengen an .xgld-account-page / .xgld-account2-*.
   Fokus, Feldsprache und Passwort-Auge werden bewusst NICHT neu definiert -
   sie kommen unveraendert aus Stufe 1 und dem UI-Polish-Block.
   Rollback: .xgld-account-premium-ui-20260813/rollback.sh
   ========================================================================= */

/* --- 1. Seitenkopf --------------------------------------------------------
   Der Seitentitel wird zum ruhigen Anker; die Subline gibt Kontext, ohne eine
   weitere Ueberschriftenebene aufzumachen. */
.xgld-account-page {
    padding-top: 48px;
}

.xgld-account-wrap:not(.xgld-account-wrap--single) {
    max-width: 1080px;
}

.xgld-account-wrap:not(.xgld-account-wrap--single) .xgld-account-title {
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #F5F5F5;
    margin: 0 0 6px;
}

.xgld-account2-subline {
    margin: 0 0 32px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #7C8FA0;
}

/* --- 2. Grundraster -------------------------------------------------------
   Schmalere Navigationsspalte, mehr Luft dazwischen, begrenzte Inhaltsbreite:
   auf grossen Bildschirmen soll der Inhalt nicht ueber die halbe Seite laufen. */
.xgld-account2 {
    grid-template-columns: 188px minmax(0, 1fr);
    gap: 48px;
}

.xgld-account2-content {
    max-width: 760px;
}

/* --- 3. Navigation --------------------------------------------------------
   Keine vollflaechigen Schaltflaechen mehr. Ruhige Liste, aktiver Bereich
   ueber eine feine goldene Kante plus hellere Schrift - kein Goldfeld. */
.xgld-account2-nav-list {
    gap: 0;
}

.xgld-account-page .xgld-account2-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 10px 14px;
    border-radius: 0;
    border-left: 1px solid #1C2E3F;
    background: none;
    font-size: 13.5px;
    line-height: 1.4;
    color: #8FA3B3;
    transition: color 0.14s ease, border-color 0.14s ease;
}

.xgld-account-page .xgld-account2-nav-link:hover {
    background: none;
    color: #EDEDED;
    border-left-color: #3A5468;
}

.xgld-account-page .xgld-account2-nav-link.is-active {
    background: none;
    border-left: 1px solid #D5A137;
    color: #F5F5F5;
}

.xgld-account2-nav-icon {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    color: #5C7185;
    transition: color 0.14s ease;
}

.xgld-account2-nav-link:hover .xgld-account2-nav-icon {
    color: #8FA3B3;
}

.xgld-account2-nav-link.is-active .xgld-account2-nav-icon {
    color: #D5A137;
}

/* Abmelden bewusst sekundaer und durch eine Haarlinie abgesetzt. */
.xgld-account2-nav-logout {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #16232F;
}

.xgld-account-page .xgld-account2-nav-logout .xgld-account2-nav-link {
    color: #5C7185;
    font-size: 13px;
}

.xgld-account-page .xgld-account2-nav-logout .xgld-account2-nav-link:hover {
    color: #8FA3B3;
}

/* --- 4. Uebersicht --------------------------------------------------------
   Die Begruessung ist keine Karte mehr, sondern reine Typografie. */
.xgld-account2-welcome {
    margin-bottom: 32px;
}

.xgld-account2-greeting {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 400;
    color: #F5F5F5;
    overflow-wrap: anywhere;
}

.xgld-account2-greeting-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #8FA3B3;
}

.xgld-account2-modules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.xgld-account2-module {
    display: flex;
    min-width: 0;
}

/* Die gesamte Kachel ist ein Link. Hover bleibt bewusst minimal: eine Spur
   hellerer Rahmen, ein leicht wandernder Pfeil - keine Skalierung, kein Glow. */
.xgld-account2-module-link {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 20px;
    border: 1px solid #16232F;
    border-radius: 8px;
    background: #0D1822;
    text-decoration: none;
    transition: border-color 0.14s ease, background-color 0.14s ease;
}

.xgld-account2-module-link:hover {
    border-color: #24384A;
    background: #101E2C;
}

.xgld-account2-module-icon {
    flex-shrink: 0;
    display: inline-flex;
    margin-top: 1px;
    color: #D5A137;
}

.xgld-account2-module-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.xgld-account2-module-label {
    font-size: 14.5px;
    font-weight: 500;
    color: #F5F5F5;
}

.xgld-account2-module-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: #8FA3B3;
}

.xgld-account2-module-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: 12.5px;
    color: #C7D0D8;
}

.xgld-account2-module-link:hover .xgld-account2-module-cta {
    color: #D5A137;
}

.xgld-account2-arrow {
    width: 13px;
    height: 13px;
    transition: transform 0.16s ease;
}

.xgld-account2-module-link:hover .xgld-account2-arrow,
.xgld-account2-inline-link:hover .xgld-account2-arrow {
    transform: translateX(2px);
}

/* --- 5. Bereiche und Haarlinien-Panels ------------------------------------
   Ersetzt die frueheren identischen Karten. Ein Bereich traegt eine
   Ueberschrift und eine feine Trennlinie - keinen eigenen Rahmen. */
.xgld-account2-section {
    padding-top: 20px;
    border-top: 1px solid #16232F;
    margin-bottom: 32px;
}

.xgld-account2-section:first-of-type {
    padding-top: 0;
    border-top: none;
}

.xgld-account2-section-title {
    margin: 0 0 16px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7C8FA0;
}

.xgld-account2-panel {
    padding: 20px;
    border: 1px solid #16232F;
    border-radius: 8px;
    background: #0D1822;
    min-width: 0;
}

.xgld-account2-panel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: #F5F5F5;
}

.xgld-account2-panel-title .xgld-account2-icon {
    width: 17px;
    height: 17px;
    color: #D5A137;
}

.xgld-account2-muted {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #8FA3B3;
}

.xgld-account2-back {
    margin: 24px 0 0;
}

/* --- 6. Textlinks mit Pfeil ----------------------------------------------- */
.xgld-account2-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #C7D0D8;
    text-decoration: none;
    transition: color 0.14s ease;
}

.xgld-account2-inline-link:hover {
    color: #D5A137;
}

/* --- 7. Bestellliste ------------------------------------------------------
   Aus einzeln gerahmten Karten wird eine ruhige Liste mit Haarlinien. Betont
   werden Bestellnummer und Betrag, alles Uebrige tritt zurueck. */
.xgld-account2-orders {
    gap: 0;
    border-top: 1px solid #16232F;
}

.xgld-account-page .xgld-account2-order {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 24px;
    align-items: center;
    background: none;
    border: none;
    border-bottom: 1px solid #16232F;
    border-radius: 0;
    padding: 18px 2px;
    transition: background-color 0.14s ease;
}

.xgld-account-page .xgld-account2-order:hover {
    background: #0D1822;
}

.xgld-account2-order-number {
    font-size: 14.5px;
    font-weight: 500;
    color: #F5F5F5;
}

.xgld-account2-order-date {
    font-size: 12.5px;
    color: #7C8FA0;
}

.xgld-account2-order-meta {
    grid-row: 1 / 3;
    grid-column: 2;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.xgld-account2-order-total {
    font-size: 15px;
    color: #F5F5F5;
}

.xgld-account2-order-items {
    font-size: 12.5px;
    color: #7C8FA0;
}

.xgld-account2-order-link {
    grid-column: 1;
    justify-self: start;
    margin-top: 2px;
    font-size: 12.5px;
}

/* Status: sehr zurueckhaltend, ohne Flaeche. Die Bedeutung steht als Text
   daneben - die Farbe ist nie der einzige Traeger der Information. */
.xgld-account-page .xgld-account2-status {
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7C8FA0;
}

.xgld-account-page .xgld-account2-status--completed {
    color: #7FB894;
}

.xgld-account-page .xgld-account2-status--processing,
.xgld-account-page .xgld-account2-status--on-hold,
.xgld-account-page .xgld-account2-status--pending {
    color: #C79A46;
}

.xgld-account-page .xgld-account2-status--cancelled,
.xgld-account-page .xgld-account2-status--failed,
.xgld-account-page .xgld-account2-status--refunded {
    color: #C2837B;
}

/* --- 8. Leerer Zustand ----------------------------------------------------
   Bewusst gestaltet statt "leere Box mit Satz": Symbol, Aussage, Erklaerung,
   eine ruhige Handlungsaufforderung. */
.xgld-account2-empty {
    padding: 40px 24px 44px;
    border: 1px solid #16232F;
    border-radius: 8px;
    background: #0D1822;
    text-align: center;
}

.xgld-account2-empty-icon {
    display: inline-flex;
    color: #3A5468;
}

.xgld-account2-empty-svg {
    width: 34px;
    height: 34px;
}

.xgld-account2-empty-title {
    margin: 14px 0 6px;
    font-size: 15px;
    font-weight: 500;
    color: #F5F5F5;
}

.xgld-account2-empty-text {
    margin: 0 0 24px;
    font-size: 13px;
    line-height: 1.6;
    color: #8FA3B3;
}

.xgld-account2-empty .xgld-account2-btn {
    display: inline-block;
}

/* --- 9. Bestelldetail ----------------------------------------------------- */
.xgld-account2-order-head {
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #16232F;
}

.xgld-account2-item {
    border-bottom: 1px solid #16232F;
    padding: 14px 0;
}

.xgld-account2-item:last-child {
    border-bottom: none;
}

.xgld-account2-total-row--grand {
    border-top: 1px solid #16232F;
    font-size: 15px;
}

.xgld-account2-total-row--grand dd {
    color: #D5A137;
}

.xgld-account2-payment {
    border-top: 1px solid #16232F;
}

/* --- 10. Formulare --------------------------------------------------------
   Ruhiger und kompakter. Labels treten zurueck, der Hilfstext bekommt wieder
   Abstand (siehe Punkt 11). */
.xgld-account-page .xgld-account-field {
    margin-bottom: 20px;
}

.xgld-account-page .xgld-account-field label {
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: #7C8FA0;
    margin-bottom: 8px;
}

.xgld-account2-optional {
    letter-spacing: 0;
    text-transform: none;
}

/* Primaeraktion: kompakt statt ueber die volle Breite. Auf Mobilgeraeten
   wird sie weiter unten wieder voll breit. */
.xgld-account2-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
}

.xgld-account-page .xgld-account2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    box-sizing: border-box;
    padding: 13px 28px;
    background: #D5A137;
    color: #0B1620;
    border: 1px solid #D5A137;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.14s ease, border-color 0.14s ease;
}

.xgld-account-page .xgld-account2-btn:hover {
    background: #E9BE6D;
    border-color: #E9BE6D;
}

.xgld-account2-cancel {
    font-size: 13px;
    color: #8FA3B3;
    text-decoration: none;
    transition: color 0.14s ease;
}

.xgld-account2-cancel:hover {
    color: #EDEDED;
}

/* --- 11. Hilfstext --------------------------------------------------------
   URSACHE des Darstellungsfehlers: .xgld-account-hint traegt aus Stufe 1
   margin-top:-4px. Das war fuer einen Hinweis GEDACHT, der unter einem
   abgeschlossenen Feldblock steht. Direkt unter einem Eingabefeld zog der
   negative Abstand den Text bis an die untere Feldkante. Der Stufe-2-Hinweis
   nutzt deshalb eine eigene Klasse mit normalem Abstand. */
.xgld-account2-hint {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: #8FA3B3;
}

/* --- 12. Schreibgeschuetzte E-Mail ---------------------------------------
   Kein deaktiviertes Eingabefeld mehr: ein klar gekennzeichneter Wert mit
   Schloss. Es soll erkennbar absichtlich gesperrt aussehen, nicht kaputt. */
.xgld-account2-locked {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 1px solid #16232F;
    border-radius: 6px;
    background: #0D1822;
}

.xgld-account2-locked-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: #7C8FA0;
}

.xgld-account2-locked-icon {
    width: 14px;
    height: 14px;
    color: #5C7185;
}

.xgld-account2-locked-value {
    font-size: 14.5px;
    color: #EDEDED;
    overflow-wrap: anywhere;
}

.xgld-account2-locked-note {
    font-size: 12px;
    line-height: 1.55;
    color: #7C8FA0;
}

/* --- 13. Sicherheit: Platzhalter fuer die spaetere 2FA -------------------- */
.xgld-account2-soon-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid #16232F;
    border-radius: 8px;
    background: #0D1822;
}

.xgld-account2-soon-icon {
    flex-shrink: 0;
    display: inline-flex;
    margin-top: 1px;
    color: #5C7185;
}

.xgld-account2-soon-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.xgld-account2-soon-lead {
    font-size: 13.5px;
    color: #EDEDED;
}

.xgld-account2-soon-body .xgld-account2-muted {
    margin: 0;
    font-size: 12.5px;
}

.xgld-account2-status-chip {
    flex-shrink: 0;
    align-self: center;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7C8FA0;
    border: 1px solid #24384A;
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

/* --- 14. Adressraster ----------------------------------------------------- */
.xgld-account2-address-grid {
    gap: 16px;
}

.xgld-account2-address {
    font-size: 13.5px;
    line-height: 1.65;
    color: #C7D0D8;
}

/* --- 15. Bewegung ---------------------------------------------------------
   Alles bleibt unter 180ms und beschraenkt sich auf Farbe, Rahmen und 2px
   Pfeilversatz. Wer Bewegung reduziert haben moechte, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    .xgld-account2-arrow {
        transition: none;
    }

    .xgld-account2-module-link:hover .xgld-account2-arrow,
    .xgld-account2-inline-link:hover .xgld-account2-arrow {
        transform: none;
    }
}

/* --- 16. Responsive -------------------------------------------------------
   Ab 1100px wird die Navigationsspalte etwas schmaler, ab 860px wandert sie
   ueber den Inhalt (Regel aus Stufe 2), ab 640px werden Aktionen voll breit. */
@media (max-width: 1100px) {
    .xgld-account2 {
        grid-template-columns: 168px minmax(0, 1fr);
        gap: 36px;
    }
}

@media (max-width: 860px) {
    .xgld-account-page {
        padding-top: 32px;
    }

    .xgld-account-wrap:not(.xgld-account-wrap--single) .xgld-account-title {
        font-size: 26px;
    }

    .xgld-account2-subline {
        margin-bottom: 24px;
    }

    /* Waagerechte Kontonavigation: die aktive Kante sitzt jetzt unten. */
    .xgld-account-page .xgld-account2-nav-link {
        border-left: none;
        border-bottom: 1px solid transparent;
        padding: 8px 2px;
    }

    .xgld-account-page .xgld-account2-nav-link:hover {
        border-left-color: transparent;
        border-bottom-color: #3A5468;
    }

    .xgld-account-page .xgld-account2-nav-link.is-active {
        border-left: none;
        border-bottom: 1px solid #D5A137;
    }

    .xgld-account2-nav-list {
        gap: 4px 20px;
        padding-bottom: 4px;
        border-bottom: 1px solid #16232F;
    }

    .xgld-account2-nav-logout {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
}

@media (max-width: 640px) {
    .xgld-account2-modules {
        grid-template-columns: minmax(0, 1fr);
    }

    .xgld-account2-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .xgld-account-page .xgld-account2-btn {
        width: 100%;
        min-width: 0;
    }

    .xgld-account2-cancel {
        text-align: center;
    }

    .xgld-account2-order-meta {
        grid-row: auto;
        grid-column: 1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
    }

    .xgld-account2-empty {
        padding: 32px 18px 36px;
    }
}
/* ===== XGLD Account Premium UI - 2026-08-13 END ===== */

/* ===== XGLD Account Premium UI 2 - 2026-08-13 START =========================
   Zweiter Feinschliff des eingeloggten Kontos. Ueberschreibt gezielt Regeln
   des ersten Premium-Passes; dessen Block bleibt unveraendert stehen, damit
   beide Rollbacks unabhaengig bleiben.

   Leitgedanke: weniger UI. Der erste Pass hatte den Kontobereich zwar
   aufgeraeumt, aber die Muster einer Web-App beibehalten - Symbolnavigation
   mit durchgehender Fuehrungslinie, ein 2x2-Kachelraster, ein hoher
   Empty-State-Kasten, goldene Vollflaechenbuttons fuer reine
   Verwaltungsaktionen und ueberall dieselbe Inhaltsbreite.

   Jetzt: Navigation als reine Textliste, Kontozusammenfassung statt Kacheln,
   kompakter Leerzustand, zurueckhaltende Aktionsbuttons (Gold erst bei
   Hover/Fokus) und je Bereich eine eigene Maximalbreite.
   Rollback: .xgld-account-premium-ui2-20260813/rollback.sh
   ========================================================================= */

/* --- 1. Raster und Breiten je Bereich ------------------------------------- */
.xgld-account2 {
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 48px;
}

.xgld-account2-content {
    max-width: none;
}

.xgld-account2-content--dashboard  { max-width: 820px; }
.xgld-account2-content--orders,
.xgld-account2-content--order      { max-width: 940px; }
.xgld-account2-content--addresses  { max-width: 900px; }
.xgld-account2-content--billing,
.xgld-account2-content--shipping   { max-width: 700px; }
.xgld-account2-content--details    { max-width: 700px; }
.xgld-account2-content--security   { max-width: 640px; }

/* --- 2. Navigation: reine Textliste ---------------------------------------
   Keine Symbole, keine durchgehende Fuehrungslinie, keine Flaeche. Der aktive
   Bereich traegt einen kurzen goldenen Strich und helle Schrift. */
.xgld-account-page .xgld-account2-nav-link {
    display: block;
    padding: 7px 0;
    border-left: none;
    border-radius: 0;
    background: none;
    font-size: 13.5px;
    color: #8FA3B3;
    transition: color 0.14s ease;
}

.xgld-account-page .xgld-account2-nav-link:hover {
    background: none;
    border-left: none;
    color: #EDEDED;
}

.xgld-account-page .xgld-account2-nav-link.is-active {
    background: none;
    border-left: none;
    color: #F5F5F5;
    position: relative;
}

/* Kurzer Goldstrich statt Kante ueber die volle Zeilenhoehe. */
.xgld-account-page .xgld-account2-nav-link.is-active::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 14px;
    background: #D5A137;
}

.xgld-account2-nav-list {
    gap: 0;
}

.xgld-account2-nav-logout {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #16232F;
}

/* --- 3. Uebersicht: Kontozusammenfassung ---------------------------------- */
.xgld-account2-welcome {
    margin-bottom: 28px;
}

.xgld-account2-greeting {
    font-size: 20px;
}

.xgld-account2-greeting-text {
    font-size: 13px;
    color: #7C8FA0;
}

.xgld-account2-summary {
    border-top: 1px solid #16232F;
}

/* Beschriftung links, Kontostand mittig, Aktion rechts - eine ruhige Zeile
   statt einer Kachel. */
.xgld-account2-summary-row {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr) auto;
    gap: 8px 24px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid #16232F;
}

.xgld-account2-summary-label {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: #7C8FA0;
}

.xgld-account2-summary-body {
    min-width: 0;
}

.xgld-account2-summary-lead {
    margin: 0;
    font-size: 14px;
    color: #EDEDED;
    overflow-wrap: anywhere;
}

.xgld-account2-summary-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 7px;
    margin: 5px 0 0;
    font-size: 12.5px;
    color: #8FA3B3;
    overflow-wrap: anywhere;
}

.xgld-account2-summary-sep {
    color: #3A5468;
}

.xgld-account2-summary-amount {
    color: #EDEDED;
}

.xgld-account2-summary-address {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: #EDEDED;
    overflow-wrap: anywhere;
}

.xgld-account2-summary-empty {
    margin: 0;
    font-size: 13.5px;
    color: #7C8FA0;
}

.xgld-account2-summary-row .xgld-account2-inline-link {
    justify-self: end;
    font-size: 12.5px;
    white-space: nowrap;
}

/* --- 4. Leerer Zustand Bestellungen: kompakt ------------------------------ */
.xgld-account2-empty {
    padding: 4px 0 0;
    border: none;
    border-radius: 0;
    background: none;
    text-align: left;
}

.xgld-account2-empty-title {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 400;
    color: #EDEDED;
}

.xgld-account2-empty-text {
    margin: 0 0 14px;
    font-size: 13px;
    color: #8FA3B3;
}

/* --- 5. Adressen: kompakter und ruhiger ----------------------------------- */
.xgld-account2-panel {
    padding: 18px 20px;
    border-color: #16232F;
    background: none;
}

.xgld-account2-panel-title {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 400;
    color: #7C8FA0;
}

.xgld-account2-address {
    font-size: 13.5px;
    line-height: 1.6;
    color: #EDEDED;
    margin: 0 0 14px;
}

/* --- 6. Bereichstitel weniger Kleinversal --------------------------------- */
.xgld-account2-section-title {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #7C8FA0;
    margin-bottom: 14px;
}

.xgld-account2-title {
    font-size: 17px;
}

/* --- 7. Formulare: Felderpaar und Aktionen -------------------------------- */
.xgld-account2-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

/* Verwaltungsaktionen sind keine Kaufaktionen: dunkler Knopf mit feiner
   Kante, Gold erst bei Hover und Fokus. Die goldene Vollflaeche bleibt damit
   dem Commerce-Weg (Warenkorb, Kasse) vorbehalten. */
.xgld-account-page .xgld-account2-btn {
    min-width: 0;
    padding: 11px 26px;
    background: transparent;
    border: 1px solid #24384A;
    color: #EDEDED;
    font-size: 13px;
    transition: border-color 0.14s ease, color 0.14s ease, background-color 0.14s ease;
}

.xgld-account-page .xgld-account2-btn:hover {
    background: transparent;
    border-color: #D5A137;
    color: #D5A137;
}

.xgld-account2-actions {
    margin-top: 20px;
}

/* --- 8. Bestellliste: Betrag etwas staerker ------------------------------- */
.xgld-account2-order-total {
    font-size: 15px;
    color: #F5F5F5;
}

/* --- 9. Responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
    .xgld-account2 {
        grid-template-columns: 160px minmax(0, 1fr);
        gap: 40px;
    }
}

@media (max-width: 860px) {
    /* Waagerechte Navigation: der Goldstrich wandert unter das aktive Wort. */
    .xgld-account-page .xgld-account2-nav-link {
        padding: 6px 0;
    }

    .xgld-account-page .xgld-account2-nav-link.is-active::before {
        left: 0;
        right: 0;
        top: auto;
        bottom: -1px;
        transform: none;
        width: auto;
        height: 2px;
    }

    .xgld-account2-nav-list {
        gap: 4px 22px;
    }

    .xgld-account2-summary-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .xgld-account2-summary-row .xgld-account2-inline-link {
        justify-self: start;
        margin-top: 4px;
    }
}

@media (max-width: 640px) {
    .xgld-account2-field-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .xgld-account-page .xgld-account2-btn {
        width: 100%;
    }
}
/* ===== XGLD Account Premium UI 2 - 2026-08-13 END ===== */

/* ===== XGLD Account Sidebar Refinement - 2026-08-13 START ===================
   Ausschliesslich die Navigation im eingeloggten Konto. Die rechte
   Inhaltsspalte wird von diesem Block bewusst NICHT beruehrt - jeder Selektor
   hier haengt an .xgld-account2-nav*.

   AUSGANGSLAGE
   Nach dem letzten Pass war die Navigation eine reine Textliste
   (display:block, keine Symbole). Sie war damit zwar ruhig, aber ohne
   Charakter und erinnerte wieder an die erste Account-Version. Die drei
   frueheren Bloecke (Stufe 2, Premium UI, Premium UI 2) bleiben unveraendert
   stehen; hier wird nur gezielt ueberschrieben.

   ERGEBNIS
   Symbol + Text je Eintrag, aktiver Bereich mit kurzer Goldkante, goldenem
   Symbol und hellerem Text. Keine Flaechen, keine Rahmen, keine Radien, keine
   durchgehende Fuehrungslinie.
   Rollback: .xgld-account-sidebar-20260813/rollback.sh
   ========================================================================= */

/* --- Eintrag -------------------------------------------------------------
   Der Innenabstand links schafft den Platz fuer die Goldkante des aktiven
   Eintrags; dadurch bleibt sie innerhalb der Navigationsspalte und ragt nicht
   in den Seitenrand. */
.xgld-account-page .xgld-account2-nav-link {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px 0 9px 16px;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 13.5px;
    line-height: 1.3;
    color: #8FA3B3;
    position: relative;
    transition: color 0.14s ease;
}

.xgld-account-page .xgld-account2-nav-link:hover {
    background: none;
    border: none;
    color: #EDEDED;
}

.xgld-account2-nav-text {
    min-width: 0;
}

/* --- Symbole -------------------------------------------------------------
   Gleiche Groesse, gleiche Strichstaerke, exakt an der Textmitte ausgerichtet.
   Sie stammen aus xgld_account2_icon() - keine externe Bibliothek. */
.xgld-account2-nav-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #5C7185;
    transition: color 0.14s ease;
}

.xgld-account2-nav-link:hover .xgld-account2-nav-icon {
    color: #8FA3B3;
}

/* --- Aktiver Eintrag -----------------------------------------------------
   Hauptindikator ist die kurze Goldkante links; sie ist bewusst nur so hoch
   wie der Eintrag selbst und ergibt daher keine durchgehende Linie ueber die
   Navigation. Dazu goldenes Symbol und heller Text. */
.xgld-account-page .xgld-account2-nav-link.is-active {
    background: none;
    border: none;
    color: #F5F5F5;
    font-weight: 500;
}

.xgld-account-page .xgld-account2-nav-link.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 18px;
    background: #D5A137;
}

.xgld-account2-nav-link.is-active .xgld-account2-nav-icon {
    color: #D5A137;
}

/* --- Abmelden ------------------------------------------------------------
   Bleibt unter der feinen Trennlinie und deutlich gedaempfter als die
   Hauptbereiche - kein Rot, kein Knopf, keine Flaeche. */
.xgld-account2-nav-logout {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #16232F;
}

.xgld-account-page .xgld-account2-nav-logout .xgld-account2-nav-link {
    color: #5C7185;
    font-size: 13px;
}

.xgld-account-page .xgld-account2-nav-logout .xgld-account2-nav-link:hover {
    color: #8FA3B3;
}

.xgld-account2-nav-logout .xgld-account2-nav-icon {
    color: #4A5F73;
}

.xgld-account2-nav-logout .xgld-account2-nav-link:hover .xgld-account2-nav-icon {
    color: #7C8FA0;
}

/* --- Responsive ----------------------------------------------------------
   Das bestehende Verhalten bleibt: unter 860px laeuft die Navigation
   waagerecht um. Dort entfaellt der linke Innenabstand, und der Goldindikator
   liegt - wie bisher - als feine Linie unter dem aktiven Eintrag. */
@media (max-width: 860px) {
    .xgld-account-page .xgld-account2-nav-link {
        padding: 7px 0;
        gap: 9px;
    }

    .xgld-account-page .xgld-account2-nav-link.is-active::before {
        left: 0;
        right: 0;
        top: auto;
        bottom: -1px;
        transform: none;
        width: auto;
        height: 2px;
    }

    .xgld-account2-nav-icon {
        width: 16px;
        height: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xgld-account-page .xgld-account2-nav-link,
    .xgld-account2-nav-icon {
        transition: none;
    }
}
/* ===== XGLD Account Sidebar Refinement - 2026-08-13 END ===== */

/* ===== XGLD ACCOUNT ORDERS ADDRESS POLISH - 2026-08-13 START ================
   Behebt die offenen Formular-, Daten- und Ausrichtungsprobleme im Konto.
   Die bestehende Gestaltung (Navigation, Breiten, Typografie, reduzierte
   Optik) bleibt unveraendert; frueherere Bloecke werden nicht angefasst,
   sondern nur gezielt ergaenzt bzw. ueberschrieben.
   Rollback: .xgld-account-orders-address-polish-20260813/rollback.sh
   ========================================================================= */

/* --- 1. Telefonfeld ------------------------------------------------------
   ENTFERNT im Pass "ACCOUNT/CHECKOUT CONSOLIDATION" (14.08.2026).

   Hier stand ein vollstaendiger zweiter Feldregelsatz nur fuer
   input[type="tel"]. Er hat das urspruengliche Problem (tel fehlte in der
   Typenaufzaehlung der Stufe-1-Regeln) zwar geloest, dabei aber ein neues
   erzeugt - den wiederkehrenden WEISSEN Autofill-Zustand des Telefonfeldes:

     style.css:3184  .xgld-account-page input:-webkit-autofill
                     -> -webkit-box-shadow: 0 0 0 1000px #0E151C inset
                        (die EINZIGE Moeglichkeit, den Autofill-Hintergrund
                        von Chrome zu uebermalen)      Spezifitaet (0,2,1)

     hier (spaeter)  .xgld-account-page input[type="tel"]
                     -> box-shadow: none                Spezifitaet (0,2,1)

   Gleiche Spezifitaet, aber spaeter in der Datei - also gewann "none".
   -webkit-box-shadow ist in Chrome nur ein Alias von box-shadow; die
   Autofill-Uebermalung war fuer tel damit abgeschaltet und Chrome zeichnete
   seinen hellen Autofill-Grund. Betroffen war ausschliesslich tel, weil der
   Basisregelsatz aller anderen Typen VOR der Autofill-Regel steht.

   Loesung: tel wird nicht mehr nachtraeglich nachgeruestet, sondern steht
   oben in derselben Typenaufzaehlung wie email/password/text (style.css,
   Block "Formulare"). Damit gibt es fuer Textfelder im Konto genau EINEN
   Regelsatz, er steht vor der Autofill-Regel, und ein spaeterer UI-Pass kann
   den Autofill-Zustand nicht mehr versehentlich ueberschreiben.

   Rollback: .xgld-account-checkout-consolidation-20260814/rollback.sh
   ------------------------------------------------------------------------- */


/* --- 2. Bestellliste: fester Datensatz -----------------------------------
   Zuvor bestimmte der Inhalt die Position von Status, Betrag und Aktion; die
   Aktion rutschte dadurch als dritte Textzeile unter das Datum. Jetzt liegen
   alle Zeilen im selben Raster: links Nummer und Datum, in der Mitte Status,
   Artikelzahl und Betrag in festen Spalten, rechts die Aktion. */
.xgld-account-page .xgld-account2-order {
    grid-template-columns: minmax(0, 1fr) auto 142px;
    align-items: center;
    column-gap: 24px;
    row-gap: 0;
}

.xgld-account2-order-main {
    grid-column: 1;
    grid-row: 1;
}

.xgld-account2-order-meta {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: 128px 84px 124px;
    align-items: baseline;
    gap: 0 16px;
}

.xgld-account2-order-meta .xgld-account2-status {
    grid-column: 1;
    text-align: left;
}

.xgld-account2-order-items {
    grid-column: 2;
    text-align: right;
    white-space: nowrap;
}

.xgld-account2-order-total {
    grid-column: 3;
    text-align: right;
    white-space: nowrap;
}

.xgld-account-page .xgld-account2-order-link {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin-top: 0;
}

/* --- 3. Bestelldetail: Positionsraster -----------------------------------
   Artikel | Menge | Betrag mit festen Spalten. Ein langer Produktname
   verschiebt Menge und Betrag dadurch nicht mehr. */
.xgld-account-page .xgld-account2-item {
    grid-template-columns: minmax(0, 1fr) 56px 128px;
    gap: 4px 20px;
    align-items: baseline;
}

.xgld-account2-item-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.xgld-account2-item-meta {
    font-size: 12px;
    line-height: 1.45;
    color: #7C8FA0;
}

.xgld-account-page .xgld-account2-item-qty {
    grid-column: 2;
    text-align: right;
    color: #8FA3B3;
    font-size: 13px;
}

.xgld-account-page .xgld-account2-item-total {
    grid-column: 3;
    text-align: right;
}

/* --- 4. Summenblock ------------------------------------------------------
   Kompakt und rechts, statt ueber die volle Breite auseinandergezogen.
   Vor "Gesamt" genuegt eine Haarlinie - keine Karte darum. */
.xgld-account2-totals {
    max-width: 300px;
    margin-left: auto;
    margin-top: 20px;
}

.xgld-account2-total-row {
    gap: 24px;
    padding: 4px 0;
}

.xgld-account2-total-row--grand {
    margin-top: 8px;
    padding-top: 10px;
}

/* --- 5. Adressen ---------------------------------------------------------
   Gemeinsame Darstellung, wenn Rechnungs- und Lieferadresse identisch sind:
   ein Bereich in ruhiger Breite statt zweier gleicher Karten nebeneinander. */
.xgld-account2-address-grid--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 460px;
}

.xgld-account2-address-note {
    margin: 0 0 14px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #7C8FA0;
}

.xgld-account2-address-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.xgld-account2-inline-link--secondary {
    color: #8FA3B3;
    font-size: 12.5px;
}

/* --- 6. Responsive -------------------------------------------------------
   Unterhalb von 720px stapeln Bestellzeile und Positionsraster; die Werte
   bleiben dabei rechtsbuendig, damit Betraege weiterhin vergleichbar sind. */
@media (max-width: 720px) {
    .xgld-account-page .xgld-account2-order {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 10px;
    }

    .xgld-account2-order-meta {
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: auto auto 1fr;
        gap: 0 16px;
    }

    .xgld-account2-order-items {
        text-align: left;
    }

    .xgld-account-page .xgld-account2-order-link {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: start;
    }

    .xgld-account-page .xgld-account2-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .xgld-account-page .xgld-account2-item-qty {
        grid-column: 1;
        grid-row: 2;
        text-align: left;
    }

    .xgld-account-page .xgld-account2-item-total {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
    }

    .xgld-account2-totals {
        max-width: none;
    }

    .xgld-account2-address-grid--single {
        max-width: none;
    }
}
/* ===== XGLD ACCOUNT ORDERS ADDRESS POLISH - 2026-08-13 END ===== */

/* ===== XGLD ACCOUNT FINAL DENSITY CLEANUP - 2026-08-13 START ================
   Letzter Feinschliff des eingeloggten Kontos. Bewusst ein eigener, kleiner
   Block statt Aenderungen in den frueheren Bloecken: Stufe 2, Premium UI 1/2,
   Sidebar Refinement und Orders/Address Polish bleiben Zeile fuer Zeile
   unveraendert stehen, damit ihre Rollbacks unabhaengig funktionsfaehig
   bleiben.

   URSACHE der zu grossen Bearbeitungsformulare
   Nicht eine einzelne falsche Zahl, sondern das Zusammenspiel dreier Regeln:

   1. Die Feldgroesse stammt aus Stufe 1:
      .xgld-account-page input[type=...] { padding: 13px 14px; font-size: 16px }
      Die 16px sind dort ausdruecklich gegen den Autozoom von iOS Safari
      gesetzt - eine Mobilanforderung, die unveraendert auch auf dem Desktop
      galt. Zusammen mit dem Innenabstand ergab das ueberall dieselbe hohe
      Zeile.
   2. Jedes Adressfeld stand einzeln ueber die volle Spaltenbreite. Bei acht
      Feldern (Vorname, Nachname, Land, Strasse, Zusatz, PLZ, Ort, Telefon)
      entstand daraus eine Formularhoehe von rund 750px - auch fuer Werte, die
      nur wenige Zeichen lang sind.
   3. .xgld-account-page .xgld-account-field { margin-bottom: 20px } aus dem
      Premium-Pass addierte dazu je Feld nochmals 20px.
   Die Breite kam aus .xgld-account2-content--billing/--details (700px) bzw.
   --security (640px). Zu breit war nicht die Spalte, sondern das einzelne
   Feld darin.

   LOESUNG
   Der Inhalt bekommt eine klare Formularbreite, kurze zusammengehoerige Werte
   stehen paarweise nebeneinander (Markup in xgld-account-stufe2.php), und die
   Feldgroesse wird AUSSCHLIESSLICH auf dem Desktop reduziert. Unterhalb von
   768px bleiben 16px Schriftgroesse und die groesseren Touchflaechen exakt
   erhalten - der iOS-Autozoom-Schutz aus Stufe 1 wird nicht angetastet.

   SCOPE
   Jede Regel haengt an .xgld-account2-* bzw. an den vier
   Bearbeitungsansichten (.xgld-account2-content--form). Keine Regel auf
   input {}, select {} oder form {}. Anmeldung, Registrierung,
   Passwort-Reset, Warenkorb und Produktseite sind nicht erfasst; aus dem
   Checkout wird ausschliesslich die durch das entfallene Bundesland-Feld frei
   gewordene Rasterspalte korrigiert.
   Rollback: .xgld-account-final-density-cleanup-20260813/rollback.sh
   ========================================================================= */

/* --- 1. Formularbreiten je Bearbeitungsansicht ----------------------------
   Ueberschreibt gezielt die Breiten des Premium-UI-2-Blocks. Die Reihenfolge
   folgt dem Inhalt: die Adresse braucht Platz fuer zwei Spalten, die
   Kontodaten etwas mehr fuer den E-Mail-Block, das Passwort am wenigsten. */
.xgld-account2-content--billing,
.xgld-account2-content--shipping { max-width: 780px; }
.xgld-account2-content--details  { max-width: 840px; }
.xgld-account2-content--security { max-width: 680px; }

/* --- 2. Feldgroesse auf dem Desktop ---------------------------------------
   Erst ab 768px. Darunter gilt unveraendert die Stufe-1-Groesse (16px,
   13px/14px Innenabstand) - sonst zoomt iOS Safari beim Fokussieren.
   Zielhoehe: 15.5px * 1.5 (Zeilenhoehe) + 2 * 14px + 2 * 1px Rahmen
   = rund 54px. */
@media (min-width: 768px) {
    .xgld-account-page .xgld-account2-content--form input[type="text"],
    .xgld-account-page .xgld-account2-content--form input[type="email"],
    .xgld-account-page .xgld-account2-content--form input[type="tel"],
    .xgld-account-page .xgld-account2-content--form input[type="password"],
    .xgld-account-page .xgld-account2-content--form select.xgld-account2-select {
        padding: 14px 15px;
        font-size: 15.5px;
        line-height: 1.5;
    }

    /* Der Auswahlpfeil des Landfeldes braucht seinen Platz zurueck - die
       Kurzschreibweise "padding" oben hat ihn ueberschrieben. */
    .xgld-account-page .xgld-account2-content--form select.xgld-account2-select {
        padding-right: 38px;
    }

    /* Ebenso der Platz fuer das Auge im Passwortfeld. Der Umschalter setzt das
       type-Attribut auf "text", deshalb beide Typen. */
    .xgld-account-page .xgld-account2-content--form .xgld-account-password input[type="password"],
    .xgld-account-page .xgld-account2-content--form .xgld-account-password input[type="text"] {
        padding-right: 46px;
    }

    /* Beschriftungen: lesbar statt Kleinstschrift. */
    .xgld-account-page .xgld-account2-content--form .xgld-account-field label {
        font-size: 13px;
        letter-spacing: 0.01em;
        margin-bottom: 7px;
    }

    /* Vertikaler Rhythmus: 16px statt 20px. */
    .xgld-account-page .xgld-account2-content--form .xgld-account-field {
        margin-bottom: 16px;
    }

    /* Der schreibgeschuetzte E-Mail-Block folgt derselben Breite und demselben
       Rhythmus wie die Felder darueber - er lief zuvor optisch aus dem
       Formular heraus. */
    .xgld-account2-content--form .xgld-account2-locked {
        margin-bottom: 16px;
        padding: 13px 15px;
    }

    .xgld-account2-content--form .xgld-account2-locked-label {
        font-size: 12.5px;
    }

    .xgld-account2-content--form .xgld-account2-locked-value {
        font-size: 15px;
    }

    /* Aktionen ruecken naeher an das letzte Feld. */
    .xgld-account2-content--form .xgld-account2-actions {
        margin-top: 18px;
    }

    /* Der Passworthinweis stand mit 4px praktisch am Feld. */
    .xgld-account2-content--security .xgld-account2-hint {
        margin-top: 10px;
    }
}

/* --- 3. Feldpaare ---------------------------------------------------------
   Das Raster selbst stammt aus dem Premium-UI-2-Block
   (.xgld-account2-field-row, zwei gleiche Spalten, 20px Spalten-Abstand).
   Hier wird nur sichergestellt, dass die Paare denselben vertikalen Rhythmus
   haben wie die einspaltigen Felder darueber und darunter. */
.xgld-account2-content--form .xgld-account2-field-row {
    column-gap: 18px;
}

/* --- 4. Bestellliste: die gesamte Zeile ist ein Link ----------------------
   Das Raster wandert vom <li> auf das <a> darin. Dadurch bleibt genau EIN
   Link pro Zeile (keine verschachtelten <a>), waehrend Nummer, Datum, Status,
   Artikelzahl, Betrag und die Beschriftung "Details ansehen" gemeinsam die
   Klickflaeche bilden. Die Spaltenmasse sind unveraendert die des
   Orders/Address-Polish-Blocks. */
.xgld-account-page .xgld-account2-order {
    display: block;
    padding: 0;
}

.xgld-account-page .xgld-account2-order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 142px;
    align-items: center;
    column-gap: 24px;
    row-gap: 0;
    /* Exakt der Innenabstand, den zuvor das <li> trug - die Zeile sieht
       dadurch unveraendert aus, sie ist jetzt nur vollstaendig anklickbar. */
    padding: 18px 2px;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
}

/* Hover bewusst sehr zurueckhaltend: kein Schatten, keine Vergroesserung,
   keine Bewegung der Zeile. Die Flaeche wird eine Spur heller, die Aktion
   rechts nimmt die Goldfarbe an, der Pfeil ruecht 2px nach rechts - genau so
   viel wie bei jedem anderen XGLD-Textlink. */
.xgld-account-page .xgld-account2-order:hover {
    background: none;
}

.xgld-account-page .xgld-account2-order-row:hover {
    background: #0D1822;
}

.xgld-account2-order-row:hover .xgld-account2-order-link {
    color: #D5A137;
}

.xgld-account2-order-row:hover .xgld-account2-arrow {
    transform: translateX(2px);
}

/* Tastaturfokus: derselbe Goldring wie ueberall im Konto, nur nach innen
   versetzt, damit er die Haarlinien der Nachbarzeilen nicht ueberdeckt. */
.xgld-account-page .xgld-account2-order-row:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .xgld-account2-order-row:hover .xgld-account2-arrow {
        transform: none;
    }
}

/* --- 5. Checkout: freigewordene Rasterspalte ------------------------------
   Der Checkout stellte "Land / Region" und "Bundesland / Region" als Paar
   nebeneinander (je 6 von 12 Spalten). Ohne das Bundesland-Feld bliebe rechts
   eine halbe Leerspalte stehen. Das Land fuellt die Zeile deshalb allein.
   Die bestehende :has()-Regel fuer denselben Zweck bleibt unangetastet - sie
   greift nur bei einem vorhandenen, per JavaScript ausgeblendeten Feld und
   laeuft jetzt schlicht ins Leere. Es ist die einzige Checkout-Regel dieses
   Passes; an Feldern, Validierung, Versand oder Zahlung aendert sie nichts. */
body.woocommerce-checkout .xgld-field-grid #billing_country_field {
    grid-column: span 12;
}

/* --- 6. Responsive --------------------------------------------------------
   1920/1440: die Maximalbreiten aus Punkt 1 begrenzen.
   1024: Navigationsspalte schmaler (bestehende Regel bei 1100px), Formulare
         laufen unter ihre Maximalbreite - zweispaltig bleibt tragfaehig.
   768:  Feldgroesse faellt auf die Stufe-1-Werte zurueck (Punkt 2).
   640 und darunter: Feldpaare stapeln (bestehende Regel des
         Premium-UI-2-Blocks), Bestellzeile stapelt. */
@media (max-width: 720px) {
    /* Das Raster der gestapelten Bestellzeile liegt jetzt ebenfalls auf dem
       Link - sonst blieben die Regeln des Orders/Address-Polish-Blocks ohne
       Container. */
    .xgld-account-page .xgld-account2-order-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 10px;
    }
}

@media (max-width: 640px) {
    /* Unter 640px stapeln die Feldpaare (Premium UI 2). Der Abstand zwischen
       den beiden ehemaligen Spalten darf dann nicht als Spaltenabstand
       stehenbleiben. */
    .xgld-account2-content--form .xgld-account2-field-row {
        column-gap: 0;
    }
}
/* ===== XGLD ACCOUNT FINAL DENSITY CLEANUP - 2026-08-13 END ===== */

/* ===== XGLD ACCOUNT PREMIUM FORM / ORDER PASS - 2026-08-13 START ===========
   Abschliessender Feinschliff. Bewusst wieder ein eigener, klar markierter
   Block: alle frueheren Bloecke (Stufe 1, Stufe 2, Single Card, UI Polish,
   Premium UI 1/2, Sidebar Refinement, Orders/Address Polish, Final Density
   Cleanup) bleiben Zeile fuer Zeile unveraendert stehen, damit ihre Rollbacks
   unabhaengig funktionsfaehig bleiben.

   ERMITTELTE AUSGANGSLAGE (gewinnende Regeln VOR diesem Block)
   Feldgroesse in den vier Bearbeitungsansichten kam aus dem Final-Density-
   Block: padding 14px/15px, font-size 15.5px, line-height 1.5, dazu 1px
   Rahmen aus Stufe 1.
       Rechnerische Hoehe: 2*14 + 15.5*1.5 + 2*1 = 53.25px.
   Das ist eine Touchhoehe, keine Desktophoehe - Land, Strasse, Adresszusatz,
   PLZ, Ort und Telefon wirkten dadurch weiterhin wie Checkout-Felder.
   Dazu kamen Label 13px mit 7px Abstand und 16px zwischen den Feldern.

   ZIEL DIESES BLOCKS
       Hoehe: 2*11 + 15*1.45 + 2*1 = 45.75px
       Label 12.5px, 5px Abstand, 12px zwischen den Feldern.
   Unterhalb von 768px bleibt alles wie bisher (16px Schrift, groessere
   Flaechen) - der iOS-Autozoom-Schutz aus Stufe 1 wird nicht angetastet.

   SCOPE
   Jede Regel haengt an .xgld-account-page bzw. .xgld-account2-*. Keine
   Regel auf input {}, select {}, form {} oder auf Warenkorb, Kasse,
   Produktseite. Die Adressuebersicht (.xgld-account2-panel) und die
   Bestellliste werden nicht angefasst.
   Rollback: .xgld-account-final-premium-form-order-pass-20260813/rollback.sh
   ========================================================================= */

/* --- 1. Bearbeitungsformulare: Dichte ------------------------------------
   Erst ab 768px. Darunter gilt unveraendert die Stufe-1-Groesse. */
@media (min-width: 768px) {
    .xgld-account-page .xgld-account2-content--form input[type="text"],
    .xgld-account-page .xgld-account2-content--form input[type="email"],
    .xgld-account-page .xgld-account2-content--form input[type="tel"],
    .xgld-account-page .xgld-account2-content--form input[type="password"],
    .xgld-account-page .xgld-account2-content--form select.xgld-account2-select {
        padding: 11px 13px;
        font-size: 15px;
        line-height: 1.45;
    }

    /* Platz fuer den Chevron des Landfeldes bzw. das Auge im Passwortfeld -
       die Kurzschreibweise "padding" oben hat beide ueberschrieben. */
    .xgld-account-page .xgld-account2-content--form select.xgld-account2-select {
        padding-right: 36px;
        background-position: right 13px center;
    }

    .xgld-account-page .xgld-account2-content--form .xgld-account-password input[type="password"],
    .xgld-account-page .xgld-account2-content--form .xgld-account-password input[type="text"] {
        padding-right: 44px;
    }

    .xgld-account-page .xgld-account2-content--form .xgld-account-password-toggle {
        width: 40px;
    }

    /* Beschriftung dicht am Feld - Label und Eingabe sind eine Einheit. */
    .xgld-account-page .xgld-account2-content--form .xgld-account-field label {
        font-size: 12.5px;
        letter-spacing: 0.01em;
        margin-bottom: 5px;
    }

    .xgld-account-page .xgld-account2-content--form .xgld-account-field {
        margin-bottom: 12px;
    }

    .xgld-account2-content--form .xgld-account2-locked {
        margin: 4px 0 12px;
        padding: 11px 13px;
        gap: 4px;
    }

    .xgld-account2-content--form .xgld-account2-locked-label {
        font-size: 12px;
    }

    .xgld-account2-content--form .xgld-account2-locked-value {
        font-size: 14.5px;
    }

    .xgld-account2-content--form .xgld-account2-locked-note {
        font-size: 11.5px;
    }

    .xgld-account2-content--form .xgld-account2-actions {
        margin-top: 16px;
    }

    .xgld-account2-content--security .xgld-account2-hint {
        margin-top: 8px;
        font-size: 11.5px;
    }

    /* "Passwort" als Abschnittsmarke ruecht naeher an das erste Feld. */
    .xgld-account2-content--security .xgld-account2-section-title {
        margin-bottom: 10px;
    }
}

/* --- 2. Feldpaare: Postleitzahl schmaler als Ort --------------------------
   Ab 641px, weil die Paare unterhalb davon ohnehin stapeln (Premium UI 2).
   Die Variante folgt dem Feldschluessel, nicht der Position - dreht eine
   Laender-Locale die Reihenfolge auf "Ort | Postleitzahl", wird sie
   gespiegelt. */
@media (min-width: 641px) {
    .xgld-account2-content--form .xgld-account2-field-row--postcode {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .xgld-account2-content--form .xgld-account2-field-row--postcode-last {
        grid-template-columns: minmax(0, 1fr) 180px;
    }
}

/* --- 3. Sicherheit: schmaler ---------------------------------------------
   Drei Passwortfelder brauchen keine Adressbreite. Bewusst schmaler als
   Kontodaten, damit spaeter darunter eine 2FA-Sektion Platz findet, ohne dass
   die Seite lang wirkt. */
.xgld-account2-content--security { max-width: 640px; }

/* --- 4. Bestelldetail: Abschlussbereich -----------------------------------
   Angaben links, Betraege rechts, beide beginnen auf derselben Hoehe. Kein
   Kasten, keine Flaeche - getrennt wird durch eine Haarlinie, Weissraum und
   Typografie.

   Das Raster setzt beide Spalten ausdruecklich, weil die Betraege im DOM
   VOR den Angaben stehen: auf schmalen Geraeten folgt damit auf die
   Positionsliste unmittelbar der Gesamtbetrag. */
.xgld-account2-close {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 40px;
    align-items: start;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #16232F;
}

.xgld-account2-close-info {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.xgld-account2-close-totals {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

/* Der Summenblock war zuvor rechtsbuendig im Positionsbereich verankert.
   In der eigenen Spalte braucht er weder Maximalbreite noch Aussenabstand. */
.xgld-account2-close .xgld-account2-totals {
    max-width: none;
    margin: 0;
}

.xgld-account2-close-blocks {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px 28px;
}

/* Abweichende Lieferadresse: zwei schlanke Spalten statt zweier Karten.

   auto-fit statt zweier fester Haelften: zwischen 901px und rund 1100px
   Fensterbreite ist die linke Spalte des Abschlussbereichs am schmalsten
   (Navigationsspalte plus Summenspalte gehen ab). Zwei feste Haelften waeren
   dort nur noch rund 150px breit und wuerden Strassennamen umbrechen. Mit
   auto-fit klappt das Paar genau dann von selbst untereinander, wenn keine
   190px je Spalte mehr uebrig sind - unabhaengig von der Fensterbreite. */
.xgld-account2-close-blocks--two {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.xgld-account2-close-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 400;
    color: #7C8FA0;
}

.xgld-account2-close .xgld-account2-address {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #EDEDED;
}

/* HOTFIX 2026-09-11: Bitcoin-Symbol vor der Zahlungsart (Mein Konto ->
   Bestellungen -> Details ansehen). Nur Layout - Farbe/Groesse der
   Schrift bleiben die bestehende .xgld-account2-address-Regel oben, das
   Symbol ist eigenstaendig farbig (Orange/Weiss) und braucht daher keine
   eigene Dark-/Light-Anpassung; xgld-light-mode.css veraendert nur die
   Textfarbe der umliegenden Regel, nicht dieses Layout. */
.xgld-account2-close .xgld-account2-address--payment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.xgld-account2-close .xgld-account2-address--payment svg {
    flex: 0 0 auto;
}

.xgld-account2-close .xgld-account2-muted {
    margin: 0;
}

/* Zahlungsart schliesst den linken Bereich ab - eine Haarlinie genuegt. */
.xgld-account2-close-block--payment {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #16232F;
}

/* --- 5. Zurueck-Link ------------------------------------------------------
   Steht unter dem gesamten Abschlussbereich, nicht unter der Adresse. Der
   Pfeil zeigt nach links und bewegt sich bei Hover ebenfalls nach links -
   sonst widerspraeche die Bewegung der Richtung. */
.xgld-account2-back {
    margin-top: 28px;
}

.xgld-account2-inline-link:hover .xgld-account2-arrow--back {
    transform: translateX(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .xgld-account2-inline-link:hover .xgld-account2-arrow--back {
        transform: none;
    }
}

/* --- 6. Laenderauswahl im Konto ------------------------------------------
   ENTFERNT im Pass "CHECKOUT/ACCOUNT/COUNTRY/GUEST HOTFIX" (13.08.2026).

   Hier standen die Regeln fuer .xgld-account2-country-container - die Klasse,
   die der inzwischen ebenfalls entfernte Block "PREMIUM FORM/ORDER PASS -
   Konto-Laenderauswahl" (functions.php) zusaetzlich an den SelectWoo-Container
   des Kontos vergab. Seit dem Pass "COUNTRY/SHIPPING HOTFIX" vergibt die
   Konto-Initialisierung nur noch xgld-country-container; diese Klasse wurde
   seitdem nie mehr gesetzt und die rund 70 Zeilen waren wirkungslos
   (Audit-Kategorie C - tot).

   Der geschlossene Ausloeser der Konto-Laenderauswahl wird ausschliesslich im
   Block "CHECKOUT/ACCOUNT/COUNTRY/GUEST HOTFIX" am Ende dieser Datei
   gestaltet - eine einzige aktive Kette.

   Rollback: .xgld-checkout-account-country-guest-hotfix-20260813/rollback.sh
   ------------------------------------------------------------------------- */


/* --- 7. Responsive -------------------------------------------------------
   1920/1440/1024: Abschlussbereich zweispaltig, Formulare in ihren
   Maximalbreiten.
   900 und darunter: der Abschlussbereich stapelt - erst die Betraege, dann
   die Angaben (DOM-Reihenfolge, kein order-Wechsel).
   768: Feldgroesse faellt auf die Stufe-1-Werte zurueck.
   640 und darunter: Feldpaare stapeln (Premium UI 2). */
@media (max-width: 900px) {
    .xgld-account2-close {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .xgld-account2-close-info,
    .xgld-account2-close-totals {
        grid-column: 1;
        grid-row: auto;
    }

    /* Die Betraege behalten ihre ruhige Breite und bleiben rechtsbuendig,
       damit sie weiterhin vergleichbar sind. */
    .xgld-account2-close .xgld-account2-totals {
        max-width: 340px;
        margin-left: auto;
    }
}

@media (max-width: 560px) {
    /* Auf sehr schmalen Geraeten nimmt der Summenblock die volle Breite -
       eine 340px-Spalte waere dort keine ruhige Spalte mehr, sondern ein
       zufaellig eingerueckter Block. */
    .xgld-account2-close .xgld-account2-totals {
        max-width: none;
    }
}
/* ===== XGLD ACCOUNT PREMIUM FORM / ORDER PASS - 2026-08-13 END ===== */

/* ===== XGLD ACCOUNT FINAL FORMS / HEADER SPACING - 2026-08-13 START ========
   Vier abgegrenzte Restpunkte. Kein Redesign, kein globaler Dichte-Pass:
   Kopf, Warenkorb, Produktseite, Bestelluebersicht, Dashboard, Navigation
   und Bestelldetail bleiben unberuehrt.

   Alle Regeln stehen unter .xgld-account-page bzw. unter den bestehenden
   Abschnitts-Modifikatoren .xgld-account2-content--*. Es gibt bewusst keine
   Selektoren auf input, select, form oder button.

   WARUM EIN NEUER BLOCK UND KEINE AENDERUNG IM VORIGEN
   Die betroffenen Werte (Formularbreiten, PLZ-Spalte) stammen aus zwei
   verschiedenen aelteren Bloecken - Breite der Adressbearbeitung aus dem
   Final Density Cleanup, Breite des Sicherheitsformulars und PLZ-Raster aus
   dem Premium Form/Order Pass. Beide Bloecke sind Gegenstand eigener,
   getrennt anwendbarer Rollbacks. Wuerde man dort hineinschreiben, liesse
   sich dieser Pass nicht mehr fuer sich allein zuruecknehmen und die
   Reverse-Patches jener Rollbacks wuerden nicht mehr passen. Ein eigener
   Block am Ende ueberschreibt beide bei gleicher Spezifitaet allein durch
   die Reihenfolge und laesst sich rueckstandsfrei wieder entfernen.
   Rollback: .xgld-account-final-forms-header-spacing-20260813/rollback.sh
   ========================================================================= */

/* --- 1. Adressformular: Breite -------------------------------------------
   Die Inhaltsspalte des Kontos misst auf dem Desktop 856px
   (1080px Rahmen - 176px Navigation - 48px Abstand). Das Adressformular
   stand bisher auf 780px und damit praktisch auf voller Spaltenbreite - es
   wirkte dadurch wie ein Verwaltungsformular, obwohl keines seiner Felder
   diese Breite braucht. Eine Strasse mit Hausnummer ist der laengste
   realistische Wert und bleibt bei 620px bequem lesbar; Vor- und Nachname
   erhalten daneben je rund 301px. */
.xgld-account2-content--billing,
.xgld-account2-content--shipping {
    max-width: 620px;
}

/* --- 2. Adressformular: Raster -------------------------------------------
   Eine Postleitzahl ist immer kurz. 150px fassen auch sechsstellige
   Formate mit Trennzeichen; der Ort bekommt den gesamten Rest, statt wie
   bei 50/50 die Haelfte zu verschenken. Gespiegelt fuer Laender-Locales,
   die den Ort zuerst fuehren. */
@media (min-width: 641px) {
    .xgld-account-page .xgld-account2-content--form .xgld-account2-field-row--postcode {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .xgld-account-page .xgld-account2-content--form .xgld-account2-field-row--postcode-last {
        grid-template-columns: minmax(0, 1fr) 150px;
    }

    /* Eine Telefonnummer braucht keine 620px. Sie steht allein in ihrer
       Zeile und wirkt ueber die volle Breite wie ein Freitextfeld. */
    .xgld-account-page .xgld-account2-content--form input[type="tel"] {
        max-width: 320px;
    }
}

/* --- 3. Sicherheit: Breite -----------------------------------------------
   Bei 225% Windows-Skalierung ist die Seite als solche nicht zu gross - zu
   lang waren allein die Passwortfelder. Sie liefen ueber 640px, obwohl ein
   Passwortfeld keinen Nutzen aus zusaetzlicher Breite zieht. 540px halten
   die drei Felder als ruhigen Block zusammen und lassen unterhalb Platz
   fuer einen spaeteren zweiten Abschnitt (2FA), ohne dass dafuer heute
   etwas vorbereitet wird. */
.xgld-account2-content--security {
    max-width: 540px;
}

/* --- 4. Laenderauswahl: wieder XGLD-dunkel -------------------------------
   Das Feld ist ab diesem Pass wieder das native <select> (siehe
   functions.php, Block "Konto-Laenderauswahl abschalten"). Die vorhandene
   Gestaltung aus dem Premium-UI-Block traegt es bereits vollstaendig -
   Grund, Rahmen, Radius, Schrift, Gold-Fokus und eigener Pfeil. Ergaenzt
   werden hier nur die beiden Stellen, die eine helle Flaeche verursachen
   koennen:

   1. color-scheme. Ohne diese Angabe rendert das Betriebssystem die
      Bedienelemente des Feldes im hellen Schema. Betroffen sind je nach
      Browser die aufgeklappte Liste, die Bildlaufleiste darin und - genau
      der gemeldete Fall - unter Windows die geschlossene Flaeche selbst,
      sobald appearance:none nicht greift. Die Angabe ist die dafuer
      vorgesehene Standardeigenschaft und ersetzt jeden Nachbau.
   2. optgroup. Die Gruppenueberschriften kamen erst mit dem vorigen Pass
      hinzu und waren nie eingefaerbt; sie erbten die hellen
      Systemfarben. */
.xgld-account-page select.xgld-account2-select {
    color-scheme: dark;
    background-color: #0E151C;
}

.xgld-account-page select.xgld-account2-select optgroup {
    background-color: #0E151C;
    color: #8FA3B3;
    font-style: normal;
    font-weight: 600;
}

.xgld-account-page select.xgld-account2-select optgroup option {
    color: #EDEDED;
    font-weight: 400;
}
/* ===== XGLD ACCOUNT FINAL FORMS / HEADER SPACING - 2026-08-13 END ===== */

/* ===== XGLD COUNTRY/SHIPPING HOTFIX - 2026-08-13 START ====================
   Drei Punkte, sonst nichts. Die Ergebnisse des vorigen Passes bleiben
   unangetastet: Adressformular 620px, Sicherheit 540px, PLZ-Spalte 150px,
   Feldhoehe, Raster, Breakpoints und der Kopfbereich werden hier nicht
   angefasst.

   1. Der geschlossene Ausloeser der Laenderauswahl im Konto.
   2. Papierkorb und Bestaetigungsansicht der Lieferadresse.
   3. Checkbox "Abweichende Lieferadresse" im Checkout.
   Rollback: .xgld-country-shipping-hotfix-20260813/rollback.sh
   ========================================================================= */

/* --- 1. Laenderauswahl im Konto ------------------------------------------
   Das Kontofeld traegt ab diesem Hotfix dieselbe Klasse wie Warenkorb und
   Kasse (xgld-country-container) und wird damit von denselben Regeln
   getragen: das geoeffnete Menue haengt am <body> und kommt vollstaendig aus
   dem Block "XGLD Unified Country Selector" - dunkler Grund, Suchfeld,
   Gruppenueberschriften, genau eine Scrollebene, eigene Bildlaufleiste,
   identische Hoehe. Dafuer ist hier bewusst KEINE Regel noetig.

   Der geschlossene AUSLOESER ist die einzige Stelle, die je Kontext eigene
   Masse hat - so war es schon vorher: die Kasse fuehrt ihn ueber
   body.woocommerce-checkout (47px), der Warenkorb ueber
   body.woocommerce-cart .xgld-cart-destination (44px). Beide Regeln haben
   eine hoehere Spezifitaet als die folgende und bleiben deshalb
   unveraendert - dieser Hotfix aendert an Kasse und Warenkorb nichts.

   Fuer das Konto gilt die Formularhoehe des vorigen Passes (45,75px) statt
   der 47px der Kasse. Ein Ausloeser, der hoeher waere als die Felder
   darueber und darunter, wuerde genau das kompakte Formular wieder
   aufbrechen, das dort ausdruecklich erhalten bleiben soll. */
.xgld-account-page .xgld-country-container.select2-container {
    display: block;
    width: 100% !important;
}

.xgld-account-page .xgld-country-container .select2-selection--single {
    height: auto;
    min-height: 45.75px;
    box-sizing: border-box;
    background: #0E151C;
    border: 1px solid #24384A;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.xgld-account-page .xgld-country-container .select2-selection--single .select2-selection__rendered {
    padding: 11px 34px 11px 13px;
    color: #EDEDED;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.45;
}

.xgld-account-page .xgld-country-container .select2-selection--single .select2-selection__placeholder {
    color: #5C7185;
}

/* Fokus und geoeffneter Zustand in derselben Sprache wie die Eingabefelder. */
.xgld-account-page .xgld-country-container .select2-selection--single:focus,
.xgld-account-page .xgld-country-container .select2-selection--single:focus-visible,
.xgld-account-page .xgld-country-container.select2-container--open .select2-selection--single {
    border-color: #D5A137;
    outline: none;
    box-shadow: 0 0 0 3px rgba(213, 161, 55, 0.16);
}

/* Unterhalb von 768px gelten im Konto weiterhin die groesseren Touchmasse
   des Stufe-1-Formulars. */
@media (max-width: 767px) {
    .xgld-account-page .xgld-country-container .select2-selection--single {
        min-height: 50.4px;
    }

    .xgld-account-page .xgld-country-container .select2-selection--single .select2-selection__rendered {
        padding: 13px 34px 13px 14px;
        font-size: 16px;
        line-height: 1.4;
    }
}

/* --- 2. Lieferadresse entfernen ------------------------------------------
   Der Papierkorb ist eine sekundaere, destruktive Aktion: er steht neben
   "Bearbeiten", traegt keine Flaeche und keine Farbe, und faerbt sich erst
   bei Zeigerkontakt oder Tastaturfokus warnend ein. */
.xgld-account2-address-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 14px;
    padding: 4px;
    border-radius: 6px;
    color: #6D8296;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.xgld-account2-address-delete:hover {
    color: #C4685C;
    background-color: rgba(196, 104, 92, 0.10);
}

.xgld-account2-address-delete:focus-visible {
    color: #C4685C;
    outline: 2px solid #D5A137;
    outline-offset: 2px;
}

.xgld-account2-trash {
    width: 17px;
    height: 17px;
    display: block;
}

/* Bestaetigung: eine ruhige Flaeche im Inhaltsfluss, kein Overlay. */
.xgld-account2-confirm {
    margin: 0 0 28px;
    padding: 18px 20px 20px;
    border: 1px solid #2A3B4A;
    border-left: 3px solid #C4685C;
    border-radius: 8px;
    background: #0E151C;
    max-width: 620px;
}

.xgld-account2-confirm-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #F5F5F5;
}

.xgld-account2-confirm-text {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #94A0AA;
}

.xgld-account2-confirm-address {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #C7D0D8;
}

.xgld-account2-confirm-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.xgld-account2-confirm-actions form {
    margin: 0;
}

/* Der Bestaetigungsknopf uebernimmt Form, Hoehe und Typografie von
   .xgld-account2-btn - nur die Farbe sagt, dass etwas entfernt wird. */
.xgld-account2-btn--danger {
    background: #B4544A;
    border-color: #B4544A;
    color: #FFFFFF;
}

.xgld-account2-btn--danger:hover {
    background: #C4685C;
    border-color: #C4685C;
}

/* --- 3. Checkout: abweichende Lieferadresse ------------------------------
   Eine Zeile mit Kontrollkaestchen zwischen Rechnungs- und Lieferadresse.
   Bewusst keine Karte, kein Rahmen, kein Schalter-Nachbau: ein natives
   Kontrollkaestchen bleibt bedienbar, vorlesbar und ohne JavaScript
   funktionsfaehig. */
.xgld-ship-toggle {
    margin: 26px 0 0;
}

.xgld-ship-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #C7D0D8;
    user-select: none;
}

.xgld-ship-toggle-input {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin: 0;
    accent-color: #D5A137;
    cursor: pointer;
}

.xgld-ship-toggle-input:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 2px;
}

.xgld-ship-toggle-label:hover .xgld-ship-toggle-text {
    color: #F5F5F5;
}

/* Ohne JavaScript bleibt der Bereich sichtbar - checkout.js blendet ihn beim
   Laden selbst aus, sobald das Kaestchen nicht angehakt ist. Es wird hier
   also NICHT per CSS versteckt: sonst waere die Lieferadresse ohne Skripte
   unerreichbar. */
.woocommerce-shipping-fields .shipping_address {
    margin-top: 4px;
}
/* ===== XGLD COUNTRY/SHIPPING HOTFIX - 2026-08-13 END ===== */

/* ===== XGLD CHECKOUT/ACCOUNT/COUNTRY/GUEST HOTFIX - 2026-08-13 START =======
   Sechs Punkte, sonst nichts. Kopfbereich, Kursleiste, Produktseite,
   Warenkorb, Bestellzusammenfassung, Bestellansichten und alle Masse der
   vorigen Passes bleiben unangetastet.

     1. Laenderauswahl: EINE aktive Kette, unabhaengig von JavaScript.
     2. Kontaktangabe des angemeldeten Kunden im Checkout.
     3. Login-Hinweis fuer Gaeste im Checkout.
     4. Gutschein, kompakt und unten.
     5. Adresskarten exakt gleich hoch.
     6. Lieferadresse entfernen - inline in der Aktionszeile.

   Rollback: .xgld-checkout-account-country-guest-hotfix-20260813/rollback.sh
   ========================================================================= */

/* --- 1. LAENDERAUSWAHL: die weisse Kachel an der Wurzel ------------------
   BEFUND (das ist die Regel, die die weisse Flaeche tatsaechlich gesetzt hat)

       select2.css, Zeile 1 des Default-Themes:
       .select2-container--default .select2-selection--single {
           background-color: #fff; border: 1px solid #aaa; border-radius: 4px
       }

   Sie stammt aus WooCommerce (assets/css/select2.css), wird auf Warenkorb,
   Kasse UND Kontoseiten geladen und hat die Spezifitaet (0,2,0).

   WARUM DIE BISHERIGEN REPARATUREN NICHT GEHALTEN HABEN
   Nicht wegen zu geringer Spezifitaet - jede der bisherigen Gegenregeln hatte
   mit (0,3,0) genug. Sondern weil ihr Selektor jedes Mal an einer Klasse
   hing, die es nur gibt, wenn JavaScript sie zur Laufzeit vergibt:
   containerCssClass von SelectWoo.

       Pass "Premium Form/Order":  Klasse xgld-account2-country-container
                                   -> CSS auf .xgld-account2-country-container
       Pass "Forms/Header":        SelectWoo per remove_action abgeschaltet
                                   -> obige Klasse existiert nicht mehr,
                                      die Regeln liefen ins Leere
       Pass "Country/Shipping":    SelectWoo wieder an, aber nur noch mit
                                   xgld-country-container
                                   -> die Regeln des ersten Passes blieben tot
                                      zurueck, neue Regeln daneben

   Jeder Pass legte also eine weitere Schicht an eine ANDERE JS-Klasse. Faellt
   diese Klasse aus - abgeschaltete Initialisierung, geaenderter Klassenname,
   JavaScript-Fehler, Skript blockiert -, bleibt von XGLD nichts uebrig und
   die Regel oben aus select2.css gewinnt wieder. Genau das ist "die Kachel
   ist wieder weiss".

   LOESUNG - zwei Ebenen, keine dritte Schicht
   a) Die Ursache wird EINMAL an ihrer eigenen Adresse neutralisiert: dieselbe
      Selektorform, dieselbe Spezifitaet (0,2,0), aber spaeter in der
      Ladereihenfolge - style.css wird nach select2.css eingebunden, damit
      gewinnt bei Gleichstand diese Regel. Sie haengt an KEINER von XGLD per
      JavaScript vergebenen Klasse und kann deshalb nicht mehr verwaisen.
      Ab hier ist der geschlossene Ausloeser IMMER dunkel - im Konto, in der
      Kasse, im Warenkorb, mit und ohne XGLD-Initialisierung.
   b) Kontextabhaengig bleibt nur noch die GROESSE. Warenkorb und Kasse haben
      dafuer bereits eigene, hoeher gewichtete Regeln weiter oben in dieser
      Datei; sie werden hier nicht angefasst. Fuer das Konto steht die
      Formularhoehe des vorigen Passes (45,75px) unten - jetzt ohne
      Abhaengigkeit von xgld-country-container.

   Damit existiert fuer die Konto-Laenderauswahl genau EINE aktive
   Styling-Kette. Die tote Kette des Passes "Premium Form/Order" ist in
   diesem Pass aus dieser Datei entfernt worden (siehe Abschnitt 6 weiter
   oben), ebenso ihre Initialisierung in functions.php. */
.select2-container--default .select2-selection--single {
    background-color: #0E151C;
    border: 1px solid #24384A;
    border-radius: 6px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #EDEDED;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #5C7185;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #8FA3B3 transparent transparent transparent;
}

/* Deaktiviertes Feld: select2.css setzt hier #eee. Gleiche Selektorform,
   gleiche Spezifitaet, spaeter geladen. */
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #0B1219;
}

/* Konto: nur noch Masse und Fokus. Der Selektor nennt bewusst KEINE per
   JavaScript vergebene Klasse mehr - .select2-container setzt SelectWoo
   immer selbst. */
.xgld-account-page .select2-container.select2-container--default {
    display: block;
    width: 100% !important;
}

.xgld-account-page .select2-container--default .select2-selection--single {
    height: auto;
    min-height: 45.75px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    /* Zusaetzliche Absicherung, unabhaengig von der Ladereihenfolge: mit
       (0,3,0) schlaegt diese Regel die Ursache aus select2.css (0,2,0) auch
       dann, wenn die Stylesheets einmal in anderer Folge eingebunden werden
       sollten.
       Bewusst background-color und border-color EINZELN statt der
       Kurzschreibweise border: sonst wuerde der goldene Rahmen des
       geoeffneten Zustands (gleiche Spezifitaet, weiter unten) ueberschrieben
       und das Feld verloere seine Fokusanzeige. */
    background-color: #0E151C;
    border-color: #24384A;
}

.xgld-account-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 11px 34px 11px 13px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.45;
}

.xgld-account-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 9px;
    height: 100%;
    /* HOTFIX 14.08.2026: Breite explizit - sie ist die Referenz fuer Kasse
       und Warenkorb und darf nicht aus select2.css "zufaellig" kommen. */
    width: 20px;
}

/* Fokus und geoeffneter Zustand in derselben Sprache wie die Eingabefelder. */
.xgld-account-page .select2-container--default .select2-selection--single:focus,
.xgld-account-page .select2-container--default .select2-selection--single:focus-visible,
.xgld-account-page .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #D5A137;
    outline: none;
    box-shadow: 0 0 0 3px rgba(213, 161, 55, 0.16);
}

/* Fehlerzustand am Laenderfeld des Kontos - dieselbe Farbe wie bei den
   Eingabefeldern, damit ein Validierungsfehler das Feld nicht aufhellt. */
.xgld-account-page .select2-container--default .select2-selection--single[aria-invalid="true"] {
    border-color: #B4544A;
}

@media (max-width: 767px) {
    .xgld-account-page .select2-container--default .select2-selection--single {
        min-height: 50.4px;
    }

    .xgld-account-page .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding: 13px 34px 13px 14px;
        font-size: 16px;
        line-height: 1.4;
    }
}

/* --- 2. CHECKOUT: KONTAKTANGABE DES ANGEMELDETEN KUNDEN ------------------
   Steht anstelle des frueheren E-Mail-Textfeldes unter der Ueberschrift
   "Kontakt". Bewusst wie eine Angabe und nicht wie ein Feld: kein Rahmen,
   keine Flaeche, kein Cursor - damit gar nicht erst der Eindruck entsteht,
   man koenne hier etwas eintragen. */
.xgld-checkout-identity {
    margin: 0 0 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    line-height: 1.5;
}

.xgld-checkout-identity-label {
    font-size: 12.5px;
    color: #6B7A88;
}

.xgld-checkout-identity-value {
    font-size: 14px;
    color: #EDEDED;
    word-break: break-all;
}

/* --- 3. CHECKOUT: LOGIN-HINWEIS FUER GAESTE ------------------------------
   Sitzt an der Stelle, an der zuvor der Gutscheinhinweis stand. Eine Zeile,
   ruhig, ohne Kasten - der Kunde soll den Weg zur Anmeldung finden, aber
   nicht dorthin gedraengt werden. Wer als Gast bestellen will, liest darueber
   hinweg. */
.xgld-checkout-loginhint {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0 0 22px;
    font-size: 13px;
    line-height: 1.5;
}

.xgld-checkout-loginhint-text {
    color: #8FA3B3;
}

.xgld-checkout-loginhint-link {
    color: #D5A137;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.xgld-checkout-loginhint-link:hover {
    color: #E9BE6D;
    border-bottom-color: rgba(233, 190, 109, 0.5);
}

.xgld-checkout-loginhint-link:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 3px;
    border-radius: 3px;
}

/* --- 4. GUTSCHEIN: KOMPAKT UND UNTEN ------------------------------------
   Der Bereich sitzt jetzt unter dem Bestellhinweis und traegt bewusst dessen
   Bauart: ein einzelner Aufklapper mit kleinem Plus, gleiche Schriftgroesse,
   gleiche Farbe, gleicher Abstand. Zwei optionale Angaben untereinander in
   derselben Sprache - kein zweites Gestaltungsmuster.

   Die frueheren Regeln .xgld-coupon-toggle / .xgld-coupon-toggle-text /
   .xgld-coupon-link weiter oben in dieser Datei greifen nicht mehr: das
   zugehoerige Markup ("Du hast einen Gutscheincode? Einloesen") existiert
   nicht mehr. Sie stehen inert im Stylesheet und gehoeren zum Rollback des
   Passes, der sie angelegt hat - hier werden sie deshalb nicht entfernt. */
.xgld-coupon {
    max-width: 480px;
    margin-top: 18px;
    margin-bottom: 0;
}

.xgld-coupon-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #8FA3B3;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.xgld-coupon-summary:hover {
    color: #D5A137;
}

.xgld-coupon-summary-icon {
    display: inline-flex;
    color: #5C7185;
    transition: color 0.15s ease;
}

.xgld-coupon-summary:hover .xgld-coupon-summary-icon {
    color: #D5A137;
}

.xgld-coupon-summary:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 3px;
    border-radius: 3px;
}

/* Geoeffnet: senkrechter Strich weg -> aus "+" wird "-". checkout.js setzt
   aria-expanded selbst, es braucht dafuer kein eigenes Skript. */
.xgld-coupon-summary[aria-expanded="true"] .xgld-coupon-icon-bar {
    display: none;
}

/* --- 5. ADRESSKARTEN: EXAKT GLEICHE HOEHE -------------------------------
   VORHER: .xgld-account2-address-grid stand auf align-items:start. Jede Karte
   war damit genau so hoch wie ihr eigener Inhalt. Eine drei- und eine
   vierzeilige Adresse ergaben zwei unterschiedlich hohe Karten, deren
   Aktionszeilen auf verschiedener Hoehe standen - und sobald an der
   Lieferadresse der Papierkorb erschien, verschob sich zusaetzlich deren
   untere Kante.

   NACHHER: die Karten strecken sich auf die Hoehe der hoechsten Karte ihrer
   Rasterzeile (Standardverhalten von Grid, stretch). Innerhalb der Karte
   schiebt margin-top:auto die Aktionszeile an die Unterkante. Damit stimmen
   obere Kante, Hoehe, Innenabstaende, untere Kante UND die Position der
   Aktionszeile ueberein - unabhaengig davon, wie lang die Adressen sind und
   ob die Loeschsymbole gerade sichtbar sind.

   Der einspaltige Fall (identische Adressen) ist davon nicht betroffen: dort
   gibt es nur eine Karte. */
.xgld-account2-address-grid {
    align-items: stretch;
}

.xgld-account2-address-grid .xgld-account2-panel {
    display: flex;
    flex-direction: column;
}

.xgld-account2-address-grid .xgld-account2-address,
.xgld-account2-address-grid .xgld-account2-muted {
    flex: 1 1 auto;
}

.xgld-account2-address-grid .xgld-account2-address-actions {
    margin-top: auto;
}

/* --- 6. LIEFERADRESSE ENTFERNEN: INLINE IN DER AKTIONSZEILE --------------
   Aus dem Papierkorb werden an Ort und Stelle "x" und ein Haken. Es kommt
   keine Karte, kein Kasten und keine Warnflaeche hinzu; die Zeile behaelt
   ihre Hoehe, die Karte ihre Masse. Nur der Haken faerbt sich warnend - er
   ist die einzige veraendernde Aktion.

   Das Formular um den Haken darf im Flex-Fluss keine eigene Zeile aufmachen:
   es ist deshalb selbst inline-flex und ohne Aussenabstand. */
.xgld-account2-address-cancel,
.xgld-account2-address-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: #6D8296;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.xgld-account2-address-confirm-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.xgld-account2-address-cancel:hover {
    color: #EDEDED;
    background-color: rgba(143, 163, 179, 0.12);
}

.xgld-account2-address-confirm:hover {
    color: #C4685C;
    background-color: rgba(196, 104, 92, 0.10);
}

.xgld-account2-address-cancel:focus-visible,
.xgld-account2-address-confirm:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 2px;
}

.xgld-account2-confirm-icon {
    width: 17px;
    height: 17px;
    display: block;
}
/* ===== XGLD CHECKOUT/ACCOUNT/COUNTRY/GUEST HOTFIX - 2026-08-13 END ===== */

/* ===== XGLD ACCOUNT/CHECKOUT CONSOLIDATION - 2026-08-14 START =============
   Konsolidierungspass. Enthaelt bewusst die ABSCHLIESSENDEN Regeln fuer
   Zustaende, die zuvor von mehreren Passes gegenseitig ueberschrieben wurden.

   Rollback: .xgld-account-checkout-consolidation-20260814/rollback.sh
   ========================================================================= */

/* --- 1. AUTOFILL: die abschliessende Festlegung --------------------------
   Chrome zeichnet automatisch ausgefuellte Felder mit einem eigenen hellen
   Hintergrund. Dieser laesst sich NICHT mit background-color uebermalen -
   die einzige wirksame Methode ist ein grossflaechiger Inset-Schatten.

   Genau daraus entstand der wiederkehrende Fehler: box-shadow ist zugleich
   die Eigenschaft, mit der Fokusringe gebaut werden. Jede spaetere Regel, die
   irgendwo box-shadow setzt, loescht die Autofill-Uebermalung mit.
   Nachweislich passiert war das zweimal:

     a) .xgld-account-page input[type="tel"] { box-shadow: none }
        -> Telefonfeld im Autofill IMMER hell (in diesem Pass entfernt)
     b) .xgld-account-page input[type=...]:focus { box-shadow: 0 0 0 3px ... }
        -> JEDES Feld im Autofill hell, sobald es den Fokus bekam

   Deshalb stehen die Autofill-Zustaende jetzt hier, am Ende der Datei, und
   kombinieren Fuellschatten UND Fokusring in EINER Deklaration. Damit gibt es
   keinen Zustand mehr, in dem eines das andere ausloescht.

   Fuer spaetere Passes: Wer im Konto einen neuen Fokus- oder Feldzustand
   baut, muss ihn HIER ergaenzen - nicht in einem neuen Block darunter. */
.xgld-account-page input:-webkit-autofill,
.xgld-account-page input:-webkit-autofill:hover,
.xgld-account-page input:-webkit-autofill:active,
body.woocommerce-checkout form.xgld-checkout-form input:-webkit-autofill,
body.woocommerce-checkout form.xgld-checkout-form input:-webkit-autofill:hover,
body.woocommerce-checkout form.xgld-checkout-form input:-webkit-autofill:active {
    -webkit-text-fill-color: #EDEDED;
    caret-color: #EDEDED;
    -webkit-box-shadow: 0 0 0 1000px #0E151C inset;
    box-shadow: 0 0 0 1000px #0E151C inset;
    /* Verzoegert Chromes eigenes Nachfaerben ins Unendliche. */
    transition: background-color 5000s ease-in-out 0s;
}

/* Autofill UND Fokus gleichzeitig: Fuellschatten zuerst, Fokusring darueber. */
.xgld-account-page input:-webkit-autofill:focus,
.xgld-account-page input:-webkit-autofill:focus-visible,
body.woocommerce-checkout form.xgld-checkout-form input:-webkit-autofill:focus,
body.woocommerce-checkout form.xgld-checkout-form input:-webkit-autofill:focus-visible {
    -webkit-text-fill-color: #EDEDED;
    caret-color: #EDEDED;
    border-color: #D5A137;
    -webkit-box-shadow: 0 0 0 1000px #0E151C inset, 0 0 0 3px rgba(213, 161, 55, 0.16);
    box-shadow: 0 0 0 1000px #0E151C inset, 0 0 0 3px rgba(213, 161, 55, 0.16);
    transition: background-color 5000s ease-in-out 0s;
}

/* Autofill an einem fehlerhaften Feld bleibt rot markiert. */
.xgld-account-page input[aria-invalid="true"]:-webkit-autofill,
.xgld-account-page input[aria-invalid="true"]:-webkit-autofill:focus {
    border-color: #B4544A;
    -webkit-box-shadow: 0 0 0 1000px #0E151C inset, 0 0 0 3px rgba(180, 84, 74, 0.16);
    box-shadow: 0 0 0 1000px #0E151C inset, 0 0 0 3px rgba(180, 84, 74, 0.16);
}

/* --- 2. CHECKBOX "ABWEICHENDE LIEFERADRESSE" ----------------------------
   Vorher: das native Browser-Kaestchen. Auf dunklem Grund zeichnet Chrome es
   weiss; accent-color faerbt nur den angehakten Zustand und aendert am
   weissen Grundzustand nichts.

   Jetzt: appearance:none und ein selbst gezeichnetes Kaestchen. Das Element
   bleibt ein echtes <input type="checkbox"> - Tastatur, Screenreader, Label-
   Klick und Formularwert sind unveraendert. Der Haken ist ein
   Hintergrundbild, kein zusaetzliches Markup, damit checkout.js unveraendert
   auf denselben Knoten hoert. */
body.woocommerce-checkout .xgld-ship-toggle-input {
    appearance: none;
    -webkit-appearance: none;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    background-color: #0E151C;
    border: 1px solid #2A3F52;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

body.woocommerce-checkout .xgld-ship-toggle-input:hover {
    border-color: #3A5069;
}

body.woocommerce-checkout .xgld-ship-toggle-input:checked {
    background-color: #0E151C;
    border-color: #D5A137;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D5A137' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
}

body.woocommerce-checkout .xgld-ship-toggle-input:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 2px;
}

/* Kaestchen und Beschriftung auf einer Grundlinie. */
body.woocommerce-checkout .xgld-ship-toggle-label {
    align-items: center;
}

/* --- 3. GUTSCHEIN IM SUMMENBLOCK ----------------------------------------
   Der Gutschein sitzt jetzt rechts im Summenblock, direkt vor der
   Gesamtsumme. Er ist eine Nebensache und sieht auch so aus: ein
   Textumschalter, darunter eine schmale Zeile. Kein Rahmen um den ganzen
   Bereich, kein goldener Haupt-Knopf - Gold bleibt der Bestellung
   vorbehalten. */
.xgld-cc-coupon {
    margin: 4px 0 12px;
    padding-top: 12px;
    border-top: 1px solid #1B2A38;
}

.xgld-cc-coupon-toggle {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: #8FA3B3;
    cursor: pointer;
    transition: color 0.15s ease;
}

.xgld-cc-coupon-toggle:hover {
    color: #D5A137;
}

.xgld-cc-coupon-toggle:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 3px;
    border-radius: 3px;
}

.xgld-cc-coupon-panel {
    margin-top: 10px;
}

.xgld-cc-coupon-panel[hidden] {
    display: none;
}

.xgld-cc-coupon-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.xgld-cc-coupon-input {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    background: #0E151C;
    border: 1px solid #24384A;
    border-radius: 6px;
    padding: 9px 11px;
    color: #EDEDED;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.xgld-cc-coupon-input::placeholder {
    color: #5C7185;
}

.xgld-cc-coupon-input:focus {
    border-color: #D5A137;
    box-shadow: 0 0 0 3px rgba(213, 161, 55, 0.16);
}

/* Sekundaerer Knopf: ruhig, nicht der Haupt-Handlungsweg der Seite. */
.xgld-cc-coupon-apply {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid #2A3F52;
    border-radius: 6px;
    padding: 9px 16px;
    color: #C7D0D8;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.xgld-cc-coupon-apply:hover {
    border-color: #D5A137;
    color: #D5A137;
}

.xgld-cc-coupon-apply:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 2px;
}

/* Rueckmeldung von WooCommerce (wc_print_notices). Bewusst nur Typografie -
   die Notice-Klassen von WooCommerce bringen ihre eigene XGLD-Gestaltung aus
   dem Notice-Block weiter unten mit. */
.xgld-cc-coupon-msg:empty {
    display: none;
}

.xgld-cc-coupon-msg {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.5;
}

.xgld-cc-coupon-msg ul,
.xgld-cc-coupon-msg .woocommerce-error,
.xgld-cc-coupon-msg .woocommerce-message {
    margin: 0;
    padding: 8px 10px;
    list-style: none;
    border-radius: 5px;
    background: #101E2C;
    border-left: 2px solid #D5A137;
    color: #C7D0D8;
}

.xgld-cc-coupon-msg .woocommerce-error {
    border-left-color: #B4544A;
}

/* Auf schmalen Viewports stapeln Feld und Knopf. */
@media (max-width: 480px) {
    .xgld-cc-coupon-row {
        flex-direction: column;
    }

    .xgld-cc-coupon-apply {
        width: 100%;
    }
}

/* --- 4. NOTICES: kompakt und selbstausblendend ---------------------------
   Erfolgsmeldungen sind Bestaetigungen, keine Aufgaben. Sie sind deshalb
   schmaler, kuerzer und verschwinden nach rund 3,5 Sekunden von selbst
   (data-xgld-autohide, Skript in xgld-account-template.php).
   Fehlermeldungen (--error) bleiben unveraendert stehen. */
.xgld-account-alert--success {
    padding: 10px 14px;
    margin-bottom: 16px;
    border-left-color: #D5A137;
    font-size: 13px;
    line-height: 1.5;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.xgld-account-alert--fading {
    opacity: 0;
    transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
    .xgld-account-alert--success {
        transition: none;
    }
    .xgld-account-alert--fading {
        transform: none;
    }
}

/* --- 5. CHECKOUT-KONTAKT: E-Mail des angemeldeten Kunden -----------------
   Steht dort, wo fuer Gaeste das E-Mail-Feld steht, und sieht aus wie eine
   Feldzeile: Beschriftung oben, Wert darunter. Bewusst KEIN Feldrahmen - es
   ist eine Angabe, kein Eingabefeld. Das Schloss macht ohne zusaetzlichen
   Satz deutlich, dass hier nichts zu aendern ist; die Erklaerung haengt als
   title und als Screenreader-Text daran. */
.xgld-cc-identity {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0 0 18px;
    min-width: 0;
}

.xgld-cc-identity-label {
    font-size: 12.5px;
    line-height: 1.3;
    color: #8FA3B3;
}

.xgld-cc-identity-value {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #EDEDED;
}

.xgld-cc-identity-mail {
    overflow-wrap: anywhere;
}

.xgld-cc-identity-lock {
    display: inline-flex;
    flex-shrink: 0;
    color: #6D8296;
}

/* --- 6. LIEFERADRESSBUCH -------------------------------------------------
   Abschnitt C: Rechnungs- und Lieferkarten muessen exakt synchron sein. Das
   Raster stellt die Karten einer Zeile auf gleiche Hoehe (stretch), die Karte
   ist eine Flex-Spalte und die Aktionszeile wird per margin-top:auto an die
   Unterkante geschoben. Dadurch stimmen obere Kante, Innenabstaende,
   Adressposition, Aktionszeile und untere Kante ueberein - unabhaengig davon,
   wie lang eine Adresse ist und ob gerade Loeschsymbole sichtbar sind. */
.xgld-cc-addr-grid {
    align-items: stretch;
}

.xgld-cc-addr-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.xgld-cc-addr-card .xgld-account2-address,
.xgld-cc-addr-card .xgld-account2-muted {
    flex: 1 1 auto;
}

.xgld-cc-addr-card .xgld-account2-address-actions {
    margin-top: auto;
}

/* Kennzeichnet die Adresse, die WooCommerce aktuell als Lieferadresse fuehrt.
   Nur sichtbar, wenn es ueberhaupt mehr als eine gibt. */
.xgld-cc-addr-badge {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(213, 161, 55, 0.10);
    border: 1px solid rgba(213, 161, 55, 0.30);
    color: #D5A137;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.xgld-cc-addr-add {
    margin: 18px 0 0;
    font-size: 13px;
}

@media (max-width: 720px) {
    .xgld-cc-addr-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- 7. CHECKOUT: Auswahl aus dem Lieferadressbuch -----------------------
   Eine ruhige Liste, kein Kartenraster: die Auswahl steht ueber dem
   Lieferadressformular und soll es nicht optisch verdraengen. Die
   Radiofelder sind wie die Checkbox selbst gezeichnet - kein weisses
   Browser-Bedienelement auf dunklem Grund. */
.xgld-cc-shipsel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 18px 0 6px;
}

.xgld-cc-shipsel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 2px;
    cursor: pointer;
    font-size: 13.5px;
    line-height: 1.45;
    color: #C7D0D8;
    user-select: none;
}

.xgld-cc-shipsel-item:hover .xgld-cc-shipsel-text {
    color: #F5F5F5;
}

.xgld-cc-shipsel-item input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin: 0;
    border: 1px solid #2A3F52;
    border-radius: 50%;
    background-color: #0E151C;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.xgld-cc-shipsel-item input[type="radio"]:checked {
    border-color: #D5A137;
    /* Innerer Punkt ohne zusaetzliches Markup. */
    box-shadow: inset 0 0 0 3.5px #0E151C, inset 0 0 0 12px #D5A137;
}

.xgld-cc-shipsel-item input[type="radio"]:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 2px;
}

.xgld-cc-shipsel-item--new .xgld-cc-shipsel-text {
    color: #8FA3B3;
}


/* --- 8. Gutschein entfernen: das x in der Rabattzeile --------------------
   Der Verweis kam zuvor als Standardlink heraus (blau, unterstrichen) - der
   einzige Fremdkoerper im Summenblock. Jetzt ein ruhiges Symbol, das sich
   erst bei Zeigerkontakt warnend faerbt. */
.xgld-review-totals .woocommerce-remove-coupon {
    margin-left: 8px;
    padding: 0 4px;
    border-radius: 4px;
    color: #6D8296;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.xgld-review-totals .woocommerce-remove-coupon:hover {
    color: #C4685C;
    background-color: rgba(196, 104, 92, 0.10);
}

.xgld-review-totals .woocommerce-remove-coupon:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 2px;
}

/* ===== XGLD ACCOUNT/CHECKOUT CONSOLIDATION - 2026-08-14 END ===== */

/* ===== XGLD CART/ARROW/CARDS/DELETE HOTFIX - 2026-08-14 START =============
   Vier eng begrenzte Punkte. Kein Redesign, keine Refaktorierung.
   Rollback: .xgld-cart-arrow-cards-delete-hotfix-20260814/rollback.sh
   ========================================================================= */

/* --- 1. COUNTRY-PFEIL: EINE Form fuer alle Kontexte ----------------------
   BEFUND (im Browser gemessen, CDP-Regelliste)

   Konto und Warenkorb zeigten das klassische CSS-Dreieck von Select2
   (0x0-Box, border-width 5px/4px, gerendert 8x5). Die Kasse zeigte etwas
   voellig anderes: eine 16x16-Flaeche mit border:none und einem
   Chevron als Hintergrundbild.

   Der Ausloeser steht in woocommerce.css:

       :where(.woocommerce) .select2-container .select2-selection--single
       .select2-selection__arrow b {
           border:none; background:url(<chevron.svg>) no-repeat;
           background-size:16px; width:16px; height:16px; ...
       }

   :where() traegt KEINE Spezifitaet bei. Der Selektor wiegt damit genau so
   viel wie die Dreiecksregel aus select2.css (0,3,1) - und woocommerce.css
   wird nach select2.css geladen. Bei Gleichstand gewinnt die spaetere Regel,
   also der Chevron.

   Warum nur in der Kasse? Wegen des :where(.woocommerce)-Vorfahren. Der
   Checkout wird ueber den Shortcode [woocommerce_checkout] ausgegeben und
   liegt dadurch in einem <div class="woocommerce">. Warenkorb und Konto
   rendern XGLD-eigenes Markup ohne diesen Wrapper - dort griff die Regel
   nie. Genau daher sahen die Pfeile unterschiedlich aus.

   LOESUNG
   Eine einzige Regel stellt das Dreieck ueberall wieder her. Sie hat
   dieselbe Spezifitaet wie beide Konkurrenten (0,3,1), steht aber in
   style.css und damit nach beiden - sie gewinnt also in jedem Kontext, ohne
   !important und ohne eine weitere kontextabhaengige Schicht.

   Die Farbe steht bewusst hier mit drin: sonst braeuchte es weiterhin drei
   getrennte Farbregeln (Konto, Warenkorb, Kasse) fuer denselben Wert. */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    /* Chevron-Hintergrund aus woocommerce.css abraeumen */
    background: none;
    /* Dreieck von Select2 wiederherstellen */
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    border-color: #8FA3B3 transparent transparent transparent;
}

/* Geoeffnet: Dreieck zeigt nach oben - in allen Kontexten gleich. */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-width: 0 4px 5px 4px;
    border-color: transparent transparent #8FA3B3 transparent;
}

/* --- 2. ADRESSKARTEN: Aktionszeile exakt gleich --------------------------
   BEFUND (gemessen, nicht geschaetzt)
   Karten selbst waren bereits deckungsgleich:
       Billing  w=420  h=167.78  top=304  bottom=471.78
       Shipping w=420  h=167.78  top=304  bottom=471.78
   Die AKTIONSZEILE lag aber unterschiedlich hoch:
       Billing  actionRow top=436.78  (Hoehe 16px - nur der Textlink)
       Shipping actionRow top=427.78  (Hoehe 25px - Icon mit 4px Innenabstand)
   Beide endeten unten gleich, die Zeile war oben also 9px hoeher. Dadurch
   sass "Bearbeiten" auf den beiden Karten NICHT auf derselben Grundlinie -
   genau der Eindruck, die Lieferkarte sei minimal anders.

   LOESUNG: die Aktionszeile bekommt in beiden Karten dieselbe Mindesthoehe
   (die der Symbolvariante) und zentriert ihren Inhalt vertikal. Damit liegt
   "Bearbeiten" ueberall gleich - unabhaengig davon, ob rechts Symbole stehen. */
.xgld-cc-addr-card .xgld-account2-address-actions {
    margin-top: auto;
    min-height: 25px;
    align-items: center;
    width: 100%;
    /* Auf schmalen Viewports rutschten die Loeschsymbole sonst unter
       "Bearbeiten" (die Zeile erbt flex-wrap:wrap). Die Karte wurde dadurch
       eine Zeile hoeher als die Rechnungskarte - gemessen bei 360px:
       Aktionszeile 49px statt 25px. "Bearbeiten" darf schrumpfen, die
       Symbole behalten ihre Groesse. */
    flex-wrap: nowrap;
}

.xgld-cc-addr-card .xgld-account2-address-actions > .xgld-account2-inline-link {
    min-width: 0;
}

/* --- 3. LOESCH-BEDIENELEMENTE: rechts, auf einer Grundlinie --------------
   Die Symbole sitzen am rechten Kartenrand, nicht direkt neben "Bearbeiten".
   margin-left:auto schiebt sie dorthin, ohne eine zusaetzliche Spalte oder
   absolute Positionierung - die Zeile bleibt damit umbruchfaehig. */
.xgld-cc-del {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.xgld-cc-del-confirm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* WICHTIG: Diese Regel muss die display-Angabe der Bedienelemente weiter
   unten schlagen. Die Knopfregel .xgld-cc-addr-card .xgld-account2-address-delete
   setzt display:inline-flex und wiegt (0,2,0) - ein blosses
   .xgld-cc-del-toggle[hidden] (ebenfalls (0,2,0)) verliert bei Gleichstand,
   weil es frueher steht. Deshalb hier mit Kartenkontext (0,3,0). Ohne das
   blieb der Papierkorb neben x und Haken sichtbar. */
.xgld-cc-addr-card .xgld-cc-del-confirm[hidden],
.xgld-cc-addr-card .xgld-cc-del-toggle[hidden] {
    display: none;
}

/* Papierkorb und Bestaetigungspaar sind gleich hoch, damit beim Umschalten
   nichts springt. */
.xgld-cc-addr-card .xgld-account2-address-delete,
.xgld-cc-addr-card .xgld-account2-address-cancel,
.xgld-cc-addr-card .xgld-account2-address-confirm {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    margin: 0;
    padding: 4px;
    height: 25px;
    width: 25px;
    box-sizing: border-box;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* x bleibt neutral-blaugrau, der Haken ist dezent gold - er ist die
   veraendernde Aktion, aber kein Hauptknopf: keine Flaeche, kein Leuchten. */
.xgld-cc-addr-card .xgld-account2-address-cancel {
    color: #8FA3B3;
}

.xgld-cc-addr-card .xgld-account2-address-cancel:hover {
    color: #EDEDED;
    background-color: rgba(143, 163, 179, 0.12);
}

.xgld-cc-addr-card .xgld-account2-address-confirm {
    color: #D5A137;
}

.xgld-cc-addr-card .xgld-account2-address-confirm:hover {
    color: #E9BE6D;
    background-color: rgba(213, 161, 55, 0.12);
}

.xgld-cc-addr-card .xgld-account2-address-confirm[disabled] {
    opacity: 0.5;
    cursor: default;
}

/* Meldung nach dem AJAX-Loeschen - gleiche Optik wie die serverseitige. */
.xgld-cc-ajax-notice {
    max-width: 100%;
}
/* ===== XGLD CART/ARROW/CARDS/DELETE HOTFIX - 2026-08-14 END ===== */

/* ===== XGLD RESPONSIVE VIEWPORT PASS - 2026-08-17 START =================
   URSACHE, die dieser Block behebt
   Header und Kursleiste tragen ihr komplettes Layout in style-Attributen in
   header.php. Der <header> ist eine einzeilige Flexbox (flex-wrap: nowrap),
   seine Kinder tragen flex-shrink:0 und feste Breiten. Seine intrinsische
   Mindestbreite ist dadurch exakt 1095px:

     40 (padding) + 190 (Logo) + 60 (margin) + 300 (Suche, min-width:300px,
     flex-shrink:0) + 196 (Sicherheitsblock, flex-shrink:0) + 0 ("Fragen?",
     schrumpft korrekt) + 241 (Konto-Gruppe, flex-shrink:0) + 20 + 48 (DE|EN,
     flex-shrink:0) + 40 (padding) = 1095

   Gemessen am 17.08.2026: document.scrollWidth war auf ALLEN sechs Seiten und
   bei JEDER Breite unter 1280px konstant 1095px - bis zu 775px Ueberbreite bei
   320px Viewport. Die Kursleiste ist mit rund 991px die zweite, bis dahin
   verdeckte Ursache.

   Kein overflow-x:hidden. Ueberbreite wird nicht kaschiert, sondern durch
   echtes Umbrechen aufgeloest.

   WARUM !important
   Die Desktop-Werte stehen als Inline-Styles im Markup und schlagen jede
   Stylesheet-Regel. Genau die Eigenschaften, die unterhalb des Breakpoints
   anders sein muessen, werden deshalb ueberschrieben - nicht mehr. Die
   Inline-Styles selbst wurden NICHT angefasst, damit ab 1200px alles
   pixelgleich bleibt.

   KLASSEN-HOOKS (in header.php ergaenzt, ohne Stilaenderung)
     .xgld-header .xgld-hd-logo .xgld-hd-search .xgld-hd-trust
     .xgld-hd-contact .xgld-hd-account .xgld-hd-lang
     .xgld-pricebar .xgld-pb-item

   BREAKPOINTS
     >= 1200px   unveraendert - dieser Block enthaelt dafuer keine Regel
     900-1199px  Header 2 Zeilen, Suche auf eigener Zeile
     600-899px   Header 3 Zeilen
     <= 599px    Mobile, gestapelt

   Rollback: .xgld-responsive-viewport-pass-20260817/rollback.sh */

/* ---- Gilt in allen Bereichen unterhalb 1200px --------------------------- */
@media (max-width: 1199px) {
    /* Der eigentliche Kern: die Kopfzeile darf umbrechen. Ohne das bleibt
       jedes Kind mit flex-shrink:0 in derselben Zeile stehen und schiebt das
       Dokument auf 1095px auf. */
    .xgld-header { flex-wrap: wrap !important; }

    /* Die Suche traegt min-width:300px UND flex-shrink:0 - der groesste
       einzelne Beitrag zur Mindestbreite. Sie bekommt eine eigene Zeile
       (order:10 sortiert sie hinter alle anderen Kinder). */
    .xgld-hd-search {
        order: 10;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-top: 12px;
    }
    /* Suchfeld und sein Wrapper stehen inline auf festen 300px. */
    .xgld-hd-search form > div { width: 100% !important; max-width: 460px; }
    #xgld-search-input { width: 100% !important; }

    /* Diese beiden duerfen ihren Inhalt umbrechen statt die Zeile zu sprengen. */
    .xgld-hd-trust, .xgld-hd-contact { min-width: 0 !important; }

    /* Kursleiste: zweite Ursache. Sobald die fuenf Werte nicht mehr in eine
       Zeile passen, wird umbrochen statt ueberzulaufen. space-between wuerde
       eine halbvolle zweite Zeile auseinanderziehen - deshalb zentriert. */
    .xgld-pricebar {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px 30px;
    }
    .xgld-pb-item { flex: 0 0 auto; }

    /* Tooltips bleiben 280px breit, solange sie hineinpassen, und werden erst
       auf sehr schmalen Viewports begrenzt. Das horizontale Clampen macht
       xgldClampTooltip() in header.php - CSS allein kann das nicht. */
    .xgld-tooltip { max-width: calc(100vw - 20px); }
}

/* ---- 900-1199px: zwei Zeilen ------------------------------------------- */
@media (min-width: 900px) and (max-width: 1199px) {
    /* Etwas weniger Seitenluft, damit Logo, Sicherheitsblock, "Fragen?",
       Konto-Gruppe und DE|EN gemeinsam in die erste Zeile passen. */
    .xgld-header { padding-left: 28px !important; padding-right: 28px !important; }
    .xgld-pricebar { padding-left: 28px !important; padding-right: 28px !important; }
    /* Zeile 1: Logo | Sicherheitsblock | Fragen? | Konto-Gruppe | DE|EN
       Zeile 2: Suche
       Konto-Gruppe und DE|EN bleiben nebeneinander und werden nicht getrennt. */
    .xgld-hd-trust { flex: 1 1 200px !important; }
}

/* ---- 600-899px: drei Zeilen -------------------------------------------- */
@media (min-width: 600px) and (max-width: 899px) {
    .xgld-header { padding: 28px 24px 0 !important; }
    .xgld-pricebar { padding-left: 24px !important; padding-right: 24px !important; }

    /* Das Logo ist 190px hoch und haengt per negativer Margin in die Zeile.
       Auf drei Zeilen wirkt das ueberdimensioniert, deshalb kompakter - und
       die Margins muessen mitskalieren, weil sie auf 190px abgestimmt waren. */
    .xgld-hd-logo {
        margin-top: -40px !important;
        margin-bottom: -20px !important;
        /* clip-path ist auf die 190px-Geometrie gerechnet (BTC-Hover-Hotfix).
           Bei kleinerem Logo wuerde es sichtbares Motiv abschneiden, und der
           Ueberhang in die Kursleiste existiert hier ohnehin nicht mehr. */
        clip-path: none !important;
    }
    .xgld-hd-logo img { height: 150px !important; }

    /* Zeile 1: Logo links, DE|EN rechts
       Zeile 2: Suche
       Zeile 3: Konto-Gruppe, darunter Sicherheitsblock und "Fragen?" */
    .xgld-hd-logo    { order: 0; }
    .xgld-hd-lang    { order: 1; margin-left: auto !important; align-self: center; }
    .xgld-hd-search  { order: 2; }
    .xgld-hd-account { order: 3; flex: 1 1 100% !important; justify-content: flex-start !important; margin-top: 4px; }
    .xgld-hd-trust   { order: 4; flex: 1 1 260px !important; margin-top: 8px; }
    .xgld-hd-contact { order: 5; flex: 1 1 240px !important; margin-top: 8px; }
}

/* ---- bis 599px: Mobile, gestapelt -------------------------------------- */
@media (max-width: 599px) {
    /* 40px Seitenpolsterung liessen bei 320px Viewport nur 240px Inhalt -
       weniger als die Konto-Gruppe (241px) breit ist. */
    .xgld-header { padding: 22px 16px 0 !important; }
    .xgld-pricebar { padding: 12px 16px !important; gap: 10px 20px; }

    .xgld-hd-logo {
        margin-top: -28px !important;
        margin-bottom: -14px !important;
        clip-path: none !important;
    }
    .xgld-hd-logo img { height: 118px !important; }

    /* Alles untereinander. Nichts wird ausgeblendet. */
    .xgld-hd-logo    { order: 0; }
    .xgld-hd-lang    { order: 1; margin-left: auto !important; align-self: center; margin-top: 0 !important; }
    .xgld-hd-search  { order: 2; margin-top: 8px; }
    .xgld-hd-search form > div { max-width: none; }
    /* Konto/Merkzettel/Warenkorb bleiben eine Gruppe und verteilen sich ueber
       die Breite - grosszuegige Touch-Ziele statt gedraengter Icons. */
    .xgld-hd-account {
        order: 3;
        flex: 1 1 100% !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-top: 14px;
    }
    .xgld-hd-account > a { flex: 1 1 0; min-height: 44px; justify-content: center; }
    .xgld-hd-trust   { order: 4; flex: 1 1 100% !important; margin-top: 14px; }
    .xgld-hd-contact { order: 5; flex: 1 1 100% !important; margin-top: 12px; }

    /* Diese Zeile traegt inline white-space:nowrap und waere sonst breiter
       als der Viewport. */
    .xgld-hd-searchhints { white-space: normal !important; }

    /* Gemessen bei 390px: die beiden Sprachlinks waren nur 15x16px gross -
       zu klein zum sicheren Antippen. Die Trefferflaeche waechst ueber
       padding auf 44px Hoehe; Schriftgroesse, Farbe und Abstand der beiden
       Woerter zueinander bleiben unveraendert, die negative Margin haelt den
       Platzbedarf der Zeile konstant. */
    .xgld-hd-lang a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 34px;
        margin-top: -14px;
        margin-bottom: -14px;
    }
}

/* ---- bis 600px: Kursleiste ausblenden -----------------------------------
   Bewusste Produktentscheidung, kein Bugfix: auf Telefonen kostet die Leiste
   fuenf Zeilen (164px) ueber dem eigentlichen Inhalt.

   Ausschliesslich display. Das Markup bleibt vollstaendig im DOM, die
   Kursdaten werden weiterhin geholt, alle fuenf Werte und ihre Tooltip-Karten
   werden weiterhin aufgebaut, xgld_hide_price_ticker() und die
   Besucherwaehrung sind unberuehrt. Es wird nichts entfernt und nichts an der
   Kurslogik geaendert.

   Der Toast braucht dafuer keine Anpassung: visibleTickerRect() in
   xgld-product-template.php prueft getComputedStyle().display und
   ueberspringt die Leiste dadurch von selbst - der Toast faellt auf seine
   bestehende kompakte Position TOAST_MIN = 14px zurueck. Genau derselbe Pfad
   greift auf Warenkorb und Kasse, wo die Leiste gar nicht erst gerendert wird.

   Grenze bewusst max-width:600px, also einschliesslich 600px. Bei exakt
   600px greift auch der 600-899px-Block darueber; weil dieser Block spaeter
   in der Datei steht, gewinnt display:none. Ab 601px ist alles unveraendert.
   !important, weil display:flex als Inline-Style im Markup steht. */
@media (max-width: 600px) {
    #xgld-price-bar { display: none !important; }
}

/* ---- Konto: der Zweispalter kollabiert nie ------------------------------
   Dritte, unabhaengige Overflow-Ursache, sichtbar erst nachdem Header und
   Kursleiste behoben waren. .xgld-account2 ist ein Grid aus fester Sidebar
   und Inhalt: 210px, ab 1100px dann 160px - aber es gibt keine Stufe, die
   auf eine Spalte zurueckfaellt. Gemessen am 17.08.2026 bei 320px Viewport:
   Sidebar 160 + gap 40 lassen dem Inhalt genau 96px. Der Link
   "Kontodaten bearbeiten" ist mit white-space:nowrap 163px breit und ragt
   dadurch 55px aus dem Fenster (EN 33px, bei 360px noch 15px).

   Das Theme hat den Umbau auf eine Spalte bei 860px bereits zur Haelfte
   angelegt: dort wird die Kontonavigation waagerecht gestellt und der
   Goldstrich wandert unter das aktive Wort - beides ergibt nur oberhalb des
   Inhalts Sinn. Ergaenzt wird deshalb genau die fehlende Zeile, an derselben
   Grenze. Kein !important noetig: dieser Block steht spaeter in der Datei
   und hat dieselbe Spezifitaet. Der nowrap-Link bleibt unangetastet - in
   voller Breite hat er Platz. */
@media (max-width: 860px) {
    .xgld-account2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}
/* ===== XGLD RESPONSIVE VIEWPORT PASS - 2026-08-17 END ===== */

/* ===== XGLD MOBILE PRODUCT CONTROLS - 2026-08-17 START ==================
   ZWECK
   Nur die Bedienbarkeit der Produktseite auf Telefonen. Kein Redesign, keine
   Desktop-Aenderung, keine Funktionsaenderung. Alles greift ausschliesslich
   bis 600px und ausschliesslich auf Elemente der Produktseite.

   GEMESSENER IST-ZUSTAND (17.08.2026, Touch-Emulation, Maple Leaf und
   Kruegerrand, DE und EN, 600/480/430/414/390/375/360/320px)

     Gewichtsbuttons   33px hoch, Breite 70 -> 67,3 -> 63,5 -> 53,5px
     Minus / Plus      35px hoch; Breite 29 -> 28,8 -> 23,3 -> 19,9 -> 16,3px
     Mengenanzeige     30 x 52px
     "In den Warenkorb" 48px hoch, Breite 157px

   Der eigentliche Engpass sind NICHT die 33px der Gewichtsbuttons, sondern
   die Breite von Minus und Plus: .xgld-qty-btn traegt flex-shrink:1 und
   schrumpft auf schmalen Fenstern von 29px auf 16,3px zusammen. Ein 16px
   breites Tap-Ziel ist der schlechteste Wert der ganzen Seite.

   Der Add-to-Cart-Button ist mit 48px bereits komfortabel und wird in Hoehe,
   Farbe und Typografie NICHT angefasst.

   WAS HIER PASSIERT
   1. Gewichtsbuttons bekommen 44px Mindesthoehe. Ueber min-height, nicht ueber
      padding - Schriftgroesse, Farben, Border, Radius und der goldene
      Active-State bleiben damit unveraendert. Die bestehende Breitenlogik
      (flex:1 1 0; max-width:70px) bleibt ebenfalls unangetastet.
   2. Minus und Plus werden 40 x 44px und schrumpfen nicht mehr mit
      (flex:0 0 auto). Das ist der Kern dieses Passes. Zur Breite von 40px
      statt 44px siehe die Begruendung an der Regel selbst.
   3. form.cart darf umbrechen. Die Mengensteuerung wird dadurch breiter
      (40+52+40 = 134px statt 87px), was zusammen mit gap und Button nicht
      mehr ueberall in eine Zeile passt. flex-wrap:wrap stapelt NUR dann,
      wenn der Platz wirklich fehlt - auf breiteren Telefonen bleibt die
      Zeile kompakt nebeneinander. Es wird nichts pauschal gestapelt.
      Gemessen bleibt die Zeile bei 600/480/430px in beiden Sprachen und bei
      414/390px auf Englisch einzeilig; gestapelt wird ab 390px auf Deutsch
      bzw. ab 375px auf Englisch, wo der Platz objektiv fehlt.
   4. Auf Touch-Geraeten wird der Hover-Zustand neutralisiert. Nachgemessen:
      nach einem Tap trifft :hover den getippten Button weiterhin, der Zustand
      bleibt also haengen. Die Regel setzt exakt die Basiswerte der
      bestehenden Regeln zurueck und gilt nur bei (hover: none) - auf dem
      Desktop mit echtem Zeiger aendert sich dadurch nichts.
   5. user-select:none auf den Bedienelementen, damit beim Tippen kein Text
      markiert wird.

   NICHT angefasst: Mengenlogik, Variantenlogik, Add-to-Cart-JS, AJAX, Toast,
   Preise, WooCommerce, Galerie, Beschreibung, Produktdaten, Kursleiste,
   Header - und alles ab 601px.

   Rollback: .xgld-mobile-product-controls-20260817/rollback.sh */

@media (max-width: 600px) {
    /* 1. Gewichts-/Variantenbuttons: 33px -> 44px Tap-Hoehe.
          flex-Zentrierung, damit die Beschriftung mittig sitzt, ohne dass
          padding oder Schriftgroesse angefasst werden muessen. */
    .xgld-size-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-user-select: none;
        user-select: none;
    }

    /* 2. Minus und Plus: 16,3-29 x 35px -> 40 x 44px, nicht mehr schrumpfend.
          Volle 44px in der Hoehe; in der Breite bewusst 40px statt 44px.
          Gemessen: mit 44px-Knoepfen braucht die Bedienzeile 345px, bei 390px
          Viewport stehen aber nur 314px zur Verfuegung - allein die deutsche
          Beschriftung "In den Warenkorb" ist 187px breit. Mit 40px bleiben
          430px (DE und EN) und 390px (EN) einzeilig, ohne irgendetwas zu
          quetschen. 40 x 44px ist als Tap-Ziel weiterhin komfortabel und in
          der Breite mehr als doppelt so gross wie die 16,3px vorher. */
    .woocommerce div.product form.cart .quantity .xgld-qty-btn,
    .xgld-qty-btn {
        flex: 0 0 auto;
        width: 40px;
        height: 44px;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Mengenanzeige bleibt in Breite, Schrift und Farbe unveraendert und
       wird in der jetzt 44px hohen Zeile lediglich mittig ausgerichtet. */
    .woocommerce div.product form.cart .quantity {
        align-items: center;
    }

    /* 3. Bedienzeile darf umbrechen, wenn der Platz fehlt - sonst nicht. */
    .woocommerce div.product form.cart {
        flex-wrap: wrap;
    }
    .woocommerce div.product form.cart .quantity {
        flex: 0 0 auto;
    }
}

/* 4. Nur Touch-Geraete: haengenden Hover-Zustand zuruecksetzen.
      Die Werte sind identisch mit den Basisregeln weiter oben in dieser
      Datei (.xgld-size-btn / .xgld-qty-btn), es wird also nichts neu
      eingefaerbt - der Hover wird lediglich wirkungslos. */
@media (max-width: 600px) and (hover: none) {
    .xgld-size-btn:hover:not(.active) {
        border-color: #24384A;
        color: #8FA3B3;
    }
    .xgld-qty-btn:hover {
        color: #8FA3B3;
    }
}
/* ===== XGLD MOBILE PRODUCT CONTROLS - 2026-08-17 END ===== */

/* ===== XGLD EDITORIAL INDEX V4 - 2026-08-18 START ======================
   Ein Inhaltsverzeichnis, kein Menue. Markup und Linkziele: functions.php,
   Block gleichen Namens. V1, V2 und V3 sind restlos entfernt.

   TYPOGRAFIE - gemessen am Bestand, nicht uebernommen
   Der Shop setzt in Inter; die Ueberschrift "Shop" ist 32px/700 in #EDEDED.
   Dagegen braucht der Index links ein ruhiges Gegengewicht: die Ziffer steht
   deshalb bei 24px, aber in #1C2E3F - der Farbe, die im Theme sonst Rahmen
   und Linien traegt. Dadurch liest sie sich als Struktur, fast wie gepraegt,
   und konkurriert nicht mit der Ueberschrift. Erst im aktuellen Abschnitt
   wird sie golden.

   Keine Kachel, kein Rahmen, kein Balken, keine Flaeche, kein Icon, keine
   Zahl-als-Zaehler. Der Zustand liegt ausschliesslich in Farbe und Gewicht.

   AUSRICHTUNG
   Gemessen: #primary beginnt bei y=210, die Ueberschrift "Shop" bei y=282 -
   der Breadcrumb steht davor. Die 72px Vorlauf setzen die erste Ziffer auf
   die Hoehe der Ueberschrift, damit links und rechts ein Layout ergeben.

   Rollback: .xgld-shop-navigation-v4-20260818/rollback.sh */

.xgld-shop-layout {
    display: grid;
    /* Polish 18.08., gemessen: der laengste Text im Index braucht 145px
       (Unterzeilen, in DE wie EN), der breiteste Titel 138px. Die alte
       210px-Spalte liess damit 65px ungenutzt - der optische Abstand zum
       Inhalt betrug dadurch 113px statt der eingestellten 48px. 176px geben
       31px Reserve gegen Umbrueche; zusammen mit 44px Gap sinkt der optische
       Abstand auf rund 75px, ohne dass es eng wirkt. */
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 44px;
    padding: 0 40px;
    align-items: start;
}

.xgld-shop-layout > #primary {
    min-width: 0;
}

/* ul.products bringt selbst padding:0 40px mit; im Shop-Layout zaehlt nur
   noch der Rand des Grids. Die Karten bleiben unangetastet. */
.xgld-shop-layout ul.products {
    padding-left: 0;
    padding-right: 0;
}

.xgld-idx {
    /* siehe Blockkopf: setzt die erste Ziffer auf die Hoehe von "Shop" */
    padding-top: 72px;
}

/* --- Ein Abschnitt ------------------------------------------------------- */
.xgld-idx-eintrag {
    display: block;
    margin-bottom: 34px;
    text-decoration: none;
}

.xgld-idx-eintrag:last-child {
    margin-bottom: 0;
}

.xgld-idx-nr {
    display: block;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    /* Polish 18.08.: von #1C2E3F auf #24384A (rund 25% heller) - die Ziffern
       der inaktiven Abschnitte wirkten vorher fast deaktiviert. Weiterhin ein
       Bestandston des Themes und deutlich unter der goldenen 01. */
    color: #24384A;
    transition: color 0.16s ease;
}

.xgld-idx-titel {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* Polish 18.08.: von #8FA3B3 auf #A5B8C6 (rund 15% heller). */
    color: #A5B8C6;
    transition: color 0.16s ease;
}

.xgld-idx-sub {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    /* Polish 18.08.: von #5C7185 auf #6E8497 (rund 20% heller). Nur die
       Lesbarkeit steigt, die Schriftgroesse bleibt unveraendert. */
    color: #6E8497;
    transition: color 0.16s ease;
}

/* Aktueller Abschnitt: Ziffer wird gold, Titel hell. Sonst nichts. */
.xgld-idx-eintrag.is-aktuell .xgld-idx-nr {
    color: #D5A137;
}

.xgld-idx-eintrag.is-aktuell .xgld-idx-titel {
    color: #F5F5F5;
}

/* Hover: nur Helligkeit, keine Bewegung, keine Flaeche. */
a.xgld-idx-eintrag:hover .xgld-idx-titel {
    color: #EDEDED;
}

a.xgld-idx-eintrag:hover .xgld-idx-nr {
    /* eine Stufe ueber dem neuen Ruhezustand, sonst waere Hover wirkungslos */
    color: #2A3F52;
}

a.xgld-idx-eintrag:hover .xgld-idx-sub {
    color: #7C8FA0;
}

a.xgld-idx-eintrag.is-aktuell:hover .xgld-idx-nr {
    color: #D5A137;
}

a.xgld-idx-eintrag:focus-visible {
    outline: 1px solid #24384A;
    outline-offset: 6px;
}

/* Abschnitte ohne Ziel bleiben sichtbar, wirken aber ruhiger.
   Polish 18.08.: Titel von #7C8FA0 auf #8FA3B3 (rund 16% heller) - eine
   Stufe unter den verlinkten Abschnitten, aber nicht mehr wie deaktiviert.
   Die Unterzeile "Demnaechst" bleibt bewusst auf dem alten, dunkleren Wert:
   sie ist ein Status, keine Information zum Lesen. */
.xgld-idx-eintrag--offen .xgld-idx-titel {
    color: #8FA3B3;
}

.xgld-idx-eintrag--offen .xgld-idx-sub {
    color: #5C7185;
}

/* --- Service: leiser und abgesetzt --------------------------------------- */
.xgld-idx-zaesur {
    height: 1px;
    margin: 0 0 30px;
    background: #16232F;
}

.xgld-idx-eintrag--service .xgld-idx-nr {
    font-size: 18px;
    margin-bottom: 8px;
}

.xgld-idx-eintrag--service .xgld-idx-titel {
    font-size: 13.5px;
    color: #7C8FA0;
}

/* Service bleibt der leiseste Bereich - die Aufhellung der Unterzeilen
   gilt hier bewusst nicht. */
.xgld-idx-eintrag--service .xgld-idx-sub {
    font-size: 12px;
    color: #5C7185;
}

/* Ohne Ziffer faellt der obere Abstand des Abschnitts weg; die Zaesur allein
   traegt jetzt die Trennung. */
.xgld-idx-eintrag--service .xgld-idx-titel {
    margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    .xgld-idx-nr, .xgld-idx-titel, .xgld-idx-sub { transition: none; }
}

/* ---- 769-1024px: schmalere Fassung, Index bleibt links ------------------- */
/* Geprueft: 190px Index + 40px Abstand lassen bei 1024px noch 714px fuer den
   Inhalt - genug fuer zwei Produktspalten. Kein Grund auf die kompakte
   Fassung auszuweichen. */
@media (min-width: 769px) and (max-width: 1024px) {
    .xgld-shop-layout {
        grid-template-columns: 168px minmax(0, 1fr);
        gap: 36px;
    }

    .xgld-idx-nr { font-size: 21px; }
    .xgld-idx-titel { font-size: 15px; }
    .xgld-idx-eintrag { margin-bottom: 30px; }
}

/* ---- bis 768px: derselbe Index, kompakt ueber dem Inhalt ----------------- */
/* Bewusst kein Trigger und kein Aufklappen: der Index bleibt vollstaendig
   sichtbar, nur zweispaltig und ohne den Vorlauf. Die drei typografischen
   Ebenen bleiben erhalten, damit die Gestaltung dieselbe bleibt. */
@media (max-width: 768px) {
    .xgld-shop-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
        padding: 0 16px;
    }

    .xgld-idx {
        padding-top: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 24px;
        align-items: start;
    }

    .xgld-idx-eintrag {
        margin-bottom: 0;
    }

    .xgld-idx-nr {
        margin-bottom: 7px;
        font-size: 20px;
    }

    .xgld-idx-titel {
        font-size: 14px;
        letter-spacing: 0.05em;
    }

    .xgld-idx-sub {
        font-size: 12px;
    }

    /* Die Zaesur trennt hier nicht senkrecht, sondern laeuft ueber beide
       Spalten - Service bleibt dadurch auch hier abgesetzt. */
    .xgld-idx-zaesur {
        grid-column: 1 / -1;
        margin: 4px 0 0;
    }

    .xgld-idx-eintrag--service .xgld-idx-nr { font-size: 17px; }
    .xgld-idx-eintrag--service .xgld-idx-titel { font-size: 13px; }
}

/* ---- sehr schmal: eine Spalte ------------------------------------------- */
@media (max-width: 359px) {
    .xgld-idx {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
}

/* ---- Startseite ---------------------------------------------------------
   Derselbe Index, dieselben Masse, dieselben Farben - nur zwei Umstaende
   unterscheiden die Startseite vom Shop-Archiv:

     1. Das Seitenpolster von 40px traegt dort bereits die <section>. Ohne
        diese Zeile kaeme das des Layout-Grids obendrauf.
     2. Es gibt keinen Breadcrumb. Der 72px-Vorlauf, der im Archiv die erste
        Ziffer auf die Hoehe der Ueberschrift setzt, wuerde sie hier um genau
        diesen Betrag zu tief absetzen.

   Es wird nichts neu definiert, nur kontextbedingt zurueckgenommen. */
.xgld-shop-layout--start {
    padding: 0;
}

.xgld-shop-layout--start .xgld-idx {
    padding-top: 0;
}

.xgld-start-inhalt {
    min-width: 0;
}

/* Gemessen stand SERVICE 30px unter der Zaesur und las sich dadurch schon
   als naechster Abschnitt statt als Fuss der Navigation.

   16px sind kein freier Wert: die Vertrauenszeile rechts haengt mit
   padding-top 16px unter ihrer Haarlinie, und beide Linien liegen auf
   derselben Hoehe. Mit denselben 16px steht SERVICE damit exakt auf der
   Zeile von ANLAGEGOLD / VERSICHERTER VERSAND / BITCOIN-ZAHLUNG. Die Linie
   selbst bleibt, wo sie ist - sie haengt am Abstand ueber sich, nicht an
   dem darunter.

   Das padding-bottom faengt auf, was der Spalte dadurch fehlt: 14px aus dem
   kleineren Abstand, 2.87px aus der kleiner gesetzten SERVICE-Zeile. Ohne
   das waere die Navigation kuerzer als der Hero-Inhalt, und Sektionshoehe
   und Beginn von "Ausgewaehlte Produkte" wuerden nachruecken.

   Nur ab 769px und nur auf der Startseite: mobil steht die Navigation als
   Raster ueber dem Hero, der Abstand kommt dort aus der Zeilenluecke und
   nicht aus diesem Margin. Das Shop-Archiv bleibt unveraendert. */
@media (min-width: 769px) {
    .xgld-shop-layout--start .xgld-idx-zaesur {
        margin-bottom: 16px;
    }

    .xgld-shop-layout--start .xgld-idx {
        padding-bottom: 16.87px;
    }
}

/* SERVICE stand mit 13.5px/500 eine Groessenklasse ueber den Begriffen der
   Vertrauenszeile rechts (11.5px/400/0.13em) und wirkte dadurch schwerer als
   der Bereich, den es benennt. Hier steht es beiden gegenueber - deshalb
   uebernimmt es genau deren Werte. Farbe und Unterzeile bleiben, wie die
   Hierarchie sie vorgibt.

   Nur auf der Startseite: im Shop-Archiv gibt es keine Vertrauenszeile,
   gegen die SERVICE sich messen muesste. */
.xgld-shop-layout--start .xgld-idx-eintrag--service .xgld-idx-titel {
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.13em;
    line-height: normal;
}

@media (max-width: 768px) {
    /* Die <section> polstert hier bereits seitlich; der Grid bleibt bei 0. */
    .xgld-shop-layout--start {
        padding: 0;
    }
}

/* ===== XGLD EDITORIAL INDEX V4 - 2026-08-18 END ===== */

/* ===== XGLD HOME/SHOP STRUCTURE V1 - 2026-08-18 START ==================
   Gestaltung fuer den Startseiten-Einstieg und das aufgewertete Shop-Archiv.
   Markup und Hooks: functions.php und front-page.php, Bloecke gleichen Namens.
   Die Editorial Navigation V4 ist eingefroren und wird hier nicht angefasst.

   Farben und Masse wie im uebrigen Theme:
       #0E151C Flaeche  #101E2C Panel  #1C2E3F Rahmen  #16232F Haarlinie
       #F5F5F5 / #EDEDED / #8FA3B3 / #7C8FA0 / #5C7185  Textstufen
       #D5A137 Gold - ausschliesslich Wertmarkierung    6px Hausradius

   Rollback: .xgld-home-shop-structure-v1-20260818/rollback.sh */

/* ---------- Startseite: Ausgewaehlte Produkte --------------------------- */
/* Der Abschnitt trug einen border-top ueber die volle Fensterbreite - die
   einzige Linie der Startseite, die von Fensterkante zu Fensterkante lief.
   Sie ist ersatzlos entfernt: keine Ersatzlinie, kein Verlauf, kein
   Schatten. Getrennt wird hier durch Weissraum, wie ueberall sonst auf der
   Seite auch.

   Das margin-top von 1px ist der einzige Rest davon und kein freier Wert:
   ein Rand traegt seine Staerke zur Hoehe des Kastens bei. Ohne diesen einen
   Pixel rueckte alles ab hier - Ueberschrift, Produktraster, Fusszeile - um
   genau 1px nach oben. Die Linie verschwindet, die Abstaende bleiben.

   Es steht bewusst am margin und nicht am padding: das padding-top dieses
   Abschnitts kommt aus .xgld-start-sektion (60px, mobil 40px) und wird
   weiter unten in der Datei gesetzt - eine gleich spezifische Regel hier
   verliert dagegen. Am margin, das keine andere Regel anfasst, genuegt ein
   Wert fuer alle Breiten; nachgemessen an 1920/1440/1280/430/390/360. */
.xgld-start-auswahl {
    border-top: 0;
    margin-top: 1px;
}

.xgld-auswahl-titel {
    margin: 0 0 28px;
    padding-top: 60px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7C8FA0;
}

.xgld-auswahl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}

/* ---------- Shop-Archiv -------------------------------------------------- */
.xgld-shop-subline {
    margin: -12px 0 0;
    font-size: 15px;
    color: #8FA3B3;
}

/* Zeile ueber dem Raster: Sortierung rechts, ohne die alte Float-Anmutung. */
.woocommerce .xgld-shop-layout .woocommerce-notices-wrapper + .xgld-sortierung,
.xgld-shop-layout .xgld-sortierung {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    float: none;
    margin: 26px 0 22px;
}

.xgld-sortierung-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5C7185;
}

/* Das native Formular und sein <select> bleiben unveraendert im Markup -
   hier wird nur die Erscheinung ersetzt. */
.xgld-sortierung form.woocommerce-ordering {
    margin: 0;
}

.xgld-sortierung select.orderby {
    -webkit-appearance: none;
    appearance: none;
    min-width: 190px;
    padding: 9px 34px 9px 13px;
    background-color: #0E151C;
    /* Pfeil als Grafik, damit er in jeder Sprache und auf jedem System
       identisch aussieht - der native Pfeil laesst sich nicht gestalten. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238FA3B3' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid #24384A;
    border-radius: 6px;
    color: #EDEDED;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.3;
    cursor: pointer;
}

.xgld-sortierung select.orderby:focus {
    outline: none;
    border-color: #3C5468;
}

/* Die Optionsliste selbst zeichnet das Betriebssystem; ein dunkler Grund
   sorgt wenigstens dort fuer Konsistenz, wo der Browser ihn beachtet. */
.xgld-sortierung select.orderby option {
    background: #0E151C;
    color: #EDEDED;
}

/* ---------- Produktraster ------------------------------------------------
   WooCommerce setzt an ul.products die alten Clearfix-Pseudoelemente
   (content:" "; display:table). In einem Grid werden daraus echte Rasterfelder,
   die je eine volle Spalte belegen - gemessen: die Produkte begannen dadurch
   erst in Spalte 2 und die Karten schrumpften auf 54px Breite. Deshalb hier
   ausgeblendet; sie haben in einem Grid keine Funktion. */
.xgld-shop-layout ul.products::before,
.xgld-shop-layout ul.products::after {
    display: none;
}

.xgld-shop-layout ul.products {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 40px 32px;
    /* Zwei Produkte sollen nicht ueber die volle Breite auseinandergezogen
       werden; das Raster waechst spaeter von selbst weiter. */
    max-width: 1120px;
}

.xgld-shop-layout ul.products li.product {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: auto;
    float: none;
}

/* Das Bild ist das Zentrum der Karte: eigener ruhiger Grund, feste Hoehe,
   Seitenverhaeltnis bleibt erhalten. Die Fotos selbst sind unveraendert. */
.xgld-shop-layout ul.products li.product a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.xgld-shop-layout ul.products li.product img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    background: #0B1219;
    border: 1px solid #16232F;
    border-radius: 6px;
    padding: 26px;
    box-sizing: border-box;
    transition: border-color 0.16s ease;
}

.xgld-shop-layout ul.products li.product:hover img {
    border-color: #24384A;
}

.xgld-karte-typ {
    display: block;
    margin: 18px 0 5px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #5C7185;
}

.xgld-shop-layout ul.products li.product .woocommerce-loop-product__title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.25;
    color: #F5F5F5;
}

.xgld-shop-layout ul.products li.product .price {
    display: block;
    margin: 0;
    font-size: 14.5px;
    color: #D5A137;
}

.xgld-karte-spanne {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: #7C8FA0;
}

/* Die Aktion sitzt am unteren Rand der Karte, damit unterschiedlich lange
   Titel die Reihe nicht verspringen lassen. */
/* Weiter oben in dieser Datei steht
       ul.products li.product a.button.add_to_cart_button { border: 1px solid #D5A137 !important }
   mit der Spezifitaet (0,4,3). Ein Selektor mit (0,4,2) verliert dagegen auch
   dann, wenn er spaeter steht - deshalb hier bewusst dieselbe Elementkette
   plus die Layoutklasse, also (0,5,3). */
.xgld-shop-layout ul.products li.product a.button,
.xgld-shop-layout ul.products li.product a.button.add_to_cart_button {
    align-self: flex-start;
    margin-top: auto;
    padding: 16px 0 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #8FA3B3 !important;
    transition: color 0.16s ease;
}

.xgld-shop-layout ul.products li.product a.button::after {
    content: " →";
    color: inherit;
}

.xgld-shop-layout ul.products li.product a.button:hover,
.xgld-shop-layout ul.products li.product a.button.add_to_cart_button:hover {
    color: #D5A137 !important;
}

/* ---------- Mobil -------------------------------------------------------- */
@media (max-width: 768px) {
    .xgld-start-sektion {
        padding: 40px 16px 64px;
    }

    .xgld-start-sektion:first-of-type {
        padding-bottom: 48px;
    }

                .xgld-auswahl-titel {
        padding-top: 44px;
        margin-bottom: 22px;
    }

    .xgld-auswahl-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 16px;
    }

    .xgld-shop-layout ul.products {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 28px 16px;
    }

    /* WooCommerce laedt unterhalb 768px woocommerce-smallscreen.css und setzt
       dort .woocommerce ul.products li.product auf width:48%;float:left - ein
       Rest aus der Float-Zeit. In einem Grid schrumpft die Karte dadurch auf
       die halbe Zellenbreite; gemessen: 83px statt 172px, das Bild entsprechend
       winzig. Die Selektoren hier tragen eine Klasse mehr und gewinnen dadurch
       ohne !important. */
    .woocommerce .xgld-shop-layout ul.products li.product {
        width: auto;
        float: none;
        margin: 0;
    }

    .woocommerce .xgld-shop-layout ul.products li.product img {
        height: 170px;
        padding: 16px;
    }

    .xgld-shop-layout ul.products li.product .woocommerce-loop-product__title {
        font-size: 15px;
    }

    .xgld-sortierung {
        justify-content: flex-start;
    }

    .xgld-sortierung select.orderby {
        min-width: 0;
        flex: 1 1 auto;
        min-height: 44px;
    }

    .xgld-shop-subline {
        font-size: 14px;
    }
}

@media (max-width: 400px) {
        .xgld-auswahl-grid,
    .xgld-shop-layout ul.products {
        grid-template-columns: minmax(0, 1fr);
    }

    .woocommerce .xgld-shop-layout ul.products li.product img {
        height: 210px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xgld-shop-layout ul.products li.product img,
    .xgld-shop-layout ul.products li.product .button {
        transition: none;
    }
}
/* ===== XGLD HOME/SHOP STRUCTURE V1 - 2026-08-18 END ===== */

/* ===== XGLD HOME HERO V2 - 2026-08-18 START ============================
   Ersetzt den Startseiten-Einstieg aus dem Strukturpass vollstaendig. Dessen
   Hero-Regeln (.xgld-hero, -titel, -zeile1/2, -intro, -cta, -pfeil, -facts
   samt Mobilfassungen) wurden aus dem V1-Block herausgeloest, nicht
   ueberschrieben - es liegt nichts uebereinander.

   Shop-Archiv, Produktraster, Sortierung und die Editorial Navigation V4
   sind in diesem Pass eingefroren und werden nicht angefasst.

   WAS SICH AENDERT UND WARUM
   Gemessen am 18.08.2026: der alte Einstieg war auf 620px begrenzt und nutzte
   bei 1920px nur 38% seines Contentbereichs - rechts blieb eine leere
   Haelfte. Die zweite Ueberschriftzeile stand in #8FA3B3, also in derselben
   Farbe wie die inaktiven Punkte der Navigation daneben, und las sich dadurch
   wie uebergrosser Menuetext.

   Jetzt: zwei Spalten (55/45), beide Ueberschriftzeilen hell, Blaugrau nur
   noch fuer echte Sekundaerinformation, und eine goldene Eyebrow als eigene
   Ebene zwischen Navigation und Ueberschrift.

   DIE RECHTE HAELFTE
   Ein echtes Produktbild aus dem Bestand, randlos und ohne Rahmen. Sein
   Hintergrund (#201D1A) ist heller und waermer als der Seitengrund (#090D12)
   und stuende sonst als sichtbarer Kasten im Layout; eine radiale Maske loest
   die Raender auf. Das Motiv reicht bis 91% der Bildbreite, die Maske deckt
   bis 82% voll und laeuft bis 97% aus - die Muenze bleibt unversehrt, das
   Asset selbst wird nicht veraendert.

   Rollback: .xgld-home-hero-v2-20260818/rollback.sh */

/* Der Einstieg traegt weniger Luft als zuvor, damit die Produktauswahl
   frueher beginnt. */
.xgld-start-sektion {
    padding: 60px 40px 100px;
}

.xgld-start-sektion:first-of-type {
    padding-top: 40px;
    padding-bottom: 32px;
}

/* --- Zweispaltige Komposition ------------------------------------------- */
/* Gemessen: ohne Begrenzung ist der Hero bei 1920px 1620px breit, Text und
   Bild stehen dann mit rund 580px Abstand voneinander - die Komposition
   zerfaellt. 1180px halten beide Haelften zusammen; darunter greift die
   Begrenzung ohnehin nicht. */
.xgld-hero2 {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: 52px;
    align-items: center;
    max-width: 1180px;
}

.xgld-hero2-text {
    max-width: 34em;
}

/* --- Eyebrow ------------------------------------------------------------- */
.xgld-hero2-eyebrow {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #D5A137;
}

/* --- Ueberschrift -------------------------------------------------------- */
.xgld-hero2-titel {
    margin: 0 0 16px;
    font-size: 46px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.022em;
}

.xgld-hero2-zeile1,
.xgld-hero2-zeile2 {
    display: block;
}

.xgld-hero2-zeile1 {
    color: #F5F5F5;
}

/* Beide Zeilen gehoeren zur Hauptbotschaft. Die zweite tritt nur ueber
   Gewicht und einen Hauch Helligkeit zurueck - nicht ueber das Blaugrau der
   Navigation. */
.xgld-hero2-zeile2 {
    color: #EDEDED;
    font-weight: 400;
}

/* --- Beschreibung: echte Sekundaerinformation, deshalb blaugrau ---------- */
.xgld-hero2-intro {
    margin: 0 0 22px;
    max-width: 46ch;
    font-size: 15.5px;
    line-height: 1.6;
    color: #8FA3B3;
}

/* --- Ein einziger Einstieg ---------------------------------------------- */
/* Ohne Unterkante: die 1px-Linie war 167px breit - so breit wie Text plus
   Pfeil - und stand als sichtbarer Strich unter dem Einstieg. Entfernt am
   18.08.2026.

   Das padding-bottom steigt von 7px auf 8px und faengt damit genau die
   Hoehe der entfallenen Linie auf; Unterkante des Elements, Abstand zur
   Vertrauenszeile und alle Positionen darunter bleiben unveraendert.

   Der Hover bleibt sichtbar: er lief ohnehin ueber die Textfarbe
   (#D5A137 -> #E9BE6D). Die zusaetzliche Randfarbe im Hover ist entfallen,
   weil es keinen Rand mehr gibt - sie waere toter Code. */
.xgld-hero2-cta {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 8px;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: #D5A137;
    text-decoration: none;
    transition: color 0.16s ease;
}

.xgld-hero2-cta:hover {
    color: #E9BE6D;
}

.xgld-hero2-pfeil {
    position: relative;
    width: 16px;
    height: 1px;
    background: currentColor;
    transition: transform 0.16s ease;
}

.xgld-hero2-pfeil::after {
    content: "";
    position: absolute;
    right: 0;
    top: -2.5px;
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}

.xgld-hero2-cta:hover .xgld-hero2-pfeil {
    transform: translateX(3px);
}

/* --- Vertrauenszeile als Abschluss des Textblocks ------------------------ */
/* Deutlich naeher am Inhalt als zuvor (44px -> 30px) und durch eine
   Haarlinie angebunden statt frei im Raum stehend.

   Die Linie ist bewusst KEIN border-top mehr. Links zeichnet
   .xgld-idx-zaesur ihre Haarlinie als eigenes Kaestchen mit height 1px und
   background; ein Rand ist ein anderer Malvorgang. Beide Linien liegen auf
   549.5px, also auf einer halben CSS-Pixelposition - und genau dort koennen
   Rand und Flaeche auf echter Hardware (GPU-Rasterung, Bildschirmzoom)
   unterschiedlich auf das Geraeteraster einrasten. Deshalb zeichnet jetzt
   auch rechts ein 1px hohes Kaestchen mit derselben Hintergrundfarbe: eine
   Technik, ein Rasterergebnis.

   padding-top steigt von 16px auf 17px und ersetzt exakt die Hoehe, die
   vorher der Rand beisteuerte. Kastenhoehe (31px), Zeilenposition der
   Begriffe (566.5px) und die Y-Achse der Linie bleiben unveraendert. */
.xgld-hero2-facts {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 9px 20px;
    margin: 24px 0 0;
    padding: 17px 0 0;
    border-top: 0;
    list-style: none;
}

.xgld-hero2-facts::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #16232F;
}

.xgld-hero2-facts li {
    font-size: 11.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #7C8FA0;
}

/* Die Haarlinie ueber der Vertrauenszeile lag gemessen 15.83px hoeher als
   die Zaesur ueber SERVICE in der Navigation links (1440px: 533.67 gegen
   549.50). Beide Linien haben keinen gemeinsamen Bezug - die Zaesur folgt
   dem Fluss der Navigationsspalte, die Vertrauenszeile haengt an einem
   Textblock, der im Hero vertikal zentriert ist.

   Deshalb wird hier verschoben und nicht umgerechnet: ein groesseres
   margin-top waere wirkungslos, weil es den Textblock verlaengert und die
   Zentrierung die Haelfte davon sofort wieder nach oben zieht.
   position/top verschiebt Linie und Zeile gemeinsam, ohne die Hoehe des
   Textblocks, die Hero-Hoehe oder irgendeine Position darueber anzufassen.

   Nur ab 1180px: erst dort steht die Beschreibung in beiden Sprachen
   zweizeilig und der Textblock hat seine 299.8px. Darunter haengt der
   Versatz an Umbruch und Sprache (gemessen 13.17 bis 52.33) - ein fester
   Wert waere dort falsch, deshalb bleibt es unterhalb wie bisher. */
@media (min-width: 1180px) {
    /* Der Versatz steckt bewusst in MARGINS und nicht mehr in top:
       ein Paint-Offset wird erst nach dem Layout-Runden aufgeschlagen und
       kann dadurch bei 125%/150%-Skalierung auf einem anderen Geraetepixel
       landen als die Zaesur links, die eine reine Layout-Position hat. Ueber
       Margins durchlaeuft die rechte Linie dieselbe Layout-Rundung wie die
       linke - gleiche Rasterphase auf jeder Skalierung.

       Die negative Untermarge am Textblock nimmt exakt zurueck, was die
       Obermarge der Zeile hinzufuegt. Die Aussenhoehe des Blocks bleibt
       damit unveraendert, die vertikale Zentrierung im Hero rechnet mit
       demselben Wert wie zuvor, und ueber der Zeile bewegt sich nichts. */
    .xgld-hero2-facts {
        margin-top: 39.83px;
    }

    .xgld-hero2-text {
        margin-bottom: -15.83px;
    }
}

/* --- Rechte Komposition -------------------------------------------------- */
.xgld-hero2-visual {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.xgld-hero2-visual img {
    display: block;
    width: 100%;
    /* 360px statt urspruenglich 430px. Weiter zu verkleinern bringt nichts:
       gemessen ist der Editorial Index links 401px hoch, der Hero-Inhalt nur
       356px - die Hoehe der Sektion bestimmt damit der Index, und der ist in
       diesem Pass eingefroren. 360px geben dem Bild die bessere Proportion
       zum Textblock, ohne die Sektion zu verlaengern. */
    max-width: 360px;
    height: auto;
    /* Loest den Bildhintergrund in den Seitengrund auf - ohne das Asset
       anzufassen.

       "closest-side" ist hier entscheidend: ohne Groessenangabe rechnet ein
       radial-gradient mit farthest-corner, 100% liegt dann in der Bildecke.
       Die Seitenmitte laege damit erst bei 71% und bliebe voll deckend - es
       wurden nur die Ecken weich, der Kasten blieb sichtbar (nachgemessen).
       Mit closest-side liegt 100% auf der Seitenmitte.

       Die Muenze endet ausgemessen bei 81,3% des halben Bildmasses
       (Motiv x 126..1146 von 1254). Vollton bis 84%, Ausklang bis 99% laesst
       sie deshalb unversehrt und loest nur den Hintergrund auf. Das Zentrum
       liegt bei 48%, weil das Motiv vertikal leicht nach oben sitzt. */
    -webkit-mask-image: radial-gradient(circle closest-side at 50% 48%, #000 0%, #000 84%, transparent 99%);
    mask-image: radial-gradient(circle closest-side at 50% 48%, #000 0%, #000 84%, transparent 99%);
}

/* Eine Katalog-Bildunterschrift, bewusst keine Produktkarte: kein Rahmen,
   keine Flaeche, kein Preis, kein Button. */
.xgld-hero2-visual figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-top: 10px;
    padding-left: 14px;
    border-left: 1px solid #24384A;
}

.xgld-hero2-bildlabel {
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #5C7185;
}

.xgld-hero2-visual figcaption a {
    font-size: 13.5px;
    color: #EDEDED;
    text-decoration: none;
    transition: color 0.16s ease;
}

.xgld-hero2-visual figcaption a:hover {
    color: #D5A137;
}

.xgld-hero2-spanne {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: #7C8FA0;
}

/* --- Ausgewaehlte Produkte rueckt nach oben ------------------------------ */
.xgld-auswahl-titel {
    padding-top: 44px;
}

/* --- Tablet: gemessen wird es unter 1000px zu eng fuer zwei Spalten ------ */
@media (max-width: 1000px) {
    .xgld-hero2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .xgld-hero2-visual img {
        max-width: 300px;
    }
}

/* --- Mobil --------------------------------------------------------------- */
@media (max-width: 768px) {
    .xgld-start-sektion:first-of-type {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .xgld-hero2 {
        gap: 30px;
    }

    .xgld-hero2-eyebrow {
        margin-bottom: 14px;
        font-size: 10.5px;
    }

    .xgld-hero2-titel {
        font-size: 32px;
        margin-bottom: 16px;
    }

    .xgld-hero2-intro {
        font-size: 15px;
        margin-bottom: 22px;
    }

    .xgld-hero2-facts {
        gap: 8px 16px;
        margin-top: 26px;
        /* 18px + der 1px, den frueher der Rand stellte - der Abstand
           zwischen Linie und Begriffen bleibt damit mobil exakt 19px. */
        padding-top: 19px;
    }

    .xgld-hero2-visual {
        align-items: center;
    }

    .xgld-hero2-visual img {
        max-width: 230px;
    }

    .xgld-hero2-visual figcaption {
        align-self: flex-start;
    }

    .xgld-auswahl-titel {
        padding-top: 34px;
    }
}

@media (max-width: 400px) {
    .xgld-hero2-titel {
        font-size: 27px;
    }

    .xgld-hero2-visual img {
        max-width: 210px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xgld-hero2-cta,
    .xgld-hero2-pfeil,
    .xgld-hero2-visual figcaption a {
        transition: none;
    }
}
/* ===== XGLD HOME HERO V2 - 2026-08-18 END ===== */

/* ===== XGLD HERO COIN SHOWCASE V1 - 2026-08-18 START ===================
   Drei Positionen im rechten Hero-Visual: klein - GROSS - klein.
   Markup und Daten: functions.php, Block gleichen Namens.
   Der uebrige Hero ist eingefroren und wird hier nicht angefasst.

   DIE AKTIVE GROESSE IST DIE REFERENZ
   Gemessen am 18.08.2026 am freigegebenen statischen Kruegerrand:
       1920 / 1440 / 1280   360 x 360 px   sichtbarer Durchmesser ca. 291 px
       1024                 310 x 310 px
       769-430              230 x 230 px
       bis 429              210 x 210 px
   Der aktive Slot uebernimmt exakt diese Werte. Er ist ein fester Kasten,
   dessen Groesse nicht vom Produkt abhaengt - beim Wechsel kann deshalb
   nichts "pumpen". Der Massstab je Produkt wirkt ausschliesslich INNERHALB
   dieses Kastens (transform am Bild), nie auf den Kasten selbst.

   Rollback: .xgld-hero-coin-showcase-v1-20260818/rollback.sh */

.xgld-coins {
    /* --aktiv ist die Kantenlaenge des aktiven Slots, --klein die der
       seitlichen. Alles andere leitet sich daraus ab. */
    --aktiv: 360px;
    --klein: 96px;
    /* Sichtbarer Abstand zwischen dem Rand der aktiven Muenze und dem Rand
       der seitlichen Muenze. Wird pro Groessenstufe gesetzt. */
    --luecke: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Die Buehne ist so hoch wie der aktive Slot und aendert ihre Hoehe nie -
   damit bleibt die Hero-Geometrie beim Wechsel stabil. */
.xgld-coins-buehne {
    position: relative;
    width: 100%;
    height: var(--aktiv);
    display: flex;
    align-items: center;
    justify-content: center;
}

.xgld-coin {
    position: absolute;
    top: 50%;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    line-height: 0;
    transition: transform 0.24s ease, opacity 0.24s ease;
}

/* Der Massstab wirkt am BILD, nicht am Slot. Stuende er in derselben
   transform-Kette wie translate(-50%,-50%), bezoegen sich die Prozente auf die
   unskalierte Box und die Mitte wanderte - bei 320px nachgemessen um 6px.
   So bleibt die Slotmitte exakt bei 50%, unabhaengig vom Massstab. */
/* Nur die flachen Seitenmuenzen. Die Flaechen des 3D-Koerpers haben eigene
   Regeln - dort darf der Massstab nicht ein zweites Mal wirken. */
.xgld-coin--prev img,
.xgld-coin--next img {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(var(--scale, 1));
    transform-origin: 50% 50%;
}

/* Die weiche Kreismaske loest den Bildhintergrund in den Seitengrund auf.
   Sie gilt nur fuer Fotos MIT Hintergrund. Freigestellte Assets bringen
   ihren runden Rand als Alphakanal mit; dort wuerde die Maske die
   Muenzkante anfressen, weil der Muenzkoerper die volle Bildbreite fuellt. */
.xgld-coin--prev:not(.ist-frei) img,
.xgld-coin--next:not(.ist-frei) img,
.xgld-m3:not(.ist-frei) .xgld-m3-seite img {
    -webkit-mask-image: radial-gradient(circle closest-side at 50% 48%, #000 0%, #000 84%, transparent 99%);
    mask-image: radial-gradient(circle closest-side at 50% 48%, #000 0%, #000 84%, transparent 99%);
}

/* --- aktive Muenze ------------------------------------------------------- */
.xgld-coin--aktiv {
    left: 50%;
    width: var(--aktiv);
    /* Sie fuehrt nicht mehr zur Produktseite, sondern laesst sich drehen. */
    cursor: grab;
    /* Nur auf der Muenze selbst faengt der Browser die Geste nicht mehr ab.
       Ausserhalb bleibt senkrechtes Seitenscrollen unveraendert. */
    touch-action: none;
    perspective: 1400px;
    transform: translate(-50%, -50%);
    z-index: 2;
    /* Begrenzt Darstellung UND Trefferflaeche auf die Muenze selbst, damit
       das Rechteck des Kastens keine Klicks daneben abfaengt. 43% statt der
       frueheren 41%: die Perspektive vergroessert die zum Betrachter gedrehte
       Haelfte um knapp ein Prozent, und der Rand traegt zusaetzlich auf -
       bei 41% haette die gedrehte Muenze eine sichtbare Kante bekommen. */
    clip-path: circle(43% at 50% 50%);
}

/* --- seitliche Muenzen --------------------------------------------------- */
/* Deutlich kleiner und zurueckgenommen, aber voll scharf: kein Blur, kein
   Glow, keine Farbverfaelschung. */
/* Liegen ueber der aktiven Muenze: sie sind klein und zurueckgenommen und
   ueberlagern nur deren weich auslaufenden Aussenrand - waeren sie darunter,
   blieben sie unklickbar. */
.xgld-coin--prev,
.xgld-coin--next {
    width: var(--klein);
    opacity: 0.62;
    z-index: 3;
    /* Bewusst KEIN Zeigefinger: die kleinen Muenzen blaettern nur weiter,
       sie fuehren nirgendwohin. Der Zeigefinger bleibt der aktiven Muenze
       vorbehalten, die tatsaechlich zur Produktseite verlinkt. Klick,
       Fokus, Tastatur und Swipe sind davon unberuehrt. */
    cursor: default;
    /* Der sichtbare Muenzkoerper ist 0.809 der Slotbreite, die Trefferflaeche
       nutzt bewusst den vollen Slot: auf 320px waere die Muenze sonst nur
       36px breit und damit unter dem Touch-Minimum. Ueberlappt trotzdem
       nicht mit der aktiven Muenze - deren Trefferkreis endet bei 0.41 der
       Breite, die kleine beginnt erst dahinter. */
    clip-path: circle(50% at 50% 48%);
    transition: transform 0.24s ease, opacity 0.24s ease;
}

/* POSITION - warum gerechnet und nicht geschoben
   Frueher standen die seitlichen Muenzen an festen Randoffsets. Weil die
   Buehne je nach Viewport zwischen 240px und 688px breit ist, die aktive
   Muenze aber ihre Referenzgroesse behaelt, lagen sie auf schmalen Spalten
   ueber der Mitte - am 18.08.2026 pixelgemessen als ein einziger
   zusammenhaengender Muenzblock ohne jede Luecke.

   Deshalb wird die Position jetzt aus der Bildmitte heraus berechnet. Der
   sichtbare Muenzkoerper ist konstruktionsbedingt immer 0.809 der Slotbreite
   - genau das stellt die Groessennormalisierung im Datenlayer sicher. Damit
   gilt:

       sichtbarer Radius aktiv     = 0.4045 * --aktiv
       Rand-Einzug im kleinen Slot = 0.0955 * --klein

   Die Aussenkante der kleinen Muenze wird auf
       Mitte - (sichtbarer Radius aktiv) - --luecke
   gesetzt. Die Luecke ist dadurch keine Schaetzung, sondern das Ergebnis:
   sie stimmt auf jeder Breite und bei jedem Muenzmotiv. */
.xgld-coin--prev {
    right: calc(50% + var(--aktiv) * 0.4045 + var(--luecke) - var(--klein) * 0.0955);
    left: auto;
    transform: translate(0, -50%);
}

.xgld-coin--next {
    left: calc(50% + var(--aktiv) * 0.4045 + var(--luecke) - var(--klein) * 0.0955);
    right: auto;
    transform: translate(0, -50%);
}

.xgld-coin--prev:hover,
.xgld-coin--next:hover {
    opacity: 0.85;
}

/* Auf Touch bleibt kein Hover-Zustand haengen. */
@media (hover: none) {
    .xgld-coin--prev:hover,
    .xgld-coin--next:hover {
        opacity: 0.62;
    }
}

.xgld-coin:focus-visible {
    outline: 1px solid #D5A137;
    outline-offset: 6px;
    border-radius: 50%;
}

/* Waehrend eines Wechsels keine Klicks annehmen - verhindert doppelte
   Spruenge bei schnellem Tippen. */
.xgld-coins.is-wechselnd .xgld-coin {
    pointer-events: none;
}

.xgld-coins.is-drehend .xgld-coin--aktiv { cursor: grabbing; }

/* --- Die aktive Muenze als 3D-Koerper --------------------------------------
   Gewaehlt wurde CSS-3D mit zwei Bildflaechen und einem aus Segmenten
   gebauten Zylindermantel. Grund: die Muenze braucht Vorderseite,
   Rueckseite, sichtbare Dicke und einen metallischen Rand - eine einzelne
   gedrehte Bildflaeche saehe beim seitlichen Drehen wie eine Fotokarte aus.
   Gegen Canvas/WebGL bzw. three.js spricht hier, dass die Muenzflaechen
   ohnehin Fotos sind: es waere eine zusaetzliche Abhaengigkeit und ein
   eigener Renderpfad, ohne dass die beiden flachen Scheiben davon
   profitieren. Der Aufbau kommt ohne jede Bibliothek aus.

   --fuell ist der Anteil des Muenzkoerpers an der Bildbreite. Randradius und
   Dicke leiten sich daraus ab, deshalb sitzt der Rand bei jedem Motiv exakt
   auf der Muenzkante - unabhaengig davon, wieviel Luft das Foto hat. */
.xgld-m3 {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    transform-style: preserve-3d;
    transform: scale(var(--scale, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

.xgld-m3-seite {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.xgld-m3-seite img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-user-drag: none;
}

.xgld-m3-vorn   { transform: translateZ(calc(var(--aktiv) * var(--fuell, 1) * 0.0434)); }
.xgld-m3-hinten { transform: rotateY(180deg) translateZ(calc(var(--aktiv) * var(--fuell, 1) * 0.0434)); }

/* Fehlt eine echte Rueckseite, wird keine erfunden. Die Drehung ist dann im
   Skript auf +/-78 Grad begrenzt, damit nie die gespiegelte Vorderseite als
   vermeintliche Rueckseite erscheint. */

.xgld-m3-rand { position: absolute; inset: 0; transform-style: preserve-3d; }

/* Ein Segment des Zylindermantels: um die Achse gedreht, nach aussen
   geschoben, dann quer gestellt. Breite = Muenzdicke (8,67% des
   Durchmessers, das Verhaeltnis einer 1-oz-Anlagemuenze), Hoehe = Bogenlaenge
   plus 1px Ueberlappung gegen sichtbare Fugen. */
.xgld-m3-rand i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--aktiv) * var(--fuell, 1) * 0.0867);
    height: calc(var(--aktiv) * var(--fuell, 1) * 0.0437 + 1px);
    transform:
        translate(-50%, -50%)
        rotateZ(calc(var(--i) * 5deg))
        translateX(calc(var(--aktiv) * var(--fuell, 1) * 0.5))
        rotateY(90deg);
    /* Riffelung: die Rillen einer Anlagemuenze laufen parallel zur Achse,
       erscheinen in der Kantenansicht also quer. Bewusst weich und
       kontrastarm - mit harten 1px-Linien las sich der Rand wie ein
       Muenzstapel statt wie eine Kante. */
    background:
        repeating-linear-gradient(to bottom,
            rgba(0, 0, 0, 0.16) 0, rgba(255, 255, 255, 0.07) 1.5px,
            rgba(0, 0, 0, 0.16) 3px),
        linear-gradient(to right, #5F4514 0%, #B98F3D 34%, #E4C57B 52%, #9C7429 78%, #6B4E1B 100%);
}

/* --- Bildunterschrift ---------------------------------------------------- */
/* Der Block ist genau so breit wie der aktive Slot und sitzt mittig ueber
   derselben Achse - dadurch liegt seine Mitte exakt unter der Muenzmitte,
   unabhaengig von der Laenge des Produktnamens. */
.xgld-coins-caption {
    width: var(--aktiv);
    margin: 14px 0 0;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.45;
}

.xgld-coins-name {
    color: #EDEDED;
    text-decoration: none;
    transition: color 0.16s ease;
}

.xgld-coins-name:hover {
    color: #D5A137;
}

.xgld-coins-trenner {
    margin: 0 5px;
    color: #5C7185;
}

/* Der Kasten ist der Bezug fuer den aufklappbaren Teil - deshalb relative.
   Breite, Abstand, Schriftgroesse und Zentrierung bleiben unveraendert; sie
   galten vorher fuer den Absatz, jetzt fuer den Kasten. */
.xgld-coins-caption {
    position: relative;
}

/* Die Hauptzeile ist weiterhin ein Absatz und traegt jetzt dessen
   Aussenabstaende nicht mehr - die stehen am Kasten. */
.xgld-coins-zeile {
    margin: 0;
}

/* --- Aufklappbarer Teil der Bildunterschrift -------------------------------
   ER WAECHST NUR NACH UNTEN UND SCHIEBT NICHTS
   Der Teil haengt absolut unter der Hauptzeile statt im Fluss zu stehen.
   Im Fluss waere er ehrlicher, wuerde aber beim Oeffnen alles darunter
   verschieben - und weil die Bildunterschrift im Hero unter der Buehne
   sitzt, bekaeme die Sektion eine andere Hoehe. Muenzen, Navigation und
   "Ausgewaehlte Produkte" stehen so exakt da, wo sie vorher standen; die
   Anzeige waechst ausschliesslich nach unten in den bereits vorhandenen
   Leerraum des Heros.

   top:100% heisst: er beginnt genau an der Unterkante der Hauptzeile, ohne
   Luecke. Das ist nicht nur Optik - die Maus muss von der Gewichtsspanne in
   die Zeilen fahren koennen, ohne dazwischen ins Leere zu geraten.

   Bewusst OHNE eigene Flaeche: kein Hintergrund, kein Rahmen, kein Radius,
   kein Schatten. Er soll sich oeffnen, nicht als Kaestchen ueber der Seite
   liegen. Moeglich ist das, weil darunter im Hero nur Leerraum liegt -
   nachgemessen bleiben bis zur Ueberschrift "Ausgewaehlte Produkte" auf
   allen Stufen mehr als 20px frei.

   Die Hoehe kommt als --dh aus dem Skript. Ohne den Wert greift der
   Rueckfall von 160px; er ist grosszuegiger als jeder gemessene Fall und
   schneidet deshalb nie etwas ab. */
.xgld-coins-details {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    /* visibility statt display: display laesst sich nicht animieren, und
       zugeklappt soll der Teil trotzdem fuer Screenreader und Tastatur
       nicht existieren. Die Umschaltung laeuft erst am Ende der Bewegung,
       deshalb die Verzoegerung. */
    visibility: hidden;
    text-align: left;
    transition:
        max-height 0.12s ease,
        opacity 0.1s ease,
        visibility 0s linear 0.12s;
}

.xgld-coins-caption.ist-offen .xgld-coins-details {
    max-height: var(--dh, 160px);
    opacity: 1;
    visibility: visible;
    transition:
        max-height 0.16s ease,
        opacity 0.14s ease 0.02s,
        visibility 0s linear 0s;
}

/* Beim Muenzwechsel ist die Anzeige zu, nicht am Zuklappen: waehrend die
   Daten schon wechseln, soll nichts mehr laufen. */
.xgld-coins-details.ohne-uebergang {
    transition: none;
}

/* Die feine Linie zwischen Hauptzeile und Angaben. Sie ist wie die beiden
   Haarlinien im Hero ein 1px hohes Kaestchen mit Hintergrund und kein Rand -
   gleiche Technik, gleiches Rasterergebnis auf jeder Bildschirmskalierung. */
.xgld-coins-linie {
    height: 1px;
    margin: 9px 0;
    background: #16232F;
}

/* DIE BEIDEN SPALTEN STEHEN AUF DEN ACHSEN DER HAUPTZEILE
   Die Beschriftungen beginnen genau unter dem Produktnamen, die Werte genau
   unter der Gewichtsspanne. Beide Achsen sind nicht gesetzt, sondern
   gemessen: das Skript liest sie an der bereits gesetzten Hauptzeile ab und
   legt sie als --sp-name (Abstand Kastenkante -> Name) und --sp-achse
   (Abstand Name -> Spanne) hier ab.

   Warum gemessen und nicht als gemeinsames Grid: ein Grid ueber Hauptzeile
   UND Detailzeilen wuerde seine erste Spalte am breitesten Eintrag
   ausrichten - und "PRAEGESTAETTE" ist mit 81.3px breiter als "Maple Leaf"
   mit 69px. Die Gewichtsspanne wuerde dadurch je nach Muenze verschoben.
   So liest der Detailteil die Hauptzeile nur ab und kann sie nicht bewegen.

   Dynamisch fuer jede Muenze: die Werte kommen aus der tatsaechlichen
   Geometrie, nicht aus einer Tabelle je Produkt. Bei jedem Wechsel, jeder
   Breitenaenderung und nach dem Laden der Schrift wird neu gemessen.

   Die Rueckfallwerte greifen nur ohne Skript. 94px ist der auf 1920 bis
   1280 gemessene Achsabstand; auf schmalen Breiten liegt er bei 91 bis 93px.

   column-gap ist 0: der Abstand steckt bereits in --sp-achse, ein zweiter
   waere doppelt gezaehlt und wuerde die rechte Spalte von ihrer Achse
   schieben. */
/* --zeile ist die gemeinsame Zeilenhoehe beider Zellen. Sie steht hier
   einmal und nicht als Faktor an jeder Zelle: 1.5 ergibt bei 10px eine
   Zeile von 15px und bei 12px eine von 18px. Beide Zellen stehen dann zwar
   oben buendig - gemessen dt.top = dd.top auf 0.00px - aber der Text sitzt
   in der Mitte SEINER Zeile, und die 15px-Zeile hat ihre Mitte 1.50px
   hoeher als die 18px-Zeile. Genau das war der sichtbare Versatz.

   Mit einer gemeinsamen Zeilenhoehe faellt er weg: beide Textkaesten
   zentrieren sich in derselben 18px-Zeile. 18px ist kein neuer Wert - es
   ist exakt der, den die Wertspalte vorher schon hatte. Zeilenabstand,
   Zeilenhoehe der Reihe und damit die Blockhoehe bleiben unveraendert. */
.xgld-coins-daten {
    --zeile: 18px;
    display: grid;
    grid-template-columns: var(--sp-achse, 94px) minmax(0, 1fr);
    column-gap: 0;
    row-gap: 3px;
    margin: 0;
    padding-left: var(--sp-name, 0px);
}

.xgld-coins-daten dt {
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #5C7185;
    line-height: var(--zeile);
}

/* Die Werte tragen das Hausgold #D5A137 - dieselbe Farbe wie Preise und der
   Einstieg im Hero, keine zweite Goldstufe. Die Beschriftungen bleiben im
   dezenten Blaugrau: gelesen wird der Wert, nicht sein Name. */
.xgld-coins-daten dd {
    margin: 0;
    font-size: 12px;
    color: #D5A137;
    line-height: var(--zeile);
    font-variant-numeric: tabular-nums;
}

.xgld-coins-range {
    color: #7C8FA0;
    font-variant-numeric: tabular-nums;
}

/* Die Spanne ist der Ausloeser. Bewusst KEIN Zeigefinger: sie fuehrt
   nirgendwohin - derselbe Grundsatz, nach dem schon die seitlichen Muenzen
   den Standardzeiger behalten. Der Zeigefinger bleibt dem Produktnamen
   vorbehalten. Die leichte Aufhellung ist der einzige Hinweis; ein Symbol,
   ein Pfeil oder eine Unterstreichung waeren an dieser Stelle lauter als
   die Angabe selbst. */
.xgld-coins-caption.hat-details .xgld-coins-range {
    cursor: default;
    transition: color 0.16s ease;
}

.xgld-coins-caption.hat-details .xgld-coins-range:hover,
.xgld-coins-caption.ist-offen .xgld-coins-range {
    color: #9BAEBD;
}

.xgld-coins-range:focus-visible {
    outline: 1px solid #D5A137;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .xgld-coin,
    .xgld-coin--prev,
    .xgld-coin--next,
    .xgld-coins-name,
    .xgld-coins-range,
    .xgld-coins-details,
    /* Der geoeffnete Zustand steht mit hoeherer Spezifitaet in der Datei und
       muss deshalb ausdruecklich mitgenannt werden - ohne ihn liefe das
       Aufklappen weiter in voller Laenge. */
    .xgld-coins-caption.ist-offen .xgld-coins-details {
        transition-duration: 0.01s;
    }

    /* Die Sichtbarkeit schaltet weiterhin erst nach der Bewegung um, sonst
       verschwaende der Inhalt vor dem Zusammenziehen. */
    .xgld-coins-details {
        transition-delay: 0s, 0s, 0.01s;
    }

    .xgld-coins-caption.ist-offen .xgld-coins-details {
        transition-delay: 0s;
    }
}

/* --- Groessenstufen -------------------------------------------------------
   --aktiv bleibt unveraendert bei den freigegebenen Referenzwerten. Nur
   --klein und --luecke sind angepasst, und zwar aus der gemessenen
   Buehnenbreite hergeleitet, damit links wie rechts eine echte Luecke
   entsteht (Messwerte vom 18.08.2026, Buehne je Viewport):
       1920/1680: 508px   1440: 490px   1280: 418px   1024: 310px
        768: 688px    600: 520px    430: 350px    390: 310px    360: 280px
   Auf den engsten Stufen ragen die kleinen Muenzen leicht in den seitlichen
   Seitenrand hinein - das ist bestehender Leerraum, es entsteht kein
   horizontaler Overflow (nachgemessen). */

@media (max-width: 1440px) {
    .xgld-coins { --klein: 88px; }
}

@media (max-width: 1300px) {
    .xgld-coins { --klein: 72px; --luecke: 14px; }
}

/* Engster Fall im ganzen Layout: die aktive Muenze steht hier noch auf ihrer
   groessten Referenzgroesse (360px), die Hero-Spalte ist aber schon fast auf
   diese Breite geschrumpft. Bei 1101px - einen Pixel oberhalb der naechsten
   Stufe - ergab die Messung am 18.08.2026 16px horizontalen Overflow und
   4px Ueberlappung mit dem Hero-Text. Die kleinen Muenzen weichen deshalb
   frueher auf die kleine Stufe aus, statt die aktive Muenze anzutasten. */
@media (max-width: 1250px) {
    .xgld-coins { --klein: 48px; --luecke: 12px; }
}

@media (max-width: 1100px) {
    .xgld-coins { --aktiv: 310px; --klein: 48px; --luecke: 10px; }
}

@media (max-width: 768px) {
    .xgld-coins { --aktiv: 230px; --klein: 92px; --luecke: 20px; }
    .xgld-coins-caption { font-size: 13px; margin-top: 12px; }
}

@media (max-width: 460px) {
    .xgld-coins { --klein: 68px; --luecke: 16px; }
}

@media (max-width: 429px) {
    .xgld-coins { --aktiv: 210px; --klein: 60px; --luecke: 14px; }
}

@media (max-width: 360px) {
    .xgld-coins { --klein: 44px; --luecke: 12px; }
}

/* --- Keine Browser-Auswahl auf den Bedienelementen ------------------------
   Schnelles Mehrfachklicken und Doppeltippen loeste sonst die blaue
   Text-/Bildmarkierung aus. Die Regel steht auf der Showcase-Wurzel und
   nicht nur auf den Muenzen: Chromium verschiebt beim Doppelklick auf ein
   user-select:none-Element die Wortauswahl auf den naechstgelegenen
   selektierbaren Text - im Test wurde dadurch die Bildunterschrift blau
   markiert. Bewusst gescoped auf den Showcase, nicht auf body.
   Tastaturfokus bleibt unberuehrt - :focus-visible oben ist davon
   unabhaengig. */
.xgld-coins {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Muenzen und Bildunterschrift sitzen mittig in ihrer Gridspalte und damit
   sehr dicht am rechten Sektionsrand. Das negative Margin verschiebt den
   Kasten in seiner Spalte um 20px nach links; weil die Breite mit 100% an
   der Spalte haengt, wandert die zentrierte Mitte genau mit.

   Bewusst kein transform: die Muenze traegt selbst 3D-Transforms, ein
   zusaetzliches am Container wuerde deren Stapelkontext beruehren. Groessen,
   Abstaende und die vertikale Lage bleiben unangetastet - nur X.

   Erst ab 1001px: darunter steht der Showcase einspaltig unter dem Text und
   ist dort mittig richtig. */
@media (min-width: 1001px) {
    .xgld-coins {
        margin-left: -20px;
    }
}

/* Nur die beiden reinen Navigationsmuenzen sind undraggbar. Die aktive
   Muenze ist ein Produktlink und behaelt ihr normales Verhalten. */
.xgld-coin--prev img,
.xgld-coin--next img {
    -webkit-user-drag: none;
}

/* --- Testdatensaetze sind kein Angebot ------------------------------------
   Kauf ist serverseitig gesperrt (woocommerce_is_purchasable). Hier
   verschwindet zusaetzlich das nutzlose Bedienelement. Gilt ausschliesslich
   auf Produktseiten mit dem Testmarker. */
/* Die Selektorkette folgt der bestehenden Kaufbereich-Regel
   (.woocommerce div.product form.cart, display:flex !important) und liegt
   mit der zusaetzlichen Body-Klasse eine Stufe darueber. Das Produkttemplate
   selbst bleibt unangetastet. */
body.xgld-ist-showcase-test.woocommerce div.product form.cart,
body.xgld-ist-showcase-test.woocommerce div.product .single_add_to_cart_button {
    display: none !important;
}

/* ===== XGLD HERO COIN SHOWCASE V1 - 2026-08-18 END ===== */

/* ===== XGLD HOME WEIGHT DISCOVERY V1 - 2026-08-18 START ================
   Zweite Einstiegsebene unterhalb des Heros. Markup und Daten: functions.php,
   Block gleichen Namens. Der Hero ist eingefroren und wird hier nicht
   angefasst - dieser Block beginnt unter seiner Unterkante.

   ES SIND KEINE KARTEN
   Kein Rahmen, kein Radius, keine Flaeche, kein Schatten, kein Symbol, kein
   Knopf. Getragen wird der Bereich von vier Dingen: der Groessenstaffelung
   der Schrift, dem Raster, dem Weissraum und zwei Grautoenen. Sichtbar
   gezeichnet wird ausschliesslich eine 1px-Haarlinie zwischen den Segmenten.

   DAS RASTER IST DAS DES HEROS
   176px Spalte, 44px Abstand, 40px Seitenpolster - dieselben Werte, mit
   denen .xgld-shop-layout den Hero aufteilt, und dieselben Stufen bei 1024
   und 768px. Dadurch steht die Ueberschrift genau unter der Editorial
   Navigation und die vier Stueckelungen genau unter dem Hero-Inhalt: der
   Bereich liest sich als Fortsetzung derselben Komposition und nicht als
   neuer Abschnitt mit eigener Ordnung.

   Die Werte sind bewusst kopiert und nicht per Klasse geerbt: dieser Pass
   soll sich isoliert zuruecknehmen lassen, ohne dass ein anderer Block ihn
   traegt oder mit ihm faellt.

   Farben ausschliesslich aus dem Bestand:
       #EDEDED Stueckelung   #7C8FA0 Feingewicht und Ueberschrift
       #8FA3B3 Feingewicht bei Hover   #D5A137 Gold nur bei Hover
       #16232F Haarlinie

   Rollback: .xgld-home-weight-discovery-v1-20260818/rollback.sh */

/* DER ABSTAND ZUM HERO IST GERECHNET, NICHT GEWAEHLT
   Die alte Ueberschrift stand 105px unter der Hero-Unterkante und der
   Bereich damit sichtbar abgesetzt. Naeher heran geht es, aber nicht
   beliebig: die Bildunterschrift im Hero klappt bei Hover nach unten auf und
   reicht dabei 79px unter ihre Zeile. Das Hero-Polster stellt davon 39.6px,
   der Rest muss aus diesem Bereich kommen.

       79.0  Reichweite der aufgeklappten Bildunterschrift
     - 39.6  vorhandenes Polster unter der Caption im Hero
     + 24    Ruhe zwischen beidem
     ------
       63.4  ->  64px

   Ohne diese Rechnung stossen die Detailzeilen der Muenze bei geoeffneter
   Caption direkt auf die Stueckelungen - nachgemessen blieben bei 44px noch
   4.6px, auf Mobil ueberlappte es sichtbar. Der Bereich rueckt damit von
   105px auf 64px an den Hero heran und bleibt trotzdem kollisionsfrei.

   Unten das Doppelte des alten Rastermasses, damit die Fusszeile nicht
   heranrueckt. */
.xgld-gewichte {
    padding: 64px 0 88px;
}

.xgld-gewichte-raster {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 44px;
    padding: 0 40px;
    align-items: start;
}

/* Die Ueberschrift bleibt leise - sie benennt den Bereich, sie ist nicht
   sein Inhalt. Werte wie bei der Ueberschrift, die hier vorher stand. */
.xgld-gewichte-titel {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7C8FA0;
    line-height: 1.55;
}

.xgld-gewichte-liste {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.xgld-gewichte-eintrag {
    position: relative;
}

/* Die Haarlinie zwischen zwei Segmenten. Als 1px breites Kaestchen mit
   Hintergrund und nicht als border-left - dieselbe Technik wie bei den
   waagerechten Haarlinien im Hero, damit alle Linien der Seite auf jeder
   Bildschirmskalierung gleich einrasten.

   Sie steht am Segment und nicht zwischen den Segmenten: dadurch traegt sie
   automatisch dessen Hoehe und muss nirgends nachgemessen werden. */
.xgld-gewichte-eintrag + .xgld-gewichte-eintrag::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #16232F;
}

.xgld-gewicht {
    display: block;
    padding: 1px 24px 2px 0;
    text-decoration: none;
}

/* Das erste Segment hat keine Linie und beginnt deshalb buendig an der
   Spaltenkante. Die uebrigen ruecken von ihrer Linie ab. */
.xgld-gewichte-eintrag + .xgld-gewichte-eintrag .xgld-gewicht {
    padding-left: 28px;
}

/* 34px stehen bewusst zwischen den beiden vorhandenen Groessen: die
   Hero-Ueberschrift misst 46px, die Ziffern der Editorial Navigation 24px.
   Die Stueckelung ist damit eindeutig das Hauptobjekt dieses Bereichs und
   tritt trotzdem nicht gegen die Hero-Ueberschrift an. */
.xgld-gewicht-wert {
    display: block;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #EDEDED;
    font-variant-numeric: tabular-nums;
    transition: color 0.16s ease;
}

.xgld-gewicht-fein {
    display: block;
    margin-top: 9px;
    font-size: 12.5px;
    letter-spacing: 0.05em;
    color: #7C8FA0;
    font-variant-numeric: tabular-nums;
    transition: color 0.16s ease;
}

/* Hover aendert Farbe und sonst nichts: kein Anheben, kein Massstab, keine
   Flaeche, kein Schatten. Der Grundzustand ist ohne Hover vollstaendig
   lesbar - auf Beruehrungsgeraeten faellt nichts weg. */
.xgld-gewicht:hover .xgld-gewicht-wert,
.xgld-gewicht:focus-visible .xgld-gewicht-wert {
    color: #D5A137;
}

.xgld-gewicht:hover .xgld-gewicht-fein,
.xgld-gewicht:focus-visible .xgld-gewicht-fein {
    color: #8FA3B3;
}

.xgld-gewicht:focus-visible {
    outline: 1px solid #D5A137;
    outline-offset: 6px;
}

/* ---- 901-1024px: schmaleres Raster, wie im Hero ------------------------- */
@media (min-width: 901px) and (max-width: 1024px) {
    .xgld-gewichte-raster {
        grid-template-columns: 168px minmax(0, 1fr);
        gap: 36px;
    }

    .xgld-gewicht-wert { font-size: 28px; }
    .xgld-gewicht { padding-right: 16px; }
    .xgld-gewichte-eintrag + .xgld-gewichte-eintrag .xgld-gewicht { padding-left: 20px; }
}

/* ---- 1025-1180px: vier Segmente werden knapp ---------------------------- */
@media (min-width: 1025px) and (max-width: 1180px) {
    .xgld-gewicht-wert { font-size: 30px; }
    .xgld-gewicht { padding-right: 20px; }
    .xgld-gewichte-eintrag + .xgld-gewichte-eintrag .xgld-gewicht { padding-left: 24px; }
}

/* ---- bis 900px: zwei mal zwei ------------------------------------------
   Vier Segmente nebeneinander waeren hier nicht mehr eng, sondern zu eng:
   gemessen bleiben bei 901px noch 156px je Segment, darunter reicht das fuer
   "1/10 oz" nicht mehr ohne Umbruch. Zwei mal zwei gibt jedem Segment wieder
   Raum, und das Raster bleibt ein Raster.

   Die senkrechte Linie steht jetzt nur noch vor dem jeweils rechten Segment,
   dazu kommt eine waagerechte zwischen den beiden Reihen - mittig in der
   Zeilenluecke, damit sie zu beiden Reihen denselben Abstand haelt. */
@media (max-width: 900px) {
    .xgld-gewichte-liste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 34px;
    }

    .xgld-gewichte-eintrag + .xgld-gewichte-eintrag::before {
        content: none;
    }

    .xgld-gewichte-eintrag:nth-child(even)::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background: #16232F;
    }

    .xgld-gewichte-eintrag:nth-child(n + 3)::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -17px;
        height: 1px;
        background: #16232F;
    }

    .xgld-gewicht,
    .xgld-gewichte-eintrag + .xgld-gewichte-eintrag .xgld-gewicht {
        padding: 1px 20px 2px 0;
    }

    .xgld-gewichte-eintrag:nth-child(even) .xgld-gewicht {
        padding-left: 24px;
    }

    .xgld-gewichte-eintrag:nth-child(n + 3) .xgld-gewicht {
        padding-top: 17px;
    }
}

/* ---- bis 768px: Ueberschrift ueber die Segmente ------------------------- */
@media (max-width: 768px) {
    /* Dieselbe Rechnung wie oben, mit den mobilen Werten: die Bildunterschrift
       reicht hier 97px hinab (der laengste Wert bricht um), das Hero-Polster
       stellt 32px, dazu 23px Ruhe - macht 88px. Mobil bleibt der Abstand
       dadurch praktisch wie zuvor; die Verdichtung aus Punkt 12 wirkt auf
       Desktop, wo sie auch gemeint ist. */
    .xgld-gewichte {
        padding: 88px 0 64px;
    }

    .xgld-gewichte-raster {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        padding: 0 16px;
    }

    .xgld-gewicht-wert { font-size: 30px; }
}

/* ---- sehr schmal -------------------------------------------------------- */
@media (max-width: 400px) {
    .xgld-gewicht-wert { font-size: 26px; }
    .xgld-gewicht-fein { font-size: 12px; margin-top: 7px; }

    .xgld-gewicht,
    .xgld-gewichte-eintrag + .xgld-gewichte-eintrag .xgld-gewicht {
        padding-right: 12px;
    }

    .xgld-gewichte-eintrag:nth-child(even) .xgld-gewicht {
        padding-left: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xgld-gewicht-wert,
    .xgld-gewicht-fein {
        transition-duration: 0.01s;
    }
}
/* ===== XGLD HOME WEIGHT DISCOVERY V1 - 2026-08-18 END ===== */

/* ===== XGLD SHOWCASE CLEARANCE - 2026-08-18 START =====================
   Durchgangshoehe unter dem Coin-Showcase.

   DAS PROBLEM WAR NICHT DAS POLSTER, SONDERN SEINE VERTEILUNG
   Die aufgeklappte Bildunterschrift haengt absolut unter der Caption und
   reicht 79px hinab (mobil 97px, dort bricht der laengste Wert um). Wieviel
   davon der Hero selbst auffaengt, haengt daran, ob die Editorial Navigation
   links oder der Showcase rechts die Hoehe der Sektion bestimmt - und das
   wechselt mit der Breite. Gemessen am 18.08.2026, Abstand Hero-Unterkante
   zu Caption-Unterkante:

       1920-1138   39.6px      1100   89.6px      1025   87.6px
       1024        62.9px      769-960  32.0px    bis 768  32.0px

   Ein einziges Kopfpolster an der Gewichtssektion musste daran scheitern.
   Mit den 64px des vorigen Passes ergab das gemessen:

       1920-1138   24.6px      1100/1025  74.6 / 72.6px   (zu weit weg)
       1024        47.9px      769-960    17.0px          (zu eng)

   Die 17px bei 800-960px sind der Fall, der wehtut: dort bestimmt der
   Showcase die Hoehe, der Hero faengt nur seine eigenen 32px auf. Es ist
   zugleich der Bereich, in den ein 1920er-Bildschirm bei 225% Skalierung
   faellt (1920 / 2.25 = 853 CSS-Pixel).

   DIE LOESUNG SITZT AM HERO, NICHT AN DER SEKTION
   Die Reserve steht jetzt als padding-bottom am Hero-Wrapper und die
   Gewichtssektion traegt gar kein Kopfpolster mehr. Damit rechnet die
   Geometrie sich selbst aus:

     - Wo der Showcase die Hoehe bestimmt, waechst der Hero um die Reserve
       und schafft genau den Durchgang.
     - Wo die Navigation links ohnehin tiefer reicht, wird die Reserve von
       ihr geschluckt - der Hero waechst dort NICHT, und die Sektion rueckt
       naeher heran statt weiter weg.

   Der Wert ist gerechnet:  79 Reichweite + 26 Durchgang - 32 Hero-Polster
   = 73px.

   Unterhalb von 430px wird die Caption 210px schmal, der laengste Wert
   ("South African Mint") bricht dort um und die Reichweite steigt auf 97px:
   97 + 26 - 32 = 91px. Die Stufe liegt deshalb bei 429px und nicht bei 400
   oder 768 - sie folgt dem Umbruch, nicht einem runden Wert.

   WARUM AM WRAPPER UND NICHT AN DER MUENZSPALTE
   .xgld-hero2 zentriert seine beiden Spalten senkrecht (align-items:center).
   Ein Polster an der Muenzspalte wuerde die Zeile hoeher machen, und die
   Zentrierung zoege den Textblock - und damit die Vertrauenszeile - um die
   Haelfte nach unten. Padding am Wrapper liegt ausserhalb des Inhaltskastens
   und beruehrt die Zentrierung nicht: Headline, Beschreibung, Einstieg und
   die Zeile ANLAGEGOLD / VERSICHERTER VERSAND / BITCOIN-ZAHLUNG bleiben
   exakt stehen, ebenso die Navigation links und der Showcase selbst.

   Keine Regel an einzelnen Gewichtsobjekten - 1/2 oz und 1 oz tragen nichts
   Eigenes. Welche Stueckelung unter der Caption liegt, wechselt ohnehin mit
   der Breite: bei 1920 sind es 1/4 oz und 1/2 oz, bei 1440 1/2 oz und 1 oz.

   Rollback: .xgld-showcase-clearance-20260818/rollback.sh */

.xgld-hero2 {
    padding-bottom: 73px;
}

.xgld-gewichte {
    padding-top: 0;
}

@media (max-width: 768px) {
    .xgld-gewichte {
        padding-top: 0;
    }
}

/* Erst hier wird die Caption schmal genug, dass der laengste Wert umbricht. */
@media (max-width: 429px) {
    .xgld-hero2 {
        padding-bottom: 91px;
    }
}
/* ===== XGLD SHOWCASE CLEARANCE - 2026-08-18 END ===== */

/* ===== XGLD WEIGHT DIMMING V1 - 2026-08-18 START ======================
   Die Gewichtssektion tritt zurueck, solange die Muenzdetails im Hero
   aufgeklappt sind. Geschlossen ist sie unveraendert voll da.

   DER AUSLOESER IST DER VORHANDENE ZUSTAND
   Aufgeklappt heisst: .xgld-coins-caption traegt ist-offen. Diese Klasse
   setzt das Showcase-Skript seit dem Caption-Pass - fuer Maus, Tastatur und
   Beruehrung gleichermassen, und sie faellt auch bei "Tippen ausserhalb"
   wieder weg. Hier wird sie nur gelesen.

   Gelesen wird sie mit :has() ueber den gemeinsamen Vorfahren <main>. Das
   ist bewusst kein zusaetzliches Skript: es gibt keine zweite Zustandslogik,
   die mit der ersten auseinanderlaufen koennte, und kein Ereignis, das
   verpasst werden kann. Wo :has() fehlt, bleibt die Sektion schlicht immer
   voll sichtbar - der Verlust ist rein kosmetisch.

   OPACITY AN DER LISTE, NICHT AN DEN EINZELTEILEN
   Ein Wert an der Liste nimmt Stueckelungen, Grammangaben und die feinen
   Trennlinien gemeinsam und im selben Verhaeltnis zurueck. Einzelne Farben
   je Element umzurechnen haette dieselbe Wirkung mit mehreren Werten
   erkauft, die beim naechsten Farbwechsel wieder auseinanderlaufen.

   Die Ueberschrift bleibt ausdruecklich aussen vor: sie steht als
   Geschwister der Liste im Raster und wird vom Wert nicht beruehrt. Sie
   benennt den Bereich - auch ein zurueckgenommener Bereich braucht seinen
   Namen in voller Lesbarkeit. Der Scope ist deshalb .xgld-gewichte-liste
   und nicht der ganze Abschnitt.

   0.46 ist im Browser abgestimmt: deutlich zurueckgenommen, aber noch klar
   lesbar - nicht der Eindruck, die Sektion sei abgeschaltet.

   Kein blur, kein grayscale, kein Massstab, keine Verschiebung, keine
   Flaeche darueber. Und ausdruecklich kein pointer-events:none - die
   Filterlinks bleiben auch zurueckgenommen anklickbar.

   Rollback: .xgld-weight-dimming-v1-20260818/rollback.sh */

/* Der Rueckweg ist kuerzer als der Hinweg: zugeklappt sollen die
   Stueckelungen sofort wieder da sein, nicht nachlaufen. */
.xgld-gewichte-liste {
    transition: opacity 0.12s ease;
}

main:has(.xgld-coins-caption.ist-offen) .xgld-gewichte-liste {
    opacity: 0.46;
    transition: opacity 0.14s ease;
}

/* Wer mit der Tastatur in die Liste faehrt, bekommt sie voll zurueck - sonst
   laege der Fokus auf etwas, das zurueckgenommen ist. aria-hidden wird
   bewusst NICHT gesetzt: die Sektion bleibt durchgehend vorlesbar. */
main:has(.xgld-coins-caption.ist-offen) .xgld-gewichte-liste:focus-within {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .xgld-gewichte-liste,
    main:has(.xgld-coins-caption.ist-offen) .xgld-gewichte-liste {
        transition-duration: 0.01s;
    }
}
/* ===== XGLD WEIGHT DIMMING V1 - 2026-08-18 END ===== */

/* ===== XGLD HERO INTRO ZEILEN - 2026-08-18 START ======================
   Kontrollierter Zeilenumbruch in der Hero-Beschreibung.

   Der deutsche Text lief dreizeilig, weil der Fliesstext "Zu" noch auf die
   erste Zeile zog. Jeder Satz steht deshalb in einem eigenen Span
   (front-page.php, Array $xgld_hero['intro']); hier werden daraus Bloecke.
   Kein <br>, keine geschuetzten Leerzeichen, keine eingefuegten Abstaende -
   das Leerzeichen zwischen den Saetzen steht als normaler Leerraum im Markup
   und faellt zwischen zwei Bloecken von selbst weg.

   NUR AB 1181px, UND ZWAR AUS DEMSELBEN GRUND WIE DIE HAARLINIE
   Gemessen sind die beiden deutschen Saetze 415px und 448px breit, die
   Spalte 460px - beide passen also nur, solange der Hero auf seiner vollen
   Breite steht. Darunter schrumpft die Spalte (1024: 378px), und erzwungene
   Bloecke wuerden dort aus drei Zeilen vier machen. Unterhalb fliesst der
   Text deshalb wie bisher.

   Es ist dieselbe Schwelle, an der .xgld-hero-facts-linie-20260818 ihren
   Ausgleich ansetzt - und dieselbe Voraussetzung: hier steht die
   Beschreibung zweizeilig. Damit stimmt die Ausrichtung der beiden
   Haarlinien wieder, ohne dass ein einziger Geometriewert angefasst wird.

   Rollback: .xgld-hero-intro-zeilen-20260818/rollback.sh */

@media (min-width: 1181px) {
    .xgld-hero2-intro-teil {
        display: block;
    }

    /* DIE BREITE DARF NICHT AN DER SCHRIFT HAENGEN
       Die Beschreibung ist auf 46ch begrenzt. Ein ch ist die Breite der
       Ziffer Null der tatsaechlich gerenderten Schrift - faellt Inter aus
       und es rendert eine Ersatzschrift, schrumpft die erlaubte Breite,
       waehrend der Satz breiter wird. Genau so bricht der zweite Satz um,
       obwohl er hier gemessen 448px bei 460px Grenze passt.

       Wo die Beschreibung aus zwei Teilen besteht, faellt die Grenze
       deshalb weg: dann begrenzt sie der Textblock selbst, gemessen 544px
       bei 1920 bis 1440 und 510px bei 1280. Satz 2 hat damit 96px statt
       12px Reserve und haengt an keiner Fontmetrik mehr.

       Die Bedingung ist strukturell und keine Sprachabfrage: sie greift,
       wo ueberhaupt ein kontrollierter Umbruch gesetzt ist. Eine
       einteilige Beschreibung - derzeit EN - behaelt ihre 46ch und damit
       exakt ihren bisherigen Umbruch.

       Gemessener Abstand zur naechsten Muenze rechts: 112px bei 1920 und
       1680, 88px bei 1440, 16px bei 1280 - keine Beruehrung. Der Textblock
       selbst, seine X-Position und das Hero-Raster bleiben unangetastet;
       es faellt nur eine Obergrenze innerhalb des Blocks weg. */
    .xgld-hero2-intro:has(.xgld-hero2-intro-teil + .xgld-hero2-intro-teil) {
        max-width: none;
    }
}
/* ===== XGLD HERO INTRO ZEILEN - 2026-08-18 END ===== */

/* ===== XGLD IDX HOVER FOKUS - 2026-08-18 START ========================
   Die Editorial Navigation bekommt beim Hover einen eindeutigen Fokus: der
   Abschnitt unter der Maus tritt nach vorn, die anderen treten zurueck.
   Es ist immer genau EINE goldene Ziffer sichtbar.

   OHNE HOVER aendert sich nichts. Der Vorgabezustand - 01 golden, ALLE
   PRODUKTE hell, 02 und 03 zurueckgenommen - steht unveraendert in
   "XGLD EDITORIAL INDEX V4" und wird hier nicht angefasst.

   WIE
   :has() am Container fragt: wird gerade irgendein Hauptabschnitt gehovert?
   Wenn ja, treten ALLE Hauptabschnitte zurueck - auch der aktuelle, der
   dabei sein Gold verliert. Danach holt eine spezifischere Regel genau den
   gehoverten wieder nach vorn. Deshalb kann nie mehr als eine Ziffer golden
   sein, und es bleibt auch nichts haengen: verlaesst die Maus die Liste,
   greift keine der beiden Regeln mehr und der Vorgabezustand ist zurueck.

   Kein Skript, keine Zustandsklasse, kein zweiter Zustand, der mit dem
   ersten auseinanderlaufen koennte.

   HOVERZONE ist der ganze Abschnitt - Ziffer, Titel und Unterzeile stehen
   im selben Element, und gehovert wird dieses Element. Abschnitt 03 traegt
   keinen Link und ist ein <div>; :hover gilt dort genauso.

   SERVICE bleibt aussen vor: er traegt --service statt --haupt und wird
   weder vom Ausloeser noch von den Regeln erfasst.

   FARBEN ausschliesslich aus dem Bestand des Index:
       zurueckgenommen  #24384A Ziffer   #7C8FA0 Titel   #5C7185 Unterzeile
       im Fokus         #D5A137 Ziffer   #F5F5F5 Titel   #7C8FA0 Unterzeile

   Keine Flaeche, kein Rahmen, kein Symbol, kein blur(), kein Glow, keine
   Bewegung und keine Groessenaenderung - nur Farbe. Die Geometrie kann
   dadurch nicht springen.

   TRANSITION: die vorhandene (color 0.16s ease an Ziffer, Titel und
   Unterzeile) wird mitbenutzt, es kommt keine zweite dazu. Sie liegt bereits
   im gewuenschten Bereich, und prefers-reduced-motion schaltet sie im
   Indexblock schon ab.

   NUR MIT ECHTEM ZEIGER: auf Beruehrungsgeraeten greift der ganze Block
   nicht, dort kann also auch kein Hover-Zustand nach einem Tap haengen
   bleiben.

   Rollback: .xgld-idx-hover-fokus-20260818/rollback.sh */

@media (hover: hover) {
    /* 1. Sobald irgendein Hauptabschnitt gehovert wird, treten alle zurueck. */
    .xgld-idx:has(.xgld-idx-eintrag--haupt:hover) .xgld-idx-eintrag--haupt .xgld-idx-nr {
        color: #24384A;
    }

    .xgld-idx:has(.xgld-idx-eintrag--haupt:hover) .xgld-idx-eintrag--haupt .xgld-idx-titel {
        color: #7C8FA0;
    }

    .xgld-idx:has(.xgld-idx-eintrag--haupt:hover) .xgld-idx-eintrag--haupt .xgld-idx-sub {
        color: #5C7185;
    }

    /* 2. Genau der gehoverte kommt wieder nach vorn. Die Regel ist bewusst
          spezifischer als Regel 1 - sonst gewaenne dort das Zuruecktreten. */
    .xgld-idx:has(.xgld-idx-eintrag--haupt:hover) .xgld-idx-eintrag--haupt:hover .xgld-idx-nr {
        color: #D5A137;
    }

    .xgld-idx:has(.xgld-idx-eintrag--haupt:hover) .xgld-idx-eintrag--haupt:hover .xgld-idx-titel {
        color: #F5F5F5;
    }

    .xgld-idx:has(.xgld-idx-eintrag--haupt:hover) .xgld-idx-eintrag--haupt:hover .xgld-idx-sub {
        color: #7C8FA0;
    }
}
/* ===== XGLD IDX HOVER FOKUS - 2026-08-18 END ===== */

/* ===== XGLD HERO ECHTHEIT LINK - 2026-08-18 START ====================
   Die Vertrauenszeile im Hero ist ein echter Link auf /gepruefte-echtheit/.
   Markup: front-page.php, ein <a> im vorhandenen <li> - kein Klick-Handler,
   kein Skript.

   Im Normalzustand darf man ihm nichts ansehen: Groesse, Sperrung,
   Versalien und Farbe kommen weiterhin vom <li> und werden hier nur geerbt
   statt neu gesetzt. Die Haarlinie darueber, die Position und der Abstand
   bleiben unberuehrt - ein Inline-Link aendert daran nichts.

   Beim Hover das vorhandene Hausgold, sonst nichts: keine Unterstreichung,
   kein Rahmen, kein Symbol, kein Pfeil, keine Bewegung. Die Dauer ist die
   des Hero-Einstiegs (0.16s), damit sich beides gleich anfuehlt.

   Der Zeigefinger steht ihm zu - er fuehrt tatsaechlich irgendwohin. Das
   ist derselbe Grundsatz, nach dem die seitlichen Muenzen und die
   Gewichtsspanne der Bildunterschrift ihn NICHT bekommen.

   Rollback: .xgld-hero-echtheit-link-20260818/rollback.sh */

.xgld-hero2-fact-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.16s ease;
}

.xgld-hero2-fact-link:hover,
.xgld-hero2-fact-link:focus-visible {
    color: #D5A137;
}

.xgld-hero2-fact-link:focus-visible {
    outline: 1px solid #D5A137;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .xgld-hero2-fact-link {
        transition: none;
    }
}
/* ===== XGLD HERO ECHTHEIT LINK - 2026-08-18 END ===== */

/* ===== XGLD HEADER UTILITY - 2026-08-18 START =========================
   Zwei kleine Eingriffe im rechten Header:
     A) die Gruppe Konto / Merkzettel / Warenkorb rueckt leicht nach links
     B) unter DE/EN steht eine Vorschau des spaeteren Theme-Schalters

   A) NUR DIE GRUPPE, NICHT IHR INNENLEBEN
   Ein margin-right an der Gruppe. Weil .xgld-hd-contact im Header
   flex:1 1 auto traegt und den freien Raum aufnimmt, wandert die Gruppe
   dadurch nach links, statt DE/EN nach rechts zu schieben - der
   Sprachblock bleibt exakt stehen. Die Abstaende zwischen Konto,
   Merkzettel und Warenkorb (gap 24px) bleiben unberuehrt, ebenso Symbole,
   Groessen und Farben. 20px liegen in der Mitte der gewuenschten Spanne.

   B) DER SCHALTER IST OHNE FUNKTION
   Kein <button>, kein <input>, kein Handler, kein Zustand, nichts
   Gespeichertes, keine Klasse an body oder html. Das dunkle Design bleibt
   unveraendert aktiv; der Schalter zeigt lediglich, dass es dunkel IST.
   Deshalb cursor:default und aria-hidden am Markup. Die Klassennamen
   (--track, --knob) stehen so, dass sich das spaeter ohne neues Markup
   verdrahten laesst.

   Bewusst kein Systemschalter und keine iOS-Kopie: kleine Pille, ruhige
   Kontur, heller Knopf mit einer schlichten Mondsichel. Das SVG folgt der
   Strichsprache der uebrigen Kopfsymbole (24er Raster, fill:none, Kontur)
   und bringt keine Bibliothek mit.

   Farben ausschliesslich aus dem Bestand des Headers:
       #0E151C Spur   #26333D Kontur (die Farbe des DE|EN-Trenners)
       #94A0AA Knopf  (die Farbe der Kopfzeilen-Beschriftungen)

   Kein Gold - der Schalter soll nicht mit DE/EN konkurrieren.

   Rollback: .xgld-header-utility-20260818/rollback.sh */

.xgld-hd-account {
    margin-right: 20px;
}

/* DE/EN oben, Schalter darunter, beide auf derselben Mitte. Die Spalte ist
   so breit wie ihr breitestes Kind - das ist DE/EN, dadurch steht der
   Sprachblock unveraendert und der Schalter zentriert darunter. */
.xgld-hd-utility {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* Die drei Werte lagen bisher inline am Sprachblock. Sie stehen jetzt
       hier an der Huelle - gleiche Wirkung, aber von den Media Queries
       unten erreichbar. */
    flex-shrink: 0;
    margin-left: 20px;
    margin-top: -12px;
}

/* DIE HUELLE UEBERNIMMT DIE ROLLE DES SPRACHBLOCKS IM HEADER-FLEX
   Der Responsive-Pass ordnet die Kopfzeile ueber `order` an ihren direkten
   Flex-Kindern. Der Sprachblock ist durch die Huelle keines mehr - seine
   Regeln dort liefen ins Leere und die Kopfzeile brach mobil um. Die Huelle
   traegt deshalb dieselben Werte an denselben beiden Schwellen. */
@media (min-width: 600px) and (max-width: 899px) {
    .xgld-hd-utility {
        order: 1;
        margin-left: auto;
        align-self: center;
    }
}

@media (max-width: 599px) {
    .xgld-hd-utility {
        order: 1;
        margin-left: auto;
        align-self: center;
        margin-top: 0;
    }
}

/* Dieselben Regeln greifen unterhalb von 900px zusaetzlich auf den
   Sprachblock - der ist jetzt aber ein Kind der Huelle statt der Kopfzeile.
   Dort bedeutet `order: 1`, dass er HINTER den Schalter rutscht, und
   `margin-left: auto` schiebt ihn in seiner Spalte nach rechts. Beides wird
   hier zurueckgenommen; die Werte gehoeren an die Huelle, nicht in sie
   hinein. */
@media (max-width: 899px) {
    .xgld-hd-utility .xgld-hd-lang {
        order: 0;
        margin-left: 0 !important;
        align-self: auto;
    }
}

.xgld-theme-toggle {
    /* Er fuehrt nirgendwohin und laesst sich nicht bedienen - also auch
       kein Zeigefinger. Derselbe Grundsatz wie bei den seitlichen Muenzen
       im Hero. */
    cursor: default;
    line-height: 0;
    -webkit-user-select: none;
    user-select: none;
}

.xgld-theme-toggle-track {
    display: flex;
    align-items: center;
    width: 42px;
    height: 22px;
    padding: 0 3px;
    border: 1px solid #26333D;
    border-radius: 999px;
    background: #0E151C;
    box-sizing: border-box;
}

/* Der Knopf steht links - das ist die dunkle Seite und damit der Zustand,
   in dem die Seite gerade ist. */
.xgld-theme-toggle-knob {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #94A0AA;
    /* Die Mondsichel liegt als Aussparung im Knopf: currentColor traegt die
       Spurfarbe, dadurch braucht das SVG keine eigene Farbangabe. */
    color: #0E151C;
}

/* ---- Mobil ---------------------------------------------------------- */
@media (max-width: 768px) {
    /* Der Header raeumt sich hier ohnehin um; die Gruppe bekommt ihren
       urspruenglichen Rand zurueck, damit nichts zusaetzlich draengt. */
    .xgld-hd-account {
        margin-right: 0;
    }
}
/* ===== XGLD HEADER UTILITY - 2026-08-18 END ===== */

/* ===== XGLD HOME ORIENTATION V1 - 2026-08-19 START ====================
   Letzter Inhaltsbereich der Startseite. Markup und Texte: functions.php,
   Block gleichen Namens.

   KOMPOSITION - dieselben Achsen wie oben
   Aussen das Seitenraster der Startseite (176px Schiene, 44px Abstand,
   40px Seitenpolster), innen die Aufteilung des Heros
   (55fr / 52px / 45fr, hoechstens 1180px). Dadurch steht das Kuerzel
   ORIENTIERUNG exakt unter NACH GEWICHT ENTDECKEN und dieses unter der
   Editorial Navigation - die linke Schiene traegt alle Bereichsnamen der
   Seite. Die Ueberschrift beginnt auf derselben Achse wie die
   Hero-Ueberschrift und die Stueckelungen.

   ES SIND KEINE KARTEN
   Kein Rahmen, keine Flaeche, kein Radius, kein Schatten, kein Symbol, kein
   Knopf, kein Abzeichen. Gezeichnet werden ausschliesslich 1px-Haarlinien
   zwischen den Themenzeilen - als Kaestchen mit Hintergrund, wie alle
   Haarlinien dieser Seite. Der Bereich lebt von Schriftgroessen, Raster,
   Weissraum und zwei Grautoenen.

   KEINE TRENNLINIE ZUM HERO-STIL
   Ueber dem Bereich steht bewusst keine durchgehende Linie: eine solche
   Linie unter dem Hero ist am 18.08. ausdruecklich entfernt worden. Getrennt
   wird durch Weissraum.

   Farben ausschliesslich aus dem Bestand:
       #7C8FA0 Kuerzel und Pfeil   #EDEDED Ueberschrift
       #8FA3B3 Beschreibung        #A5B8C6 Themenzeile
       #D5A137 Gold nur bei Hover  #16232F Haarlinie

   Rollback: .xgld-home-orientation-v1-20260819/rollback.sh */

/* Der Vorlauf kommt aus dem 88px-Fuss der Gewichtssektion darueber - ein
   zweites Kopfpolster waere doppelt gezaehlt.

   Unten stehen 24px und nicht mehr: die Fusszeile bringt bereits 80px
   eigenen Vorlauf mit. Mit 64px lagen zwischen dem letzten Text und dem
   Beginn der Fusszeile gemessen 143px - deutlich mehr als die 88px oberhalb,
   und der Bereich haette unten ausgefranst gewirkt. 24 + 80 = 104px liegen
   nah am Vorlauf und lesen sich als bewusster Abschluss. */
.xgld-orientierung {
    padding: 0 0 24px;
}

.xgld-orientierung-raster {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 44px;
    padding: 0 40px;
    align-items: start;
}

/* Dieselben Werte wie das Kuerzel der Gewichtssektion - beide sitzen in
   derselben Schiene und benennen ihren Bereich, mehr nicht. */
.xgld-orientierung-eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7C8FA0;
    line-height: 1.55;
}

/* Die Aufteilung des Heros, einschliesslich seiner Hoechstbreite. Der
   Bereich endet dadurch auf breiten Schirmen auf derselben Kante wie der
   Hero und laeuft nicht als einzige Sektion bis zum Rand. */
.xgld-orientierung-satz {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: 52px;
    max-width: 1180px;
    align-items: start;
}

/* 30px stehen unter den 34px der Stueckelungen und deutlich unter den 46px
   der Hero-Ueberschrift: der Bereich ordnet ein, er eroeffnet nicht. */
.xgld-orientierung-titel {
    margin: 0 0 18px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -0.01em;
    color: #EDEDED;
}

/* Ein Teil je Zeile - der Umbruch steht damit fest und haengt nicht an der
   Spaltenbreite. Dieselbe Technik wie in der Hero-Beschreibung, kein <br>. */
.xgld-orientierung-zeile {
    display: block;
}

/* Werte der Hero-Beschreibung, damit beide Fliesstexte der Seite gleich
   gesetzt sind. */
.xgld-orientierung-intro {
    margin: 0;
    max-width: 42ch;
    font-size: 15.5px;
    line-height: 1.6;
    color: #8FA3B3;
}

.xgld-orientierung-themen {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Die Haarlinie steht ueber jeder Zeile, auch ueber der ersten: die drei
   Themen lesen sich dadurch als Verzeichnis und nicht als drei lose Zeilen.
   Unten schliesst die letzte Zeile ohne Linie ab - das Verzeichnis bleibt
   offen und wird kein Kasten. */
.xgld-orientierung-thema {
    position: relative;
}

.xgld-orientierung-thema::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #16232F;
}

.xgld-orientierung-ziel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 15px 0 16px;
    text-decoration: none;
    /* Die Zielseiten gibt es noch nicht - die Zeilen sind derzeit <span>
       und fuehren nirgendwohin. Kein Zeigefinger, derselbe Grundsatz wie bei
       den seitlichen Muenzen und der Gewichtsspanne im Hero. Sobald eine
       Adresse gesetzt ist, rendert PHP ein <a>; dann greift die Regel
       darunter. */
    cursor: default;
}

a.xgld-orientierung-ziel {
    cursor: pointer;
}

.xgld-orientierung-label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A5B8C6;
    transition: color 0.16s ease;
}

/* Derselbe Pfeil wie am Hero-Einstieg: ein 6px-Kaestchen mit zwei Raendern,
   um 45 Grad gedreht. Kein Zeichensatzpfeil, kein Symbol, keine Grafik. */
.xgld-orientierung-pfeil {
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
    color: #7C8FA0;
    transition: color 0.16s ease;
}

/* Hover aendert Farbe und sonst nichts: keine Flaeche, kein Rahmen, keine
   Bewegung, kein Massstab. */
.xgld-orientierung-ziel:hover .xgld-orientierung-label,
.xgld-orientierung-ziel:focus-visible .xgld-orientierung-label {
    color: #D5A137;
}

.xgld-orientierung-ziel:hover .xgld-orientierung-pfeil,
.xgld-orientierung-ziel:focus-visible .xgld-orientierung-pfeil {
    color: #A5B8C6;
}

a.xgld-orientierung-ziel:focus-visible {
    outline: 1px solid #D5A137;
    outline-offset: 4px;
}

/* ---- 769-1024px: schmalere Schiene, wie im uebrigen Layout ------------
   Der Bereich muss hier bei 769px beginnen und nicht erst bei 901px:
   .xgld-shop-layout stellt genau ab 769px auf 168px/36px um, und der Hero
   folgt dem. Gemessen stand die Ueberschrift sonst zwischen 769 und 900px
   auf x=260 statt auf der Hero-Achse x=244. Der Wechsel auf eine Spalte
   weiter unten ist davon unberuehrt - er haengt an der Breite der
   Themenzeilen, nicht an der Schiene. */
@media (min-width: 769px) and (max-width: 1024px) {
    .xgld-orientierung-raster {
        grid-template-columns: 168px minmax(0, 1fr);
        gap: 36px;
    }

    .xgld-orientierung-satz { gap: 40px; }
    .xgld-orientierung-titel { font-size: 27px; }
}

/* ---- bis 900px: Text oben, Verzeichnis darunter ----------------------
   Zwei Spalten waeren hier nicht mehr eng, sondern zu eng - die
   Themenzeilen brauchen ihre Breite, damit Text und Pfeil nicht
   zusammenruecken. */
@media (max-width: 900px) {
    .xgld-orientierung-satz {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }
}

/* ---- bis 768px: Kuerzel ueber den Satz ------------------------------- */
@media (max-width: 768px) {
    /* Mobil bringt die Fusszeile 56px mit, der Vorlauf betraegt 64px -
       16px schliessen den Bereich auf 72px ab. */
    .xgld-orientierung {
        padding: 0 0 16px;
    }

    .xgld-orientierung-raster {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        padding: 0 16px;
    }

    .xgld-orientierung-titel {
        font-size: 26px;
        margin-bottom: 16px;
    }

    .xgld-orientierung-intro {
        font-size: 15px;
        max-width: none;
    }

    .xgld-orientierung-ziel {
        /* Groessere Antippflaeche, ohne dass die Zeile optisch waechst. */
        padding: 17px 0 18px;
    }
}

@media (max-width: 400px) {
    .xgld-orientierung-titel { font-size: 24px; }
    .xgld-orientierung-label { font-size: 13px; letter-spacing: 0.07em; }
}

@media (prefers-reduced-motion: reduce) {
    .xgld-orientierung-label,
    .xgld-orientierung-pfeil {
        transition: none;
    }
}
/* ===== XGLD HOME ORIENTATION V1 - 2026-08-19 END ===== */

/* ===== XGLD HOME FINAL EDGE V1 - 2026-08-20 START =====================
   Ausgang und Abschlusskante am Fuss der Startseite. Markup und Erklaerung
   stehen in functions.php im Block gleichen Namens.

   DIE ABSTAENDE SIND DIE AUSSAGE
   Die Gewichtssektion trug unten 88px Polster (Desktop) bzw. 64px (mobil).
   Beides wird hier auf 28px bzw. 24px zurueckgenommen, damit der Ausgang
   eng an den Stueckelungen haengt und als deren Abschluss gelesen wird.
   Darunter stehen 56px (mobil 44px) bis zur Kante - mehr als doppelt so
   viel. Die Asymmetrie ordnet den Satz nach oben zu.

   Beide Werte werden aus DIESEM Block gesetzt, nicht im fremden Block der
   Gewichtssektion geaendert - dieselbe Technik, die XGLD SHOWCASE CLEARANCE
   fuer .xgld-hero2 und .xgld-gewichte bereits benutzt. Das Herausschneiden
   dieses Blocks stellt 88px und 64px von selbst wieder her.

   DIE KANTE ERSETZT DEN UEBERGANG, SIE ERGAENZT IHN NICHT
   Die Fusszeile bringt margin-top 80px (mobil 56px) und eine 1px-Linie in
   #1C252D mit. Beides ist genau der abrupte Uebergang, den die Kante
   ersetzen soll - stuende es zusaetzlich darunter, waere die Kante Ornament.
   Beides wird deshalb auf der Startseite auf 0 bzw. transparent gesetzt,
   ausschliesslich ueber .home und ohne die Fusszeilenregeln selbst
   anzufassen; auf allen anderen Seiten bleibt die Fusszeile unveraendert.
   Die Linie wird transparent statt entfernt, damit sich die Hoehe um kein
   einziges Pixel verschiebt.

   Rollback: .xgld-home-final-edge-v1-20260820/rollback.sh */

/* --- 1. Abstaende -------------------------------------------------------
   Bis zum 20.08.2026 standen hier 28px, weil darunter noch ein Ausgang
   folgte, der eng an die Stueckelungen gebunden werden musste; die Luft bis
   zur Kante trug er selbst (56px). Seit der Ausgang entfallen ist, traegt
   diesen Abstand allein die Gewichtssektion.

   80px, im Browser gegen 64, 72, 88 und 104px abgewogen: 64px draengt die
   Kante an die Stueckelungen, ab 88px liest sich die Flaeche als Loch. Der
   Bestandswert der Sektion war 88px - er war fuer einen folgenden TEXTblock
   gemessen; eine Kante wiegt weniger und darf entsprechend naeher stehen. */
.xgld-gewichte {
    padding-bottom: 80px;
}

/* --- 2. Die Abschlusskante ----------------------------------------------
   Kein eigener Grund: #0B1620 laeuft durch. Kein Rahmen, kein Radius, kein
   Schatten, kein Verlauf. */
.xgld-kante {
    padding: 0;
}

.xgld-kante-raster {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 44px;
    padding: 0 40px;
}

/* Das Feld schneidet ab, was ueber seine Breite hinausgeht. Dadurch bleibt
   das Rastermass ueberall exakt 8px. flex mit fester Luecke setzt die
   Linien auf ganzzahlige Vielfache von 8 - kein Verteilen, kein Rechnen. */
.xgld-kante-feld {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    height: 48px;
    overflow: hidden;
}

.xgld-kante-linie {
    flex: 0 0 1px;
    width: 1px;
    height: 100%;
    background: #16232F;
}

/* --- 3. Fusszeile schliesst direkt an, nur auf der Startseite ------------ */
.home .xgld-footer {
    margin-top: 0;
    border-top-color: transparent;
}

/* --- 4. Breiten ----------------------------------------------------------
   Die Kante folgt der Schienenbreite der Gewichtssektion Stufe fuer Stufe,
   damit die Doppelfigur ueber die ganze Seite dieselbe bleibt. */
@media (min-width: 901px) and (max-width: 1024px) {
    .xgld-kante-raster {
        grid-template-columns: 168px minmax(0, 1fr);
        gap: 36px;
    }
}

/* Ab hier verliert die Gewichtssektion ihr zweispaltiges Aussenraster nicht,
   die Kante behaelt es also ebenfalls bis 768px. */
@media (max-width: 768px) {
    /* Mobil war es 24 + 20 + 44; jetzt traegt die Sektion die 64px, mit
       denen sie vor dem Abschlusskanten-Pass ohnehin schon endete. */
    .xgld-gewichte {
        padding-bottom: 64px;
    }

    .xgld-kante-raster {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0 16px;
    }

    /* Ohne Schiene gibt es keine Doppelfigur mehr - es bleibt ein Feld. */
    .xgld-kante-feld--schiene {
        display: none;
    }

    .xgld-kante-feld {
        height: 44px;
    }

    .home .xgld-footer {
        margin-top: 0;
    }
}

/* Unter 360px wird das Feld sonst zu dicht: 9px Raster nimmt bei gleicher
   Linienzahl etwas Dichte heraus, ohne das Motiv zu aendern. 9 ist wie 8
   gegen Viertelschritte unempfindlich, weil 9 mal ein Viertel ebenfalls
   ganzzahlig ist (11.25 nicht - deshalb bleibt die Linie 1px und nur die
   Luecke waechst auf 8px). */
@media (max-width: 359px) {
    .xgld-kante-feld {
        gap: 8px;
        height: 40px;
    }
}

/* ===== XGLD HOME FINAL EDGE V1 - 2026-08-20 END ===== */

/* ===== XGLD HERO ECHTHEIT FINAL - 2026-08-20 START ===================
   Unter der langen Haarlinie im Hero stand nur "GEPRÜFTE ECHTHEIT" - ein
   Begriff ohne Gegenstand, der im Gesamtbild wie ein Platzhalter wirkte.
   Er bekommt genau eine Unterzeile. Kein Kasten, kein Symbol, kein
   Vertrauenssiegel, keine Ueberschrift, kein zweiter Ausgang.

   WAS DIE UNTERZEILE SAGEN DARF
   "Herkunft, Prägestätte und Feinheit - zu jeder Münze ausgewiesen."
   Das sind genau die drei Angaben, die xgld_showcase_details() im Coin
   Showcase je Muenze ausgibt, und sie stehen dort mit Quellenfeld
   (_xgld_showcase_specs_quelle). Die Zeile benennt also, was die Seite
   nachweislich zeigt, und benutzt dafuer deren eigenes Vokabular. Bewusst
   NICHT behauptet: zertifiziert, unabhaengig geprueft, staatlich geprueft,
   garantiert echt - fuer nichts davon gibt es eine Grundlage.

   HIERARCHIE UEBER HELLIGKEIT, NICHT UEBER GROESSE
   Der Hauptbegriff bleibt bei 11.5px und 0.13em Versalien - er wird nicht
   groesser, damit er nicht gegen die Navigation und den Gewichtstitel
   antritt. Er wird nur eine Stufe heller (#7C8FA0 -> #8FA3B3, beide aus dem
   Bestand). Die Unterzeile ist mit 13px zwar groesser, steht aber gemischt
   und im dunkleren Grau - das kleine gesperrte Versalwort bleibt dadurch
   der Anker, die Zeile darunter der Text.

   DIE HAARLINIE BLEIBT, WO SIE IST
   Sie liegt auf derselben Y-Achse wie die Zaesur ueber SERVICE in der
   Navigation links; gemessen betraegt die Abweichung ab 1180px 0.00px, und
   das darf sich nicht aendern. Der Hero zentriert seine beiden Spalten
   (align-items: center), eine hoehere Textspalte wuerde den ganzen Block
   nach oben ziehen und beide Linien auseinanderbringen.

   Deshalb gibt die Zeile die Hoehe, die sie hinzufuegt, exakt wieder ab:
   6px Abstand plus 19px Zeilenhoehe sind 25px, und genau -25px steht als
   Untermarge an der Liste. Das ist bewusst eine Marge an .xgld-hero2-facts
   und keine Aenderung an .xgld-hero2-text - die dortige Marge gehoert einem
   fremden Block und bleibt unangetastet.

   Die Kompensation gilt nur ab 1001px. Darunter stapelt der Hero
   (grid-template-columns: 1fr), es wird nichts mehr zentriert, und die
   Zeile darf ihre Hoehe behalten - sonst zoege sie den Showcase hoch.

   Rollback: .xgld-hero-echtheit-final-20260820/rollback.sh */

/* Hauptbegriff: Groesse und Laufweite kommen unveraendert von
   .xgld-hero2-facts li, hier steht nur der Helligkeitsschritt. */
.xgld-hero2-fact-titel {
    display: block;
    color: #8FA3B3;
    transition: color 0.16s ease;
}

/* Unterzeile: gemischte Schreibweise, keine Laufweite, dunkleres Grau. */
.xgld-hero2-fact-sub {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0;
    text-transform: none;
    color: #7C8FA0;
    transition: color 0.16s ease;
}

/* Der Link faerbt sonst beide Zeilen gleich. Die Unterzeile bekommt
   deshalb ihre eigene Farbe und wird beim Hover nur eine Stufe heller,
   waehrend der Hauptbegriff das Hausgold annimmt. Keine Bewegung, keine
   Unterstreichung, kein Pfeil, kein Schein. */
@media (hover: hover) {
    .xgld-hero2-fact-link:hover .xgld-hero2-fact-titel {
        color: #D5A137;
    }

    .xgld-hero2-fact-link:hover .xgld-hero2-fact-sub {
        color: #8FA3B3;
    }
}

.xgld-hero2-fact-link:focus-visible .xgld-hero2-fact-titel {
    color: #D5A137;
}

/* Solange der Hero zwei Spalten zentriert, darf die Unterzeile die Hoehe
   des Textblocks ueberhaupt nicht beruehren - sonst zieht die Zentrierung
   den Block nach oben und die Haarlinie loest sich von der Zaesur links.

   Eine feste Gegenmarge hat das nicht geloest: gemessen bricht die deutsche
   Zeile zwischen 1001 und 1179px auf zwei Zeilen um, und ein fester Wert
   war dann um genau diese 19px falsch - die Linie stand bei 1024px 13.17px
   statt 3.69px neben der Zaesur.

   Deshalb steht die Zeile dort ausserhalb des Flusses. Bezug ist
   .xgld-hero2-facts, die ohnehin position: relative traegt; top: 100% ist
   damit die Unterkante des Hauptbegriffs. Die Zeile bekommt so die volle
   Spaltenbreite statt der Breite des Begriffs, bricht dadurch seltener um,
   und die Hoehe des Textblocks bleibt in jedem Fall unveraendert.

   Sie bleibt Teil des Links: ein absolut gesetzter Nachfahre gehoert
   weiterhin zur Klickflaeche des <a>. Platz ist da - unter dem Textblock
   liegen die 73px Fusspolster des Hero. */
@media (min-width: 1001px) {
    .xgld-hero2-fact-sub {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 6px);
        margin-top: 0;
    }
}

/* Gestapelter Hero: keine Kompensation, dafuer etwas engere Zeile, damit
   die Einheit auf schmalen Schirmen nicht auseinanderfaellt. */
@media (max-width: 768px) {
    .xgld-hero2-fact-sub {
        font-size: 12.5px;
        line-height: 18px;
        margin-top: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xgld-hero2-fact-titel,
    .xgld-hero2-fact-sub {
        transition: none;
    }
}
/* ===== XGLD HERO ECHTHEIT FINAL - 2026-08-20 END ===== */

/* ===== XGLD FRONTEND CLEANUP SUCHE - 2026-08-22 START ===================
   Eigenes Suchergebnis-Template (search.php) statt des bisherigen
   WordPress-Fallbacks (kein search.php vorhanden -> index.php sprang ein:
   rohe H1 + voller the_content()-Dump, keine Produkt/Seiten-Unterscheidung,
   keine eigene Suchfeld-Optik auf der Ergebnisseite selbst).

   PRODUKTRASTER
   .xgld-search-products dupliziert bewusst die Kartenoptik aus
   ".xgld-shop-layout ul.products" (Bild, Titel, Preis, Button) statt sie
   wiederzuverwenden: .xgld-shop-layout ist ein zweispaltiges Grid
   (176px Index-Navigation + Inhalt) speziell fuer das Shop-Archiv - hier
   gibt es keine Index-Navigation, ein einfaches Karten-Grid reicht. Die
   Werte (Bildhoehe 260px, Kartenabstaende, Typografie) sind bewusst
   identisch zum Shop-Archiv, damit eine Produktkarte in der Suche genauso
   aussieht wie im Sortiment. xgld_karte_typ()/xgld_karte_spanne()
   (functions.php) greifen automatisch mit, da sie ungefiltert an
   woocommerce_shop_loop_item_title/woocommerce_after_shop_loop_item_title
   haengen.

   SUCHFELD AUF DER ERGEBNISSEITE
   .xgld-search-again ersetzt vollstaendig die weisse WordPress-Standard-
   Suchleiste (get_search_form()); Optik uebernommen vom bereits im Header
   dunkel gestalteten Suchfeld (siehe #xgld-search-input, header.php).

   KORREKTUR 22.08.2026, Produktsuche only V2
   Die Suche durchsucht ab jetzt ausschliesslich Produkte (functions.php,
   xgld_suche_auf_shop_beschraenken). Damit entfaellt die komplette
   Seiten-Treffer-Optik ".xgld-such-seiten-liste"/".xgld-such-seite" -
   ersatzlos entfernt, nicht nur unbenutzt stehen gelassen. Ebenso entfaellt
   ".xgld-search-sektion" (Zwischenueberschrift "Produkte"/"Seiten"): bei
   nur noch einer Trefferart braucht es keine Rubrik mehr.

   Rollback: .xgld-produktsuche-only-v2-20260822/rollback.sh
   (Vorgaenger V1: .xgld-frontend-cleanup-search-v1-20260822/rollback.sh) */

.xgld-search-page {
    padding: 36px 40px 80px;
    box-sizing: border-box;
    min-height: 50vh;
}

.xgld-search-wrap {
    max-width: 1240px;
    margin: 0 auto;
}

.xgld-search-title {
    font-size: 24px;
    font-weight: 500;
    color: #F5F5F5;
    margin: 0 0 8px;
}

.xgld-search-count {
    font-size: 13px;
    color: #7C8FA0;
    margin: 0 0 36px;
}

/* --- Produktkarten --------------------------------------------------- */
.xgld-search-products {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 40px 32px;
    max-width: 1120px;
    margin: 0 0 16px;
    padding: 0;
}

.xgld-search-products::before,
.xgld-search-products::after {
    display: none;
}

.xgld-search-products li.product {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: auto;
    float: none;
}

.xgld-search-products li.product a {
    text-decoration: none;
    color: #EDEDED;
}

.xgld-search-products li.product a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.xgld-search-products li.product img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    background: #0B1219;
    border: 1px solid #16232F;
    border-radius: 6px;
    padding: 26px;
    box-sizing: border-box;
    transition: border-color 0.16s ease;
}

.xgld-search-products li.product:hover img {
    border-color: #24384A;
}

.xgld-search-products li.product .woocommerce-loop-product__title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.25;
    color: #F5F5F5;
}

.xgld-search-products li.product .price {
    display: block;
    margin: 0;
    font-size: 14.5px;
    color: #D5A137;
}

.xgld-search-products li.product a.button,
.xgld-search-products li.product a.button.add_to_cart_button {
    align-self: flex-start;
    margin-top: auto;
    padding: 16px 0 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #8FA3B3 !important;
    transition: color 0.16s ease;
}

.xgld-search-products li.product a.button:hover,
.xgld-search-products li.product a.button.add_to_cart_button:hover {
    color: #D5A137 !important;
}

/* --- Kein Treffer -------------------------------------------------------- */
.xgld-search-empty {
    padding: 12px 0 40px;
    max-width: 520px;
}

.xgld-search-empty-text {
    font-size: 18px;
    font-weight: 500;
    color: #F5F5F5;
    margin: 0 0 10px;
}

.xgld-search-empty-sub {
    font-size: 14px;
    line-height: 1.5;
    color: #8FA3B3;
    margin: 0 0 24px;
}

.xgld-search-empty-shop {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid #D5A137;
    border-radius: 6px;
    color: #D5A137;
    text-decoration: none;
    font-size: 13.5px;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.xgld-search-empty-shop:hover {
    background: #D5A137;
    color: #0B1620;
}

/* --- Suchfeld auf der Ergebnisseite -------------------------------------
   Gleiche Optik wie das Kopfzeilen-Suchfeld (header.php, #xgld-search-input),
   hier als eigenstaendiger Block statt inline im Header-Markup. */
.xgld-search-again {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 420px;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid #1C2E3F;
}

.xgld-search-again-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    background: #0E151C;
    border: 1px solid #26333D;
    border-radius: 6px;
    padding: 12px 16px;
    color: #F5F5F5;
    font-size: 14px;
    font-family: inherit;
}

.xgld-search-again-input::placeholder {
    color: #94A0AA;
}

.xgld-search-again-input:focus {
    outline: none;
    border-color: #D5A137;
}

.xgld-search-again-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #D5A137;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.16s ease;
}

.xgld-search-again-btn:hover {
    background: #C6952E;
}

@media (max-width: 900px) {
    .xgld-search-page {
        padding: 32px 24px 72px;
    }
}

@media (max-width: 640px) {
    .xgld-search-page {
        padding: 24px 16px 56px;
    }
    .xgld-search-title {
        font-size: 21px;
    }
    .xgld-search-products {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 28px 16px;
    }
    .xgld-search-products li.product img {
        height: 180px;
        padding: 16px;
    }
    .xgld-search-again {
        max-width: none;
    }
}
/* ===== XGLD FRONTEND CLEANUP SUCHE - 2026-08-22 END ===== */

/* ===== XGLD HEADER TRUST INFO SEITEN V1 - 2026-08-25 START ==============
   Dritte Fassung nach zwei Art-Direction-Pruefungen (README des Passes,
   Abschnitt "Art-Direction-Pruefung"). Runde 1: zentrierte 760px-Spalte
   verliess die Rasterachse, beide Seiten waren strukturell dieselbe Seite.
   Runde 2 (freigegeben mit Korrekturen): die Achse war zurueck, aber

     - Haarlinien liefen quer ueber section/hero statt auf den Rasterspalten
     - das Bedingungsregister der Versandseite war eine Schiene IN der
       Schiene (Begriff bei x=260 statt x=40, Aussage bei x=480 statt x=260)
     - Registerbegriff und Sektionsrubrik waren typografisch ununterscheidbar
     - der Registerlink war ein zweiter Goldakzent neben dem CTA
     - Sektionsabstaende wurden zweiseitig addiert statt einseitig gemessen
     - ein toter Modifier (--register) blieb ungenutzt
     - drei Hover-Zustaende wechselten die Farbe hart statt mit Uebergang
     - ein Umlaut stand literal in einem CSS-Kommentar
     - zwei Media-Query-Ankerpaare liessen bei .5px-Breiten eine Luecke
     - das Register bestand aus <div>-Paaren statt <dl>/<dt>/<dd>

   Alle zehn Punkte sind in dieser Fassung behoben, siehe README.

   1) .xgld-hd-trust-link: sichtbarer Hover-/Tastaturfokus fuer die zwei
      Trust-Elemente im Header. Titelzeile traegt die Klasse
      .xgld-hd-trust-title statt einer an die DOM-Reihenfolge gekoppelten
      Nachfahrenkette.

   2) .xgld-infopage-*: gemeinsames Grundgeruest beider Informationsseiten.
      Fortgefuehrte Regel: dieselbe 176px/44px/40px-Schiene wie
      .xgld-gewichte-raster (Home Weight Discovery) - Rubrik links, Inhalt
      rechts. Die Rasterspalte kollabiert jetzt bei genau EINEM Punkt
      (max-width:768px, wie .xgld-gewichte-raster tatsaechlich kollabiert -
      nicht bei 900px, wie die zweite Fassung faelschlich behauptete), mit
      168px/36px-Zwischenstufe bei 901-1024px, exakt dasselbe Muster wie das
      Vorbild. Aussenpolster folgt weiterhin den echten Kopfzeilen-Ankern
      1199/899/599px, das ist ein separates, unabhaengiges System und bleibt
      unveraendert richtig.

      Haarlinien sitzen jetzt auf den beiden Rasterkindern
      (.xgld-infopage-section > .xgld-infopage-raster > *), nicht auf der
      Sektion selbst - dadurch zwei kurze Liniensegmente auf Rubrik- und
      Inhaltsspalte statt einer Linie ueber das ganze Fenster, dieselbe
      Figur wie die 176px/544px-Haarlinien im Hero. Der Hero selbst traegt
      keine eigene Linie - jede nachfolgende Sektion mit .xgld-infopage-
      raster-Kind markiert ihre eigene Grenze. AUSNAHME: die Registersektion
      der Versandseite hat kein .xgld-infopage-raster-Kind (siehe unten) und
      bekommt dadurch bewusst KEINE Linie zum Hero - nur den --weit-Abstand
      (64px). Nach Skill Abschnitt 2 ist Trennung durch Weissraum zulaessig,
      diese Abweichung von der Bitcoin-Seite ist damit gedeckt und im
      README festgehalten, nicht uebersehen.
      Sektionsabstaende sind jetzt ausschliesslich padding-top (eine Seite,
      Skill Abschnitt 4): der Wert VOR der Linie unterscheidet sich nach
      Rang (--weit 64px, Basis 40px, --dicht 24px), NACH der Linie folgt
      immer derselbe kleine Abstand zum Inhalt (20px) - macht die
      resultierenden Luecken 64+20=84 / 40+20=60 / 24+20=44px, gemessen und
      nicht addiert, weil jede Sektion ihre eigene Luecke vollstaendig
      selbst traegt und die vorherige Sektion keinen eigenen
      Bodenabstand mehr beisteuert.

   3) .xgld-infopage-register (Versandseite): natives <dl>/<dt>/<dd>. Jedes
      <dt>/<dd>-Paar liegt DIREKT auf der 176px/44px/40px-Schiene, keine
      verschachtelte zweite Schiene mehr - Begriff bei x=40 (dieselbe Kante
      wie die Sektionsrubrik), Aussage bei x=260 (dieselbe Kante wie der
      uebrige Sektionsinhalt). Der Registerbegriff traegt eigene, von der
      Rubrik unterscheidbare Typografie (13.5px/500/gemischte Schreibung/
      #EDEDED statt Versal/Tracking/#7C8FA0) - drei erkennbare Raenge
      (Rubrik, Begriff, Aussage) statt zwei identischer Label auf zwei
      Einrueckungen. Die Sektionsueberschrift "Bedingungen" bleibt fuer
      aria-labelledby im DOM, ist aber visuell verborgen
      (.xgld-infopage-sr-only) - sie sagt nichts, was die Begriffe nicht
      selbst sagen, und die durchgehend gefuellte Begriffsspalte wird so
      zum tatsaechlich dominanten Element der Seite. Ehrliche Nicht-Zusagen
      stehen als eigener Absatz in Tertiaerfarbe #5C7185
      (.xgld-infopage-register-caveat).

   4) Gold bleibt ausschliesslich am einen CTA-Link je Seite. Der
      Registerlink "Sonderfaelle" ist Text/Haarlinie-Unterstreichung
      (#EDEDED auf #16232F), nicht Gold - ein Verweis in einem
      Bedingungsregister ist eine Referenz, nicht "was gerade gilt". Der
      Gold-Marker der FAQ-Aufklapp-Dreiecke bleibt aus Runde 1 entfernt
      (Tertiaerfarbe).

   5) Alle Hover-/Fokusuebergaenge tragen jetzt transition:color 0.16s ease
      (bzw. border-bottom-color), der im Bestand etablierte Wert
      (.xgld-idx-nr, .xgld-idx-titel, .xgld-search-products a.button) -
      vorher wechselten drei Stellen die Farbe hart.

   Farben ausschliesslich aus dem Bestand: #0B1620 Grund, #16232F Haarlinie,
   #F5F5F5/#EDEDED Text primaer, #8FA3B3 sekundaer, #7C8FA0 Rubrik, #5C7185
   tertiaer/Ziffern, #D5A137/#E9BE6D Gold.

   Rollback: Block entfernen - Header-Trust-Elemente verlieren Hover/Fokus-
   Stil (Klickbarkeit bleibt ueber die href-Aenderung in header.php separat
   bestehen, siehe deren eigenes Backup), beide Infoseiten verlieren ihr
   Layout und fallen auf unformatierten Fliesstext zurueck. */

.xgld-hd-trust-link {
    border-radius: 4px; /* rundet ausschliesslich den :focus-visible-Ring, keine sichtbare Flaeche/Karte */
}

.xgld-hd-trust-title {
    color: #F5F5F5;
    font-weight: 500;
    transition: color 0.16s ease;
}

.xgld-hd-trust-link:hover .xgld-hd-trust-title {
    color: #E9BE6D;
}

.xgld-hd-trust-link:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 4px;
}

.xgld-infopage {
    background: #0B1620;
    color: #EDEDED;
}

.xgld-infopage-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.xgld-infopage-raster {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 44px;
    padding: 0 40px;
    align-items: start;
}

.xgld-infopage-hero {
    padding: 64px 0 40px;
}

.xgld-infopage-rubrik {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #7C8FA0;
    line-height: 1.55;
}

.xgld-infopage-h1 {
    margin: 0 0 16px;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #F5F5F5;
    line-height: 1.25;
}

.xgld-infopage-lede {
    margin: 0;
    max-width: 54ch;
    font-size: 15px;
    line-height: 1.65;
    color: #8FA3B3;
}

.xgld-infopage-section {
    padding-top: 40px;
}

.xgld-infopage-section--weit {
    padding-top: 64px;
}

.xgld-infopage-section--dicht {
    padding-top: 24px;
}

.xgld-infopage-section > .xgld-infopage-raster > * {
    border-top: 1px solid #16232F;
    padding-top: 20px;
}

.xgld-infopage-text {
    margin: 0;
    max-width: 62ch;
    font-size: 14px;
    line-height: 1.75;
    color: #8FA3B3;
}

.xgld-infopage-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 62ch;
}

.xgld-infopage-list li {
    position: relative;
    padding: 0 0 10px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: #8FA3B3;
}

.xgld-infopage-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    background: #5C7185;
}

.xgld-infopage-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.xgld-infopage-step {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 14px 0;
    border-top: 1px solid #16232F;
}

.xgld-infopage-step:first-child {
    border-top: none;
    padding-top: 0;
}

.xgld-infopage-step-num {
    flex-shrink: 0;
    width: 40px;
    font-size: 24px;
    font-weight: 300;
    color: #5C7185;
    font-variant-numeric: tabular-nums;
}

.xgld-infopage-step-text {
    font-size: 14px;
    line-height: 1.5;
    color: #EDEDED;
}

/* ---- Bedingungsregister (Versandseite): dt/dd liegen direkt auf der
   176px/44px/40px-Schiene, keine zweite Schiene im rechten Feld. Auto-
   Placement von CSS Grid platziert dt (grid-column:1) und dd (grid-column:2)
   abwechselnd in aufeinanderfolgende Zeilen, ganz ohne eigene Zeilenklasse
   je Paar. */
.xgld-infopage-register {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 0 44px;
    padding: 0 40px;
    margin: 0;
    align-items: start;
}

.xgld-infopage-register dt {
    grid-column: 1;
    margin: 0;
    padding: 20px 0 4px;
    border-top: 1px solid #16232F;
    font-size: 13.5px;
    font-weight: 500;
    color: #EDEDED;
    line-height: 1.5;
}

.xgld-infopage-register dd {
    grid-column: 2;
    margin: 0;
    padding: 20px 0;
    border-top: 1px solid #16232F;
}

.xgld-infopage-register dt:first-of-type,
.xgld-infopage-register dd:first-of-type {
    border-top: none;
    padding-top: 0;
}

.xgld-infopage-register dd p {
    margin: 0 0 8px;
    max-width: 62ch;
    font-size: 14px;
    line-height: 1.7;
    color: #8FA3B3;
}

.xgld-infopage-register dd p:last-child {
    margin-bottom: 0;
}

.xgld-infopage-register dd p.xgld-infopage-register-caveat {
    color: #5C7185;
}

/* Textfarbe bleibt konstant, nur die Unterkante hebt sich - dieselbe
   Mechanik wie der CTA-Link (transparent -> Gold), nur ohne Gold. Ein
   Registerlink, der beim Ueberfahren dunkler wird, laese sich als
   deaktiviert statt als hervorgehoben (Skill Abschnitt 7). */
.xgld-infopage-register-link {
    color: #EDEDED;
    text-decoration: none;
    border-bottom: 1px solid #16232F;
    transition: border-bottom-color 0.16s ease;
}

.xgld-infopage-register-link:hover,
.xgld-infopage-register-link:focus-visible {
    border-bottom-color: #8FA3B3;
}

.xgld-infopage-register-link:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 4px;
}

.xgld-infopage-faq-item {
    border-top: 1px solid #16232F;
}

.xgld-infopage-faq-item:last-child {
    border-bottom: 1px solid #16232F;
}

.xgld-infopage-faq-item summary {
    padding: 16px 0;
    font-size: 14px;
    font-weight: 500;
    color: #F5F5F5;
    cursor: pointer;
    list-style: revert;
}

.xgld-infopage-faq-item summary::marker {
    color: #5C7185;
}

.xgld-infopage-faq-item summary:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 4px;
}

.xgld-infopage-faq-item p {
    margin: 0 0 18px;
    max-width: 62ch;
    font-size: 14px;
    line-height: 1.7;
    color: #8FA3B3;
}

.xgld-infopage-cta {
    padding: 44px 0 72px;
}

.xgld-infopage-cta-content {
    grid-column: 2;
}

.xgld-infopage-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #D5A137;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-bottom-color 0.16s ease;
}

.xgld-infopage-cta-link:hover,
.xgld-infopage-cta-link:focus-visible {
    border-bottom-color: #D5A137;
}

.xgld-infopage-cta-link:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 4px;
}

/* ---- 769-1024px: schmaleres Raster, wie .xgld-gewichte-raster tatsaechlich
   kollabiert (bei max-width:768px, siehe Blockkommentar oben - nicht bei
   900px). Die Untergrenze dieser Zwischenstufe muss mit dem Kollaps
   mitziehen: knapp ueber 768px per min-width:768.02px angesetzt, damit bei
   .5px-Breiten (Zoom, nicht-ganzzahlige Geraetebreiten) keine Luecke
   zwischen dieser Regel und dem Kollaps entsteht. Deckt sich damit exakt
   mit dem 769-1024-Band von .xgld-shop-layout (style.css:8071-8080). */
@media (min-width: 768.02px) and (max-width: 1024px) {
    .xgld-infopage-raster,
    .xgld-infopage-register {
        grid-template-columns: 168px minmax(0, 1fr);
        gap: 36px;
    }
}

/* ---- ab 1200px voller Seitenpolster, darunter Kopfzeilen-Anker -------- */
@media (max-width: 1199px) {
    .xgld-infopage-raster,
    .xgld-infopage-register {
        padding-left: 28px;
        padding-right: 28px;
    }
}

@media (max-width: 899px) {
    .xgld-infopage-raster,
    .xgld-infopage-register {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 599px) {
    .xgld-infopage-raster,
    .xgld-infopage-register {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ---- Kollaps auf eine Spalte bei 768px, wie .xgld-gewichte-raster ----- */
@media (max-width: 768px) {
    .xgld-infopage-raster {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 6px;
    }
    .xgld-infopage-section > .xgld-infopage-raster > *:not(:first-child) {
        border-top: none;
        padding-top: 6px;
    }
    .xgld-infopage-register {
        grid-template-columns: minmax(0, 1fr);
    }
    .xgld-infopage-register dt,
    .xgld-infopage-register dd {
        grid-column: 1;
    }
    .xgld-infopage-register dd {
        border-top: none;
        padding-top: 4px;
    }
    .xgld-infopage-hero {
        padding: 40px 0 28px;
    }
    .xgld-infopage-h1 {
        font-size: 24px;
    }
    .xgld-infopage-section {
        padding-top: 28px;
    }
    .xgld-infopage-section--weit {
        padding-top: 40px;
    }
    .xgld-infopage-section--dicht {
        padding-top: 18px;
    }
    .xgld-infopage-cta-content {
        grid-column: 1;
    }
}

@media (max-width: 480px) {
    .xgld-infopage-h1 {
        font-size: 21px;
    }
    .xgld-infopage-lede {
        font-size: 14px;
    }
    .xgld-infopage-step {
        gap: 14px;
    }
    .xgld-infopage-step-num {
        width: 32px;
        font-size: 20px;
    }
}
/* ===== XGLD HEADER TRUST INFO SEITEN V1 - 2026-08-25 END ===== */

/* ===== XGLD ZAHLUNG VERSAND KUNDENREIFE V2 - 2026-08-25 START ===========
   Eigenstaendiger Pass auf den beiden von V1 (Block "XGLD HEADER TRUST
   INFO SEITEN V1 - 2026-08-25", oben, unveraendert) angelegten Infoseiten.
   Kein Neuentwurf: Raster, Achse und Struktur bleiben V1s Stand. Dieser
   Block layert ausschliesslich die unten begruendeten Korrekturen ueber V1,
   per CSS-Kaskade (gleiche Selektoren, spaeter in der Datei = gewinnt ohne
   !important) - V1s eigener Block bleibt dadurch byte-identisch und sein
   eigener Rollback funktioniert unveraendert weiter. Fuer neue Eigenschaften
   (max-width, box-sizing) ist das ohnehin nur eine Ergaenzung, kein
   Ueberschreiben.

   Von Gate A des Art Director geprueft und mit vier Korrekturen freigegeben
   (siehe README des Passes, Abschnitt "Art-Direction-Pruefung"):

   1) Kontrast: .xgld-infopage-step-num faellt bei max-width:480px auf 20px
      und verliert dort die WCAG-Grosstext-Ausnahme (>=18px). #5C7185 liegt
      bei 3.61:1 gegen den Seitengrund #0B1620 und faellt unter AA-Normal-
      text (4.5:1) durch. Auf #7C8FA0 (5.47:1) umgestellt - besteht auf
      allen Breiten. Ebenso .xgld-infopage-register-caveat: #8FA3B3 waere
      hier falsch gewesen (identisch mit dem normalen dd-Absatz, die
      Rangstufe zwischen Zusage und Einschraenkung ginge verloren), #7C8FA0
      haelt drei sichtbare Raenge auseinander (#EDEDED Begriff, #8FA3B3
      Aussage, #7C8FA0 Einschraenkung) - dasselbe Ton-Paar-Prinzip wie
      .xgld-gewicht-fein Ruhe/Hover im Bestand. #5C7185 bleibt nur noch am
      Listenquadrat und am FAQ-Aufklapp-Dreieck stehen - beides Nicht-Text,
      wo die niedrigere 3:1-Schwelle gilt und 3.61:1 genuegt.

   2) Ultra-Wide-Leerraum: .xgld-infopage-raster und .xgld-infopage-register
      liefen bisher unbegrenzt bis zum rechten Seitenrand, waehrend der Text
      laengst durch max-width:62ch/54ch auf den Absaetzen gedeckelt war -
      auf 3840px Ultra-Wide ein sehr breiter, fast leerer rechter Bereich.
      max-width:1260px (= 1180px Inhalt + 2x40px eigenes Seitenpolster,
      mit box-sizing:border-box) uebernimmt denselben Inhaltsrand wie
      .xgld-hero2/.xgld-orientierung-satz (deren 1180px OHNE eigenes
      Polster gilt, das dort aussen an .xgld-start-sektion sitzt - die
      1260px hier sind der rechnerisch gleichwertige Wert fuer einen
      Selektor, der sein Polster selbst traegt). Bewusst OHNE
      margin:0 auto: die linke Kante bleibt am 40px-Seitenpolster stehen,
      nur die rechte Kante wird gekappt - das ist nicht die in Runde 1
      verworfene zentrierte 760px-Spalte, sondern deren Gegenteil.

   3) CTA-Praesenz: .xgld-infopage-cta-link von 14px auf 15px - der im
      Bestand bereits verwendete Wert (.xgld-infopage-lede), keine neue
      Groesse ausserhalb der 12-15px-Fliesstextskala. Kein Rahmen, kein
      Verlauf, keine Flaeche.

   4) Sekundaerer Kontaktlink NUR auf der Bitcoin-Seite (Vorlage in
      xgld-bitcoin-page-template.php): 13px, #8FA3B3, eine eigene Zeile
      UNTER dem Gold-CTA, nicht daneben (sonst Doppel-CTA-Optik). Die
      Versandseite bekommt keinen zweiten Kontaktlink im CTA - sie hat mit
      den Registerzeilen "Schadensfall" und "Sonderfaelle" bereits eigene,
      besser platzierte Kontaktstellen (K4, unten).

   5) .xgld-infopage-step-text traegt max-width:62ch, damit die neue
      Unterzeile (.xgld-infopage-step-detail, Bitcoin-Ablauf) auf Ultra-
      Wide nicht bis zur vollen 960px-Inhaltsspalte laeuft - derselbe Wert
      wie .xgld-infopage-text/-list, kein neues Mass.

   Gate B (zweite, abschliessende Pruefrunde) verlangte zusaetzlich drei
   Korrekturen an der ersten V2-Fassung, alle unten eingearbeitet: K1 - der
   Sekundaerlink war display:block ohne Breitenbegrenzung und zog Unterkante
   und Fokusring auf die volle 960px-Inhaltsspalte; jetzt width:fit-content.
   K2 - <strong> um die Kernaussage im Register erbte ungewollt UA-Bold
   (700, im Bestand praktisch ungenutzt) bei gleichzeitig zu dunkler Farbe;
   jetzt Hausgewicht 500 und #EDEDED. K3 - Punkt 5 oben fehlte im
   urspruenglichen Blockkopf trotz sachlicher Zugehoerigkeit zur Ultra-Wide-
   Korrektur; jetzt nachgetragen. K4 (empfohlen, umgesetzt) - die Register-
   zeile "Schadensfall" der Versandseite verlinkt jetzt ebenfalls auf die
   Kontaktseite (xgld-shipping-page-template.php), damit der dringendste
   Registerpunkt eine ebenso erreichbare Kontaktstelle traegt wie der
   harmloseste ("Sonderfaelle") - keine neue Klasse, derselbe Anker wie dort.

   Kein neuer Goldwert, kein zweiter Akzent je Seite, keine neue
   Rasterachse, keine neuen Breakpoints.

   Rollback: Block entfernen - alle Ueberschreibungen fallen weg, V1s
   Grundwerte (Farben, 14px-CTA, unbegrenzte Rasterbreite) gelten wieder
   unveraendert. Die begleitenden Textaenderungen in den beiden
   Template-Dateien sind NICHT Teil dieses Blocks (dort keine Marker,
   Ganzdatei-Sicherung ueber dieses Passes .pre/.post, siehe README). */

.xgld-infopage-raster,
.xgld-infopage-register {
    max-width: 1260px;
    box-sizing: border-box;
}

.xgld-infopage-step-num {
    color: #7C8FA0;
}

/* Ohne diesen Deckel liefe die neue Unterzeile (.xgld-infopage-step-detail)
   auf Ultra-Wide bis zur vollen 960px-Inhaltsspalte (Gate-B-Korrektur K3:
   diese Regel fehlte im Blockkopf, obwohl sie sachlich zur selben
   Ultra-Wide-Korrektur gehoert). 62ch ist kein neuer Wert - derselbe wie
   bei .xgld-infopage-text und .xgld-infopage-list. */
.xgld-infopage-step-text {
    max-width: 62ch;
}

/* Kurze Zusatzzeile innerhalb eines verdichteten Schritts (Bitcoin-Seite,
   V2-Kundenreife-Pass: 7 auf 4 Schritte verdichtet, Details wie QR-Code/
   Adresse/Betrag und Bestaetigungshinweis stehen jetzt als Unterzeile im
   jeweiligen Schritt statt als eigene Zeile). Sekundaerfarbe, kein eigener
   Markenwert. */
.xgld-infopage-step-detail {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #8FA3B3;
}

.xgld-infopage-register dd p.xgld-infopage-register-caveat {
    color: #7C8FA0;
}

/* Gate-B-Korrektur K2: die Kernaussage "Versicherter Wertversand ueber
   INTEX" (Registerwert "Versicherung") steht in <strong>, damit sie sich
   von den uebrigen Aussagen abhebt. Ohne diese Regel erbt <strong> die
   UA-Vorgabe 700 - im Bestand praktisch nicht verwendet (Skill: 1x) - bei
   gleichzeitig dunklerer #8FA3B3-Faerbung als das eigene Begriffs-Etikett
   (#EDEDED). Auf Hauswerte gestellt: Gewicht 500 (die Hauptstuetze der
   Seite), Farbe #EDEDED (die oberste Registerstufe) - dieselbe Stufe wie
   der Begriff selbst, keine neue Groesse, kein Gold. */
.xgld-infopage-register dd strong {
    font-weight: 500;
    color: #EDEDED;
}

.xgld-infopage-cta-link {
    font-size: 15px;
}

/* Zweiter, zurueckhaltender Kontaktlink unter dem Gold-CTA (nicht daneben -
   das waere ein Doppel-CTA). 13px, Sekundaerfarbe, kein Gold: es bleibt bei
   genau einem Goldakzent je Seite. display:block erzwingt die eigene Zeile,
   width:fit-content haelt Unterkante und Fokusring auf Textbreite statt auf
   voller Inhaltsspaltenbreite (Gate-B-Korrektur K1: ohne fit-content waere
   der Rahmen auf breiten Schirmen so breit wie die 960px-Inhaltsspalte -
   ein 960px-Fokusring um den kleinsten Link der Seite). */
.xgld-infopage-cta-secondary {
    display: block;
    width: fit-content;
    margin-top: 14px;
    font-size: 13px;
    color: #8FA3B3;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.16s ease;
}

.xgld-infopage-cta-secondary:hover,
.xgld-infopage-cta-secondary:focus-visible {
    border-bottom-color: #8FA3B3;
}

.xgld-infopage-cta-secondary:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 4px;
}
/* ===== XGLD ZAHLUNG VERSAND KUNDENREIFE V2 - 2026-08-25 END ===== */

/* ===== XGLD ZAHLUNG VERSAND KUNDENREIFE V2-1 - 2026-08-25 START =========
   Eigenstaendiger Korrekturpass nach echter Desktop-Sichtpruefung von V2.
   Layert ausschliesslich per CSS-Kaskade ueber V1 und V2 (gleiche
   Selektoren, spaeter in der Datei = gewinnt ohne !important) - beide
   vorherigen Bloecke bleiben byte-identisch stehen.

   Von Gate A des Art Director geprueft. Zentrale Entscheidung: KEIN Hover
   auf Bitcoin-Schritten oder INTEX-Registerzeilen (waren urspruenglich
   angefragt). Begruendung des Art Director: der Bestand kennt eine klare
   Regel - Gold auf Hover nur dort, wo der Hover zu einem Ziel fuehrt
   (.xgld-gewicht-*, .xgld-hero2-fact-link). Wo Gold in derselben
   Komponente bereits einen Zustand traegt (.xgld-idx-eintrag.is-aktuell),
   nutzt Hover es nicht. Bitcoin-Schritte/INTEX-Register sind auf
   ausdruecklichen Wunsch keine Links - sie bekommen daher keinerlei
   Hover-Zustand, weder Farbe noch Flaeche noch Linie. Das gemeldete
   "wirkt ausgegraut" ist ein RUHEZUSTANDS-Problem (auch ohne Maus, auch
   auf dem Telefon sichtbar) und wird stattdessen durch eine geschlossene
   Anhebung der Helligkeitsleiter geloest - keine neuen Farbwerte, alle
   vier Stufen stehen bereits im Bestand:

     Rang 2 (Fliesstext, Lede, Listenpunkte, Registeraussage, FAQ-Antwort):
       #8FA3B3 -> #A5B8C6  (7.01:1 -> ca. 8.93:1 auf #0B1620)
     Rang 3 (Rubriken, Register-Einschraenkung):
       #7C8FA0 -> #8FA3B3  (5.47:1 -> ca. 7.01:1)
     Rang 4 / Nicht-Text (Listenquadrat, FAQ-Chevron in Ruhe):
       #5C7185 -> #6E8497  (3.61:1 -> ca. 4.71:1)

   Gate-B-Korrektur K2: .xgld-infopage-step-detail bleibt bewusst AUSSEN
   vor und haelt Rang 3 (#8FA3B3) statt Rang 2 - sie ist eine Unterzeile
   zu einer #EDEDED-Zeile, keine eigenstaendige Textstufe (Praezedenz:
   .xgld-idx-titel/-sub, wo die Unterzeile zwei Stufen unter dem Titel
   liegt). Siehe eigener Kommentar an der Regel unten.

   Auf beiden Seiten reagieren nach diesem Pass ausschliesslich Elemente
   auf den Zeiger, die bei Klick tatsaechlich etwas tun: FAQ-Summaries,
   Haupt-CTA, Sekundaerlink, der Registerlink "Schadensfall". Die
   Registerzeile "Sonderfaelle" (V2) ist auf Empfehlung des Art Director in
   diesem Pass entfallen - drei fast gleichlautende Kontaktstellen
   ("kontaktiere uns" / "XGLD kontaktieren" / "Fragen zum Wertversand?
   XGLD kontaktieren") schwaechten die Begriffsspalte, die laut V1 das
   dominante Element der Seite ist. Zwei Kontaktwege mit klar
   unterschiedlichem Anlass bleiben: Schadensfall (dringend, im Kontext)
   und der neue CTA-Sekundaerlink (allgemein, am Seitenfuss).

   CTA: uebernimmt die Werte der Homepage-Komponente .xgld-hero2-cta
   (Gate A bestaetigt) - Farben, Pfeilkonstruktion (16x1px-Linie + 6x6px-
   Eck bei 45deg), transform:translateX(3px) bei Hover. NICHT die Klasse
   selbst (Bestandsprinzip, style.css ca. Zeile 9515: Werte kopieren,
   nicht per Klasse erben, damit sich dieser Pass isoliert zuruecknehmen
   laesst) - eigene Klasse .xgld-infopage-cta-pfeil, Homepage-Block bleibt
   unangetastet. Die alte Unterkanten-Hover-Mechanik (border-bottom
   transparent->Gold) entfaellt vollstaendig - zwei Hover-Signale (Farbe
   UND Linie UND Pfeil) waeren eines zu viel. font-weight:600 entfaellt
   ebenso, die Homepage-Komponente deklariert kein Gewicht. Touch-Ziel
   ~44px kommt aus vertikalem Innenpolster am Link (13px oben/unten +
   ca. 18px Zeilenhoehe bei 15px), NICHT addiert: .xgld-infopage-cta
   verliert exakt die 13px oben (44px->31px), .xgld-infopage-cta-secondary
   verliert 11px oben (14px->3px) - die gemessenen Aussenluecken zum
   vorherigen Abschnitt und zwischen den beiden Links bleiben dadurch
   identisch zum V2-Stand.

   FAQ: natives details/summary bleibt fuer Semantik/Tastatur erhalten,
   der visuelle Marker wird durch ein eigenes Chevron-Pseudoelement
   ersetzt (dieselbe Eck-Konstruktion wie der CTA-Pfeilkopf: 6x6px,
   border-top+border-right, 1px). Repariert nebenbei einen echten Fehler:
   der native Marker (list-style:revert) ruecke die Frage bisher um seine
   eigene Breite gegenueber der Antwort und jeder anderen Ueberschrift der
   Seite ein - der Chevron wandert stattdessen ans rechte Zeilenende
   (summary wird flex, justify-content:space-between), Frage und Antwort
   stehen jetzt auf derselben Achse. Farblogik: Ruhe #6E8497 (Rang 4),
   Hover/Fokus #8FA3B3 (Rang 3), details[open] #EDEDED (Gate-B-Korrektur K4:
   NICHT Gold - natives <details> hat keine Exklusivitaet, bis zu sechs
   Zeilen je Seite koennten sonst gleichzeitig gold stehen und die
   "ein Akzent je Seite"-Regel brechen; die aufklappende Antwort und die
   135deg-Drehung zeigen den Zustand bereits ausreichend an). Gold bleibt
   dadurch ausschliesslich am einen Haupt-CTA je Seite - Zustand, nie
   Zeigerposition. Frage (#F5F5F5) und Antwort (Rang-2-Wert) aendern ihre
   Farbe in keinem Zustand - "bleibt hervorgehoben" ist ohne eigene Regel
   erfuellt, weil die Frage bereits der hellste Wert der Seite ist.

   Ultra-Wide: der V2-Deckel max-width:1260px auf .xgld-infopage-raster/
   -register wird NICHT erhoeht. Der eigentliche Fehler lag innerhalb des
   Blocks: die Inhaltsspalte lief bis zu 960px, waehrend der Text laengst
   bei ca. 520px endete - Register- und FAQ-Haarlinien ragten rund 440px
   ueber ihren eigenen Inhalt hinaus. Behoben durch Deckelung der
   INHALTSSPALTE (nicht des Aussenrasters) auf 544px - kein neuer Wert,
   sondern exakt das zweite Haarliniensegment des Hero (Skill Abschnitt 2:
   "im Hero laufen sie 176px und 544px breit mit 44px Zwischenraum"). Die
   Infoseiten reproduzieren damit dieselbe 176|44|544-Figur wie die
   positive Referenz. Gesamtbreite des Inhalts damit 176+44+544=764px,
   Block endet bei x=804 (40px Polster + 764px). Bei 3840px bleiben 3036px
   frei - MEHR als beim Homepage-Hero (.xgld-hero2 max-width:1180px laesst
   2620px frei). Der fruehere Vergleich "Infoseiten liessen weniger frei
   als die Startseite" galt nur fuer den jetzt inerten 1260px-Deckel und
   ist mit dieser Korrektur nicht mehr zutreffend - hier richtiggestellt,
   damit ein spaeterer Pass sich nicht auf die veraltete Zahl beruft. Der
   V2-Deckel (1260px) bindet dadurch nicht mehr aktiv, bleibt aber
   unangetastet im V2-Block stehen (fremder Pass) - hier ausdruecklich als
   wirkungslos vermerkt. Gilt fuer die zweite Rasterspalte UND die
   dd-Spalte des Registers, oberhalb 768.02px (Gate-B-Korrektur K1 - siehe
   Regel unten, ohne die min-width-Klammer gewann die Regel faelschlich
   auch unterhalb 768px und hebelte den Einspaltenkollaps auf jedem
   Telefon aus); darunter regeln die bestehenden ch-Werte der Absaetze
   das Mass.

   Bekannter Nebeneffekt, kein Fehler: .xgld-infopage-list erbt 16px vom
   body (keine eigene font-size), ihr max-width:62ch loest damit zu ~595px
   auf und bindet gegen die 544px-Spur nicht mehr - die Spur selbst setzt
   seither das Mass (544px = 64.8ch bei den 14px-li). Die "Was benoetigt
   wird"-Liste laeuft dadurch als einziger Textblock beider Seiten rund
   drei Zeichen breiter als alle anderen. Kein Overflow, keine Korrektur
   in diesem Pass - vermerkt fuer einen spaeteren.

   Alle neuen Hover-Effekte stehen unter @media (hover: hover) - ohne
   and (pointer: fine), Bestandsmuster (style.css ca. 8513, 10678).
   :focus-visible bleibt davon unberuehrt und wirkt immer (Tastatur
   funktioniert unabhaengig von Zeigerfaehigkeit). Unter prefers-reduced-
   motion:reduce entfaellt die Pfeilbewegung vollstaendig (nicht nur ihr
   Uebergang), der Farbwechsel bleibt. transition-Werte durchgehend
   0.16s ease - der mit Abstand haeufigste Wert im Bestand.

   Rollback: Block entfernen - Ruhezustandsfarben, CTA und FAQ-Marker
   fallen auf den V2-Stand zurueck, die Inhaltsspalte laeuft wieder bis
   960px (V2-Deckel 1260px greift dann wieder aktiv). */

/* ---- Helligkeitsleiter, geschlossen um je eine Bestandsstufe ---------- */
.xgld-infopage-lede,
.xgld-infopage-text,
.xgld-infopage-list li,
.xgld-infopage-register dd p,
.xgld-infopage-faq-item p {
    color: #A5B8C6;
}

/* GATE-B-KORREKTUR K2: .xgld-infopage-step-detail bleibt auf #8FA3B3 statt
   auf die Rang-2-Stufe mitgezogen zu werden. Sie ist keine eigenstaendige
   Textstufe, sondern eine Unterzeile zu einer #EDEDED-Zeile - dieselbe
   Unterscheidung wie im Bestand zwischen .xgld-idx-titel (#A5B8C6) und
   .xgld-idx-sub (#6E8497, zwei Stufen unter dem Titel, nicht auf gleicher
   Hoehe). Ohne diese Ausnahme waere die Rangtrennung zum Schritttext
   (#EDEDED) auf 1.75:1 zusammengefallen - die schwaechste Hierarchie der
   Seite, ausgerechnet im dominanten Abschnitt. */
.xgld-infopage-step-detail {
    color: #8FA3B3;
}

.xgld-infopage-rubrik,
.xgld-infopage-register dd p.xgld-infopage-register-caveat {
    color: #8FA3B3;
}

.xgld-infopage-list li::before {
    background: #6E8497;
}

/* ---- Inhaltsspalte auf 544px gedeckelt (Hero-Haarlinienmass), nicht das
   Aussenraster - siehe Blockkommentar oben. GATE-B-KORREKTUR K1: die Regel
   MUSS hinter min-width:768.02px stehen. Eine @media-Grenze traegt selbst
   keine Spezifitaet bei - ohne diese Klammer hatte die Regel dieselbe
   Spezifitaet (0,1,0) wie V1s Kollaps-Regel unter max-width:768px, stand
   aber spaeter in der Datei und gewann deshalb AUCH unterhalb 768px: der
   Einspaltenkollaps war auf jedem Telefon ausgehebelt (Register faellt in
   die feste 176px-Spur, CTA ueberläuft sie). Mit der Klammer bindet der
   Deckel nur noch im selben Band wie die 168px-Zwischenstufe darunter. */
@media (min-width: 768.02px) {
    .xgld-infopage-raster,
    .xgld-infopage-register {
        grid-template-columns: 176px minmax(0, 544px);
    }
}

@media (min-width: 768.02px) and (max-width: 1024px) {
    .xgld-infopage-raster,
    .xgld-infopage-register {
        grid-template-columns: 168px minmax(0, 544px);
    }
}

/* ---- CTA: Werte der Homepage-Komponente .xgld-hero2-cta uebernommen,
   eigene Klasse statt geerbter (Bestandsprinzip, isolierte Ruecknahme) -- */
.xgld-infopage-cta {
    padding-top: 31px;
}

.xgld-infopage-cta-secondary {
    margin-top: 3px;
}

.xgld-infopage-cta-link {
    gap: 11px;
    padding: 13px 0;
    font-weight: 400;
    letter-spacing: 0.02em;
    border-bottom: none;
    transition: color 0.16s ease;
}

.xgld-infopage-cta-pfeil {
    position: relative;
    width: 16px;
    height: 1px;
    background: currentColor;
    flex-shrink: 0;
    transition: transform 0.16s ease;
}

.xgld-infopage-cta-pfeil::after {
    content: "";
    position: absolute;
    right: 0;
    top: -2.5px;
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}

.xgld-infopage-cta-link:focus-visible {
    color: #E9BE6D;
    /* Gate-B-Korrektur K3: V1s outline-offset:4px (Zeile 11391) passte zum
       damaligen padding-bottom:2px. Seit dem V2.1-Touch-Ziel-Umbau
       (padding:13px 0) sitzt die Ringunterkante rund 1px im Sekundaerlink
       darunter - der Ring braucht den Versatz nicht mehr, das Padding
       selbst schafft bereits Abstand zum Text. */
    outline-offset: 2px;
}

.xgld-infopage-cta-link:focus-visible .xgld-infopage-cta-pfeil {
    transform: translateX(3px);
}

@media (hover: hover) {
    .xgld-infopage-cta-link:hover {
        color: #E9BE6D;
    }
    .xgld-infopage-cta-link:hover .xgld-infopage-cta-pfeil {
        transform: translateX(3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .xgld-infopage-cta-link:hover .xgld-infopage-cta-pfeil,
    .xgld-infopage-cta-link:focus-visible .xgld-infopage-cta-pfeil {
        transform: none;
    }
}

/* ---- FAQ: eigener Chevron statt nativem Marker, ans rechte Zeilenende - */
.xgld-infopage-faq-item {
    position: relative;
}

.xgld-infopage-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
    transition: color 0.16s ease;
}

.xgld-infopage-faq-item summary::-webkit-details-marker {
    display: none;
}

.xgld-infopage-faq-chevron {
    position: relative;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-right: 2px;
    border-top: 1px solid #6E8497;
    border-right: 1px solid #6E8497;
    transform: rotate(45deg);
    transition: transform 0.16s ease, border-color 0.16s ease;
}

/* Zahlung Versand Kundenreife V2.1 Abschlusskorrektur (fortgefuehrt im
   bestehenden V2.1-Block, kein neuer Marker): FAQ ist ein echtes
   Bedienelement und bekommt auf ausdruecklichen Wunsch einen deutlich
   sichtbaren Gold-Zustand - nimmt die vorherige Gate-B-Korrektur K4
   (Offen-Zustand nicht Gold) bewusst zurueck. Chevron und Frage teilen
   sich EINEN Akzent in zwei Tonstufen (#D5A137 Chevron, #E9BE6D Frage -
   beide bereits im Bestand fuer "Hover/Fokus auf Gold" vorgesehen): volles
   #D5A137 an der Frage selbst laege mit ca. 7.8:1 unter der eigenen
   Antwortfarbe (#A5B8C6, ca. 8.9:1) - die Frage waere dunkler als ihr
   eigener Fliesstext, die Rangfolge kippte. #E9BE6D bleibt darueber.
   Hover, Fokus und Offen loesen jetzt auf DIESELBEN Werte auf (anders als
   zuvor, wo Offen heller als Hover war) - die fruehere :not([open])-
   Absicherung an der Hover-Regel ist dadurch gegenstandslos und entfaellt:
   unabhaengig davon, welche Regel bei einer offenen UND gehoverten/
   fokussierten Zeile technisch gewinnt, ist das Ergebnis farblich
   identisch. Keine Flaechenaufhellung (0E151C ist im Bestand Konto/
   Checkout/Formularen vorbehalten, eine 544px breite Flaeche waere die
   lauteste Geste beider Seiten) - Chevron, Frage, Fokusring und die neue
   Akzentlinie signalisieren den Zustand bereits ausreichend. */
.xgld-infopage-faq-item summary:focus-visible {
    color: #E9BE6D;
}

.xgld-infopage-faq-item summary:focus-visible .xgld-infopage-faq-chevron {
    border-color: #D5A137;
}

@media (hover: hover) {
    .xgld-infopage-faq-item summary:hover {
        color: #E9BE6D;
    }
    .xgld-infopage-faq-item summary:hover .xgld-infopage-faq-chevron {
        border-color: #D5A137;
    }
}

.xgld-infopage-faq-item[open] summary {
    color: #E9BE6D;
}

.xgld-infopage-faq-item[open] summary .xgld-infopage-faq-chevron {
    border-color: #D5A137;
    transform: rotate(135deg);
}

/* Goldlinien-Synchronisation (Abschlusskorrektur, weiterhin im bestehenden
   V2.1-Block): die Linie endete zuvor sichtbar vor der unteren Trennlinie
   und begann 1px unter der oberen. Ursache lag nicht am Pseudoelement,
   sondern am Box-Modell des <details>-Elements selbst:
   1) .xgld-infopage-faq-item p (V1, Zeile 11354) traegt margin-bottom:18px.
      Ohne eigenes padding-bottom/border-bottom auf dem Item kollabiert
      dieser Aussenabstand des letzten Kindes NACH AUSSEN durch die
      Elementgrenze - er erscheint zwischen diesem Item und dem naechsten,
      zaehlt fuer position:absolute (deren Referenz die PADDING-Box ist)
      aber nicht mehr zur Hoehe DIESES Items. bottom:0 traf dadurch auf die
      alte (zu fruehe) Boxkante, 18px vor der eigentlichen Trennlinie.
      Behoben, indem der Abstand von einem kollabierenden Aussenabstand
      (margin) zu einem garantiert eingeschlossenen Innenabstand (padding)
      wird - der sichtbare Freiraum bleibt exakt 18px, nur seine
      Zugehoerigkeit zur Box aendert sich. Padding nur im offenen Zustand
      ([open]), sonst haette jedes GESCHLOSSENE Item 18px toten Raum unter
      der Frage bekommen (<details> ohne open rendert keine weiteren
      Kinder, ein Padding auf dem Element selbst wirkt aber unabhaengig
      davon).
   2) border-top sitzt ausserhalb der Padding-Box, um die eigene
      Randbreite (1px) vor top:0 - die Linie begann daher 1px unterhalb
      der oberen Trennlinie. top:-1px schliesst diesen einen Pixel.
   3) Nur :last-child traegt zusaetzlich einen eigenen border-bottom
      (V1, Zeile 11332-11334) - bei allen anderen Items IST die
      "untere Trennlinie" bereits der border-top des naechsten, direkt
      anliegenden Items (kein Abstand zwischen zwei .xgld-infopage-faq-
      item), bottom:0 trifft dort nach der Korrektur bereits exakt. Nur
      beim letzten Item muss bottom zusaetzlich um die eigene
      Randbreite verlaengert werden, aus demselben Grund wie bei top.
   Bewusst kein pauschaler negativer Versatz, sondern zwei gezielte
   1px-Korrekturen an den beiden Stellen, an denen tatsaechlich eine
   eigene 1px-Umrandung im Weg steht. Weder Goldfarbe noch Linienstaerke
   noch die links-Position wurden angefasst: -8px sitzt weiterhin auf dem
   Desktop im 44px-Rasterzwischenraum, bei 16px Seitenpolster (<=599px)
   bleiben noch 8px zur Fensterkante. */
.xgld-infopage-faq-item[open] {
    padding-bottom: 18px;
}

.xgld-infopage-faq-item p:last-child {
    margin-bottom: 0;
}

.xgld-infopage-faq-item[open]::before {
    content: "";
    position: absolute;
    left: -8px;
    top: -1px;
    bottom: 0;
    width: 1px;
    background: #D5A137;
}

.xgld-infopage-faq-item[open]:last-child::before {
    bottom: -1px;
}

@media (prefers-reduced-motion: reduce) {
    .xgld-infopage-faq-chevron {
        transition: border-color 0.16s ease;
    }
}
/* ===== XGLD ZAHLUNG VERSAND KUNDENREIFE V2-1 - 2026-08-25 END ===== */

/* ===== XGLD SUPPORT FRONTEND ACCOUNT V1 - 2026-08-26 START =================
   Deutsche Erklaerung: CSS fuer die neue Supportseite (/support/, Seite 42,
   xgld-support-page-template.php) und den neuen Mein-Konto-Bereich "Support"
   (xgld-account-support.php + drei Beruehrungspunkte in
   xgld-account-stufe2.php). Vollstaendig gescoped unter bestehenden
   .xgld-infopage-*- bzw. .xgld-account2-*-Klassen - keine neue Klassenfamilie,
   kein neuer Farbwert, kein neuer Breakpoint (Art-Direction-Gate A dieses
   Passes, siehe README). Header, Kursleiste, Bitcoin-/INTEX-Seite, FAQ-
   Goldlinien, Startseite, Produktkarten, Warenkorb, Checkout und die uebrigen
   Mein-Konto-Bereiche werden von diesem Block nicht beruehrt.

   GOLDHAUSHALT: auf jedem hier gestylten Bildschirm bleibt der aktive
   Navigationseintrag (bestehende Regel, nicht Teil dieses Blocks) der einzige
   Goldakzent, ausser dem einen CTA-Link auf der oeffentlichen Seite
   (.xgld-infopage-cta-link, bestehende Klasse). Ticketstatus, Referenz,
   Anliegenzeilen, Icon im Ruhezustand und Korrespondenztext bleiben ohne
   Gold - unveraendert Fokusringe (bestehende Regel) und
   .xgld-account2-inline-link:hover (bestehende Regel).

   Rollback: Block entfernen - siehe rollback.sh im Pass-Verzeichnis.
   ========================================================================= */

/* --- 1. Oeffentliche Supportseite: Anliegen in Ich-Form -------------------- */
.xgld-infopage-anliegen {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 62ch;
}

.xgld-infopage-anliegen-item {
    padding: 18px 0;
    border-top: 1px solid #16232F;
}

.xgld-infopage-anliegen-item:first-child {
    border-top: none;
    padding-top: 0;
}

.xgld-infopage-anliegen-text,
.xgld-infopage-anliegen-link {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: #EDEDED;
}

/* Anklickbar nur fuer eingeloggte Kunden (siehe Template). Gate-B-Korrektur:
   dieselbe Unterkanten-Mechanik wie .xgld-infopage-register-link (Textfarbe
   bleibt konstant, nur die Unterkante hebt sich) statt einer Flaeche mit
   Radius - Radius/Flaeche waeren die erste Abweichung von der bestehenden
   .xgld-infopage-*-Sprache gewesen. Kein achter Goldakzent. */
.xgld-infopage-anliegen-link {
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-bottom-color 0.16s ease;
}

.xgld-infopage-anliegen-link:hover,
.xgld-infopage-anliegen-link:focus-visible {
    border-bottom-color: #8FA3B3;
}

.xgld-infopage-anliegen-link:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 4px;
}

.xgld-infopage-anliegen-sub {
    display: block;
    margin-top: 6px;
    font-size: 13px;
}

/* Gate-B-Korrektur: die Supportseite endet bewusst nicht mit
   .xgld-infopage-cta (kein Shop-CTA am Fuss, siehe Template), daher fehlt
   deren padding-bottom:72px. Damit der Fussabstand zur globalen Fusszeile
   trotzdem demselben Mass wie Bitcoin-/Versandseite folgt, traegt der letzte
   Abschnitt hier denselben Wert. */
.xgld-infopage--support .xgld-infopage-section:last-of-type {
    padding-bottom: 72px;
}

@media (max-width: 480px) {
    .xgld-infopage-anliegen-item {
        padding: 14px 0;
    }
    .xgld-infopage-anliegen-text,
    .xgld-infopage-anliegen-link {
        font-size: 14px;
    }
}

/* --- 2. Mein Konto: Breiten je Support-Unterseite --------------------------
   Liste und Detail wie das Dashboard (820px), das Formular schmaler wie
   Adressen/Kontodaten/Sicherheit (780px) - siehe bestehende
   .xgld-account2-content--*-Regeln weiter oben in dieser Datei. */
.xgld-account2-content--support        { max-width: 820px; }
.xgld-account2-content--support_new    { max-width: 780px; }
.xgld-account2-content--support_ticket { max-width: 820px; }

/* --- 3. Ticketliste: bewusst KEIN Zahlenregister wie die Bestellliste ------
   Schlagzeile + Metazeile statt Zahlenspalten - Tickets tragen weder Betrag
   noch Stueckzahl. Gruppiert "Offen"/"Geloest" ueber die bestehende Klasse
   .xgld-account2-section-title, keine Tabs, kein Filter. */
.xgld-account2-support-list-actions {
    margin: 0 0 28px;
}

.xgld-account2-support-list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
}

.xgld-account2-support-row {
    border-top: 1px solid #16232F;
}

.xgld-account2-support-row:first-child {
    border-top: none;
}

.xgld-account2-support-row-link {
    display: block;
    padding: 18px 2px;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.14s ease;
}

.xgld-account2-support-row-link:hover {
    background: #0D1822;
}

.xgld-account2-support-row-link:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: -2px;
}

.xgld-account2-support-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
}

.xgld-account2-support-row-subject {
    font-size: 14.5px;
    font-weight: 500;
    color: #F5F5F5;
    overflow-wrap: anywhere;
}

.xgld-account2-support-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 7px;
    margin-top: 4px;
    font-size: 12.5px;
    color: #7C8FA0;
    overflow-wrap: anywhere;
}

/* Status: dieselbe zurueckhaltende Typografie wie .xgld-account2-status
   (11.5px, Versalien) - eigene Klasse, weil Ticketstatus ein eigenes
   Vokabular sind, keine WooCommerce-Bestellstatus. Die Farbwerte sind
   dieselben wie bei Bestellungen: #C79A46 (in Bearbeitung, wie
   --processing), #7FB894 (geloest, wie --completed). "Rueckfrage an dich"
   bleibt bewusst hell/#EDEDED statt Gold - siehe Kopfkommentar dieses
   Blocks. */
.xgld-account2-support-status {
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7C8FA0;
    white-space: nowrap;
}

.xgld-account2-support-status--in_progress {
    color: #C79A46;
}

.xgld-account2-support-status--waiting_customer {
    color: #EDEDED;
}

.xgld-account2-support-status--solved {
    color: #7FB894;
}

/* --- 4. Ticketdetail: eine Metazeile statt sechs Kacheln ------------------- */
.xgld-account2-support-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 7px;
    font-size: 13px;
    color: #8FA3B3;
    overflow-wrap: anywhere;
}

.xgld-account2-backlink {
    margin-bottom: 16px;
}

/* --- 5. Korrespondenz: Aktenoptik, keine Chatblasen ------------------------
   <ol> in xgld-account-support.php traegt die semantische Reihenfolge; die
   Nummern selbst werden nicht angezeigt (list-style:none) - hier zaehlt die
   Chronologie, nicht eine Rangfolge. Kein Rahmen, kein Radius, keine Flaeche
   je Beitrag; Unterscheidung ausschliesslich ueber Tonwert. */
.xgld-account2-support-thread {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.xgld-account2-support-entry {
    border-top: 1px solid #16232F;
    padding: 20px 0;
}

.xgld-account2-support-entry:first-child {
    border-top: none;
    padding-top: 0;
}

.xgld-account2-support-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
}

.xgld-account2-support-entry-sender {
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7C8FA0;
}

.xgld-account2-support-entry-date {
    font-size: 11.5px;
    color: #7C8FA0;
    white-space: nowrap;
}

.xgld-account2-support-entry-body {
    margin: 8px 0 0;
    max-width: 62ch;
    font-size: 14px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* Tonwertpaarung statt Farbe/Flaeche/Position: die Antwort von XGLD ist hell
   (das, weswegen der Kunde die Seite oeffnet), die eigene Nachricht gedaempft
   (die kennt der Kunde bereits). Dieselbe Paarung wie an anderen Stellen des
   Hauses (z.B. Editorial-Index-Ziffer). */
.xgld-account2-support-entry--staff .xgld-account2-support-entry-body {
    color: #EDEDED;
}

.xgld-account2-support-entry--customer .xgld-account2-support-entry-body {
    color: #8FA3B3;
}

.xgld-account2-support-reply {
    margin-top: 8px;
}

.xgld-account2-support-closed-notice {
    margin-top: 24px;
}

@media (max-width: 640px) {
    .xgld-account2-support-row-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}
/* ===== XGLD SUPPORT FRONTEND ACCOUNT V1 - 2026-08-26 END ===== */

/* ===== XGLD SUPPORT UX HOTFIX V1 - 2026-08-26 START =========================
   Deutsche Erklaerung: konsolidierter Korrekturpass fuer den Mein-Konto-
   Supportbereich aus XGLD SUPPORT FRONTEND ACCOUNT V1. Zwei Themen:

   TEIL A - FORMULARFELDER
   KORRIGIERT durch .xgld-support-exact-form-component-parity-v1-20260826
   (siehe deren Block am Dateiende): die eigene Randfarbe #1C2E3F und der
   eigene Select-Chevron unten in diesem Abschnitt sind seither entfernt -
   Subject/Message/Reply/Select verwenden jetzt exakt dieselbe Komponente wie
   Adresse/Checkout statt einer angenaeherten Support-Variante. Die folgende
   urspruengliche Begruendung bleibt zur Nachvollziehbarkeit stehen, gilt aber
   fuer die inzwischen entfernten Regeln.
   Ursache der bisherigen weissen Felder: es gab schlicht keine Regel fuer
   `select` und `textarea` unter `.xgld-account-page` (nur `input[type=text]`
   - z.B. Betreff - war bereits dunkel gestylt, Zeile ~3188 dieser Datei).
   Diese Sektion ergaenzt Select/Message/Reply auf dieselbe Feldsprache wie
   Betreff, aber ausschliesslich GESCOPED unter den beiden bestehenden
   Support-Formularflaechen (.xgld-account2-content--support_new,
   .xgld-account2-content--support_ticket) - keine sitewite input/select/
   textarea-Regel, keine Aenderung an Checkout/Login/Registrierung/Adressen/
   Kontodetails/Suche/WooCommerce-Formularen/WP-Backend.

   Art-Direction-Prozess (Fragen 2-4): fortgefuehrt wird die Feldsprache des
   bestehenden Warenkorb-Selects (.xgld-cart-summary select.xgld-cart-country-
   select, appearance:none + eigener Chevron + dunkle option-Flaeche).
   Gebrochen wird GENAU EINE Regel: Formularfelder laufen hier nicht auf volle
   Containerbreite (780px/820px), sondern auf ein Textmass (62ch) - dasselbe
   Mass wie .xgld-account2-support-entry-body. Dominantes Element ist die
   durchgehende rechte Feldkante, die Formular und Korrespondenz auf dieselbe
   Achse legt. Der bisherige Rahmenwert #24384A (sitewide Bestandswert fuer
   Formularrahmen) blieb als Ruhezustand zu blau/praesent auf vier
   nebeneinanderstehenden Feldern; hier wird er zum Hover-Zustand degradiert,
   Ruhezustand wird der ebenfalls bestehende, dunklere Rahmenwert #1C2E3F
   (rechnerisch derselbe Farbton, ~30% weniger Leuchtdichte - keine neue
   Farbe). Flaeche bleibt die bestehende #0E151C.

   TEIL B - UNGELESENE XGLD-ANTWORTEN (rein visuell, Datenlogik im Plugin
   xgld-support ab 1.2.0 - siehe Ticket_Repository::raise_customer_last_read(),
   Message_Repository::unread_counts_for_customer()).
   Nav-Punkt "Support": ein 5px-Goldpunkt in einem fest reservierten 12px-
   Markerplatz (keine Layoutverschiebung), zusaetzlich ein screen-reader-text.
   Ticketzeile: 2px goldene Linie links (volle Zeilenhoehe) statt einer
   Oberlinie - eine Oberlinie waere mit den bestehenden Haarlinien zwischen
   den Zeilen verwechselbar. Kein Chatblasen-Badge, kein Glow, keine goldene
   Vollflaeche, kein zusaetzlicher Rundungswert - siehe xgld-design Abschnitt 6
   (V-2, V-9). Goldpunkt am Nav-Eintrag: per CSS ausgeblendet, sobald der
   Support-Eintrag selbst der aktive ist (.is-active) - dort waere der Punkt
   redundant, die Ticketuebersicht darunter zeigt die Information ohnehin
   praeziser. Auf jeder ANDEREN Mein-Konto-Seite stehen der aktive Goldstrich
   des dortigen Eintrags und der Support-Goldpunkt bewusst gleichzeitig in
   derselben Navigationsschiene: der Punkt markiert eine andere Bedeutungsebene
   (ein wartender Hinweis, keine Ortsangabe) als der Aktiv-Zustand und wird
   deshalb nicht als zweiter konkurrierender Akzent gewertet.

   Rollback: Block entfernen - siehe rollback.sh im Pass-Verzeichnis
   .xgld-support-ux-hotfix-v1-20260826/. Die vorangehende Grunddarstellung aus
   XGLD SUPPORT FRONTEND ACCOUNT V1 bleibt unveraendert bestehen und wird nach
   einem Rollback dieses Blocks wieder allein wirksam (weisse Felder, kein
   Ungelesen-Indikator - der vorherige, bekannte Zustand).
   ========================================================================= */

/* --- 1. Gemeinsame Feldfamilie: Subject, Message, Reply --------------------
   KORRIGIERT durch .xgld-support-exact-form-component-parity-v1-20260826:
   diese Regel setzte urspruenglich eine EIGENE Flaeche/Rahmen/Fokus/Invalid/
   Hover/Disabled/Autofill-Kette (Randfarbe #1C2E3F statt des kanonischen
   #24384A) - genau der "eigene, nur angenaeherte" Zustand, den der neue Pass
   beseitigt. Alle diese Eigenschaften kommen jetzt ausschliesslich aus der
   kanonischen Komponente: fuer Subject (input[type=text]) aus der sitewide
   Regel .xgld-account-page input[type="text"] (Zeile ~3188/3754), fuer
   Message/Reply (textarea) aus der neuen sitewide Regel .xgld-account-page
   textarea (Block "XGLD SUPPORT EXACT FORM PARITY V1" am Dateiende). Hier
   bleibt einzig die Breitenausnahme stehen, die der Aufgabe zufolge zulaessig
   ist: die Formularfelder folgen nicht der vollen Containerbreite (780px/
   820px), sondern demselben Textmass wie die Korrespondenz (62ch,
   .xgld-account2-support-entry-body). Select ist hier bewusst NICHT mehr
   gelistet - siehe Abschnitt 2. */
.xgld-account2-content--support_new .xgld-account-field input[type="text"],
.xgld-account2-content--support_new .xgld-account-field textarea,
.xgld-account2-content--support_ticket .xgld-account2-support-reply textarea {
    max-width: 62ch;
}

.xgld-account2-content--support_new .xgld-account-field textarea,
.xgld-account2-content--support_ticket .xgld-account2-support-reply textarea {
    resize: vertical;
    min-height: 96px;
    overflow-wrap: anywhere;
}

/* --- 2. Select: kanonische Komponente statt eigenem Chevron ----------------
   KORRIGIERT durch .xgld-support-exact-form-component-parity-v1-20260826:
   der fruehere eigene Chevron-Wrapper (::after, 8x8px gedrehter Rahmen),
   die eigene Randfarbe und die eigene Optionsflaeche sind ersatzlos entfernt.
   Topic und Related-order tragen jetzt die Klasse xgld-account2-select
   (siehe xgld-account-support.php) und werden dieselbe kanonische Komponente
   wie die Laenderauswahl im Adressformular: naked native <select> als
   Fallback (Regel .xgld-account-page select.xgld-account2-select, Zeile
   ~4165), per SelectWoo zur Laufzeit gehoben (siehe functions.php, Block
   "XGLD SUPPORT EXACT FORM PARITY V1") - danach greift ausschliesslich die
   bereits bestehende, ungescopte .select2-container--default-Kette (Zeile
   ~6621-6712), exakt wie im Konto. Hier bleibt einzig die Breitenausnahme
   fuer den Wrapper stehen, aus demselben Grund wie oben. */
.xgld-account2-content--support_new .xgld-account-select-wrap {
    max-width: 62ch;
}

/* --- 3. Reply: nur Positionierung, keine eigene Feldoptik ------------------
   KORRIGIERT durch .xgld-support-exact-form-component-parity-v1-20260826:
   die Reply-Textarea selbst (Rahmen/Flaeche/Radius/Fokus) kommt seit diesem
   Pass vollstaendig aus der kanonischen .xgld-account-page textarea-Regel -
   exakt dieselbe Komponente wie Message, siehe Abschnitt 1. Was hier bleibt,
   ist reine Positionierung: kein eigener Formularrahmen um den ganzen
   Antwortbereich, keine Trennlinie davor, derselbe vertikale Abstand wie
   zwischen zwei Korrespondenzeintraegen - der Antwortbereich liest sich als
   der naechste, noch ungeschriebene Eintrag derselben Akte. */
.xgld-account2-support-reply {
    margin-top: 20px;
    max-width: 62ch;
}

.xgld-account2-support-reply .xgld-account-field {
    margin-bottom: 12px;
}

.xgld-account2-support-reply .xgld-account-field label {
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7C8FA0;
    margin-bottom: 8px;
}

.xgld-account2-support-reply .xgld-account2-actions {
    justify-content: flex-start;
}

/* Gate-B-Korrektur: Sicherheitshinweis und Mailhinweis liefen ungedeckelt auf
   780px weiter, direkt unter den 62ch-Feldern - die durchgehende rechte Kante
   (das dominante Element dieses Bruchs, siehe Blockkopf) brach damit unter
   dem letzten Feld ab. Dieselbe 62ch-Achse gilt deshalb auch fuer sie. */
.xgld-account2-content--support_new .xgld-account2-locked,
.xgld-account2-content--support_new .xgld-account2-hint {
    max-width: 62ch;
}

/* --- 4. Mobil: Textmass weicht der vollen Containerbreite ------------------ */
@media (max-width: 640px) {
    .xgld-account2-content--support_new .xgld-account-field input[type="text"],
    .xgld-account2-content--support_new .xgld-account-field select,
    .xgld-account2-content--support_new .xgld-account-field textarea,
    .xgld-account2-content--support_new .xgld-account-select-wrap,
    .xgld-account2-content--support_new .xgld-account2-locked,
    .xgld-account2-content--support_new .xgld-account2-hint,
    .xgld-account2-support-reply,
    .xgld-account2-content--support_ticket .xgld-account2-support-reply textarea {
        max-width: 100%;
    }
}

/* --- 5. Nav-Punkt "Support": Ungelesen-Punkt in festem Markerplatz --------- */
.xgld-account2-nav-badge-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    flex-shrink: 0;
}

.xgld-account2-nav-badge {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #D5A137;
}

/* Ein-Goldakzent-Regel: die Navigationsschiene traegt bereits mit .is-active
   ihren einen Goldakzent - der Punkt wird deshalb nur sichtbar, wenn der
   Support-Eintrag NICHT der aktive ist. Der zugaengliche Text (screen-reader-
   text) bleibt davon unberuehrt bestehen. */
.xgld-account2-nav-link.is-active .xgld-account2-nav-badge {
    display: none;
}

/* --- 6. Ticketzeile: ungelesene Antwort ------------------------------------ */
.xgld-account2-support-row-link {
    padding-left: 10px;
    box-shadow: inset 2px 0 0 transparent;
}

/* Gate-B-Korrektur: kein eigener Ruhe-/Hover-Hintergrund fuer ungelesene
   Zeilen - #0D1822 ist bereits der bestehende Hover-Ton EINER GELESENEN
   Zeile (siehe .xgld-account2-support-row-link:hover weiter oben); ein
   zweiter, davon unabhaengiger Flaechenwechsel waere eine zweite, nicht in
   Gate A entschiedene Geste. Der 2px-Goldstrich bleibt die einzige
   Unterscheidung, die bestehende Hoverflaeche gilt unveraendert fuer beide
   Zustaende. */
.xgld-account2-support-row--unread .xgld-account2-support-row-link {
    box-shadow: inset 2px 0 0 #D5A137;
}

.xgld-account2-support-row-unread-label {
    color: #EDEDED;
}
/* ===== XGLD SUPPORT UX HOTFIX V1 - 2026-08-26 END ===== */

/* ===== XGLD SUPPORT EXACT FORM PARITY V1 - 2026-08-26 START ================
   Deutsche Erklaerung: der Pass .xgld-support-frontend-account-v1-20260826
   gab dem Supportbereich eine dunkle, aber EIGENE Formularoptik; der
   Folgepass .xgld-support-ux-hotfix-v1-20260826 korrigierte Details (u.a.
   Doppelring, Invalid-Spezifitaet), blieb aber ebenfalls eine angenaeherte
   Variante: eigene Randfarbe (#1C2E3F statt #24384A), eigener 8x8px-Chevron,
   und vor allem: Topic/Related-order blieben natives <select> ohne
   SelectWoo - deshalb oeffneten sie weiterhin als natives Betriebssystemmenue
   (nicht per CSS stylbar) mit hellblauer Systemauswahlfarbe. Dieser Pass
   ersetzt die Annaeherung durch echte Wiederverwendung derselben Komponente
   wie Mein Konto -> Adresse bearbeiten (Land/Region).

   BEFUND (read-only vor jeder Aenderung)
   Die Laenderauswahl im Adressformular ist keine neue Bibliothek, sondern
   WooCommerce-eigenes SelectWoo/Select2 (Handles 'selectWoo'/'select2',
   registriert von WooCommerce selbst, in functions.php nur nachtraeglich
   initialisiert - Block "XGLD Country Selector" ~Zeile 2686 und "XGLD Account
   UI Premium Form Order" ~Zeile 4960). Als Fallback ohne JavaScript steht ein
   natives <select class="xgld-account2-select">, dessen Optik komplett aus
   .xgld-account-page select.xgld-account2-select kommt (Zeile ~4165: eigener
   SVG-Chevron 12x8, Randfarbe #24384A, Fokusring identisch zu den
   Eingabefeldern). Sobald SelectWoo greift, wird die sichtbare Flaeche
   ausschliesslich durch die UNGESCOPTE Regel .select2-container--default
   .select2-selection--single (Zeile ~6621) plus die kontospezifische Groessen-
   /Fokusregel .xgld-account-page .select2-container--default ...
   (Zeile ~6648-6712) bestimmt - keine dieser Regeln haengt an einer per
   JavaScript vergebenen Klasse (das war genau die Bruchstelle, die der Pass
   "Country/Shipping Hotfix" am 2026-08-13 behoben hat). Optionsliste, Hervor-
   hebung und ausgewaehlte Option kommen aus der ebenfalls ungescopten Regel
   .select2-container--default .select2-results__option... (Zeile ~1974-1991).

   FOLGE FUER DIESEN PASS
   Topic und Related-order tragen jetzt dieselbe Klasse xgld-account2-select
   wie das Laenderfeld (siehe xgld-account-support.php) und werden im Block
   "3. Support-Selects: SelectWoo" unten (functions.php) mit demselben Muster
   wie xgld_hotfix_account_country_js() zu SelectWoo gehoben. Dadurch entfaellt
   JEDE eigene Farbe/Groesse/Chevron/Optionsflaeche fuer Support-Selects - sie
   sind identisch, weil sie dieselbe bereits bestehende Regelkette treffen wie
   die Laenderauswahl. Die eigene Chevron-/Randfarblogik aus
   XGLD SUPPORT UX HOTFIX V1 wurde dafuer aus jenem Block entfernt (siehe dort,
   Korrekturvermerk am Blockkopf und in Abschnitt 1/2) - das ist eine
   Korrektur am eigenen vorangehenden Pass derselben Supportarbeit, keine
   Aenderung an einem fremden Block.

   Subject (input[type=text]) brauchte keine neue Komponente - die sitewide
   Regel .xgld-account-page input[type="text"] (Zeile ~3188/3754) traegt
   Flaeche/Rahmen/Fokus/Invalid/Autofill bereits vollstaendig; nur die eigene
   Randfarbe #1C2E3F in XGLD SUPPORT UX HOTFIX V1 stand ihr im Weg und wurde
   dort entfernt.

   Message und Reply hatten dagegen KEINE kanonische Entsprechung: es gab bis
   zu diesem Pass keine generische .xgld-account-page textarea-Regel (das war
   bereits der urspruengliche Befund von XGLD SUPPORT UX HOTFIX V1, die dort
   nur SUPPORT-gescoped nachgezogen wurde). Abschnitt 1 unten legt sie deshalb
   als echte sitewide Komponente an, wortgleich zur Eingabefeld-Regel (gleiche
   Flaeche/Rahmen/Radius/Farbe/Fokus/Invalid/Autofill-Technik, siehe Zeile
   ~3188-3245 und ~3754-3774) - Message und Reply bilden damit per Definition
   dieselbe Komponente, kein Support-Sonderfall. Einziger erlaubter
   Unterschied (siehe Aufgabenstellung): die Textarea-Hoehe (min-height/rows),
   die bereits in XGLD SUPPORT UX HOTFIX V1 steht und unveraendert bleibt.

   BREITE: das 62ch-Textmass fuer Formularfelder (statt 780px/820px
   Containerbreite) ist eine Seitenraster-Entscheidung aus dem Vorpass und
   bleibt unveraendert bestehen (dort, nicht hier) - das ist exakt die einzige
   laut Aufgabenstellung zulaessige Abweichung ("nur die verfuegbare
   Containerbreite darf sich unterscheiden").

   Rollback: Block entfernen - siehe rollback.sh im Pass-Verzeichnis
   .xgld-support-exact-form-component-parity-v1-20260826/. Die vorangehenden
   Bloecke (XGLD SUPPORT FRONTEND ACCOUNT V1, XGLD SUPPORT UX HOTFIX V1)
   bleiben in den nicht hier beschriebenen Teilen unveraendert bestehen.
   ========================================================================= */

/* --- 1. Kanonische Textarea-Komponente (sitewide) --------------------------
   Wortgleich zur sitewide Eingabefeld-Komponente (.xgld-account-page
   input[type="text"], Zeile ~3188 und ~3754), nur fuer das Element textarea.
   Bislang gab es keine generische Regel - siehe Blockkopf. Gilt fuer JEDE
   Textarea unter .xgld-account-page, nicht nur Support: eine kuenftige
   Kontoseite mit Freitextfeld erbt automatisch dieselbe Komponente statt eine
   neue erfinden zu muessen. */
.xgld-account-page textarea {
    width: 100%;
    box-sizing: border-box;
    background: #0E151C;
    border: 1px solid #24384A;
    border-radius: 6px;
    padding: 13px 14px;
    color: #EDEDED;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.4;
    caret-color: #EDEDED;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.xgld-account-page textarea::placeholder {
    color: #5C7185;
}

.xgld-account-page textarea:focus,
.xgld-account-page textarea:focus-visible {
    border-color: #D5A137;
    outline: none;
    box-shadow: 0 0 0 3px rgba(213, 161, 55, 0.16);
}

.xgld-account-page textarea[aria-invalid="true"] {
    border-color: #B4544A;
}

.xgld-account-page textarea[aria-invalid="true"]:focus,
.xgld-account-page textarea[aria-invalid="true"]:focus-visible {
    border-color: #B4544A;
    box-shadow: 0 0 0 3px rgba(180, 84, 74, 0.16);
}

/* Gate-B-Korrektur: wortgleich zur kanonischen Regel .xgld-account-page
   input[readonly][disabled] (Zeile ~4202) - gleicher Selektortyp, gleiche
   Werte, kein eigener Randwechsel. Im Support-Formular derzeit unerreichbar
   (keine deaktivierte Textarea), gilt aber sitewide fuer jedes kuenftige
   Konto-Freitextfeld. */
.xgld-account-page textarea[readonly][disabled] {
    color: #8FA3B3;
    cursor: not-allowed;
}

/* Dieselbe kompaktere Dichte ab 768px wie Eingabefelder/Select (Zeile
   ~5989-5998). .xgld-account2-content--form deckt Message ab (support_new
   traegt diese Klasse, siehe $form_sections in xgld-account-stufe2.php);
   Reply liegt dagegen in .xgld-account2-content--support_ticket, das NICHT
   in $form_sections steht (bewusst - Ticketdetail ist keine reine
   Bearbeitungsansicht) und braucht deshalb dieselbe Ausnahme, die schon
   XGLD SUPPORT UX HOTFIX V1 fuer die Reply-Textarea vorsah. */
@media (min-width: 768px) {
    .xgld-account-page .xgld-account2-content--form textarea,
    .xgld-account2-content--support_ticket .xgld-account2-support-reply textarea {
        padding: 11px 13px;
        font-size: 15px;
        line-height: 1.45;
    }
}

/* --- 2. Select: keine eigene CSS-Regel noetig ------------------------------
   Topic und Related-order tragen die Klasse xgld-account2-select (siehe
   xgld-account-support.php) und die JS-Initialisierung in functions.php
   (Block "3. Support-Selects: SelectWoo"). Damit greifen ausschliesslich
   bereits bestehende, ungescopte bzw. auf .xgld-account-page gescopte Regeln
   (siehe Blockkopf) - keine einzige neue Deklaration hier. Das ist bewusst
   leer: der Beweis der Komponentenwiederverwendung ist, dass hier NICHTS
   mehr zu stylen bleibt. */
/* ===== XGLD SUPPORT EXACT FORM PARITY V1 - 2026-08-26 END ===== */

/* ===== XGLD SUPPORT FORM LAYOUT MINI HOTFIX V1 - 2026-08-26 START ==========
   Deutsche Erklaerung: Mini-Hotfix fuer das Formular "Neue Supportanfrage"
   (Mein Konto -> Support -> Neue Anfrage). Zwei Aenderungen, ausschliesslich
   Layout:

   1. Feldreihenfolge in xgld-account-support.php auf Thema -> Bestellung
      (optional) -> Betreff -> Nachricht getauscht (vorher stand Betreff
      zwischen den beiden Dropdowns). Reine Markup-Reihenfolge, keine CSS-
      Aenderung noetig - beide Dropdowns liegen jetzt unmittelbar
      untereinander, Betreff direkt ueber Nachricht, ueber die bestehende
      .xgld-account-field-Abstandsregel.

   2. Desktopbreite der beiden Dropdown-Wrapper (.xgld-account-select-wrap
      innerhalb .xgld-account2-content--support_new) von 62ch (bisheriger
      Wert aus XGLD SUPPORT UX HOTFIX V1, Zeile ~12439 - fremder Block,
      daher hier NICHT direkt geaendert, sondern per Kaskade ueberschrieben)
      auf 640px vereinheitlicht - derselbe Wert, den .xgld-account2-content--
      security bereits fuer ein kompaktes Formularmass verwendet (Zeile
      ~5084), also keine neue Zahl im Theme. Betreff/Nachricht (input[text]/
      textarea, dieselbe 62ch-Regel) bleiben unveraendert - nur die beiden
      Dropdowns werden begrenzt. Gilt bewusst erst ab 641px: der bestehende
      mobile Breakpoint in XGLD SUPPORT UX HOTFIX V1 (@media max-width:640px,
      setzt max-width:100% fuer denselben Wrapper) bleibt dadurch unberuehrt
      und unveraendert wirksam - keine Ueberschneidung, keine Kollision.

   Rollback: Block entfernen - siehe rollback.sh im Pass-Verzeichnis
   .xgld-support-form-layout-mini-hotfix-v1-20260826/. Die Feldreihenfolge in
   xgld-account-support.php wird beim Rollback ueber die dortige
   Volldateisicherung (kein Markerblock in dieser Datei) zurueckgespielt.
   ========================================================================= */
@media (min-width: 641px) {
    .xgld-account2-content--support_new .xgld-account-select-wrap {
        width: 100%;
        max-width: 640px;
    }
}
/* ===== XGLD SUPPORT FORM LAYOUT MINI HOTFIX V1 - 2026-08-26 END ===== */

/* ===== XGLD SUPPORT HEADER ACTION LAYOUT V1 - 2026-08-26 START =============
   Deutsche Erklaerung: Ueberschrift "Support" und der bestehende CTA "Neue
   Anfrage"/"New request" (xgld-account-support.php,
   xgld_account2_render_support_list()) standen bislang als zwei einzelne
   Bloecke untereinander - Ueberschrift, dann volle Zeile mit dem Button,
   dann erst der Leerzustand/die Liste. Dieser Block fasst beide in einem
   neuen Wrapper .xgld-account2-support-header zu einer gemeinsamen
   Kopfzeile zusammen (Desktop: Titel links, CTA rechts; Mobil ab dem
   bestehenden Account-Breakpoint 640px: untereinander). Keine neue
   Klassenfamilie ausserhalb dieses einen Wrappers, kein neuer Breakpoint -
   640px ist derselbe Wert wie in .xgld-account2-actions (Zeile ~5015).

   Ausschliesslich auf .xgld-account2-support-header und seine direkten
   Kinder .xgld-account2-title / .xgld-account2-support-list-actions /
   .xgld-account2-btn beschraenkt - keine globale h2-, .xgld-account2-
   actions- oder .xgld-account2-btn-Regel wird ueberschrieben, jede neue
   Regel traegt den Wrapper als Vorfahren im Selektor.

   CTA-Kompaktheit: die bestehende .xgld-account2-btn-Mindestbreite von
   220px (Zeile ~4799, gedacht fuer volle Formularbreiten) ist fuer eine
   Kopfzeile unnoetig breit und liess viel Leerraum rechts vom Text. Hier
   auf 0 gesetzt, damit der Button auf seine bestehende Innenpolsterung
   (13px 28px) und Textbreite schrumpft - keine neue Groesse erfunden,
   Rahmen/Hover/Fokus/Schrift/Hoehe/Linkziel/Beschriftung bleiben exakt die
   bestehende .xgld-account2-btn-Regel.

   Rollback: Block entfernen - siehe rollback.sh im Pass-Verzeichnis
   .xgld-support-header-action-layout-mini-hotfix-v1-20260826/. Die
   Wrapper-<div> in xgld-account-support.php wird beim Rollback ueber die
   dortige Volldateisicherung (kein Markerblock in dieser Datei)
   zurueckgespielt.
   ========================================================================= */
.xgld-account2-support-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.xgld-account2-support-header .xgld-account2-title {
    margin: 0;
}

.xgld-account2-support-header .xgld-account2-support-list-actions {
    margin: 0;
    flex-shrink: 0;
}

.xgld-account2-support-header .xgld-account2-btn {
    min-width: 0;
}

@media (max-width: 640px) {
    .xgld-account2-support-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
}
/* ===== XGLD SUPPORT HEADER ACTION LAYOUT V1 - 2026-08-26 END ===== */

/* ===== XGLD SUPPORT EMPTY LAYOUT MINI HOTFIX V1 - 2026-08-26 START =========
   Deutsche Erklaerung: Die gemeinsame Kopfzeile aus XGLD SUPPORT HEADER
   ACTION LAYOUT V1 (voriger Pass) war konzeptionell richtig, wirkte aber
   unausgewogen: Titel links, CTA rechts am Rand der vollen
   .xgld-account2-content--support-Spalte (bestehende Breite 820px, aus dem
   fremden Block "XGLD SUPPORT FRONTEND ACCOUNT V1", Zeile ~12147 - hier
   NICHT geaendert, da 820px bereits nah an der angestrebten ~900px-Zielbreite
   liegt und dieselbe Breite ist, die die Ticketliste darunter ohnehin
   benutzt), dazwischen eine grosse leere Flaeche, und der Leerzustand
   darunter als eigene zentrierte Karte (bestehende generische
   .xgld-account2-empty-Regel, Zeile ~4706, auch von Bestell-/Adressleer-
   zustaenden genutzt) wirkte wie ein viertes, unabhaengiges Element.

   Diese Regeln sind ausschliesslich unter .xgld-account2-content--support
   verschachtelt (Selektorpraefix), sodass ausser der Supportuebersicht kein
   anderer Bereich (Bestellungen, Adressen, Ticketformular, Ticketdetail)
   beruehrt wird. Die bestehende .xgld-account2-support-header-Regel selbst
   (Flex/Row/Mobil-Stapelung) wird nicht umgeschrieben, nur um eine
   Haarlinie ergaenzt - via hoehere Selektorspezifitaet (zwei Klassen statt
   einer) ueberschreibt lediglich der margin-bottom-Wert.

   1. Haarlinie unter der Kopfzeile (bestehende Trennlinienfarbe #16232F,
      wie .xgld-account2-order-head/.xgld-account2-item) statt der reinen
      Luecke - bindet Titel, CTA und den folgenden Inhalt optisch zu einem
      Block zusammen.
   2. Leerzustand: keine Karte mehr (Rahmen/Radius/Hintergrund entfernt),
      linksbuendig statt zentriert - auf derselben Achse wie Kopfzeile und
      Ticketliste. Farbe von #F5F5F5 (Textstaerke der Hauptueberschrift)
      auf die bestehende Sekundaerfarbe #8FA3B3 (bereits genutzt in
      .xgld-account2-intro/.xgld-account2-hint) sowie Schriftgewicht 400
      statt 500 - niedrigere visuelle Prioritaet als "Support" (18px/500),
      keine neue Farbe, keine neue Schriftgroesse.
   3. Mobil (bestehender 640px-Breakpoint aus demselben Vorgaengerblock):
      der CTA bleibt auf seiner natuerlichen Buttonbreite statt der
      allgemeinen Kontoregel .xgld-account-page .xgld-account2-btn
      (width:100% bei 640px, Zeile ~5026) zu folgen - hier ausschliesslich
      innerhalb der Supportkopfzeile per align-items:flex-start und
      width:auto zurueckgesetzt, jede andere Kontoseite behaelt den
      bestehenden Full-Width-Button bei 640px unveraendert.

   Rollback: Block entfernen - siehe rollback.sh im Pass-Verzeichnis
   .xgld-support-empty-layout-mini-hotfix-v1-20260826/.
   ========================================================================= */

.xgld-account2-content--support .xgld-account2-support-header {
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #16232F;
}

.xgld-account2-content--support .xgld-account2-empty {
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    text-align: left;
}

.xgld-account2-content--support .xgld-account2-empty-title {
    margin: 0;
    font-weight: 400;
    color: #8FA3B3;
}

@media (max-width: 640px) {
    .xgld-account2-content--support .xgld-account2-support-header .xgld-account2-actions {
        align-items: flex-start;
    }

    .xgld-account2-content--support .xgld-account2-support-header .xgld-account2-btn {
        width: auto;
        min-width: 0;
    }
}
/* ===== XGLD SUPPORT EMPTY LAYOUT MINI HOTFIX V1 - 2026-08-26 END ===== */

/* ===== XGLD COMPLETE LIGHT MODE V1 - 2026-08-26 START ==================
   Macht den bisher rein dekorativen Schalter ("XGLD HEADER UTILITY -
   2026-08-18", header.php) tatsaechlich bedienbar. Gilt in BEIDEN Modi
   gleich - der Schalter selbst bleibt Teil des dunklen Bandes und aendert
   im Light Mode keine Farbe (siehe assets/css/xgld-light-mode.css fuer
   die zwei einzigen theme-abhaengigen Regeln: Icon-Sichtbarkeit und
   Knopfposition). Nichts aus dem HEADER-UTILITY-Block wird angefasst -
   diese Regeln stehen bewusst spaeter in der Datei und ueberschreiben nur
   cursor/Fokus, ohne den fremden Block zu editieren.

   Rollback: .xgld-complete-light-mode-v1-20260826/rollback.sh */
.xgld-theme-toggle {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.xgld-theme-toggle:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 3px;
    border-radius: 999px;
}

.xgld-theme-toggle-knob {
    position: relative;
    transition: margin-left 0.15s ease;
}

.xgld-theme-toggle-icon {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
}

.xgld-theme-toggle-icon-moon {
    display: flex;
}

@media (prefers-reduced-motion: reduce) {
    .xgld-theme-toggle-knob {
        transition: none;
    }
}
/* ===== XGLD COMPLETE LIGHT MODE V1 - 2026-08-26 END ===== */

/* ===== XGLD HEADER SUPPORT LINK MINI HOTFIX V1 - 2026-08-26 START ==========
   Der Headerblock ".xgld-hd-contact" zeigte bisher "Fragen?" und die
   sichtbare Adresse info@XGLD.de als reinen Anzeigetext innerhalb eines
   bereits vorhandenen Links auf die Supportseite (get_permalink(42),
   /support/). Die E-Mail-Adresse wurde entfernt, der Briefumschlag durch
   das bestehende Support-/Fragezeichen-Icon aus xgld-account-stufe2.php
   (Funktion xgld_account2_icon('support')) ersetzt, zweite Zeile jetzt
   "Zum Support" / "Get support". Weiterhin exakt EIN Link ueber die ganze
   Flaeche (Icon + beide Zeilen), keine Verschachtelung.

   Diese Regeln uebernehmen fuer den neuen Link/Titel dasselbe Hover-/Fokus-
   muster wie das direkt benachbarte .xgld-hd-trust-link (Zeile ~11099):
   outline:2px solid #D5A137 mit outline-offset:4px bei :focus-visible,
   Titelzeile faerbt bei :hover von #F5F5F5 auf das hellere Gold #E9BE6D.
   Die zweite Zeile (".xgld-hd-contact" > a > div > div:last-child, Farbe
   #D5A137) bleibt unveraendert und traegt weiterhin ihre Farbe per Inline-
   Style in header.php - kein neuer Hoverzustand dafuer, exakt wie beim
   Vorbild (dort aendert die Unterzeile ebenfalls nicht mit).

   Beide neuen Klassen tragen das Praefix "xgld-hd-" und bleiben dadurch von
   XGLD-COMPLETE-LIGHT-MODE-V1 automatisch ausgenommen (siehe dessen
   Blockkopf in assets/css/xgld-light-mode.css: alle ".xgld-hd-*"-Selektoren
   sind von der Generierung ausgeschlossen) - der Header bleibt in beiden
   Themes ein durchgehendes dunkles Band, hier ist nichts zusaetzlich zu
   pflegen.

   Rollback: Block per block-entfernen.py entfernen. header.php wird
   vollstaendig aus header.php.pre zurueckgespielt (kein Markerblock dort),
   dadurch verschwinden Klassennamen und Icon-Markup wieder vollstaendig -
   diese Regeln werden dann zwar wirkungslos, sind aber harmlos, solange sie
   ebenfalls per Rollback aus style.css entfernt werden. */

.xgld-hd-contact-link {
    border-radius: 4px;
}

.xgld-hd-contact-link:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 4px;
}

.xgld-hd-contact-title {
    color: #F5F5F5;
    font-weight: 500;
    transition: color 0.16s ease;
}

.xgld-hd-contact-link:hover .xgld-hd-contact-title {
    color: #E9BE6D;
}
/* ===== XGLD HEADER SUPPORT LINK MINI HOTFIX V1 - 2026-08-26 END ===== */

/* ===== XGLD LIGHT MODE V2 SHELL HOME V1 - 2026-08-26 START ==============
   Ueberschreibt die Breakpoint-Regeln aus "XGLD RESPONSIVE VIEWPORT PASS -
   2026-08-17" (unveraendert, fremd) fuer die neuen, eng zugeschnittenen
   Logo-Dateien (xgld-logo-header-dark.png / -light.png, siehe header.php
   und den Pass-Ordner). Jene Regeln waren auf die abgeloeste, 1254x1254
   grosse Datei mit viel transparentem Leerraum kalibriert (negative
   Margins, clip-path, feste img-Hoehe) - mit den neuen, eng zugeschnittenen
   Dateien braucht der Anchor nur noch eine feste Breite/Hoehe je
   Breakpoint, keine Margins, kein clip-path mehr.

   Gilt in BEIDEN Themes gleich (reine Geometrie, keine Farbe) - deshalb
   hier in style.css und nicht in der Light-Datei. Gleiche Selektoren wie
   die ueberschriebenen Regeln, spaeter in der Datei -> gewinnt ueber
   Kaskadenreihenfolge, ohne den fremden Block anzufassen.

   Basis (>=900px, in der abgeloesten Regel unveraendert bei 190px): Anchor
   171x72px. 600-899px: 135x57px (Verhaeltnis 150/190 aus der abgeloesten
   Regel uebernommen). <=599px: 107x45px (Verhaeltnis 118/190).

   Rollback: .xgld-light-mode-v2-shell-home-v1-20260826/rollback.sh */
.xgld-hd-logo {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    clip-path: none !important;
}

.xgld-hd-logo img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

@media (min-width: 600px) and (max-width: 899px) {
    .xgld-hd-logo {
        width: 135px !important;
        height: 57px !important;
    }
}

@media (max-width: 599px) {
    .xgld-hd-logo {
        width: 107px !important;
        height: 45px !important;
    }
}
/* ===== XGLD LIGHT MODE V2 SHELL HOME V1 - 2026-08-26 END ===== */

/* ===== XGLD LIGHT V2 FINAL CORRECTIONS - 2026-08-27 START ===============
   Drei unabhaengige Korrekturen, beide Themes betreffend (Light-spezifische
   Farbtoene stehen als Ueberschreibung in assets/css/xgld-light-mode.css,
   siehe dortige Verweise). Rollback:
   .xgld-light-mode-v2-final-corrections-v1-20260827/rollback.sh

   K1 - Produktlink "Produkt ansehen"/"View product" (Shop-Grid + Suche):
   Border/Hintergrund sind seit dem Pass "Home/Shop Structure V1" (18.08.)
   bereits korrekt entfernt, aber es existierte ueberhaupt keine
   :focus/:focus-visible-Regel fuer diese Links - dadurch konnte der
   Browser-Standard-Fokusrahmen sichtbar bleiben, auch nach einem normalen
   Mausklick (browserabhaengig). Ergaenzt nach dem bereits bestehenden
   Muster von .xgld-infopage-register-link:focus-visible weiter unten in
   dieser Datei: outline:none im Ruhezustand/:focus, sichtbarer Ring nur bei
   :focus-visible.

   K6 - Footer-Trust-Items (Dark Mode, Ruhezustand): .xgld-trust-item trug
   permanent Hintergrund+Rahmen (Zeile ~731). Hier auf border-color (NICHT
   border) und background gesetzt, damit die bestehende :hover-Regel (Zeile
   ~749, aendert border-color/background) weiterhin sichtbar greift - ein
   pauschales border:none haette den Hover-Effekt wirkungslos gemacht (Gate-
   A-Auflage). Spiegelt den bereits im Light Mode etablierten Ansatz
   (assets/css/xgld-light-mode-v2.css, .xgld-trust-item).

   K7 - Support-Kontextlinks (.xgld-infopage-anliegen-sub, oeffentliche
   Supportseite): erbten von .xgld-infopage-register-link eine dauerhafte
   Unterstreichung (border-bottom:1px solid #16232F, immer sichtbar). Neue,
   spezifischere Regel (gewinnt durch spaetere Position bei gleicher
   Spezifitaet, kein !important) setzt den Rahmen im Ruhezustand transparent
   und ergaenzt einen Pfeil; Hover/Fokus faerben Text+Pfeil gold - anders als
   das flaechengleiche .xgld-infopage-anliegen-link (bleibt neutral, nur
   Unterkante), weil hier laut Auftrag eine goldene Hervorhebung gewuenscht
   ist. .xgld-infopage-register-link selbst (andere Verwendungszwecke, z. B.
   Registrierung) bleibt unangetastet. */

.xgld-shop-layout ul.products li.product a.button:focus,
.xgld-search-products li.product a.button:focus {
    outline: none;
}

.xgld-shop-layout ul.products li.product a.button:focus-visible,
.xgld-search-products li.product a.button:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 2px;
}

.xgld-trust-item {
    background: transparent;
    border-color: transparent;
}

.xgld-infopage-anliegen-sub {
    border-bottom-color: transparent;
}

.xgld-infopage-anliegen-sub::after {
    content: " →";
    color: inherit;
}

.xgld-infopage-anliegen-sub:hover,
.xgld-infopage-anliegen-sub:focus-visible {
    color: #D5A137;
    border-bottom-color: #D5A137;
}

.xgld-infopage-anliegen-sub:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 4px;
}
/* ===== XGLD LIGHT V2 FINAL CORRECTIONS - 2026-08-27 END ===== */

/* ===== XGLD UI RESTKORREKTUREN LIGHT DARK V1 - 2026-08-28 START ============
   Pass .xgld-ui-restkorrekturen-light-dark-v1-20260828/. Zwei Teile in dieser
   Datei: Punkt 1 (Groesse/Fokus des Sortierfeldes) und Punkt 6 (Dark-Footer-
   Hover). Light-spezifische Toene stehen in assets/css/xgld-light-mode.css
   bzw. -v2.css (gleicher Pass, dortige Verweise). Rollback: Block entfernen.

   --- PUNKT 1: Sortierfeld - nur Groesse + Fokus -------------------------
   Die Erscheinung (Grund #0E151C, Rahmen #24384A, Radius 6, Chevron #8FA3B3,
   Panel, Optionen) kommt aus der ungescopten Komponente weiter oben in dieser
   Datei (.select2-container--default .select2-selection--single ~Z6626, Panel
   ~Z1957, Optionen ~Z1974). Hier - exakt nach dem Muster des Konto-Kontexts
   (~Z6658) - nur die kontextabhaengige Groesse und der Fokus. Werte aus dem
   Gate-A-Briefing: min-height 37,5px (heute gemessener Wert des nativen
   Feldes, kein Zeilensprung), rendered-Padding 9/34/9/13, 13,5px - bewusst
   NICHT die 45,75px/15px der Formularfelder (die Sortierung ist ein
   Katalog-Steuerelement in der 26/22px-Zeile ueber dem Raster, kein Feld).
   Kein eigener Hoverzustand (existierte nie; im Light Mode gibt es keinen
   Bestandston fuer "Rahmen eine Stufe dunkler"). Relevante Zustaende: offen
   und fokussiert - Goldrahmen + weicher Ring, woertlich die Konto-Sprache;
   das ist der einzige Goldakzent dieser Zeile. Das native <select> und
   .xgld-sortierung select.orderby (~Z8299) bleiben als Fallback ohne JS.

   --- PUNKT 6: Dark-Footer-Trust-Kacheln - kein Kasten bei Hover ---------
   .xgld-trust-item sind <div> (nicht fokussierbar); relevanter Zustand ist
   :hover. Der Ruhezustand ist bereits neutral (Block FINAL CORRECTIONS K6,
   ~Z13072: background/border-color transparent), aber .xgld-trust-item:hover
   (~Z749, 0,2,0) bringt background:#101B26 + border-color zurueck. Hier bei
   gleicher Spezifitaet spaeter neutralisiert. Die Hervorhebung traegt allein
   die Farbe: Strich-Icons -> #E9BE6D; Flagge und Bitcoin-Icon (nur <svg>
   ohne stroke-Attribut) bekommen stroke:none, damit der Goldsaum aus ~Z759
   entfaellt - jene Regel ist modusneutral und faerbte die beiden Icons auch
   im Light Mode (die dortige [stroke]-Eingrenzung, xgld-light-mode-v2.css
   K10, trifft sie gar nicht); hosting/bitcoin (ohne Strich-Icon) bekommen
   Textgold. Modusneutral: im Light Mode ist der Hover-Kasten schon weg
   (xgld-light-mode-v2.css:521, hoehere Spezifitaet), diese Regeln aendern
   dort nur den Icon-Saum. Raster/Abstaende der Fusszeile unberuehrt.
   ========================================================================= */

/* Breite: kommt aus dem Inline-Style, den Select2 aus width:'280px'
   (functions.php) setzt - hier bewusst KEIN min-width plus Inhaltsbreite
   (Gate-B-F1: variable Kante + zu schmales Panel). */
.xgld-sortierung .select2-container--default .select2-selection--single {
    height: auto;
    min-height: 37.5px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.xgld-sortierung .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 9px 34px 9px 13px;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.3;
}

.xgld-sortierung .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 9px;
    height: 100%;
    width: 20px;
}

.xgld-sortierung .select2-container--default .select2-selection--single:focus,
.xgld-sortierung .select2-container--default .select2-selection--single:focus-visible,
.xgld-sortierung .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #D5A137;
    outline: none;
    box-shadow: 0 0 0 3px rgba(213, 161, 55, 0.16);
}

@media (max-width: 768px) {
    .xgld-sortierung .select2-container--default .select2-selection--single {
        min-height: 44px;
    }
    .xgld-sortierung .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding: 12px 34px 12px 13px;
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .xgld-sortierung {
        flex-wrap: wrap;
    }
    /* !important schlaegt den Inline-width:280px von Select2 - nur hier,
       nur unter 400px, damit das Feld auf schmalen Geraeten voll ausnutzt. */
    .xgld-sortierung .select2-container--default {
        width: 100% !important;
    }
}

.xgld-trust-item:hover {
    background: transparent;
    border-color: transparent;
}

.xgld-trust-item:hover svg:not([stroke]) {
    stroke: none;
}

.xgld-trust-item:hover svg[stroke] {
    stroke: #E9BE6D;
}

.xgld-trust-item--hosting:hover > span,
.xgld-trust-item--bitcoin:hover > span {
    color: #E9BE6D;
}
/* ===== XGLD UI RESTKORREKTUREN LIGHT DARK V1 - 2026-08-28 END ===== */

/* ===== XGLD FOOTER TEXT HOTFIX - 2026-08-31 START ==========================
   Pass .xgld-ui-restkorrekturen-light-dark-v1-20260828/, Nachtrag zu Punkt 6
   (Dark-Footer-Hover, ~Z13206). Jener Block liess nur "Hosted in Germany"
   und "Bitcoin" golden aufleuchten (eigene Selektoren
   .xgld-trust-item--hosting/--bitcoin:hover > span) - "SSL-verschluesselt",
   "BTCPay Server" und "Versand ueber INTEX" hatten keine Modifier-Klasse und
   blieben deshalb textlich unberuehrt; nur ihre Strich-Icons reagierten
   bereits (svg[stroke]-Regel ~Z13202).

   Alle fuenf Texte tragen jetzt dieselbe Klasse .xgld-trust-text-main (footer.php,
   minimal ergaenzt: nur class= am bestehenden <span>, kein neuer Wrapper, kein
   Layout-/Uebersetzungseingriff - beim Versand-Element existierte sie fuer den
   Haupttext bereits). Eine einzige Regel deckt dadurch alle fuenf ab; der
   Selektor greift ausschliesslich am Text-<span> (nicht an .xgld-trust-item),
   damit ueber :hover kein currentColor an Flagge/Bitcoin-Icon (beide ohne
   stroke-Attribut, nur fill) durchgereicht wird - deren Ruheregel bleibt die
   bestehende svg:not([stroke])-Zeile (~Z13198, unveraendert). Farbe #E9BE6D
   identisch zur bestehenden hosting/bitcoin-Regel uebernommen, kein neuer Ton.
   .xgld-trust-item--hosting/--bitcoin:hover > span (~Z13206) bleibt unveraendert
   stehen (Fremdblock desselben Passes, hoehere Spezifitaet hier macht ihn fuer
   die Textfarbe wirkungslos, aendert aber nichts an seiner Gueltigkeit).
   Schloss/Blitz/Schild-Hervorhebung (svg[stroke]-Regeln) unangetastet.

   Rollback: Block entfernen (siehe rollback.sh, Abschnitt Footer-Text-Hotfix). */
.xgld-trust-item:hover .xgld-trust-text-main {
    color: #E9BE6D;
}
/* ===== XGLD FOOTER TEXT HOTFIX - 2026-08-31 END ===== */

/* ===== XGLD KONTO TRENNLINIEN NACHTRAG - 2026-08-31 START ================
   Nachtrag zum Konto-Hotfix desselben Tages (siehe README im Pass-Ordner
   .xgld-konto-light-mode-hotfix-20260831, Abschnitt "Nachtrag 2026-08-31 -
   Trennlinien"). Punkte A und B des Nachtrags sitzen im Light-Mode-Sheet;
   HIER steht ausschliesslich Punkt C - eine reine DARK-Mode-Korrektur, die
   der Light Mode nicht mitbekommen darf.

   PUNKT C - Supportuebersicht, fehlende Trennlinie unter "Offen"
   Die Ticketliste gruppiert nach "Offen" / "Geloest"; jede Gruppe ist ein
   eigenes <ul class="xgld-account2-support-list">, die erste <li> darin ist
   :first-child. style.css:12169 (.xgld-account2-support-row:first-child {
   border-top: none }) nimmt dieser ersten Zeile die Oberkante - im Dark
   Mode fehlt dadurch unter dem Gruppentitel "Offen" die Linie, die es
   oberhalb (.xgld-account2-support-header border-bottom, style.css:12845)
   gibt. Im Light Mode ist beides vorhanden, weil die spaeter geladene
   Regel html[data-xgld-theme="light"] .xgld-account2-support-row (0,2,1,
   xgld-light-mode.css:2844) das :first-child-Reset (0,2,0) ueberstimmt und
   auch der ersten Zeile eine Oberkante gibt.

   Korrektur: dasselbe Verhalten im Dark Mode herstellen. Der Selektor ist
   ausdruecklich auf html:not([data-xgld-theme="light"]) begrenzt (0,3,1),
   damit er im Light Mode gar nicht erst matcht - dort bleibt alles
   unveraendert. Farbe ist die bestehende dezente Dark-Trennlinie #16232F
   (identisch zu .xgld-account2-support-header / .xgld-account2-order-head /
   .xgld-account2-item). Ergebnis: je eine Linie oberhalb UND unterhalb von
   "Offen", wie im Light Mode. Kein globaler Border-Reset, keine Aenderung
   an Abstaenden, Typografie, Hover, Statusfarben; die Linie oberhalb von
   "Offen" bleibt unangetastet.

   Rollback: ./.xgld-konto-light-mode-hotfix-20260831/rollback.sh
   --trennlinien-nachtrag-ausfuehren schneidet diesen Block (und den
   gleichnamigen in assets/css/xgld-light-mode.css) ueber die Marker heraus.
   ======================================================================== */
html:not([data-xgld-theme="light"]) .xgld-account2-support-row:first-child {
    border-top: 1px solid #16232F;
}
/* ===== XGLD KONTO TRENNLINIEN NACHTRAG - 2026-08-31 END ===== */

/* ===== XGLD ABLAUF LABELS LINIEN HOTFIX - 2026-08-31 START ===============
   Kleiner Korrektur-Hotfix auf der Versandseite (xgld-shipping-page-
   template.php, Abschnitt "Ablauf" - <dl class="xgld-infopage-register">).
   Zwei unabhaengige Punkte, hier steht nur der modusneutrale Teil von
   Punkt 2; Punkt 1 (Light-Mode-Trennlinien) und die Light-Farbe von Punkt 2
   sitzen im gleichnamigen Block in assets/css/xgld-light-mode.css - dort
   auch die vollstaendige Begruendung beider Punkte.

   PUNKT 2 - Rubrik-Stil fuer die sechs Begriffe
   Die sechs <dt> (Ablauf, Verpackung, Versicherung, Zustellung,
   Schadensfall, Versandlaender) sollen denselben Etikett-Stil tragen wie
   die Abschnitts-Rubriken "ABLAUF"/"WAS BENOETIGT WIRD" auf der Bitcoin-
   Seite (.xgld-infopage-rubrik): 12px/500/Versalschreibung/0.15em Tracking
   statt bisher 13.5px/500/gemischte Schreibung. font-weight bleibt 500
   (schon identisch, keine eigene Regel noetig). Schriftfamilie ist bereits
   identisch (beide erben den Body-Stack, keine eigene Regel noetig).

   Farbe #8FA3B3: NICHT der urspruengliche Rubrik-Wert aus der Basisregel
   (style.css:11147-11155, #7C8FA0), sondern dessen spaeterer, aktuell
   wirksamer Stand aus dem V2-1-Pass (Block "XGLD ZAHLUNG VERSAND
   KUNDENREIFE V2-1 - 2026-08-25", Helligkeitsleiter Rang 3, style.css um
   Zeile 11806-11809: .xgld-infopage-rubrik { color: #8FA3B3 }) - dieser
   spaetere, gleich spezifische Selektor gewinnt in der Kaskade und ist
   damit die tatsaechliche Referenzfarbe der Rubriken heute, nicht die
   Basisregel. Light-Gegenstueck (ebenfalls der aktuell wirksame, nicht der
   urspruengliche Token) sitzt im gleichnamigen Block in xgld-light-
   mode.css (Skill-Vorgabe: Light orientiert sich an Light, Dark an Dark).
   padding, border-top, grid-column, margin, line-height unangetastet -
   nur die vier Rubrik-Eigenschaften plus Farbe aendern sich.

   Betroffen ist ausschliesslich .xgld-infopage-register dt - die Klasse
   kommt nur in xgld-shipping-page-template.php vor. Rechte Beschreibungs-
   texte (dd), Hauptueberschrift, Seitenraster und aeussere Abstaende sind
   nicht Teil dieses Blocks. Wortlaut/Uebersetzungen unveraendert, die
   Versalschreibung kommt ausschliesslich aus text-transform.

   Rollback: Block entfernen - die sechs Begriffe fallen auf ihre bisherige
   13.5px/gemischte-Schreibung-Typografie zurueck (Farbe faellt auf die
   Werte der jeweils vorherigen Bloecke zurueck, Dark #EDEDED aus dem V1-
   Block, Light auf die Werte vor diesem Pass). ========================= */
.xgld-infopage-register dt {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #8FA3B3;
}
/* ===== XGLD ABLAUF LABELS LINIEN HOTFIX - 2026-08-31 END ===== */

/* ===== XGLD MERKZETTEL V1 - 2026-08-31 START ==============================
   Deutsche Erklaerung: siehe ausfuehrlichen Kommentar im gleichnamigen Block
   in functions.php (Architektur, Sicherheit, Rollback). Hier nur die
   Darstellung.

   ART-DIRECTION-ENTSCHEIDUNG (Skill /xgld-design, Abschnitt 1):
   - Fortgefuehrte Regel: Zeilenliste mit einer Haarlinie (#1C2E3F) statt
     Karten mit Schatten/Radius (V-2) - dieselbe Grundform wie der bestehende
     Warenkorb (.xgld-cart-row), nur ohne dessen Mengen-/Summenspalten, denn
     der Merkzettel reserviert keine Ware und keinen Preis.
   - Bewusster Bruch: eine fuenfte Spalte "Verfuegbarkeit" statt Menge/
     Summe - der Merkzettel beantwortet "ist das noch da", nicht "wie viel
     kostet das insgesamt".
   - Dominantes Element: das Produktbild je Zeile, wie im Warenkorb.
   - Unterschied zur Sektion darueber (Kopfbereich, Kursleiste): eigener
     Grund entfaellt bewusst - die Seite bleibt auf #0B1620, nur die Liste
     traegt Haarlinien, kein zweiter Seitengrund.
   - Herz-Icon auf der Karte: keine Dekoration, sondern die einzige Stelle,
     an der "Merken" ueberhaupt ausloesbar ist - erfuellt damit die Icon-Regel
     aus Abschnitt 6 (V-9). Aktiver Zustand fuellt das Icon in Creme
     (#F5F5F5), NICHT in Gold - der Preis ist bereits der eine Goldakzent
     je Karte/Zeile (Gold-Regel, Abschnitt 2). */

/* --- Herz-Button, gemeinsame Basis ---------------------------------------- */
.xgld-wish-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #8FA3B3;
    font: inherit;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.xgld-wish-btn-icon {
    flex-shrink: 0;
    display: block;
}

.xgld-wish-btn-active .xgld-wish-btn-icon {
    fill: #F5F5F5;
    stroke: #F5F5F5;
}

/* Karte: kreisfoermige Flaeche ueber dem Produktbild, exakt die bestehende
   Kreis-Rezeptur aus .xgld-cart-empty-icon (Flaeche #0E151C, Rahmen
   #1C2E3F), nur kleiner. Kein backdrop-filter/Transparenz (V-9) - solide
   Flaeche fuer Lesbarkeit ueber wechselndem Bildinhalt. */
.xgld-shop-layout ul.products li.product {
    position: relative;
}

.xgld-wish-btn--card {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0E151C;
    border: 1px solid #1C2E3F;
    justify-content: center;
    z-index: 1;
}

.xgld-wish-btn--card:hover,
.xgld-wish-btn--card:focus-visible {
    border-color: #24384A;
    color: #F5F5F5;
}

/* Produktseite: sichtbares Label neben dem Icon, dezente Sekundaerflaeche
   unter dem Kaufformular - ueberdeckt weder Bild noch Add-to-Cart-Button. */
.xgld-wish-btn--pdp {
    margin: 14px 0 0;
    padding: 10px 16px;
    border: 1px solid #1C2E3F;
    border-radius: 6px;
    font-size: 13.5px;
}

.xgld-wish-btn--pdp:hover,
.xgld-wish-btn--pdp:focus-visible {
    border-color: #24384A;
    color: #F5F5F5;
}

.xgld-wish-btn--pdp.xgld-wish-btn-active {
    border-color: #24384A;
    color: #F5F5F5;
}

/* --- Merkzettel-Seite ------------------------------------------------------ */
.xgld-merkzettel-page {
    max-width: 1160px;
    margin: 0 auto;
    padding: 48px 40px 96px;
}

.xgld-merkzettel-title {
    font-size: 26px;
    font-weight: 500;
    color: #F5F5F5;
    margin: 0 0 8px;
}

.xgld-merkzettel-hint {
    font-size: 13.5px;
    color: #8FA3B3;
    margin: 0 0 32px;
}

.xgld-merkzettel-loading {
    padding: 48px 0;
    text-align: center;
    font-size: 13.5px;
    color: #5C7185;
}

.xgld-merkzettel-error {
    padding: 24px;
    text-align: center;
    font-size: 13.5px;
    color: #B4544A;
    border: 1px solid #1C2E3F;
    border-radius: 8px;
}

/* --- leerer Merkzettel: dieselbe Rezeptur wie .xgld-cart-empty --- */
.xgld-merkzettel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 72px 24px;
    background: #101E2C;
    border: 1px solid #1C2E3F;
    border-radius: 10px;
}

.xgld-merkzettel-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #0E151C;
    border: 1px solid #1C2E3F;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.xgld-merkzettel-empty-title {
    font-size: 18px;
    font-weight: 500;
    color: #F5F5F5;
    margin: 0 0 7px;
}

.xgld-merkzettel-empty-text {
    font-size: 14px;
    color: #8FA3B3;
    margin: 0 0 25px;
    max-width: 40ch;
}

.xgld-merkzettel-empty-cta {
    display: inline-flex;
    align-items: center;
    background: #D5A137;
    color: #0B1620;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.xgld-merkzettel-empty-cta:hover {
    background: #E9BE6D;
}

/* --- gefuellte Liste, aus .xgld-cart-row abgeleitet (Menge/Summe entfallen,
   Verfuegbarkeit ergaenzt) --- */
.xgld-merkzettel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #1C2E3F;
}

.xgld-merkzettel-row {
    display: grid;
    grid-template-columns: 104px 1fr 130px 120px 28px;
    align-items: center;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid #1C2E3F;
    transition: opacity 0.15s ease;
}

.xgld-merkzettel-row:last-child {
    border-bottom: none;
}

.xgld-merkzettel-row-loading {
    opacity: 0.45;
    pointer-events: none;
}

.xgld-merkzettel-row-media {
    display: block;
    width: 104px;
    height: 104px;
    border-radius: 6px;
    overflow: hidden;
    background: #0B1620;
    flex-shrink: 0;
}

.xgld-merkzettel-row-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.xgld-merkzettel-row-media--empty {
    background: #0B1620;
    border: 1px dashed #1C2E3F;
}

.xgld-merkzettel-row-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.xgld-merkzettel-row-name {
    font-size: 15px;
    font-weight: 500;
    color: #F5F5F5;
    text-decoration: none;
}

.xgld-merkzettel-row-name:hover {
    color: #D5A137;
}

.xgld-merkzettel-row-name--gone {
    color: #7C8FA0;
    font-weight: 400;
    font-size: 14px;
}

.xgld-merkzettel-row-variant {
    font-size: 12px;
    color: #6B7A88;
}

.xgld-merkzettel-row-price {
    font-size: 14.5px;
    color: #D5A137;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.xgld-merkzettel-row-avail {
    font-size: 12.5px;
    color: #8FA3B3;
    text-align: right;
}

.xgld-merkzettel-row-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    color: #5C7185;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.xgld-merkzettel-row-remove:hover,
.xgld-merkzettel-row-remove:focus-visible {
    color: #D5A137;
}

@media (max-width: 900px) {
    .xgld-merkzettel-page {
        padding: 36px 24px 80px;
    }
    .xgld-merkzettel-row {
        grid-template-columns: 72px 1fr 1fr 28px;
        grid-template-areas:
            "media info info remove"
            "media price avail avail";
        row-gap: 12px;
        padding: 20px 0;
    }
    .xgld-merkzettel-row-media { grid-area: media; width: 72px; height: 72px; }
    .xgld-merkzettel-row-info { grid-area: info; }
    .xgld-merkzettel-row-price { grid-area: price; text-align: left; }
    .xgld-merkzettel-row-avail { grid-area: avail; text-align: left; }
    .xgld-merkzettel-row-remove { grid-area: remove; height: auto; align-self: start; }
}

@media (max-width: 640px) {
    .xgld-merkzettel-page {
        padding: 28px 16px 64px;
    }
    .xgld-merkzettel-title {
        font-size: 21px;
    }
    .xgld-merkzettel-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px 14px;
        grid-template-columns: none;
        grid-template-areas: none;
        padding: 18px 0;
    }
    .xgld-merkzettel-row-media { width: 64px; height: 64px; flex: 0 0 64px; }
    .xgld-merkzettel-row-info { flex: 1 1 auto; min-width: 0; }
    .xgld-merkzettel-row-remove { flex: 0 0 auto; width: 32px; height: 32px; margin-left: auto; }
    .xgld-merkzettel-row-price { flex: 0 0 auto; text-align: left; order: 3; }
    .xgld-merkzettel-row-avail { flex: 0 0 auto; text-align: left; order: 4; margin-left: auto; }
}
/* ===== XGLD MERKZETTEL V1 - 2026-08-31 END ===== */

/* ===== XGLD CHECKOUT BLOCKOVERLAY FARBFIX - 2026-08-31 START ===========
   Fehlerbild: beim Uebergang Warenkorb -> Kasse blitzen ueber Bestell-
   uebersicht (.woocommerce-checkout-review-order-table) und Zahlungsbereich
   (.woocommerce-checkout-payment) kurz getoente Flaechen auf - WooCommerce
   blockt beide Container per checkout.js (plugins/woocommerce/assets/js/
   frontend/checkout.js, Zeile 705 ff. und 883 ff.) einzeln per .block(),
   dadurch zwei separate Ueberlagerungs-Divs, genau ueber diesen beiden
   Bereichen. Unser bestehender Neutralisierer in body.woocommerce-checkout
   .blockUI.blockOverlay (Zeile ~2720) setzt dabei rgba(11, 22, 32, 0.55) -
   das ist die dunkle Buttontext-Farbe #0B1620 (siehe Kommentar Zeile 2426),
   NICHT der tatsaechliche Panel-Hintergrund #101E2C von .xgld-checkout-side
   (Zeile 2017). Der Farbversatz erzeugt im Dark Mode eine sichtbar
   dunklere Zusatzflaeche. Im Light Mode existierte bereits eine eigene
   Regel (assets/css/xgld-light-mode.css:886, aus der Grundschicht dieser
   Datei, kein eigener Markerblock), die aber ebenfalls einen falschen,
   unpassenden Ton setzt: rgba(30, 37, 41, 0.55), ein dunkles Grau statt
   des tatsaechlichen weissen Panel-Hintergrunds - ueberblendet auf dem
   weissen Panel ergibt das ein sichtbares Blaugrau. Beide Faelle sind
   derselbe aus [[light-mode-leak-pattern]] bekannte Fehlertyp: ein
   Ueberlagerungswert, der nie an die tatsaechliche Panelfarbe angeglichen
   wurde.

   Korrektur: Overlay-Hintergrund auf die tatsaechliche Panelfarbe #101E2C
   bei gleicher Alpha (0.55) umgestellt. Da Overlay- und Panelfarbe damit
   exakt uebereinstimmen, ergibt die Ueberblendung rechnerisch wieder genau
   die Ruhefarbe des Panels - keine sichtbare Flaeche mehr, nur noch der
   goldene Ladering (unveraendert, aus derselben Basisregel). Der Light-
   Mode-Fall bekommt sein eigenes Gegenstueck in assets/css/xgld-light-
   mode.css (dort ist die Kasse noch auf der V1-Legacy-Schicht, siehe deren
   Blockkopf).

   Kein JS geaendert, keine neue Verzoegerung, kein fruehes Entsperren -
   reine Farbkorrektur auf Selektorebene, wirkt bei jedem WooCommerce-
   .block()-Aufruf neu, auch nach wiederholten Checkout-Aktualisierungen.

   Rollback: .xgld-checkout-blockoverlay-farbfix-20260831/rollback.sh */
body.woocommerce-checkout .blockUI.blockOverlay {
    background: rgba(16, 30, 44, 0.55) !important;
}
/* ===== XGLD CHECKOUT BLOCKOVERLAY FARBFIX - 2026-08-31 END ===== */

/* ===== XGLD SORTIERUNG DARK MODE HOTFIX - 2026-08-31 START ================
   Ursache und Gesamtkonzept: siehe gleichnamiger Block in functions.php.
   Kurzfassung: auf Shop-/Kategorieseiten laedt select2.css NACH style.css
   (Fremdblock "XGLD UI RESTKORREKTUREN LIGHT DARK V1" haengt SelectWoo dort
   erst bei Prioritaet 33 ein) - die bestehenden ungescopten Dark-Basisregeln
   (~Z6626, ~Z1957, ~Z7442) haben dieselbe Spezifitaet wie select2.css und
   verlieren dort den Gleichstand. Alle Regeln hier sind zusaetzlich mit
   html:not([data-xgld-theme="light"]) praefigiert: schlaegt select2.css UND
   die alten Basisregeln unabhaengig von der Ladereihenfolge ueber
   Spezifitaet, greift dank :not() nie gleichzeitig mit einer Light-Regel.
   Light Mode unangetastet (eigene, bereits vorhandene Regeln in
   xgld-light-mode.css, siehe dortiger Kommentar ~Z2955 sowie ~Z114/638/651).

   Farbwerte identisch zu den bestehenden Dark-Tokens dieser Datei (keine
   neue Palette): Flaeche #0E151C (~Z6627, ~Z8304), Rahmen #24384A (~Z6628,
   ~Z8310), Text #EDEDED (~Z6633, ~Z8312), Pfeil #8FA3B3 (~Z6641, ~Z7438),
   Options-Text #C7D0D8 (~Z1976), Gold-Hervorhebung rgba(213, 161, 55, 0.14)
   bzw. (0.08) + #D5A137 (~Z1981-1990) - identisch zur bestehenden
   Laenderauswahl/Konto-Familie.

   --- Ausloeser (geschlossenes Feld) --------------------------------------
   Spezifitaet 0,4,1 (html + :not[attr] + 3 Klassen) - schlaegt select2.css
   (0,2,0) und die alte Basisregel (0,2,0) unabhaengig von der Reihenfolge. */
html:not([data-xgld-theme="light"]) .xgld-sortierung .select2-container--default .select2-selection--single {
    background-color: #0E151C;
    border: 1px solid #24384A;
    border-radius: 6px;
}

html:not([data-xgld-theme="light"]) .xgld-sortierung .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #EDEDED;
}

html:not([data-xgld-theme="light"]) .xgld-sortierung .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #5C7185;
}

html:not([data-xgld-theme="light"]) .xgld-sortierung .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #8FA3B3 transparent transparent transparent;
}

/* Geoeffnet: Dreieck zeigt nach oben - spiegelt die ungescopte Regel
   ~Z7442, die auf dieser Seite denselben Ladereihenfolge-Verlust hat. */
html:not([data-xgld-theme="light"]) .xgld-sortierung .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #8FA3B3 transparent;
}

/* Tastaturfokus/offen: keine neue Regel noetig - die bestehende, bereits
   auf .xgld-sortierung gescopte Goldregel (~Z13164, Fremdblock) setzt nur
   border-color/box-shadow und wirkt ab jetzt auf dunklem statt weissem
   Grund automatisch korrekt. */

/* --- Geoeffnetes Panel (haengt am body, Klasse per JS aus functions.php,
   siehe dortiger Block) - Spezifitaet 0,3,1 fuer den Panel-Grund, 0,4,1 fuer
   die Optionen; schlaegt select2.css (0,2,1 bzw. 0,3,0) unabhaengig von der
   Ladereihenfolge. */
html:not([data-xgld-theme="light"]) .xgld-sortierung-panel.select2-dropdown {
    background: #0E151C;
    border: 1px solid #24384A;
    color: #EDEDED;
}

html:not([data-xgld-theme="light"]) .xgld-sortierung-panel .select2-results__option {
    background: transparent;
    color: #C7D0D8;
}

html:not([data-xgld-theme="light"]) .xgld-sortierung-panel .select2-results__option--highlighted[aria-selected],
html:not([data-xgld-theme="light"]) .xgld-sortierung-panel .select2-results__option--highlighted[data-selected] {
    background: rgba(213, 161, 55, 0.14);
    color: #F5F5F5;
}

html:not([data-xgld-theme="light"]) .xgld-sortierung-panel .select2-results__option[aria-selected="true"],
html:not([data-xgld-theme="light"]) .xgld-sortierung-panel .select2-results__option[data-selected="true"] {
    background: rgba(213, 161, 55, 0.08);
    color: #D5A137;
}
/* ===== XGLD SORTIERUNG DARK MODE HOTFIX - 2026-08-31 END ===== */

/* ===== XGLD WARENKORB DARK TRENNLINIE HOTFIX - 2026-09-01 START ==========
   Problem: Im Light Mode traegt jede Produktzeile des normalen XGLD-
   Warenkorbs (.xgld-cart-row, gerendert nur von xgld_render_cart_body()
   in #xgld-cart-body) eine feine untere Trennlinie - AUCH die letzte
   Zeile. Grund dafuer ist die Light-Regel

       html[data-xgld-theme="light"] .xgld-cart-row { border-bottom: 1px
           solid var(--xgld-light-border); }   (assets/css/xgld-light-mode.css)

   mit Spezifitaet 0,2,1. Sie schlaegt die Basisregel
   .xgld-cart-row:last-child { border-bottom: none; } (style.css ~Z1063,
   Spezifitaet 0,2,0), deshalb ist im Light Mode die Unterkante jeder
   Zeile inklusive der letzten sichtbar.

   Im Dark Mode (Basis, KEIN data-xgld-theme) fehlt genau dieses
   Gegenstueck: .xgld-cart-row hat zwar border-bottom: 1px solid #1C2E3F
   (style.css ~Z1058, Spezifitaet 0,1,0), wird bei der letzten Zeile aber
   von :last-child ueberstimmt - bei nur einem Artikel ist damit gar keine
   Linie da.

   Fix: exakt die Light-Regel spiegeln, nur fuer den Dark-Zustand und nur
   das border-bottom. Selektor html:not([data-xgld-theme="light"])
   .xgld-cart-row hat dieselbe Spezifitaet 0,2,1 wie die Light-Regel und
   schlaegt damit .xgld-cart-row:last-child - jede Produktzeile inklusive
   der letzten bekommt genau eine Unterkante. Farbe #1C2E3F ist KEINE neue
   Farbe: es ist derselbe Wert wie bei den bereits vorhandenen dezenten
   Dark-Trennlinien im Warenkorb, u. a. .xgld-cart-items border-top und
   .xgld-cart-head border-bottom (die Linien oberhalb der Spalten-
   ueberschriften, style.css Z1017 und Z1026).

   Wirkung auf Nicht-Letzte-Zeilen: unveraendert (gleicher Wert wie die
   Basisregel, kein doppelter Strich - Nachbarzeilen haben kein
   border-top). Kein Eingriff in Light Mode, Checkout, Mini-Warenkorb,
   Produkt-, Bestell-, Konto- oder Merkzettelseiten: .xgld-cart-row wird
   ausschliesslich vom normalen Warenkorb ausgegeben (der Merkzettel nutzt
   eigene, davon abgeleitete .xgld-mb-*-Klassen). Kein PHP/JS/Template/DB.
   Keine Breiten-/Abstands-/Layoutaenderung, kein horizontaler Overflow.

   Rollback: .xgld-warenkorb-dark-trennlinie-hotfix-20260901/rollback.sh
   schneidet exakt diesen Markerblock ueber block-entfernen.py heraus. */
html:not([data-xgld-theme="light"]) .xgld-cart-row {
    border-bottom: 1px solid #1C2E3F;
}
/* ===== XGLD WARENKORB DARK TRENNLINIE HOTFIX - 2026-09-01 END ===== */

/* ===== XGLD SERVICE LINKS ECHTHEIT - 2026-09-01 START =================
   Deutsche Erklaerung: zwei kleine, streng gekapselte CSS-Zusaetze zum
   gleichnamigen functions.php-Block.

   1) .xgld-idx-service-link / .xgld-idx-service-sep - die drei Wort-Links,
      die der Wrapper xgld_sle_index_markup() in die SERVICE-Zeile der
      Editorial Navigation setzt (Startseite und Shop-Archiv). Der
      Ruhezustand erbt die Farbe der Unterzeile (color:inherit), also den
      leisen Bestandston #5C7185 dieses bewusst leisesten Bereichs (Fremd-
      block "XGLD EDITORIAL INDEX V4", style.css:8057) - der Link-Ruhezustand
      ist NICHT Gold. Hover und Tastaturfokus heben ausschliesslich die
      Unterkante von transparent auf Gold #D5A137 (dieselbe Mechanik wie
      .xgld-infopage-cta-link) - keine Flaeche, kein Button-Look, keine
      Layoutverschiebung, da die Border immer 1px ist. Der sichtbare
      Fokusring (outline) kommt zusaetzlich, nicht nur der Farbwechsel. Die
      Trennpunkte tragen keine eigene Farbe (identisch zur bisherigen,
      einfarbigen Zeile) und sind im Markup aria-hidden.

      Light Mode: eigener Block gleichen Namens in
      assets/css/xgld-light-mode.css (Hover/Fokus auf
      var(--xgld-light-gold-decorative), da reines #D5A137 auf hellem Grund
      als Fokusindikator zu schwach ist). Dieser Block hier fasst den Light
      Mode nicht an.

   2) .xgld-infopage--authenticity .xgld-infopage-schlusszeile - die eine
      dezente Schlusszeile der Seite /gepruefte-echtheit/. Kleiner und
      leiser als .xgld-infopage-text (12.5px/#5C7185), unter dem CTA. Alle
      uebrigen Selektoren der Seite sind unveraendert die bestehenden
      .xgld-infopage-*-Klassen der Schwester-Infoseiten - kein neues
      Seitenlayout, keine globalen Resets.

   Rollback: .xgld-service-links-echtheit-20260901/rollback.sh schneidet
   exakt diesen Markerblock ueber block-entfernen.py heraus. */

.xgld-idx-service-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.16s ease;
}

.xgld-idx-service-link:hover,
.xgld-idx-service-link:focus-visible {
    border-bottom-color: #D5A137;
}

.xgld-idx-service-link:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .xgld-idx-service-link {
        transition: none;
    }
}

.xgld-infopage--authenticity .xgld-infopage-schlusszeile {
    margin: 20px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #5C7185;
}
/* ===== XGLD SERVICE LINKS ECHTHEIT - 2026-09-01 END ===== */

/* ===== XGLD RECHTSTEXTE V1 - 2026-09-14 START ==========================
   Deutsche Erklaerung: Gestaltung der vier Rechtstext-Seiten
   (xgld-legal-page-template.php). Baut auf dem bestehenden Infoseiten-
   Geruest auf (.xgld-infopage, .xgld-infopage-raster 176px + 44px,
   Hero, Hairline auf den Rasterspalten) - keine neuen Farben, keine neuen
   Breakpoints, keine externen Ressourcen.

   Art Direction (Fragen 2-4):
   - Fortgefuehrt: Schiene 176px / 44px, Haarlinie #16232F auf der Spalte,
     Rubrik in Versalien, Fliesstext 14-15px.
   - Bewusst gebrochen: die linke Schiene traegt hier kein Begriffslabel,
     sondern ein nummeriertes Inhaltsverzeichnis - dieselbe Figur wie der
     Editorial Index der Startseite, ohne Flyout/Aufklappen.
   - Dominantes Element: die lange, ruhig gesetzte Textspalte (max. 70ch).
   Gold erscheint genau einmal: als Kante des Entwurfshinweises.
   Platzhalter [OFFEN ...] sind als <mark> ausgezeichnet: getoent, gestrichelt
   unterstrichen, bewusst NICHT gold.

   Mobile (bis 768px): Raster kollabiert wie alle Infoseiten, das
   Inhaltsverzeichnis steht als einfache Liste ueber dem Text. Lange
   Woerter/Adressen brechen per overflow-wrap, damit kein seitlicher
   Ueberlauf entsteht.
   Druck: Kopf, Kursleiste, Fusszeile und Inhaltsverzeichnis entfallen,
   schwarzer Text auf Weiss, Linkziele externer Links in Klammern.

   Rollback: .xgld-rechtstexte-v1-20260914/rollback.sh */

.xgld-legal .xgld-infopage-h1 {
    overflow-wrap: anywhere;
}

.xgld-legal-kopf {
    min-width: 0;
}

.xgld-legal-stand {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #7C8FA0;
}

.xgld-legal-entwurf {
    margin: 20px 0 0;
    max-width: 70ch;
    padding: 10px 0 10px 14px;
    border-left: 2px solid #D5A137;
    font-size: 13.5px;
    line-height: 1.6;
    color: #8FA3B3;
}

.xgld-legal-entwurf strong {
    font-weight: 600;
    color: #EDEDED;
}

.xgld-legal-sprachhinweis {
    margin: 14px 0 0;
    max-width: 70ch;
    font-size: 13px;
    line-height: 1.6;
    color: #7C8FA0;
}

/* --- Inhaltsverzeichnis in der linken Schiene -------------------------- */
.xgld-legal-toc {
    min-width: 0;
}

.xgld-legal-toc-titel {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #7C8FA0;
    line-height: 1.55;
}

.xgld-legal-toc-liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.xgld-legal-toc-liste li {
    margin: 0;
    padding: 0;
}

.xgld-legal-toc-liste a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 5px 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #8FA3B3;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.xgld-legal-toc-liste a:hover {
    color: #F5F5F5;
}

.xgld-legal-toc-liste a:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 2px;
    color: #F5F5F5;
}

.xgld-legal-toc-nr {
    color: #5C7185;
    font-variant-numeric: tabular-nums;
}

.xgld-legal-toc-text {
    grid-column: 2;
}

/* --- Textspalte --------------------------------------------------------- */
.xgld-legal-text {
    min-width: 0;
    max-width: 70ch;
    padding-bottom: 72px;
    font-size: 14.5px;
    line-height: 1.75;
    color: #8FA3B3;
    overflow-wrap: break-word;
}

.xgld-legal-text > *:first-child {
    margin-top: 0;
}

.xgld-legal-text h2 {
    margin: 44px 0 14px;
    padding-top: 20px;
    border-top: 1px solid #16232F;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    color: #F5F5F5;
    scroll-margin-top: 24px;
}

.xgld-legal-text > h2:first-child {
    padding-top: 0;
    border-top: none;
}

.xgld-legal-nr {
    display: inline-block;
    min-width: 2.2em;
    font-weight: 400;
    color: #7C8FA0;
    font-variant-numeric: tabular-nums;
}

.xgld-legal-text h3 {
    margin: 26px 0 8px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #EDEDED;
    scroll-margin-top: 24px;
}

.xgld-legal-text p {
    margin: 0 0 14px;
}

.xgld-legal-text strong {
    font-weight: 600;
    color: #EDEDED;
}

.xgld-legal-text ul,
.xgld-legal-text ol {
    margin: 0 0 16px;
    padding: 0;
}

.xgld-legal-text ul {
    list-style: none;
}

.xgld-legal-text ul > li {
    position: relative;
    padding: 0 0 6px 20px;
}

.xgld-legal-text ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 5px;
    height: 5px;
    background: #5C7185;
}

.xgld-legal-text ol {
    padding-left: 1.6em;
}

.xgld-legal-text ol > li {
    padding: 0 0 6px 4px;
}

.xgld-legal-text ol > li::marker {
    color: #7C8FA0;
}

.xgld-legal-text a {
    color: #EDEDED;
    text-decoration: underline;
    text-decoration-color: #5C7185;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.xgld-legal-text a:hover {
    color: #F5F5F5;
    text-decoration-color: #8FA3B3;
}

.xgld-legal-text a:focus-visible {
    outline: 2px solid #D5A137;
    outline-offset: 3px;
    border-radius: 1px;
}

.xgld-legal-text mark {
    padding: 0 3px;
    background: #16232F;
    color: #EDEDED;
    border-bottom: 1px dashed #7C8FA0;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.xgld-legal-text .xgld-legal-hinweis {
    font-size: 13px;
    line-height: 1.65;
    color: #7C8FA0;
}

/* Echte, abgegrenzte Objekte (Muster-Widerrufsformular, Adressblock):
   hier ist ein Rahmen zulaessig (V-2 der Art Direction). */
.xgld-legal-text .xgld-legal-kasten {
    margin: 8px 0 20px;
    padding: 18px 20px;
    border: 1px solid #1C2E3F;
}

.xgld-legal-text .xgld-legal-kasten > *:last-child {
    margin-bottom: 0;
}

.xgld-legal-text .xgld-legal-adresse {
    margin: 0 0 16px;
    color: #EDEDED;
}

@media (max-width: 768px) {
    .xgld-legal-toc--leer {
        display: none;
    }
    .xgld-legal-toc {
        padding-bottom: 18px;
        border-bottom: 1px solid #16232F;
    }
    .xgld-infopage-section > .xgld-infopage-raster > .xgld-legal-text {
        padding-top: 18px;
    }
    .xgld-legal-text {
        max-width: none;
        font-size: 14px;
        padding-bottom: 48px;
    }
    .xgld-legal-text h2 {
        margin-top: 36px;
        font-size: 15.5px;
    }
    .xgld-legal-text .xgld-legal-kasten {
        padding: 14px 14px;
    }
}

/* --- Light Mode: ausschliesslich bestehende Tokens ---------------------- */
html[data-xgld-theme="light"] .xgld-legal-stand,
html[data-xgld-theme="light"] .xgld-legal-sprachhinweis,
html[data-xgld-theme="light"] .xgld-legal-toc-titel,
html[data-xgld-theme="light"] .xgld-legal-nr,
html[data-xgld-theme="light"] .xgld-legal-text .xgld-legal-hinweis {
    color: var(--xgld-light-text-tertiary);
}

html[data-xgld-theme="light"] .xgld-legal-entwurf {
    border-left-color: var(--xgld-light-gold-decorative);
    color: var(--xgld-light-text-secondary);
}

html[data-xgld-theme="light"] .xgld-legal-entwurf strong,
html[data-xgld-theme="light"] .xgld-legal-text strong,
html[data-xgld-theme="light"] .xgld-legal-text h3,
html[data-xgld-theme="light"] .xgld-legal-text .xgld-legal-adresse {
    color: var(--xgld-light-text);
}

html[data-xgld-theme="light"] .xgld-legal-toc-liste a {
    color: var(--xgld-light-text-secondary);
}

html[data-xgld-theme="light"] .xgld-legal-toc-liste a:hover,
html[data-xgld-theme="light"] .xgld-legal-toc-liste a:focus-visible {
    color: var(--xgld-light-heading);
}

html[data-xgld-theme="light"] .xgld-legal-toc-liste a:focus-visible,
html[data-xgld-theme="light"] .xgld-legal-text a:focus-visible {
    outline-color: var(--xgld-light-focus);
}

html[data-xgld-theme="light"] .xgld-legal-toc-nr {
    color: var(--xgld-light-text-status);
}

html[data-xgld-theme="light"] .xgld-legal-text {
    color: var(--xgld-light-text-secondary);
}

html[data-xgld-theme="light"] .xgld-legal-text h2 {
    color: var(--xgld-light-heading);
    border-top-color: var(--xgld-light-hairline);
}

html[data-xgld-theme="light"] .xgld-legal-text ul > li::before {
    background: var(--xgld-light-text-status);
}

html[data-xgld-theme="light"] .xgld-legal-text ol > li::marker {
    color: var(--xgld-light-text-tertiary);
}

html[data-xgld-theme="light"] .xgld-legal-text a {
    color: var(--xgld-light-text);
    text-decoration-color: var(--xgld-light-border-field);
}

html[data-xgld-theme="light"] .xgld-legal-text a:hover {
    color: var(--xgld-light-heading);
    text-decoration-color: var(--xgld-light-text-secondary);
}

html[data-xgld-theme="light"] .xgld-legal-text mark {
    background: var(--xgld-light-page-muted);
    color: var(--xgld-light-text);
    border-bottom-color: var(--xgld-light-border-field);
}

html[data-xgld-theme="light"] .xgld-legal-text .xgld-legal-kasten {
    border-color: var(--xgld-light-border);
}

@media (max-width: 768px) {
    html[data-xgld-theme="light"] .xgld-legal-toc {
        border-bottom-color: var(--xgld-light-hairline);
    }
}

/* --- Druck -------------------------------------------------------------- */
@media print {
    body.xgld-legal-seite {
        background: #FFFFFF !important;
    }
    body.xgld-legal-seite > *:not(main) {
        display: none !important;
    }
    body.xgld-legal-seite .xgld-legal,
    body.xgld-legal-seite .xgld-legal * {
        background: transparent !important;
        color: #000000 !important;
        box-shadow: none !important;
    }
    .xgld-legal .xgld-infopage-raster {
        display: block;
        padding: 0;
    }
    .xgld-legal .xgld-infopage-rubrik,
    .xgld-legal-toc {
        display: none !important;
    }
    .xgld-legal-hero {
        padding: 0 0 12pt;
    }
    .xgld-legal .xgld-infopage-section,
    .xgld-infopage-section > .xgld-infopage-raster > .xgld-legal-text {
        padding-top: 0;
        border-top: none;
    }
    .xgld-legal .xgld-infopage-h1 {
        font-size: 18pt;
    }
    .xgld-legal-text {
        max-width: none;
        padding-bottom: 0;
        font-size: 10.5pt;
        line-height: 1.5;
    }
    .xgld-legal-text h2 {
        margin-top: 16pt;
        padding-top: 0;
        border-top: none;
        font-size: 12pt;
        font-weight: 600;
        break-after: avoid;
        page-break-after: avoid;
    }
    .xgld-legal-text h3 {
        break-after: avoid;
        page-break-after: avoid;
    }
    .xgld-legal-text p,
    .xgld-legal-text li {
        orphans: 3;
        widows: 3;
    }
    .xgld-legal-text .xgld-legal-kasten {
        border: 1px solid #000000;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .xgld-legal-entwurf {
        border-left: 2px solid #000000;
    }
    .xgld-legal-text mark {
        border-bottom: 1px dashed #000000;
    }
    .xgld-legal-text ul > li::before {
        background: #000000 !important;
    }
    .xgld-legal-text a {
        text-decoration: underline;
    }
    .xgld-legal-text a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
    }
}
/* ===== XGLD RECHTSTEXTE V1 - 2026-09-14 END ===== */