/* X-Hunter Design – Restseiten (Schritt 6): Infoseiten, Kontakt, Konto, Anmeldung, Warenkorb, Kasse (nur Optik), Bestellbestätigung,
 * Markenübersicht, Suche, 404. Startseite, Kategorie- und Produktseite haben eigene Stylesheets. */

/* Bildband (Kategorien, Listen, Infoseiten, Konto) – Inhalt aus xh_design::seitenKopf() */
.xh-katkopf { position: relative; background: var(--surface-tief); color: #ffffff; overflow: hidden; font-family: var(--font-sans); }
.xh-katkopf > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xh-katkopf-schleier { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .7) 45%, rgba(0, 0, 0, .15) 80%); }
.xh-katkopf-in { position: relative; padding-top: 22px; padding-bottom: 34px; }
.xh-krumen { font-size: 13px; color: #cfcfcf; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Krumen-Links: Tippfläche 44 px hoch, der negative Rand hält das Bildband gleich hoch */
.xh-krumen a { display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0; color: #cfcfcf !important; text-decoration: none; }
.xh-krumen a:hover { color: #ffffff !important; text-decoration: underline; }
.xh-krumen-aktiv { color: #ffffff; font-weight: 600; }
.xh-krumen-zurueck { display: none; }
.xh-katkopf-titel { overflow-wrap: break-word; hyphens: manual; margin: 28px 0 0; font-size: 56px; line-height: 1; font-weight: 700; font-style: italic; text-transform: uppercase; color: #ffffff; text-shadow: var(--shadow-title-on-photo); font-family: var(--font-sans); }
.xh-katkopf-text { margin: 12px 0 0; max-width: 560px; font-size: 17px; line-height: 1.55; color: #e6e6e6; }
.xh-katkopf-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.xh-katkopf-chips span { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .35); padding: 8px 14px; font-size: 13px; font-weight: 600; }
/* Drei Vorteile im Bildband (Marcus 24.10.): Symbol + Überschrift + Erklärung, anklickbar */
.xh-vorteile { display: grid; grid-template-columns: repeat(3, minmax(0, 310px)); gap: 12px; margin-top: 22px; }
.xh-vorteil { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .25); color: #ffffff !important; text-decoration: none !important; transition: border-color .15s, background .15s; }
.xh-vorteil:hover, .xh-vorteil:focus-visible { border-color: var(--brand-red); background: rgba(0, 0, 0, .75); }
.xh-vorteil-symbol { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--brand-red); color: #ffffff; }
.xh-vorteil-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xh-vorteil-text strong { font-size: 14px; line-height: 1.25; font-weight: 700; }
.xh-vorteil-text small { font-size: 12.5px; line-height: 1.35; color: #d0d0d0; }
.xh-vorteil:hover small { color: #ffffff; }
/* PC: Symbol und Titel oben bündig, sonst sitzt der Titel neben einem kürzeren Text tiefer als die Nachbarn */
@media (min-width: 992px) { .xh-vorteil { align-items: flex-start; } }
/* Tablet: dreispaltig waren die Kästen gequetscht – untereinander als schmale Zeilen wie am Handy, höchstens 560 px breit */
@media (min-width: 768px) and (max-width: 991px) {
  .xh-vorteile { grid-template-columns: minmax(0, 560px); gap: 6px; }
  .xh-vorteil { padding: 7px 10px 7px 7px; gap: 10px; }
  .xh-vorteil-symbol { width: 30px; height: 30px; }
  .xh-vorteil-symbol svg { width: 16px; height: 16px; }
  .xh-vorteil-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
}

.xh-katkopf-klein .xh-katkopf-in { padding-bottom: 28px; }
.xh-katkopf-klein .xh-katkopf-titel { margin-top: 20px; font-size: 44px; }
/* Unterkategorie: kompakterer Kopf (Navigation läuft über die Leiste darunter) */
.xh-katkopf-unter .xh-katkopf-in { padding-bottom: 24px; }
.xh-katkopf-unter .xh-katkopf-titel { margin-top: 18px; font-size: 44px; }
/* Mit Bildband: alte Brotkrumenleiste und doppelte Seitentitel des Themes weg (Blog-Artikel, Marke, Kontaktkasten, Blog-Übersicht/-Kategorie) */
body:not(#index):not(#category):not(#product):has(.xh-katkopf) #wrapper .breadcrumb-bg,
body:has(.xh-katkopf) #js-product-list-header,
body:has(.xh-katkopf) #wrapper .page-header,
body#module-leoblog-blog .blog-detail > h1.blog-title,
body#manufacturer #main > h1,
body#contact .contact-form .form-group:has(> div > h3),
body#module-leoblog-list h1.blog-lastest-title,
body#module-leoblog-category #blog-category h3.section-title { display: none !important; }
body:has(.xh-katkopf) #wrapper > .container { padding-top: 32px; }
/* Seitenraster wie .xh-wrap in Kopf, Bildband und Fuß (max. 1320 px, Rand 24 px, bis 991 px 16 px) statt Theme-Container
   (960 / 100 % / 1440 px) – .row (−15) und Spalte (+15) heben sich auf. Start- und Produktseite haben eigene Regeln. */
body:not(#index):not(#product) #wrapper > .container { width: auto; max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: var(--space-5); padding-right: var(--space-5); box-sizing: border-box; }
@media (max-width: 991px) {
  body:not(#index):not(#product) #wrapper > .container { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* Großes Kopfbild des Themes → schmale graue Brotkrumenleiste über die ganze Breite */
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg {
  background-image: none !important;
  background-color: var(--surface-alt) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
  border-bottom: 1px solid var(--border);
  /* Trennlinie wie die Fläche über die volle Breite (border-image ragt seitlich hinaus, clip-path lässt das zu) */
  border-image: linear-gradient(var(--border) 0 0) 0 0 1 0 / 0 0 1px 0 / 0 100vmax;
  box-shadow: 0 0 0 100vmax var(--surface-alt);
  clip-path: inset(0 -100vmax);
  display: block !important;
  /* Theme schiebt die Leiste per left:50% + translateX(-50%) auf 100vw → Text lief links aus dem Bild */
  position: static !important; left: auto !important; right: auto !important; transform: none !important; width: auto !important; max-width: none !important;
}
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg::before,
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg::after { display: none !important; }
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg .container { padding: 0; max-width: none; width: auto; } /* Theme-Breite 1440 px ragte sonst über den Rand */
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg .breadcrumb { display: block !important; background: none; padding: 0; margin: 0; }
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 44px; margin: 0; padding: 0; justify-content: flex-start; font-family: var(--font-sans); font-size: 13px; text-transform: none; }
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg li { color: var(--heading); font-weight: 600; text-shadow: none; }
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg li a,
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg li a span { color: var(--text-muted) !important; font-weight: 400; }
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg li a:hover span { color: var(--brand-red) !important; }
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg li::after,
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg li + li::before { color: var(--text-muted) !important; }

/* Theme-Rest am span: Poppins (nicht geladen → Arial), Gewicht 500, schwarzer Unterstrich */
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg li span { display: inline !important; text-transform: none !important; color: var(--heading) !important; font-size: 13px;
  font-family: inherit; font-weight: inherit; border-bottom: 0; }
/* Symbole aus, auch das Haus vor einem einzelnen Eintrag (Kasse: weiß auf Grau, wirkte wie ein Fleck) */
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg li a::before,
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg li:first-child::before,
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg li a i { display: none !important; }
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg li { display: inline-flex !important; align-items: center; gap: 8px; }
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg li::after { display: none !important; content: none !important; }
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg li + li::before { content: "/" !important; display: inline !important; margin: 0 !important; padding: 0 !important; }
body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg li, body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg li * { text-transform: none !important; }

/* Seitentitel */
body:not(#index):not(#category):not(#product) #main .page-header h1,
body:not(#index):not(#category):not(#product) #main > h1,
body#cms #content h1:first-child {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  color: var(--heading);
  margin: 0 0 24px;
}

/* Infoseiten: Theme-Innenabstände weg (section#content 1.25rem, .container-parent ist ein Bootstrap-Container mit 15 px und 540–1440 px) –
   Text, Kästen und Druckknopf stehen auf der Titelkante; oben gilt nur der Abstand des Seitenrasters wie auf allen Bildband-Seiten */
body#cms #content.page-content { padding-top: 0; padding-left: 0; padding-right: 0; }
body#cms #content > .container-parent { width: auto; max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

/* Fließtext auf Infoseiten */
body#cms #content, body#cms .page-content { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: var(--text); }
body#cms #content h2, body#cms #content h3 { font-family: var(--font-sans); color: var(--heading); text-transform: none; font-style: normal; margin-top: 28px; }
body#cms #content a { color: var(--brand-red); text-decoration: underline; }
body#cms #content table { max-width: 100%; }

/* Kästen (Konto, Warenkorb, Kasse) */
.card, .cart-summary, .checkout-step, .block-promo, .customer-account-links .link-item, #content.page-content.card {
  border-radius: 0 !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
.card-block, .card-body { font-family: var(--font-sans); }
.page-my-account #content .links a .link-item { background: #ffffff; border: 1px solid var(--border); font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; color: var(--heading); transition: border-color .15s, color .15s; }
.page-my-account #content .links a:hover .link-item { border-color: var(--brand-red) !important; color: var(--brand-red); }
.page-my-account #content .links a i { color: var(--brand-red) !important; }

/* Warenkorb */
body#cart .cart-grid-body .card-block h1, body#cart .cart-grid-body .card-block .h1 { font-family: var(--font-sans); font-size: 28px; font-weight: 700; font-style: italic; text-transform: uppercase; color: var(--heading); }
body#cart .cart-item { border-bottom: 1px solid var(--border); }
body#cart .cart-item:last-child { border-bottom: 0; } /* sonst Linie und leerer Streifen bis zur Kastenkante */
body#cart .product-line-info a.label { color: var(--heading); font-weight: 600; }
body#cart .product-line-info a.label:hover { color: var(--brand-red); }
/* Artikelzeile (Theme-Override mit „Sie sparen …“): Nachlass in Markenrot wie auf Karten, Preiszusatz ruhig in Grau statt grau-fett */
body#cart .product-line-info .product-discount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); margin-bottom: 2px; }
body#cart .product-line-info.product-price :is(.product-discount, .current-price) { line-height: 1.3; } /* Theme-.h5 1.1: Nachlass, Preis und Steuerzeile berührten sich */
body#cart .product-line-info .xh-korb-spar { color: var(--brand-red); font-size: 14px; font-weight: 700; white-space: nowrap; }
body#cart .aeuc_product_price_block, body#cart .aeuc_product_price_block :is(span, a) { font-size: 13px; font-weight: 400; color: var(--text-muted); }
body#cart .aeuc_product_price_block .aeuc_shipping_label a { white-space: nowrap; }
/* Bild 85 px: das srcset der Vorlage gibt Bildtyp-Breiten an (125w/1000w), die Dateien sind kleiner – ohne feste Breite schrumpfte es auf 22–58 px */
body#cart .product-line-grid-left img { width: 85px; height: auto; }
/* Menge, Zeilenpreis und Löschen in einer Zeile statt Theme-Spalten (Handy: unter Bild und Name); Zeilenpreis rechts, bei Platzmangel darunter */
body#cart .product-line-grid-right > .row { display: flex; align-items: flex-start; margin-left: 0; margin-right: 0; }
body#cart .product-line-grid-right .row::before, body#cart .product-line-grid-right .row::after { content: none; }
body#cart .product-line-grid-right > .row > div { float: none; padding-left: 0; padding-right: 0; }
body#cart .product-line-grid-right > .row > .hidden-md-up { display: none; }
body#cart .product-line-grid-right > .row > .col-md-10 { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; }
body#cart .product-line-grid-right > .row > .col-md-2 { flex: none; width: auto; }
body#cart .product-line-grid-right .col-md-10 > .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; }
body#cart .product-line-grid-right :is(.qty, .price) { float: none; width: auto; padding: 0; }
body#cart .product-line-grid-right .price { margin-left: auto; }
/* Mengenwahl wie auf der Produktseite [−] 1 [+] mit 44-px-Knöpfen statt zwei 22×21-Pfeilen; Touchspin-JS bleibt, nur Anordnung und Größe */
body#cart .bootstrap-touchspin { display: flex; float: none; width: auto; border: 1px solid var(--field-border); }
body#cart .bootstrap-touchspin .input-group-btn-vertical { display: contents; }
body#cart .bootstrap-touchspin .bootstrap-touchspin-down { order: 0; }
body#cart .bootstrap-touchspin input.form-control { order: 1; width: 40px; height: 44px; min-height: 0; padding: 0; border: 0; text-align: center; font-weight: 700; color: var(--heading); }
body#cart .bootstrap-touchspin .bootstrap-touchspin-up { order: 2; }
body#cart .bootstrap-touchspin .btn-touchspin { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0;
  background: var(--surface); color: var(--heading); }
body#cart .bootstrap-touchspin .btn-touchspin:hover { background: var(--surface-alt); color: var(--brand-red); }
body#cart .bootstrap-touchspin .btn-touchspin i { position: static; font-size: 20px; }
body#cart .bootstrap-touchspin .touchspin-up::after { content: "\E145"; } /* Material „add“ statt Pfeil hoch */
body#cart .bootstrap-touchspin .touchspin-down::after { content: "\E15B"; } /* Material „remove“ statt Pfeil runter */
body#cart .product-line-grid-right .remove-from-cart { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; }
body#cart .product-line-grid-right .remove-from-cart:hover { color: var(--brand-red); }
/* Tablet und kleiner PC: Name bekam nur 150–190 px (4 Zeilen) – Bild 18 %, Name 44 %, Menge/Preis 38 % */
@media (min-width: 768px) and (max-width: 1199px) {
  body#cart .product-line-grid-left { width: 16%; }
  body#cart .product-line-grid-body { width: 38%; }
  body#cart .product-line-grid-right { width: 46%; } /* Menge (132 px), Zeilenpreis und Löschen passen in eine Reihe */
}
@media (max-width: 991px) {
  body#cart .cart-grid-body > a.label { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; } /* „Mit dem Einkaufen fortfahren“: Tippfläche */
}
/* Handy: Bildspalte fest statt ein Drittel (bei 767 px 250 px Spalte für ein 85-px-Bild) */
@media (max-width: 767px) {
  body#cart .product-line-grid-left { width: 112px; }
  body#cart .product-line-grid-body { width: calc(100% - 112px); }
}
/* Leerer Warenkorb: gesperrter Kassenknopf ohne Funktion aus (beim Mindestbestellwert steht er in .cart-detailed-actions und bleibt) */
body#cart .cart-grid-right .checkout.card-block:has(> .btn.disabled) { display: none; }
/* Leerer Warenkorb (Marcus 25.10.): nur „Ihr Warenkorb ist leer.“ und roter Knopf „Weiter einkaufen“ – keine 0,00-€-Zusammenfassung */
body#cart:has(.no-items) .cart-grid-right { display: none; }
body#cart:has(.no-items) .cart-grid-body { width: 100%; max-width: 100%; flex: 0 0 100%; float: none; }
body#cart:has(.no-items) .cart-grid-body > a.label { display: inline-flex; align-items: center; gap: 6px; min-height: 52px; margin-top: var(--space-4); padding: 0 var(--space-5);
  background: var(--brand-red); color: var(--on-dark) !important; font-weight: 700; text-transform: uppercase; text-decoration: none; }
body#cart:has(.no-items) .cart-grid-body > a.label:hover { background: var(--brand-red-dunkel); }
body#cart:has(.no-items) .cart-grid-body > a.label :is(i, svg) { color: var(--on-dark); }
/* Handy/Tablet (Marcus 25.10.): Summe und „Zur Kasse“ direkt unter den Artikeln, Hinweiskästen und „Weiter einkaufen“ danach */
@media (max-width: 991px) {
  body#cart .cart-grid { display: flex; flex-direction: column; }
  body#cart .cart-grid-body { display: contents; }
  body#cart .cart-grid-body > * { order: 3; margin-left: var(--space-4); margin-right: var(--space-4); }
  body#cart .cart-grid-body > .cart-container { order: 1; }
  body#cart .cart-grid-right { order: 2; width: auto; }
}
body#cart .cart-summary .cart-detailed-actions .btn,
body#checkout .btn-primary { width: 100%; height: 52px; font-size: 15px; display: flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; } /* Text mittig, auch bei <a> */
body#checkout .checkout-step .continue { margin-top: 20px; }
body#checkout .add-address, body#checkout a[data-link-action="different-invoice-address"] { display: inline-block; margin: 6px 0; }
body#checkout .add-address a, body#checkout a[data-link-action="different-invoice-address"] { color: var(--heading); font-weight: 700; text-decoration: underline; }
body#checkout .add-address a:hover, body#checkout a[data-link-action="different-invoice-address"]:hover { color: var(--brand-red); }
/* Zusammenfassung in Warenkorb und Kasse gleich (die Kasse heißt #js-checkout-summary, ohne .cart-summary): graues Gesamt-Band, rote Summe, fette Werte */
body#cart .cart-summary .cart-total, body#checkout #js-checkout-summary .cart-total { background: var(--surface-alt); font-weight: 700; }
body#cart .cart-summary .cart-total .value, body#checkout #js-checkout-summary .cart-total .value { color: var(--brand-red); }
body#checkout #js-checkout-summary .cart-summary-subtotals > .value { font-weight: 700; color: var(--text-strong); }
body#checkout #js-checkout-summary .xh-vr-box .xh-vr-titel { font-size: 14px; line-height: 1.35; } /* schmale Spalte: Überschrift lief 3-zeilig */
body#checkout .cart-summary-products a.js-show-details { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
body#checkout .js-show-details svg { transition: transform .15s; }
body#checkout .js-show-details[aria-expanded="true"] svg { transform: rotate(180deg); }
/* MwSt.-Zeile bündig (Theme: 3,2 px eingerückt) und ruhig; „(Versandinformationen)“ statt 11,2 px fett */
:is(.cart-summary, #js-checkout-summary) .cart-summary-line:has(> .label.sub) { padding: 0; }
.card-block.cart-summary-totals .cart-summary-line > span.sub { font-size: 14px; color: var(--text-muted); }
a.aeuc_hook_display_checkout_subtotal_details { font-size: 13px; font-weight: 400; color: var(--text-muted); text-decoration: underline; }
/* „Haben Sie einen Gutschein?“ war dunkler Fließtext – als Textlink erkennbar, 44 px Tippfläche */
.cart-voucher .promo-code-button a.collapse-button { display: inline-flex; align-items: center; min-height: 44px; color: var(--heading); font-weight: 700; text-decoration: underline; }
.cart-voucher .promo-code-button a.collapse-button:hover, .cart-voucher .promo-code-button a.collapse-button:focus-visible { color: var(--brand-red); }
/* Gutschein-Feld (Warenkorb + Kasse): Eingabe und Knopf nebeneinander statt überlappend, „Schließen“ als Link darunter (Marcus 30.10.) */
.block-promo .promo-code { padding: 16px !important; }
.block-promo .promo-code form { display: flex !important; align-items: stretch; gap: 8px; width: 100%; margin: 0; }
.block-promo .promo-code .promo-input { flex: 1 1 auto; min-width: 0; width: auto !important; height: 46px !important; margin: 0 !important; padding: 0 12px; float: none !important; }
.block-promo .promo-code form .btn { flex: 0 0 auto; width: auto !important; height: 46px; min-height: 46px; margin: 0 !important; padding: 0 16px; float: none !important; position: static !important; }
.block-promo .promo-code .alert { margin: 10px 0 0; }
.block-promo .promo-code .cancel-promo { display: inline-block; margin: 10px 0 0 !important; padding: 0; font-size: 14px; color: var(--text-muted); text-decoration: underline; }
.block-promo .promo-code .cancel-promo:hover, .block-promo .promo-code .cancel-promo:focus-visible { color: var(--brand-red); }
@media (max-width: 359px) { .block-promo .promo-code form { flex-wrap: wrap; } .block-promo .promo-code form .btn { width: 100% !important; } }

/* Kasse: Polster über dem ersten Schritt weg (checkout-presentation.css, lädt danach) – Abstand zur Krumenleiste wie im Warenkorb (28 px, Handy 16 px) */
body#checkout section#content { padding-top: 0; }
/* Kasse: ein Seitentitel wie „Warenkorb“ (Theme-Override checkout.tpl), die Schritte darunter sind h2 */
body#checkout .xh-kasse-titel { font-family: var(--font-sans); font-size: 28px; line-height: 1.1; font-weight: 700; font-style: italic; text-transform: uppercase; color: var(--heading);
  margin: 0 0 var(--space-5); }
@media (max-width: 767px) { body#checkout .xh-kasse-titel { font-size: 24px; margin-bottom: var(--space-4); } }
/* Schritt 1: „Als Gast bestellen | Anmelden“ als Reiter wie auf der Produktseite statt Textlinks mit „|“ (21 px hoch, inaktiv #7a7a7a);
   Abstand nach unten trägt die Reiterleiste (Theme: .my-2 mit !important, Formular 25 px darunter und 5 px eingerückt) */
body#checkout .nav-inline { display: flex; flex-wrap: wrap; column-gap: var(--space-5); margin: 0 0 var(--space-5) !important; padding: 0; border-bottom: 1px solid var(--border); }
body#checkout .nav-inline .nav-item { margin: 0 !important; min-width: 0; }
body#checkout .nav-inline .nav-item:has(> .nav-separator) { display: none; }
body#checkout .nav-inline .nav-link { display: flex; align-items: center; min-height: 44px; margin-bottom: -1px; padding: 0; border-bottom: 3px solid transparent;
  font-size: 14px; line-height: 1.25; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
body#checkout .nav-inline .nav-link:hover { color: var(--heading); }
body#checkout .nav-inline .nav-link.active { color: var(--heading); border-bottom-color: var(--brand-red); }
body#checkout section.checkout-step :is(#customer-form, #delivery-address, #invoice-address, #login-form) { margin-left: 0; }
body#checkout section.checkout-step :is(#customer-form, #login-form) { margin-top: 0; }
/* Kasse: Schrittüberschriften */
body#checkout .checkout-step .step-title { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--heading); }
body#checkout .checkout-step.-current .step-title { color: var(--brand-red); }
body#checkout .checkout-step .step-number { background: var(--heading); color: #ffffff; border-radius: 0; }
body#checkout .checkout-step.-current .step-number { background: var(--brand-red); }
body#checkout .custom-radio input[type="radio"]:checked + span { background-color: var(--brand-red); }
/* Kein Blau im Shop (Marcus 21.10.): Bootstrap-/Leo-Blau (#2fb5d2, #5bc0de, #d9edf7, Browser-Häkchen) → Rot / Dunkel / Hellgrau */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-red); }
.btn-info { background: var(--ink) !important; border-color: var(--ink) !important; color: #ffffff !important; }
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active { background: var(--brand-red) !important; border-color: var(--brand-red) !important; color: #ffffff !important; }
.text-info { color: var(--heading) !important; }
.bg-info, .table-info, .table-info > td, .table-info > th, .table-active, .table-active > td { background-color: var(--surface-alt) !important; }
.dropdown-item:hover, .dropdown-item:focus, .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--surface-alt) !important; color: var(--heading) !important; }
.dropdown-item.active, .dropdown-item:active, .list-group-item.active { background-color: var(--brand-red) !important; border-color: var(--brand-red) !important; color: #ffffff !important; }
.page-item.active .page-link { background-color: var(--brand-red) !important; border-color: var(--brand-red) !important; }
/* Leo-Modul leofeature (Wunschliste, Vergleich, Bewertungen, Warenkorb-Popup) */
.list-wishlist tr.show { background-color: var(--surface-alt) !important; }
.list-wishlist tr.show td, .list-wishlist tr.show a { color: var(--heading); }
/* Zeile beim Löschen (.active) bzw. frisch angelegt (.new): Leo #4880D2 → zartes Rot bzw. Grau */
body .list-wishlist tr.active, body .list-wishlist tr.show.active { background-color: #fbe3e3 !important; }
body .list-wishlist tr.new { background-color: var(--surface-alt) !important; }
.leo-modal .modal-header.info-mess, .leo-modal .modal-header.warning-mess { background: var(--heading) !important; }
.leo-compare-button.added, .leo-wishlist-button.added, .wishlist-item.added, .wishlist-item.added:hover,
.usefulness_btn.active, .usefulness_btn.active:hover, .view-leo-dropdown-additional,
#header .leo-cart-item-info a.leo-bt-product-quantity:hover { background: var(--brand-red) !important; background-color: var(--brand-red) !important; border-color: var(--brand-red) !important; }
.leo-compare-button.active, .leo-wishlist-button.active { border-color: var(--brand-red) !important; }
.leo-wishlist-button .leo-wishlist-bt-loading, .leo-compare-button .leo-compare-bt-loading,
.leo-dropdown-cssload-speeding-wheel, .leo-fly-cssload-speeding-wheel { border-top-color: var(--brand-red) !important; border-bottom-color: var(--brand-red) !important; }
.leo-dropdown-cart-content a.leo-dropdown-customization, .leo-dropdown-cart-content a.leo-dropdown-combination { color: var(--heading) !important; }
.leo-dropdown-cart-item a:hover, .leo-dropdown-cart-item a:focus { color: var(--brand-red) !important; }

/* Hinweiskästen: Bootstrap-Blau (alert-info) → grau mit dunklem Rand links, passend zum Design */
.alert-info { background: var(--surface-alt) !important; border: 1px solid var(--border) !important; border-left: 4px solid var(--heading) !important;
  color: var(--heading) !important; border-radius: 0 !important; }
.alert-info a { color: var(--heading) !important; font-weight: 700; text-decoration: underline; }
.alert-info a:hover { color: var(--brand-red) !important; }
/* Häkchen (Kasse, Konto, Filter) rot statt schwarz, angehakter Kasten mit rotem Rand */
.custom-checkbox input[type="checkbox"] + span .checkbox-checked { color: var(--brand-red) !important; }
.custom-checkbox input[type="checkbox"]:checked + span { border-color: var(--brand-red) !important; }
.custom-checkbox input[type="checkbox"]:focus + span { border-color: var(--brand-red) !important; }
/* Häkchen in Kundenformularen und „Benachrichtigen“ (Theme: 15 px, Folgezeile unter dem Kästchen): 20 px wie im Kassen-Kasten, Text hängend eingezogen.
   Block mit Einzug statt Flex – sonst würde ein Link im Text zum eigenen Block. Filter (.facet-label) und #conditions-to-approve haben andere Strukturen */
.custom-checkbox > label { display: block; position: relative; padding-left: 30px; text-align: left; overflow: visible; line-height: 1.5; } /* Theme: overflow hidden schnitt Unterlängen ab */
.custom-checkbox > label > input[type="checkbox"], .custom-checkbox > label > input[type="checkbox"] + span { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; margin: 0; }
.custom-checkbox > label > input[type="checkbox"] + span { border: 1px solid var(--field-border); border-radius: var(--radius-field); background: var(--surface); }
.custom-checkbox > label > input[type="checkbox"] + span .checkbox-checked { font-size: 20px; margin: -1px; }
.custom-checkbox > label > br:has(+ em:empty) { display: none; } /* Newsletter-Text endet mit <br><em></em> → leere Zeile */
/* Links in Formularen (Passwort vergessen, Konto anlegen/anmelden, Datenschutz im Häkchen-Text, AGB/Widerruf in der Kasse): fett und unterstrichen, beim Drüberfahren rot –
   Theme zeigt sie in Textfarbe ohne Unterstrich, nicht als Link erkennbar */
body#checkout #conditions-to-approve a, .custom-checkbox label a, body#checkout .condition-label a, :is(.forgot-password, .no-account, .register-form > p) a, #back-to-login {
  font-weight: 700 !important; color: var(--heading) !important; text-decoration: underline; }
body#checkout #conditions-to-approve a:hover, .custom-checkbox label a:hover, body#checkout .condition-label a:hover, :is(.forgot-password, .no-account, .register-form > p) a:hover, #back-to-login:hover,
body#checkout #conditions-to-approve a:focus, .custom-checkbox label a:focus, body#checkout .condition-label a:focus, :is(.forgot-password, .no-account, .register-form > p) a:focus, #back-to-login:focus {
  color: var(--brand-red) !important; }
#back-to-login { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
@media (max-width: 991px) { body#authentication #content :is(.forgot-password, .no-account) a { display: inline-block; padding: 13px 0; } } /* Tippfläche 44 statt 18–21 px */

/* Formulare */
.form-control-label, label { font-family: var(--font-sans); }
/* Theme-Grau statt Designsystem: Kontotexte #363a42 → Fließtext, Hilfetexte #7a7a7a (4,3:1) → gedämpft (4,9:1) */
.page-customer-account #content { color: var(--text); }
.form-control-comment, #customer-form .form-informations-subtitle { color: var(--text-muted); }
#customer-form .form-control-comment, .js-address-form .form-control-comment { font-size: 13px; }
.form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--ink) !important; box-shadow: 0 0 0 2px rgba(14, 24, 42, .15) !important; outline: none; }
/* Ein Formularmuster für Kontakt, Anmeldung, Registrierung, Passwort, Gast-Verfolgung, Konto-Daten/-Adressen und Kasse (Theme: Float-Raster col-md-3/6/3
   mit rechtsbündiger Beschriftung, ab 768 px schmale Felder): Beschriftung über dem Feld, „Optional“ rechts daneben, Feld höchstens 560 px, Knopf links darunter */
body:is(#contact, #authentication, #registration, #password, #guest-tracking, #identity, #address, #checkout) .form-group.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: end; max-width: 560px; margin-left: 0; margin-right: 0; }
body:is(#contact, #authentication, #registration, #password, #guest-tracking, #identity, #address, #checkout) .form-group.row > .form-control-label {
  grid-area: 1 / 1; float: none; width: auto; max-width: none; margin: 0 0 var(--space-1); padding: 0; text-align: left; }
body:is(#contact, #authentication, #registration, #password, #guest-tracking, #identity, #address, #checkout) .form-group.row > .form-control-comment {
  grid-area: 1 / 2; float: none; width: auto; max-width: none; margin: 0; padding: 0 0 var(--space-1); text-align: right; font-size: 13px; }
body:is(#contact, #authentication, #registration, #password, #guest-tracking, #identity, #address, #checkout) .form-group.row > :is([class*="col-"], [class*="offset-"]):not(.form-control-label):not(.form-control-comment) {
  grid-column: 1 / -1; float: none; width: auto; max-width: none; margin-left: 0; padding-left: 0; padding-right: 0; }
/* Häkchen-Zeilen: leere Beschriftungs- und Hinweisspalte machten 40–70 px Lücke */
.form-group.row:has(.custom-checkbox) > :is(.form-control-label, .form-control-comment) { display: none; }
/* Kasten: gleiches Polster auf allen Formularseiten (vorher 16 bzw. 20 px plus Innenkasten) */
body:is(#contact, #authentication, #registration, #password, #guest-tracking, #module-widerruf-widerruf) #content.page-content { padding: var(--space-4); }
@media (min-width: 768px) { body:is(#contact, #authentication, #registration, #password, #guest-tracking, #module-widerruf-widerruf) #content.page-content { padding: var(--space-5); } }
@media (min-width: 992px) { body:is(#contact, #authentication, #registration, #password, #guest-tracking, #module-widerruf-widerruf) #content.page-content { padding: var(--space-7); } }
body#authentication #content.page-content { max-width: none; margin: 0; } /* Theme: 640-px-Kasten mittig */
body#authentication .login-form { margin-top: 0; }
body#authentication #content hr { max-width: 560px; margin-left: 0; margin-right: auto; } /* bündig mit dem linksbündigen Formular */
body:is(#authentication, #checkout) #content :is(.forgot-password, .no-account) { margin-left: 0; text-align: left; }
body#contact .contact-form { padding: 0; }
/* Einleitung mit Abstand zum ersten Feld (vorher 0 px) */
body#password .forgotten-password { padding: 0; }
body#registration .register-form > p, body#guest-tracking #content header p, body#password .send-renew-password-link { margin: 0 0 var(--space-5); padding: 0; }
/* Passwort: Beschriftung, Feld und Knopf untereinander statt in einer Zeile (Beschriftung lief zweizeilig in 130 px) */
body#password .center-email-fields > button { grid-column: 1 / -1; justify-self: start; width: auto; height: auto; margin: var(--space-3) 0 0; }
body:is(#contact, #authentication, #registration, #guest-tracking, #identity, #address) #content .form-footer { text-align: left !important; }
body:is(#registration, #identity, #address) #content .form-footer .float-xs-right { float: none !important; }
@media (max-width: 575px) {
  body:is(#contact, #authentication, #registration, #guest-tracking, #identity, #address) #content .form-footer .btn-primary,
  body#password .form-group.row.center-email-fields > button { width: 100%; }
}
/* Widerrufsformular (Modul widerruf, eigenes Stylesheet: Rostrot #c0392b, runde Ecken, Kasten im Kasten) im Formularmuster der übrigen Seiten */
body#module-widerruf-widerruf .widerruf-container { max-width: 560px; margin: 0; padding: 0; }
body#module-widerruf-widerruf .widerruf-container > p { margin: 0 0 var(--space-5); }
body#module-widerruf-widerruf .widerruf-form { gap: var(--space-4); }
body#module-widerruf-widerruf .widerruf-field { gap: var(--space-1); }
body#module-widerruf-widerruf .widerruf-field label { font-size: 14px; font-weight: 700; color: var(--text-strong); }
body#module-widerruf-widerruf .widerruf-field .optional { font-size: 13px; font-weight: 400; color: var(--text-muted); }
body#module-widerruf-widerruf .widerruf-field :is(input[type="text"], input[type="email"], textarea) { padding: 8px 16px; background: var(--surface); border: 1px solid var(--field-border);
  border-radius: var(--radius-field); color: var(--text); font-size: 16px; }
body#module-widerruf-widerruf .widerruf-field :is(input[type="text"], input[type="email"]) { min-height: 44px; }
body#module-widerruf-widerruf .widerruf-field small { font-size: 13px; color: var(--text-muted); }
/* Schritt „Prüfen“: Zusammenfassung und zwei Knöpfe links untereinander */
body#module-widerruf-widerruf .widerruf-form > h2 { margin: 0; font-size: 20px; line-height: 1.25; color: var(--heading); }
body#module-widerruf-widerruf .widerruf-form dl { margin: 0; }
body#module-widerruf-widerruf .widerruf-form dt { font-size: 14px; font-weight: 700; color: var(--text-strong); }
body#module-widerruf-widerruf .widerruf-form dd { margin: 0 0 var(--space-3); }
body#module-widerruf-widerruf .widerruf-form > .btn { align-self: flex-start; }
/* Absendeknopf wie .btn-primary (auch „Widerruf“ im Konto-Bestelldetail) */
.widerruf-submit-btn, .widerruf-btn-order { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 20px; background: var(--brand-red);
  border: 1px solid var(--brand-red); border-radius: 0; color: #ffffff !important; font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; }
.widerruf-submit-btn:hover, .widerruf-submit-btn:focus, .widerruf-btn-order:hover, .widerruf-btn-order:focus { background: var(--brand-red-dunkel); border-color: var(--brand-red-dunkel); }
/* Erfolg/Fehler: Kasten-Bauweise wie die Hinweiskästen (Rand links, eckig) */
body#module-widerruf-widerruf .widerruf-success-box { padding: var(--space-5); background: var(--success-bg); border: 0; border-left: 4px solid var(--stock-green); border-radius: 0; text-align: left; }
body#module-widerruf-widerruf .widerruf-success-box h2 { margin: 0 0 var(--space-3); font-size: 20px; color: var(--stock-green); }
body#module-widerruf-widerruf .widerruf-success-box p { color: var(--text); }
body#module-widerruf-widerruf .widerruf-error-box { padding: var(--space-3) var(--space-4); background: var(--danger-bg); border: 0; border-left: 4px solid var(--danger); border-radius: 0;
  color: var(--danger); }
@media (max-width: 575px) { body#module-widerruf-widerruf .widerruf-form > :is(.widerruf-submit-btn, .btn) { width: 100%; } }

/* 404 / Seite nicht gefunden */
body#pagenotfound #main .page-header h1 { color: var(--brand-red); }
/* 404, leere Suche, leere Listen („Neue Artikel“): Theme-Karte mit Schatten (#363a42, mittig) → Kasten mit Rand auf der Titelkante */
:is(body#pagenotfound, #products) .page-not-found { box-shadow: none; border: 1px solid var(--border); border-radius: 0; background: var(--surface); color: var(--text);
  font-size: 16px; padding: var(--space-5); margin: 0 0 var(--space-5); max-width: var(--lesebreite); }
:is(body#pagenotfound, #products) .page-not-found :is(h2, h4) { font-size: 20px; line-height: 1.25; font-weight: 700; font-style: italic; text-transform: uppercase; color: var(--heading); margin: 0 0 var(--space-2); }
:is(body#pagenotfound, #products) .page-not-found p { margin: 0; }
/* 404 (Theme-Override errors/404.tpl): Suche wie im Kopf, darunter die Wege als Umriss-Knöpfe */
body#pagenotfound .xh-404-suche { max-width: none; margin: var(--space-4) 0 0; }
body#pagenotfound .xh-404-wege { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* Handy */
@media (max-width: 767px) {
  .xh-katkopf-in { padding: 14px 16px 20px; }
  .xh-katkopf-schleier { background: linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .7) 55%, rgba(0, 0, 0, .35) 100%); }
  .xh-katkopf > img { object-position: 65% 55% !important; }
  .xh-krumen { display: none; }
  /* Zurück-Link: Tippfläche 44 px, der negative Rand hält die Lage gleich */
  .xh-krumen-zurueck { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -14px 0; padding-right: var(--space-3); font-size: 13px; color: #cfcfcf !important; }
  .xh-katkopf-titel { margin-top: 22px; font-size: 32px; }  /* Handy: kompakter Kopf, Artikel rücken nach oben */
  .xh-katkopf-text { font-size: 14px; line-height: 1.5; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Infoseiten, Konto, Listen: Einleitung vollständig – nach 2 Zeilen brach sie mitten im Satz ab. Kategorien bleiben kompakt (Marcus entscheidet) */
  body:not(#category) .xh-katkopf-text { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .xh-katkopf-chips { gap: 6px; margin-top: 14px; }
  .xh-katkopf-chips span { padding: 6px 10px; font-size: 12px; }
  /* Handy: die drei Vorteile untereinander als schmale Zeilen – nichts abgeschnitten (Marcus 24.10.) */
  .xh-vorteile { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
  .xh-vorteil { padding: 7px 10px 7px 7px; gap: 10px; }
  .xh-vorteil-symbol { width: 30px; height: 30px; }
  .xh-vorteil-symbol svg { width: 16px; height: 16px; }
  .xh-vorteil-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
  .xh-vorteil-text strong { font-size: 13px; }
  .xh-vorteil-text small { font-size: 12px; }
  .xh-katkopf-klein .xh-katkopf-titel { margin-top: 22px; font-size: 30px; }
  /* Handy, Unterkategorie: nur Zurück-Link und Titel – Artikel und Leiste rücken nach oben */
  .xh-katkopf-unter .xh-katkopf-in { padding-bottom: 14px; }
  .xh-katkopf-unter .xh-katkopf-titel { margin-top: 16px; font-size: 28px; }
  .xh-katkopf-unter .xh-katkopf-text, .xh-katkopf-unter .xh-vorteile { display: none; }
  /* Abstand Bildband → Inhalt: Kategorien kompakt 14 px, alle übrigen Seiten 24 px */
  body:has(.xh-katkopf) #wrapper > .container { padding-top: var(--space-5); }
  body#category:has(.xh-katkopf) #wrapper > .container { padding-top: 14px; }
  body:not(#index):not(#category):not(#product) #main .page-header h1,
  body:not(#index):not(#category):not(#product) #main > h1,
  body#cms #content h1:first-child { font-size: 24px; margin-bottom: 16px; }
  body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg { margin-bottom: 16px !important; }
  body:not(#index):not(#category):not(#product) #wrapper .breadcrumb-bg ol { font-size: 12px; min-height: 40px; }
}

/* Cookie-Knopf (xh_consentmanager) etwas vom Rand weg; Fehler-Einblendung am Handy darüber statt dahinter */
#xh-cc-reopen { left: 24px !important; bottom: 24px !important; }
@media (max-width: 767px) {
  #xh-cc-reopen { left: 16px !important; bottom: 16px !important; }
  .xh-toast { bottom: 76px !important; }
}
/* Cookie-Hinweis (xh_consentmanager, Modul unverändert): Box, Kategorien und Schalter eckig, Knöpfe wie die Shop-Knöpfe (44 px, Großbuchstaben),
   „Nur notwendige“ als gleichwertiger Umriss-Knopf statt Grau #f1f1f1, Titel als kursive Großbuchstaben-Überschrift */
#xh-cc-root .xh-cc-box { border-radius: 0; color: var(--text); }
#xh-cc-root .xh-cc-header h2 { font-family: var(--font-sans); font-size: 22px; line-height: 1.2; font-weight: 700; font-style: italic; text-transform: uppercase; color: var(--heading); }
#xh-cc-root .xh-cc-cat { border-radius: 0; border-color: var(--border); background: var(--surface-alt); }
#xh-cc-root .xh-cc-cat-desc { color: var(--text-muted); }
#xh-cc-root .xh-cc-slider, #xh-cc-root .xh-cc-slider::before { border-radius: 0; }
#xh-cc-root .xh-cc-switch.is-essential input:checked + .xh-cc-slider { background: var(--stock-grey); opacity: 1; } /* fest an: grau statt blass-rosa */
#xh-cc-root .xh-cc-btn, .xh-cc-embed-ph .xh-cc-btn { border-radius: 0; min-height: 44px; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
#xh-cc-root .xh-cc-btn-primary:hover, .xh-cc-embed-ph .xh-cc-btn-primary:hover { background: var(--brand-red-dunkel); filter: none; }
#xh-cc-root .xh-cc-btn-secondary { background: var(--surface); border: 1px solid var(--heading); color: var(--heading); }
#xh-cc-root .xh-cc-btn-secondary:hover { background: var(--brand-red); border-color: var(--brand-red); color: #ffffff; filter: none; }
#xh-cc-root .xh-cc-btn-link, .xh-cc-embed-ph .xh-cc-btn-link { font-weight: 400; letter-spacing: 0; text-transform: none; }
#xh-cc-root .xh-cc-btn-link { color: var(--heading); }
#xh-cc-root .xh-cc-legal, #xh-cc-root .xh-cc-legal a { font-size: 13px; color: var(--text-muted); }
#xh-cc-root .xh-cc-legal a { display: inline-block; padding: 8px 4px; } /* Tippfläche statt 16 px */
/* Einstellungs-Ansicht: „Einstellungen“ ist dort ohne Funktion; Knopfleiste bleibt beim Scrollen der Box unten sichtbar (bis an die Unterkante, Box-Polster 22 bzw. 18 px) */
#xh-cc-root.is-expanded [data-xhcc-action="settings"] { display: none; }
#xh-cc-root.is-expanded .xh-cc-actions { position: sticky; bottom: -22px; z-index: 1; padding: var(--space-3) 0 22px; background: var(--surface); border-top: 1px solid var(--border); }
#xh-cc-root.is-expanded .xh-cc-legal { margin-top: 0; }
@media (max-width: 480px) { #xh-cc-root.is-expanded .xh-cc-actions { bottom: -18px; padding-bottom: 18px; } }
/* Platzhalter für blockierte Videos: „Inhalt laden“ hatte keinen Hintergrund (--xhcc-primary gilt nur in #xh-cc-root), eckig wie der Shop */
.xh-cc-embed-ph { border-radius: 0; }
.xh-cc-embed-ph .xh-cc-btn-primary { padding: 0 22px; background: var(--brand-red); color: #ffffff; }
.xh-cc-embed-ph-text { font-size: 15px; }
/* „Nach oben“ (#back-top): 44 px und eckig statt 40 px rund, Randabstand wie der Cookie-Knopf (Handy 16, sonst 24 px; die Kaufleiste setzt ihn per xh-produkt.css höher);
   dunkle Fläche mit hellem Rand, damit er auch auf der schwarzen Fußzeile sichtbar ist. Font-Awesome-Doppelpfeil → Linienpfeil wie die übrigen Symbole (SVG-Maske in Textfarbe) */
#back-top { right: 24px; bottom: 24px; }
@media (max-width: 767px) { #back-top { right: 16px; bottom: 16px; } }
#back-top a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 0; background: var(--heading);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 3px 12px rgba(0, 0, 0, .3); }
#back-top a::before { content: none; }
#back-top a::after { content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Kasse, letzter Schritt: Häkchen-Bereich (AGB/Widerruf/Datenschutz, ggf. Erwerbsnachweis) als ruhiger Kasten */
body#checkout #conditions-to-approve { margin: 24px 0 !important; padding: 18px 20px; background: var(--danger-bg); border: 0; border-left: 4px solid var(--brand-red); } /* hellrot wie der Erwerbsnachweis-Kasten im Warenkorb (Marcus 21.10.), Leiste links wie alle Hinweiskästen (26.10.) */
body#checkout #conditions-to-approve ul { margin: 0 !important; padding: 0 !important; list-style: none; }
body#checkout #conditions-to-approve li { display: flex !important; align-items: flex-start; gap: 14px; margin: 0 0 14px !important; padding: 0 !important; }
body#checkout #conditions-to-approve li:last-child { margin-bottom: 0 !important; }
body#checkout #conditions-to-approve .float-xs-left { float: none !important; flex: none; margin: 3px 0 0 !important; padding: 0 !important; }
body#checkout #conditions-to-approve .custom-checkbox input[type="checkbox"] + span { width: 20px; height: 20px; margin: 0 !important; background: #ffffff; }
body#checkout #conditions-to-approve .custom-checkbox input[type="checkbox"] { width: 20px; height: 20px; margin: 0 !important; }
body#checkout #conditions-to-approve .custom-checkbox .checkbox-checked { font-size: 20px; margin: -1px !important; }
body#checkout #conditions-to-approve .condition-label { flex: 1; margin: 0 !important; padding: 0 !important; }
body#checkout #conditions-to-approve .condition-label label { margin: 0; text-align: left; font-size: 15px; line-height: 1.55; color: var(--heading); cursor: pointer; }
@media (max-width: 767px) {
  body#checkout #conditions-to-approve { padding: 14px; }
  body#checkout #conditions-to-approve .condition-label label { font-size: 14px; }
}
/* Freiwilliges Häkchen Bewertungseinladung (xh_bewertung): gleicher Aufbau wie der AGB-Kasten, aber neutral grau (optional) */
body#checkout .xh-bewertung-haken { display: flex; align-items: flex-start; gap: 14px; margin: -8px 0 24px; padding: 18px 20px; background: var(--surface-alt); border-left: 4px solid var(--field-border); }
body#checkout .xh-bewertung-haken .custom-checkbox { flex: none; position: relative; margin: 3px 0 0; padding: 0; }
body#checkout .xh-bewertung-haken .custom-checkbox input[type="checkbox"] { width: 20px; height: 20px; margin: 0 !important; }
body#checkout .xh-bewertung-haken .custom-checkbox input[type="checkbox"] + span { width: 20px; height: 20px; margin: 0 !important; background: #ffffff; }
body#checkout .xh-bewertung-haken .custom-checkbox .checkbox-checked { font-size: 20px; margin: -1px !important; }
body#checkout .xh-bewertung-haken > label { flex: 1; margin: 0; padding: 0; text-align: left; font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--heading); cursor: pointer; }
body#checkout .xh-bewertung-haken a { font-weight: 700; color: var(--heading); text-decoration: underline; }
body#checkout .xh-bewertung-haken a:hover, body#checkout .xh-bewertung-haken a:focus { color: var(--brand-red); }
@media (max-width: 767px) {
  body#checkout .xh-bewertung-haken { padding: 14px; }
  body#checkout .xh-bewertung-haken > label { font-size: 14px; }
}
/* Weniger Leerraum zwischen Bestellübersicht und Häkchen-Kasten */
body#checkout #order-summary-content > .row:last-child, body#checkout #order-summary-content > .row:last-child > [class*="col-"] { margin-bottom: 0 !important; padding-bottom: 0 !important; }
body#checkout #order-summary-content .order-confirmation-table { margin-bottom: 0 !important; }
/* Gewährleistungsbereich (xh_warrantylabels): Aktionsfelder ohne EU-Blau – die amtliche Grafik selbst bleibt unverändert */
.xhwl-checkout-notice .xhwl-notice-action { color: var(--heading) !important; border-color: var(--border) !important; }
.xhwl-checkout-notice .xhwl-notice-action:hover, .xhwl-checkout-notice .xhwl-notice-action:focus-visible { color: var(--brand-red) !important; border-color: var(--brand-red) !important; }

/* Kasse, letzter Schritt – Reihenfolge (Marcus 21.10.): Zahlungsart → Gewährleistungshinweis → Bestellübersicht → Häkchen → Bestellknopf.
   Der Pflichthinweis steht so vor der Bestellung, die Übersicht direkt über dem Knopf (§ 312j BGB). Nur Darstellung, Module unverändert. */
body#checkout #checkout-payment-step .content { display: flex; flex-direction: column; }
body#checkout #checkout-payment-step .content > * { order: 10; }
body#checkout #checkout-payment-step .content > .js-cart-payment-step-refresh { order: 0; }
body#checkout #checkout-payment-step .content > .payment-options { order: 1; }
body#checkout #checkout-payment-step .content > .xhwl-checkout-notice { order: 2; margin: 24px 0 8px; }
body#checkout #checkout-payment-step .content > #order-summary-content { order: 3; }
body#checkout #checkout-payment-step .content > #conditions-to-approve { order: 5; }
body#checkout #checkout-payment-step .content > #payment-confirmation { order: 20; }
/* Handy/Tablet (Spalte rutscht unter die Kasse): im letzten Schritt „Zahlung“ den Kasten „Mein Warenkorb“ ausblenden –
   die Bestellübersicht steht dort schon direkt über dem Bestellknopf (Marcus 21.10.). Frühere Schritte + PC unverändert. */
@media (max-width: 991px) {
  body#checkout:has(#checkout-payment-step.-current) .cart-grid-right { display: none !important; }
}

/* Sprunglink unter den Zahlarten (xh-design.js sprungZurBestellung) */
body#checkout #checkout-payment-step .content > .xh-zur-bestellung { order: 1; }
.xh-zur-bestellung { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 4px; padding: 14px 16px;
  background: var(--surface-alt); border: 1px solid var(--border); border-left: 4px solid var(--brand-red); color: var(--heading) !important;
  font-weight: 700; font-size: 15px; line-height: 1.35; text-decoration: none !important; }
.xh-zur-bestellung:hover, .xh-zur-bestellung:focus-visible { color: var(--brand-red) !important; }
.xh-zur-bestellung svg { flex: none; }
#order-summary-content { scroll-margin-top: 150px; }
/* Adressformular (Kasse + Kundenkonto): Feld „Alias“ ausblenden (Marcus 30.10.) – leer bleibt es „Meine Adresse“ */
.js-address-form .form-group:has(#field-alias), .address-form .form-group:has(#field-alias) { display: none !important; }
/* Zahlarten als einheitliche Kästen (Marcus 30.10. „polish“): Radio links, Name, Logo klein rechtsbündig; gewählte Zahlart rot umrandet,
   Zusatzinfo hängt als Fläche direkt darunter. Nur Darstellung – Zahlungsmodule unverändert (StockGuard). */
body#checkout .payment-options .payment-option { display: flex; align-items: center; gap: 14px; margin: 0 0 10px !important; padding: 14px 16px;
  min-height: 62px; border: 1px solid var(--border); background: var(--surface, #ffffff); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
body#checkout .payment-options .payment-option:hover { border-color: #bdbdbd; }
body#checkout .payment-options .payment-option:has(input:checked) { border-color: var(--brand-red); box-shadow: inset 4px 0 0 var(--brand-red); }
body#checkout .payment-options .payment-option .custom-radio { float: none !important; flex: none; margin: 0 !important; }
body#checkout .payment-options .payment-option label { flex: 1; display: flex !important; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 !important; padding: 0 !important; text-align: left; cursor: pointer; font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--heading); }
body#checkout .payment-options .payment-option label img { flex: none; width: auto !important; height: auto !important; max-height: 30px; max-width: 120px;
  object-fit: contain; margin: 0 !important; }
body#checkout .payment-options .additional-information { margin: -11px 0 10px !important; padding: 14px 16px 14px 50px; border: 1px solid var(--brand-red);
  border-top: 0; background: var(--surface-alt); font-size: 14px; line-height: 1.55; }
body#checkout .payment-options .additional-information > section > p:last-child { margin-bottom: 0; }
@media (max-width: 575px) {
  body#checkout .payment-options .payment-option { padding: 12px; gap: 10px; }
  body#checkout .payment-options .payment-option label { font-size: 15px; gap: 10px; }
  body#checkout .payment-options .payment-option label img { max-height: 24px; max-width: 84px; }
  body#checkout .payment-options .additional-information { padding: 12px 12px 12px 42px; }
}

/* CMS-Seiten: Bausteine für gegliederte Inhalte (zuerst Widerrufsformular, 22.10.) */
body#cms #content .xh-cms-einleitung { font-size: 17px; line-height: 1.6; color: var(--heading); text-align: left; margin-bottom: 20px; }
/* Wege-Kästen: 1 Spalte, ab 576 px 2 (dritter Kasten über die volle Breite statt allein links), ab 992 px 3 */
body#cms #content .xh-cms-wege { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 0 32px; }
@media (min-width: 576px) {
  body#cms #content .xh-cms-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body#cms #content .xh-cms-weg:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  body#cms #content .xh-cms-wege { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body#cms #content .xh-cms-weg:last-child:nth-child(odd) { grid-column: auto; }
}
body#cms #content .xh-cms-weg { display: flex; flex-direction: column; border: 1px solid var(--border); border-top: 4px solid var(--heading); background: var(--surface); padding: 18px 20px; }
body#cms #content .xh-cms-weg:first-child { border-top-color: var(--brand-red); background: var(--danger-bg); }
body#cms #content .xh-cms-weg :is(h2, h3) { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--heading); }
body#cms #content .xh-cms-weg p { text-align: left; margin: 0 0 12px; line-height: 1.55; }
body#cms #content .xh-cms-weg .xh-cms-weg-knopf { margin: auto 0 0; }
/* white-space normal: bei 320 px lief „Vertrag widerrufen“ sonst über den Knopf hinaus */
body#cms #content .xh-cms-weg .btn { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 46px; white-space: normal; }
body#cms #content .xh-cms-muster { border: 1px dashed var(--field-border); background: var(--surface-alt); padding: 20px 24px; }
body#cms #content .xh-cms-muster p { text-align: left; margin: 0 0 12px; line-height: 1.6; }
body#cms #content .xh-cms-linie { color: var(--field-border); letter-spacing: 1px; white-space: nowrap; }
body#cms #content .xh-cms-klein { font-size: 13px; color: var(--text-muted); margin-bottom: 0 !important; }
/* Handy: jede Ausfüll-Linie als eigene Zeile unter dem Feldnamen, am Kastenrand abgeschnitten statt buchstabenweise umbrochen */
@media (max-width: 767px) {
  body#cms #content .xh-cms-weg { padding: var(--space-4); }
  body#cms #content .xh-cms-muster { padding: 14px; }
  body#cms #content .xh-cms-linie { display: block; white-space: nowrap; overflow: hidden; word-break: normal; }
}
/* Knöpfe in CMS-Texten: Linkfarbe und Unterstreichung der Infoseiten gelten nicht für Knöpfe */
body#cms #content a.btn, body#cms #content a.btn:hover, body#cms #content a.btn:focus { text-decoration: none !important; }
body#cms #content a.btn-primary, body#cms #content a.btn-primary:hover, body#cms #content a.btn-primary:focus { color: #ffffff !important; }
/* „Seite drucken“ (Rechtstext-Modul) am Seitenende: abgesetzt statt an der letzten Zeile klebend */
body#cms #content > a.btn[href*="direct_print"] { display: flex; width: fit-content; align-items: center; min-height: 44px; margin-top: var(--space-6); }

/* ===== Infoseiten (CMS) – Teil b, 22.10.: einheitliche Typografie, kein Blocksatz, Kacheln Kataloge/Partner ===== */
body#cms #content { text-align: left !important; font-family: var(--font-sans); color: var(--text); font-size: 16px; line-height: 1.65; }
body#cms #content p, body#cms #content li, body#cms #content td, body#cms #content div { text-align: left !important; hyphens: auto; }
/* Lange Adressen (URLs) ohne Trennstelle umbrechen statt über den Rand zu laufen; in Tabellen break-word, damit die Spalten nicht schrumpfen */
body#cms #content :is(p, li) { overflow-wrap: anywhere; }
body#cms #content td { overflow-wrap: break-word; }
/* Überschriften, Klapp-Fragen, Hervorhebungen und Links ohne automatische Silbentrennung („Datenschutzeinstellun-/gen“) */
/* Überschriften: Silbentrennung nur bei sehr langen Wörtern und nie mit kurzem Rest („Datenschutzeinstellun-/gen“ nicht mehr,
   „Erwerbsberechtigungs-/nachweise“ ja) – ganz ohne Trennung brachen lange Wörter hart und ohne Strich */
body#cms #content :is(h1, h2, h3, h4, summary, strong, .xh-section-title) { hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; }
body#cms #content a:not(.btn):not(.catalog-button):not(.xh-partner-button) { hyphens: manual; }
body#cms :is(#content, #content > .container-parent) > h1:first-child { display: none; } /* steht schon groß im Bildband */
body#cms #content h1, body#cms #content h2 { font-size: 24px; font-weight: 700; color: var(--heading); margin: 32px 0 12px; line-height: 1.25; text-transform: none; }
body#cms #content h3 { font-size: 19px; font-weight: 700; color: var(--heading); margin: 24px 0 8px; line-height: 1.3; }
/* Nur die erste Überschrift ohne Abstand nach oben (vorher traf „div:first-child h2“ jede h2 im Inhalt); auch direkt nach dem ausgeblendeten h1 */
body#cms :is(#content, #content > .container-parent) > h2:first-child,
body#cms :is(#content, #content > .container-parent) > h1:first-child + h2,
body#cms :is(#content, #content > .container-parent) > div:first-child > :is(h1, h2):first-child { margin-top: 0; }
/* Absätze mit Abstand (Theme setzt 0); :where hält das Gewicht klein, Bausteine mit eigenen Absatzregeln gehen vor */
body#cms :where(#content, #content > .container-parent) > p { margin: 0 0 var(--space-3); }
body#cms #content ul, body#cms #content ol { padding-left: 22px; margin: 0 0 16px; }
/* Aufzählungen sichtbar: rote eckige Punkte bzw. Ziffern (Theme: list-style none); Listen mit eigener Klasse ausgenommen */
body#cms #content ul:not([class]) { list-style: square outside; padding-left: 20px; }
body#cms #content ol:not([class]) { list-style: decimal outside; }
body#cms #content ul:not([class]) > li::marker { color: var(--brand-red); }
body#cms #content li { margin-bottom: 6px; }
body#cms #content img { max-width: 100%; height: auto; }
body#cms #content a:not(.btn):not(.catalog-button):not(.xh-partner-button) { color: var(--heading); font-weight: 700; text-decoration: underline; }
body#cms #content a:not(.btn):not(.catalog-button):not(.xh-partner-button):hover { color: var(--brand-red); }
body#cms #content table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
body#cms #content th, body#cms #content td { border: 1px solid var(--border); padding: 8px 10px; vertical-align: top; }
body#cms #content th { background: var(--surface-alt); font-weight: 700; }

/* Kataloge: Kachelraster (ab 768 px 4 Spalten: 16 Kataloge ohne Einzelkarte in der letzten Reihe) */
body#cms #content .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 18px; margin: 0 0 24px; }
@media (min-width: 768px) { body#cms #content .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body#cms #content .catalog-item { display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--surface); transition: box-shadow .15s ease, border-color .15s ease; }
body#cms #content .catalog-item:hover { border-color: var(--heading); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
body#cms #content .catalog-item img { width: 100%; height: 220px !important; object-fit: contain; background: var(--surface); padding: 12px; order: 1; }
body#cms #content .catalog-content { order: 2; padding: 0 16px 8px; flex: 1; }
body#cms #content .catalog-content :is(h2, h3) { margin: 4px 0 6px; font-size: 17px; }
body#cms #content .catalog-content p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); text-wrap-style: balance; } /* schmale Karten: keine Einzelwörter */
body#cms #content .catalog-button { order: 3; margin: 12px 16px 16px; }
/* Knopf in Katalog- und Partnerkarten (externer Link): dunkler Umriss, rot beim Drüberfahren – rot gefüllt bleibt Kaufaktionen vorbehalten */
body#cms #content :is(.catalog-button, .xh-partner-button) { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--heading); background: transparent;
  color: var(--heading) !important; font-weight: 700; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; text-decoration: none !important; }
body#cms #content :is(.catalog-button, .xh-partner-button):hover { background: var(--brand-red); border-color: var(--brand-red); color: #ffffff !important; }
/* Tablet: Katalogkarten nur ~170 px breit – schmalere Ränder, damit „Katalog öffnen“ einzeilig bleibt */
@media (min-width: 768px) and (max-width: 991px) {
  body#cms #content .catalog-content { padding: 0 10px 8px; }
  body#cms #content .catalog-button { margin: 12px 10px 10px; }
}

/* Partner & Mitgliedschaften: Einleitung + Kachelraster (ab 992 px 3 Spalten: 6 Plattformen in zwei vollen Reihen) */
body#cms #content .xh-partner-intro { background: var(--surface-alt); border-left: 4px solid var(--brand-red); padding: 18px 20px; margin-bottom: 8px; }
body#cms #content .xh-partner-intro :is(h1, h2) { display: block; font-size: 22px; margin: 0 0 8px; }
body#cms #content .xh-partner-intro p { margin: 0 0 6px; }
body#cms #content .xh-section-title { font-size: 22px; margin: 32px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--heading); }
body#cms #content .xh-partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 18px; margin-bottom: 16px; }
@media (min-width: 992px) { body#cms #content .xh-partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body#cms #content .xh-partner-card { display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--surface); padding: 16px; transition: box-shadow .15s ease, border-color .15s ease; }
body#cms #content .xh-partner-card:hover { border-color: var(--heading); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
body#cms #content .xh-partner-card img { width: 100%; height: 120px !important; object-fit: contain; margin-bottom: 12px; }
body#cms #content .xh-partner-card h3 { margin: 0 0 6px; font-size: 17px; }
body#cms #content .xh-partner-card p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--text-muted); flex: 1; }
@media (max-width: 767px) {
  body#cms #content h1, body#cms #content h2 { font-size: 21px; margin-top: 24px; }
  body#cms #content h3 { font-size: 17px; }
  body#cms #content .catalog-grid, body#cms #content .xh-partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body#cms #content .catalog-item img { height: 150px !important; padding: 8px; }
  body#cms #content .catalog-content { padding: 0 10px 6px; }
  body#cms #content .catalog-button { margin: 8px 10px 10px; font-size: 12px; }
  body#cms #content .xh-partner-card { padding: 10px; }
  body#cms #content .xh-partner-card img { height: 80px !important; }
}
/* Handy unter 480 px: Karten einspaltig, Bild bzw. Logo links neben dem Text (zweispaltig waren sie 105–125 px schmal, Knöpfe 3–4-zeilig) */
@media (max-width: 479px) {
  body#cms #content .catalog-grid, body#cms #content .xh-partner-grid { grid-template-columns: minmax(0, 1fr); }
  body#cms #content .catalog-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: var(--space-3); }
  body#cms #content .catalog-item img { grid-column: 1; grid-row: 1 / -1; height: 136px !important; padding: 6px; }
  body#cms #content .catalog-content { grid-column: 2; grid-row: 1; padding: 10px 10px 0 0; }
  body#cms #content .catalog-button { grid-column: 2; grid-row: 2; margin: 8px 10px 10px 0; }
  body#cms #content .xh-partner-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--space-3); }
  body#cms #content .xh-partner-card > :is(img, .xh-partner-abzeichen) { grid-column: 1; grid-row: 1 / 3; align-self: start; margin: 0; }
  body#cms #content .xh-partner-card > :not(img):not(.xh-partner-abzeichen) { grid-column: 2; }
  body#cms #content .xh-partner-card > a.xh-partner-button { grid-column: 1 / -1; margin-top: var(--space-1); }
}
body#cms #content .catalog-button, body#cms #content .xh-partner-button, body#cms #content .xh-cms-weg .btn { text-align: center !important; line-height: 1.25; padding: 6px 10px; hyphens: manual; }
/* Infoseiten: eine Lesebreite für Text und einzelne Kästen (≈ 90–95 Zeichen), Kartenraster und breite Tabellen voll breit;
   Hinweis-Kopf mit Symbol (AB 18 / EWB) als Kasten, Leerzeilen vor Überschriften weg */
body#cms :is(#content, #content > .container-parent) > :is(p, ul, ol, h2, h3, h4, table),
body#cms #content :is(.xh-cms-hinweis, .xh-cms-muster, .xh-faq, .xh-cms-einleitung) { max-width: var(--lesebreite); } /* Partner-Kasten bleibt so breit wie die Kacheln darunter */
body#cms :is(#content, #content > .container-parent) > table:has(td:nth-child(4)),
body#cms :is(#content, #content > .container-parent) > .xh-section-title { max-width: none; }
body#cms :is(#content, #content > .container-parent) > h2:first-child:has(> img) { display: flex; align-items: center; gap: 16px; max-width: var(--lesebreite); margin: 0 0 24px; padding: 14px 18px;
  background: var(--danger-bg); border: 0; border-left: 4px solid var(--brand-red); font-size: 20px; }
body#cms :is(#content, #content > .container-parent) > h2:first-child:has(> img) img { flex: none; width: 64px !important; height: auto !important; }
/* Alt-Formatierung in Überschriften: <br> (Leerzeilen) und Inline-Unterstreichung (wirkte wie ein Link) */
body#cms #content :is(h2, h3, h4) br { display: none; }
body#cms #content :is(h2, h3, h4) [style*="underline"] { text-decoration: none !important; }
body#cms #content h4 { font-size: 16px; font-weight: 700; color: var(--heading); margin: 20px 0 8px; }
@media (max-width: 767px) { body#cms :is(#content, #content > .container-parent) > h2:first-child:has(> img) { font-size: 19px; gap: 12px; padding: 12px; } body#cms :is(#content, #content > .container-parent) > h2:first-child:has(> img) img { width: 48px !important; } }
/* Partner: Text-Abzeichen für Mitgliedschaften ohne Logo-Datei (VDB, DGUSV) */
body#cms #content .xh-partner-abzeichen { display: flex; align-items: center; justify-content: center; height: 120px; margin-bottom: 12px;
  background: var(--heading); color: #ffffff; font-size: 34px; font-weight: 700; font-style: italic; letter-spacing: 2px; }
@media (max-width: 767px) { body#cms #content .xh-partner-abzeichen { height: 80px; font-size: 24px; } }
body#cms #content .xh-partner-card h3, body#cms #content .catalog-content :is(h2, h3) { overflow-wrap: break-word; hyphens: manual; }
body#cms #content .xh-partner-card p, body#cms #content .catalog-content p { overflow-wrap: anywhere; hyphens: auto; }
/* Hinweiskasten in CMS-Texten (z. B. Zahlungsarten: warum kein PayPal/Kreditkarte) */
body#cms #content .xh-cms-hinweis { background: var(--danger-bg); border: 0; border-left: 4px solid var(--brand-red); padding: 16px 20px; margin: 0 0 24px; }
body#cms #content .xh-cms-hinweis p { margin: 0 0 8px; }
body#cms #content .xh-cms-hinweis p:last-child { margin-bottom: 0; }

/* FAQ-Seite „Häufige Fragen“ (Marcus 23.10.2026): Rubriken (h2) mit Klapp-Fragen (details), per JS aus h3 + Antwort gebaut */
body#cms #content .xh-faq h2 { margin: 36px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--heading); }
body#cms #content .xh-faq-frage { border: 1px solid var(--border); border-top: 0; background: var(--surface); }
body#cms #content .xh-faq h2 + .xh-faq-frage { border-top: 1px solid var(--border); }
/* Frage als Block mit festem Pfeil rechts (als Flex-Zeile zerfiel sie, sobald das Skript „X-Hunter“ in span.xh-nobr fasst) */
body#cms #content .xh-faq-frage summary { list-style: none; cursor: pointer; display: block; position: relative; padding: 16px 46px 16px 18px; font-weight: 700; color: var(--heading); }
body#cms #content .xh-faq-frage summary::-webkit-details-marker { display: none; }
body#cms #content .xh-faq-frage summary::after { content: ""; position: absolute; right: 20px; top: calc(50% - 7px); width: 10px; height: 10px; border-right: 2px solid var(--brand-red); border-bottom: 2px solid var(--brand-red); transform: rotate(45deg); transition: transform .2s ease; }
body#cms #content .xh-faq-frage[open] summary::after { transform: rotate(-135deg); top: calc(50% - 3px); }
body#cms #content .xh-faq-frage summary:hover { color: var(--brand-red); }
body#cms #content .xh-faq-frage summary:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -2px; }
body#cms #content .xh-faq-frage[open] { background: var(--surface-alt); }
body#cms #content .xh-faq-antwort { padding: 0 18px 16px; }
body#cms #content .xh-faq-antwort > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { body#cms #content .xh-faq-frage summary::after { transition: none; } }

/* Ratgeber/Blog-Artikel (leoblog, Marcus 23.10.2026): gleiche Lesetypografie wie die Infoseiten – linksbündig auf der Titelkante, Text in Lesebreite,
   Bild höchstens 880 px (Datei 930 px breit) */
body#module-leoblog-blog .blog-detail { max-width: none; margin: 0; }
body#module-leoblog-blog .blog-detail .blog-image { max-width: 880px; }
/* Bild einheitlich 2:1 wie in der Übersicht (schneidet eingebrannte weiße Streifen ab, Platz steht schon vor dem Laden fest) */
body#module-leoblog-blog .blog-detail .blog-image img { width: 100%; height: auto; aspect-ratio: 93 / 46; object-fit: cover; }
body#module-leoblog-blog .blog-detail .blog-description { font-size: 16px; line-height: 1.7; color: var(--text); }
body#module-leoblog-blog .blog-detail .blog-description > :is(p, ul, ol, h2, h3) { max-width: var(--lesebreite); }
body#module-leoblog-blog .blog-detail .blog-description > p:first-child { font-size: 18px; font-weight: 600; color: var(--heading); margin-bottom: 20px; }
body#module-leoblog-blog .blog-detail .blog-description p { margin: 0 0 16px; }
body#module-leoblog-blog .blog-detail .blog-description h2 { font-size: 24px; line-height: 1.3; color: var(--heading); margin: 34px 0 12px; }
body#module-leoblog-blog .blog-detail .blog-description ul { list-style: square outside; padding-left: 22px; margin: 0 0 18px; }
body#module-leoblog-blog .blog-detail .blog-description ul > li::marker { color: var(--brand-red); }
body#module-leoblog-blog .blog-detail .blog-description li { margin-bottom: 8px; }
/* Textlinks wie auf den Infoseiten: dunkel, fett, unterstrichen, rot beim Drüberfahren (Marcus 25.10.: ein Stil überall) */
body#module-leoblog-blog .blog-detail .blog-description a { color: var(--heading); font-weight: 700; text-decoration: underline; }
body#module-leoblog-blog .blog-detail .blog-description a:hover { color: var(--brand-red); }
body#module-leoblog-blog .blog-detail .blog-description em { color: var(--text-muted); font-size: 14px; }
/* Kopfzeile „Marcus Tetzner · Ratgeber · 23. Oktober 2026“: Bezeichnungen („Geschrieben von:“, „Im:“, „Auf:“) und Material-Symbole aus,
   Datum in deutscher Reihenfolge (Wochentag weg) */
body#module-leoblog-blog .blog-detail .blog-meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; margin: 0 0 var(--space-4); color: var(--text); }
body#module-leoblog-blog .blog-detail .blog-meta > span { float: none; margin: 0; display: inline-flex; align-items: center; font-size: 14px; line-height: 1.5; }
body#module-leoblog-blog .blog-detail .blog-meta > span + span::before { content: "·"; margin: 0 10px; color: var(--text-muted); }
body#module-leoblog-blog .blog-detail .blog-meta > span > :is(i, i + span) { display: none; }
body#module-leoblog-blog .blog-detail .blog-meta a { color: var(--heading); font-weight: 600; }
body#module-leoblog-blog .blog-detail .blog-meta a:hover { color: var(--brand-red); }
body#module-leoblog-blog .blog-detail .blog-meta time { display: inline-flex; gap: 4px; }
body#module-leoblog-blog .blog-detail .blog-meta .b-date { display: none; }
body#module-leoblog-blog .blog-detail .blog-meta .b-day { order: 1; }
body#module-leoblog-blog .blog-detail .blog-meta .b-day::after { content: "."; }
body#module-leoblog-blog .blog-detail .blog-meta .b-month { order: 2; }
body#module-leoblog-blog .blog-detail .blog-meta .b-year { order: 3; }
/* Artikelende: leere Spalte „Verwandte von Tags“ aus, weitere Beiträge als Linkliste mit Haarlinien und 44 px Tippfläche */
body#module-leoblog-blog .extra-blogs > div:not(:has(li)) { display: none; }
body#module-leoblog-blog .extra-blogs { margin-top: var(--space-7); }
body#module-leoblog-blog .extra-blogs :is(h2, h4) { font-size: 20px; color: var(--heading); margin-bottom: var(--space-3); }
body#module-leoblog-blog .extra-blogs ul { list-style: none; padding: 0; margin: 0; }
body#module-leoblog-blog .extra-blogs li { padding: 0; border-bottom: var(--rule-hairline); }
body#module-leoblog-blog .extra-blogs li a { display: block; padding: 10px 0; color: var(--heading); font-weight: 600; }
body#module-leoblog-blog .extra-blogs li a:hover { color: var(--brand-red); }

/* Blog-Übersicht und -Kategorie: RSS-Link aus (Symbol fehlte, schob den dritten Artikel nach unten) */
body#module-leoblog-list .blog-lastest-rss, body#module-leoblog-category .blog-lastest-rss { display: none; }
/* Karten wie die Beiträge der Startseite: rote Rubrik, fetter Titel (bis 3 Zeilen), Textlink „WEITERLESEN →“ statt Leo-Pille,
   Datum/Autor 13 px ohne Font-Awesome-Symbole, Bilder einheitlich 2:1 (schneidet eingebrannte weiße Streifen ab) */
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item { border-bottom: var(--rule-hairline); padding-bottom: var(--space-5); margin-bottom: var(--space-7); }
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .blog-image img { width: 100%; height: auto; aspect-ratio: 93 / 46; object-fit: cover; }
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .right-block { padding-top: var(--space-4); }
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .cat { margin-bottom: var(--space-2); }
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .cat a { background: none; color: var(--brand-red); border-radius: 0; padding: 0;
  font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .title { margin-bottom: var(--space-2); }
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .title a { font-family: var(--font-sans); font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: 0;
  color: var(--heading); -webkit-line-clamp: 3; }
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .title a:hover { color: var(--brand-red); }
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .blog-meta { margin-bottom: var(--space-3); }
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .blog-meta > span { padding: 0 var(--space-3) 0 0; font-size: 13px; line-height: 1.4; color: var(--text-muted); text-transform: none; }
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .blog-meta a { color: var(--text-muted); }
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .blog-meta :is(.icon-calendar, .icon-author) { display: none; }
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .blog-info .blog-desc { margin: 0 0 var(--space-3); font-size: 15px; line-height: 1.55; }
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .more { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--heading); font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .more::after { content: "\00a0→"; padding: 0 !important; font-family: var(--font-sans); font-size: inherit; }
body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .more:hover { background: none; color: var(--brand-red); }
/* Zähler „Zeigen 1 - 3 von 3 Artikel“ nur, wenn es mehrere Seiten gibt; sonst bündig an der Kartenkante */
body:is(#module-leoblog-list, #module-leoblog-category) nav.pagination:not(:has(.page-list)) { display: none; }
body:is(#module-leoblog-list, #module-leoblog-category) nav.pagination > div:first-child { padding-left: 0; }
/* Tablet: Karte quer (Bild links, Text rechts) statt eine 700 px hohe Karte pro Beitrag */
@media (min-width: 600px) and (max-width: 991px) {
  body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .blog-image-container { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-5); align-items: start; }
  body:is(#module-leoblog-list, #module-leoblog-category) .blog-item .right-block { padding-top: 0; }
}

/* ===== Sitemap: Abschnittsköpfe im Shop-Stil, Links mit Tippfläche; PC: „Unser Angebot“ (mit den Marken mehrspaltig) über die volle Breite,
   darunter Kategorien, Konto und Seiten dreispaltig; Handy: Kategorien zuerst, Marken zweispaltig.
   Theme-Raster (.row + Spalten mit 15-px-Polstern, Köpfe und Listen mit −15 px) aufgelöst: alles auf der Inhaltskante ===== */
body#sitemap #main > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; } /* Leo-front.css setzt ab 1441 px 65 px !important */
body#sitemap .sitemap { float: none; width: auto; margin: 0; padding: 0; }
body#sitemap .sitemap > .col-md-3 { float: none; width: auto; max-width: none; padding: 0; }
body#sitemap .sitemap ul { margin-left: 0; }
body#sitemap .sitemap ul.nested { margin-left: 20px; }
body#sitemap .sitemap h2 { width: auto; height: auto; margin: 0 0 var(--space-3); padding-bottom: var(--space-2); font-size: 17px; font-weight: 700; font-style: normal; text-transform: none;
  color: var(--heading); border-bottom: 2px solid var(--heading); }
body#sitemap .sitemap > .col-md-3:nth-child(2) > ul > li > ul.nested > li > a { font-weight: 700; color: var(--heading); }
@media (min-width: 768px) {
  body#sitemap .sitemap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-5); }
  body#sitemap .sitemap > .col-md-3:first-child { grid-column: 1 / -1; }
  body#sitemap .sitemap ul.nested:has(> li > a[id^="manufacturer-page-"]) { columns: 4 180px; column-gap: var(--space-5); }
}
@media (max-width: 767px) {
  body#sitemap .sitemap { display: flex; flex-direction: column; }
  body#sitemap .sitemap > .col-md-3:nth-child(2) { order: -1; }
  body#sitemap .sitemap > .col-md-3:not(:nth-child(2)) { margin-top: var(--space-6); }
  body#sitemap .sitemap ul.nested:has(> li > a[id^="manufacturer-page-"]) { columns: 2; column-gap: var(--space-4); }
}
body#sitemap .sitemap ul.nested li { break-inside: avoid; }
@media (max-width: 991px) {
  body#sitemap .sitemap ul li { margin-bottom: 0; }
  body#sitemap .sitemap ul.nested { margin-top: 0; } /* Theme-Abstand 20 px vor jeder Unterliste zusätzlich zu den 44-px-Links */
  body#sitemap .sitemap ul li a { display: inline-block; padding: 11px 0; font-size: 16px; }
}

/* ===== Markenübersicht (Marcus 24.10.: Premium-Polish) – volle Breite, A–Z, Suche, Logo-Kacheln ===== */
body:has(.xh-marken-seite) #left-column { display: none !important; }
body:has(.xh-marken-seite) #content-wrapper { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
.xh-marken-seite { font-family: var(--font-sans); padding-bottom: 32px; }
.xh-marken-werkzeug { position: sticky; top: var(--xh-kopf-hoehe, 117px); z-index: 20; display: flex; align-items: center; gap: 20px; padding: 14px 0; margin-bottom: 8px; background: var(--surface); border-bottom: 1px solid var(--border); }
.xh-marken-az { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.xh-marken-az a { min-width: 32px; height: 32px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); font-weight: 700; font-size: 14px; color: var(--heading) !important; text-decoration: none !important; transition: background .15s, border-color .15s, color .15s; }
.xh-marken-az a:hover, .xh-marken-az a:focus-visible { background: var(--brand-red); border-color: var(--brand-red); color: #ffffff !important; outline: none; }
.xh-marken-suche { flex: none; width: 260px; height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--field-border, #c9c9c9); margin: 0; color: var(--text-muted); }
.xh-marken-suche:focus-within { border-color: var(--heading); }
.xh-marken-suche input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 15px; font-family: var(--font-sans); background: none; color: var(--heading); }
/* Kein zweiter (runder) Fokusrahmen im Feld – den Fokus zeigt der dunkle Außenrahmen (:focus-within) */
.xh-marken-suche input:focus { box-shadow: none !important; outline: none; border-radius: 0; }
.xh-marken-gruppe { scroll-margin-top: calc(var(--xh-kopf-hoehe, 117px) + 90px); padding-top: 24px; }
.xh-marken-buchstabe { margin: 0 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--brand-red); font-size: 22px; font-weight: 700; font-style: italic; color: var(--heading); display: inline-block; min-width: 40px; }
.xh-marken-raster { list-style: none; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.xh-marken-raster li { margin: 0; }
/* Kacheln einer Reihe gleich hoch (Theme: #manufacturer #main ul { align-items: flex-start }), Artikelzahl unten auf einer Linie */
#manufacturer #main ul.xh-marken-raster { align-items: stretch; }
.xh-marke { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 16px 12px 14px; border: 1px solid var(--border); background: var(--surface); text-align: center; text-decoration: none !important; transition: border-color .15s, box-shadow .15s; }
.xh-marke:hover, .xh-marke:focus-visible { border-color: var(--brand-red); box-shadow: 0 10px 24px rgba(0, 0, 0, .08); outline: none; }
.xh-marke-logo { height: 70px; width: 100%; display: flex; align-items: center; justify-content: center; }
.xh-marke-logo img { max-width: 80%; max-height: 64px; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(.15); transition: filter .15s, transform .2s; }
.xh-marke:hover .xh-marke-logo img { filter: none; transform: scale(1.04); }
.xh-marke-name { font-weight: 700; font-size: 14px; color: var(--heading); line-height: 1.25; }
.xh-marke:hover .xh-marke-name { color: var(--brand-red); }
.xh-marke-zahl { margin-top: auto; font-size: 12px; color: var(--text-muted); }
.xh-marken-raster li[hidden], .xh-marken-gruppe[hidden] { display: none !important; }
.xh-marken-leer { margin: 32px 0; font-size: 15px; color: var(--text-muted); }
/* Touch: Buchstaben-Knöpfe 40 px */
@media (max-width: 991px) { .xh-marken-az a { min-width: 40px; height: 40px; } }
@media (max-width: 767px) {
  /* Suchfeld über A–Z: beim Kleben schiebt es sich unter den Kopf, sichtbar bleibt nur die A–Z-Reihe (vorher 105 px hoch) */
  .xh-marken-werkzeug { flex-direction: column-reverse; align-items: stretch; gap: 10px; padding: 10px 0; top: calc(var(--xh-kopf-hoehe, 113px) - 52px); }
  .xh-marken-gruppe { scroll-margin-top: calc(var(--xh-kopf-hoehe, 117px) + 38px); }
  /* Weicher Auslauf rechts zeigt, dass die A–Z-Leiste weiterscrollt (statt eines halb abgeschnittenen Buchstabens) */
  .xh-marken-az { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .xh-marken-az::-webkit-scrollbar { display: none; }
  .xh-marken-az a { flex: none; }
  .xh-marken-suche { width: 100%; }
  .xh-marken-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .xh-marke { padding: 12px 8px 10px; }
  .xh-marke-logo { height: 54px; }
  .xh-marke-logo img { max-height: 48px; }
}
.xh-marken-raster li { width: auto !important; float: none !important; padding: 0 !important; }
body:has(.xh-marken-seite) #page { overflow: clip; }  /* sonst klebt die A–Z-Leiste nicht (Theme: overflow hidden) */
.xh-marke-logo img { max-width: 86%; max-height: 66px; }
/* Querformat-Logos (marken/quer/): gleiche Höhe wie auf der Startseite; Glock ist fast quadratisch */
.xh-marke-logo img.xh-marke-quer { max-height: 40px; }
.xh-marke-logo img.xh-marke-quer[src$="/glock.svg"] { max-height: 60px; }

/* Warenkorb/Kasse: Lieferzeit je Artikel + Hinweis bei gemischten Lieferzeiten (Marcus 27.10.2026) */
body#cart .product-line-info.xh-korb-liefer { font-size: 14px; margin-top: 4px; } /* Aussehen: .xh-lagerzeile wie auf den Karten (xh-karten.css) */
.xh-korb-hinweis { margin: 14px 0 0; padding: 12px 14px; background: #fdf1e2; border-left: 3px solid #b45309; color: #3d2a0d; font-size: 14px; line-height: 1.5; }
.cart-grid-right .xh-korb-hinweis { margin: 0 0 16px; }

/* Bestellbestätigung (Vorlage umzug/theme/templates/checkout/order-confirmation.tpl, Marcus 01.11.2026) */
.xh-ob { display: flex; flex-direction: column; gap: 20px; margin: 10px 0 40px; color: var(--text); }
.xh-ob h2 { font-size: 18px; font-weight: 700; color: var(--heading); margin: 0 0 14px; text-transform: none; }
.xh-ob-kopf { display: flex; gap: 22px; align-items: flex-start; padding: 28px 30px; background: #ffffff; border: 1px solid var(--border); border-left: 4px solid #2e7d32; }
.xh-ob-haken { flex: none; width: 56px; height: 56px; border-radius: 50%; background: #e8f5e9; color: #2e7d32; display: flex; align-items: center; justify-content: center; }
.xh-ob-kopf h1 { font-size: 28px; line-height: 1.2; margin: 4px 0 6px; color: var(--heading); text-transform: none; }
.xh-ob-kopf p { margin: 0 0 6px; font-size: 15px; line-height: 1.55; }
.xh-ob-kopf p.xh-ob-nr { font-size: 16px; color: var(--heading); }
.xh-ob-kopf a:not([class]) { color: var(--heading); font-weight: 700; text-decoration: underline; }
.xh-ob-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.xh-ob-knoepfe .xh-knopf-umriss { align-self: auto; min-height: 50px; padding: 10px 24px; }
.xh-ob-unten { justify-content: center; margin-top: 0; }
.xh-ob-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.xh-ob-haupt, .xh-ob-seite { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.xh-ob-kasten { background: #ffffff; border: 1px solid var(--border); padding: 22px 24px; }
.xh-ob-kasten > p:last-child { margin-bottom: 0; }
/* Zahlungsart-Rückgabe (z. B. Bankdaten Vorkasse): ruhige Liste statt grauer Kacheln */
.xh-ob-zahlung { background: var(--danger-bg, #fdeeee); border: 0; border-left: 4px solid var(--brand-red); } /* hellrot wie der Erwerbsnachweis-Kasten (Marcus 01.11.) */
.xh-ob-zahlung p { font-size: 15px; line-height: 1.6; }
.xh-ob-zahlung dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 14px 0 16px; border: 1px solid var(--border); }
.xh-ob-zahlung dl dt, .xh-ob-zahlung dl dd { margin: 0; padding: 10px 14px; background: #ffffff !important; border-bottom: 1px solid var(--border); font-size: 15px; width: auto !important; flex: none !important; }
.xh-ob-zahlung dl dt { font-weight: 400; color: var(--text); background: #f7f7f7 !important; }
.xh-ob-zahlung dl dd { font-weight: 700; color: var(--heading); word-break: break-word; }
.xh-ob-zahlung dl dt:nth-last-of-type(1), .xh-ob-zahlung dl dd:last-of-type { border-bottom: 0; }
.xh-ob-zahlung table { width: 100%; }
.xh-ob-artikel { list-style: none; margin: 0; padding: 0; }
.xh-ob-artikel li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.xh-ob-artikel li:first-child { padding-top: 0; }
.xh-ob-bild { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: #ffffff; }
.xh-ob-bild img { max-width: 64px; max-height: 64px; object-fit: contain; }
.xh-ob-name { color: var(--heading); font-size: 15px; line-height: 1.4; }
.xh-ob-name small { display: block; margin-top: 3px; color: var(--text); font-size: 13px; }
.xh-ob-preis { font-weight: 700; color: var(--heading); white-space: nowrap; }
.xh-ob-summen { width: 100%; margin-top: 12px; font-size: 15px; }
.xh-ob-summen td { padding: 5px 0; }
.xh-ob-summen td:last-child { text-align: right; white-space: nowrap; }
.xh-ob-summen .xh-ob-gesamt td { padding-top: 10px; border-top: 1px solid var(--border); font-size: 18px; font-weight: 700; color: var(--heading); }
.xh-ob-summen .xh-ob-mwst td { font-size: 13px; padding-top: 0; }
.xh-ob-daten { margin: 0; }
.xh-ob-daten dt { font-size: 13px; font-weight: 400; color: var(--text); text-transform: uppercase; letter-spacing: .4px; margin-top: 12px; }
.xh-ob-daten dt:first-child { margin-top: 0; }
.xh-ob-daten dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--heading); }
.xh-ob-daten dd small { font-weight: 400; color: var(--text); }
.xh-ob-hilfe p { font-size: 14px; line-height: 1.55; }
.xh-ob-hilfe a { color: var(--heading); font-weight: 700; }
.xh-ob-hilfe a:hover { color: var(--brand-red); }
.xh-ob-link { display: inline-block; margin-top: 4px; }
@media (max-width: 991px) {
  .xh-ob-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .xh-ob-kopf { flex-direction: column; gap: 12px; padding: 20px 16px; }
  .xh-ob-haken { width: 46px; height: 46px; }
  .xh-ob-kopf h1 { font-size: 23px; }
  .xh-ob-kasten { padding: 18px 16px; }
  .xh-ob-knoepfe a { flex: 1 1 100%; justify-content: center; }
  .xh-ob-zahlung dl { grid-template-columns: minmax(0, 1fr); }
  .xh-ob-zahlung dl dt { border-bottom: 0; padding-bottom: 2px; }
  .xh-ob-zahlung dl dd { padding-top: 2px; }
  .xh-ob-artikel li { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; }
  .xh-ob-bild { width: 56px; height: 56px; }
  .xh-ob-bild img { max-width: 50px; max-height: 50px; }
}
.xh-ob section.xh-ob-kasten, .xh-ob section.xh-ob-kopf, .xh-ob .xh-ob-seite, .xh-ob .xh-ob-haupt { margin: 0 !important; } /* Theme-Abstand an <section> (rechter Kasten saß tiefer) */
.xh-ob #order-details { padding: 22px 24px; } /* Theme setzt #order-details eigenen Innenabstand */
@media (max-width: 767px) { .xh-ob #order-details { padding: 18px 16px; } }
/* Zahlungskasten ruhiger (Marcus 01.11.: „gefällt mir noch nicht“): keine weißen Kacheln, Bankdaten als schlichte Liste im Hellrot */
.xh-ob-zahlung p { font-size: 15px; line-height: 1.5; margin: 0 0 4px; }
.xh-ob-zahlung dl { grid-template-columns: 150px minmax(0, 1fr); margin: 12px 0 14px; border: 0; border-top: 1px solid rgba(221, 14, 14, .18); }
.xh-ob-zahlung dl dt, .xh-ob-zahlung dl dd { background: transparent !important; padding: 9px 0; border-bottom: 1px solid rgba(221, 14, 14, .18); }
.xh-ob-zahlung dl dt { color: var(--text); }
.xh-ob-zahlung dl dd { font-size: 16px; letter-spacing: .2px; }
.xh-ob-zahlung dl dt:nth-last-of-type(1), .xh-ob-zahlung dl dd:last-of-type { border-bottom: 1px solid rgba(221, 14, 14, .18); }
.xh-ob-zahlung > strong { display: block; margin: 8px 0 4px; color: var(--heading); }
@media (max-width: 767px) {
  .xh-ob-zahlung dl { grid-template-columns: minmax(0, 1fr); }
  .xh-ob-zahlung dl dt { padding: 8px 0 0; border-bottom: 0; font-size: 13px; }
  .xh-ob-zahlung dl dd { padding: 0 0 8px; }
}
.xh-ob-zahlung section > strong { display: block; margin: 8px 0 4px; color: var(--heading); }

/* Kasse Adressen: „Neue Adresse“ + „Rechnungsadresse abweichend“ als Umriss-Knöpfe nebeneinander, Bearbeiten/Löschen ruhiger (Marcus 01.11.2026) */
body#checkout p.add-address, body#checkout p:has(> a[data-link-action="different-invoice-address"]) { display: inline-flex; margin: 18px 10px 4px 0; vertical-align: top; }
body#checkout p.add-address a, body#checkout a[data-link-action="different-invoice-address"] { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--heading); background: #ffffff; color: var(--heading) !important; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; text-decoration: none !important; transition: background .15s, border-color .15s, color .15s; }
body#checkout p.add-address a:hover, body#checkout a[data-link-action="different-invoice-address"]:hover { background: var(--brand-red); border-color: var(--brand-red); color: #ffffff !important; }
body#checkout p.add-address a .material-icons { font-size: 18px; margin: 0; }
body#checkout .js-address-form .form-footer, body#checkout #checkout-addresses-step .continue { margin-top: 24px; }
body#checkout .address-footer { display: flex; justify-content: center; gap: 22px; }
body#checkout .address-footer a { display: inline-flex; align-items: center; gap: 4px; color: var(--heading) !important; font-size: 14px; font-weight: 600; text-decoration: none; }
body#checkout .address-footer a .material-icons { font-size: 17px; }
body#checkout .address-footer a.edit-address:hover { color: var(--brand-red) !important; text-decoration: underline; }
body#checkout .address-footer a.delete-address { color: #8a8a8a !important; }
body#checkout .address-footer a.delete-address:hover { color: var(--brand-red) !important; text-decoration: underline; }
@media (max-width: 767px) {
  body#checkout p.add-address, body#checkout p:has(> a[data-link-action="different-invoice-address"]) { display: flex; margin: 12px 0 0; }
  body#checkout p.add-address a, body#checkout a[data-link-action="different-invoice-address"] { width: 100%; justify-content: center; text-align: center; }
}

/* easyCredit-Prüfseite nach der Rückkehr (Modul-Vorlage nutzt Bootstrap-5-Klassen): Kauf-Knopf rot + groß, „Zahlungsart ändern“ als Umriss (Marcus 01.11.2026) */
body[id^="module-easycreditratenkauf"] .d-flex.justify-content-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
body[id^="module-easycreditratenkauf"] .d-flex.justify-content-between form { margin: 0; }
body[id^="module-easycreditratenkauf"] .d-flex.justify-content-between .btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 34px; background: var(--brand-red) !important; border: 0; color: #ffffff !important; font-size: 15px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
body[id^="module-easycreditratenkauf"] .d-flex.justify-content-between .btn-primary:hover { background: #b30b0b !important; }
body[id^="module-easycreditratenkauf"] .d-flex.justify-content-between .btn-secondary { display: inline-flex; align-items: center; min-height: 54px; padding: 0 22px; background: #ffffff !important; border: 1px solid var(--heading) !important; color: var(--heading) !important; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
body[id^="module-easycreditratenkauf"] .d-flex.justify-content-between .btn-secondary:hover { background: var(--brand-red) !important; border-color: var(--brand-red) !important; color: #ffffff !important; }
body[id^="module-easycreditratenkauf"] #order-items .order-line .image img { max-width: 110px; max-height: 110px; object-fit: contain; }
@media (max-width: 767px) {
  body[id^="module-easycreditratenkauf"] .d-flex.justify-content-between { flex-direction: column-reverse; align-items: stretch; }
  body[id^="module-easycreditratenkauf"] .d-flex.justify-content-between .btn-primary, body[id^="module-easycreditratenkauf"] .d-flex.justify-content-between .btn-secondary { width: 100%; justify-content: center; }
}
/* … gilt für die tatsächlich genutzte Vorlage process_legacy.tpl (.cart_navigation: Formular + Link) */
body[id^="module-easycreditratenkauf"] .cart_navigation { display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 12px; margin: 24px 0 10px; }
body[id^="module-easycreditratenkauf"] .cart_navigation form { margin: 0; }
body[id^="module-easycreditratenkauf"] .cart_navigation .btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 34px; background: var(--brand-red) !important; border: 0; color: #ffffff !important; font-size: 15px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
body[id^="module-easycreditratenkauf"] .cart_navigation .btn-primary:hover { background: #b30b0b !important; }
body[id^="module-easycreditratenkauf"] .cart_navigation a.btn { display: inline-flex; align-items: center; gap: 6px; min-height: 54px; padding: 0 22px; background: #ffffff !important; border: 1px solid var(--heading) !important; color: var(--heading) !important; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
body[id^="module-easycreditratenkauf"] .cart_navigation a.btn:hover { background: var(--brand-red) !important; border-color: var(--brand-red) !important; color: #ffffff !important; }
@media (max-width: 767px) {
  body[id^="module-easycreditratenkauf"] .cart_navigation { flex-direction: column; align-items: stretch; }
  body[id^="module-easycreditratenkauf"] .cart_navigation .btn-primary, body[id^="module-easycreditratenkauf"] .cart_navigation a.btn { width: 100%; justify-content: center; }
}