/* SEMPERDEAL Ladeanzeige „Ortungsimpuls“ (Modul Semperdeal/Ladeanzeige, Fassung 3 vom 04.10.2026)
   Ersetzt die Gambio-/Honeygrid-Lader durch sd-laden.svg und macht Nachladen sichtbar – dort, wo der Blick schon ist:
   im gedrückten Knopf, neben dem Wert, der sich ändert, in der Mitte des Bereichs, der neu kommt.
   Drei Regeln (Dominic 04.10.: „nur dort, wo er Sinn macht, immer formschön, kein Layout und kein Aussehen brechen“):
     1. Nichts verschiebt sich: Knöpfe behalten Breite, Farbe und Schrift; Lader liegen absolut, nie im Fluss.
     2. Nichts liegt über Text: Lader stehen neben der Schrift, an Stelle eines Symbols oder auf freier Fläche;
        reicht der Platz nicht, tritt die Schrift für die Dauer zurück (Breite bleibt).
     3. Kein Flackern: unter 200–250 ms bleibt alles, wie es ist; was gleich ersetzt wird, tritt sanft zurück.
   Fassungen per Fragment (eine Datei, ein Abruf): ohne = heller Grund · #sd-dezent = nachgeladene Inhalte ·
   #sd-auf-dunkel = dunkle Bühne (Bildfenster, Video) · #sd-weiss = farbige Knöpfe (Lader in Schriftfarbe).
   Lage und Größe der Knopf-Lader misst sd-laden.js aus (--sd-lx/--sd-ly Mitte, --sd-ls Größe).
   Nur Darstellung: Abläufe, Markup und Zustandsklassen von Gambio bleiben; main.min.css bleibt unberührt.
   Reduzierte Bewegung regelt die SVG selbst (Symbol steht, Kern atmet). */

:root {
  --sd-laden: url("sd-laden.svg?v=3");
  --sd-laden-dezent: url("sd-laden.svg?v=3#sd-dezent");
  --sd-laden-dunkel: url("sd-laden.svg?v=3#sd-auf-dunkel");
  --sd-laden-weiss: url("sd-laden.svg?v=3#sd-weiss");
  --sd-laden-zurueck: .4;          /* Inhalte, die gleich ersetzt werden */
  --sd-laden-ruhig: .6;            /* Bedienfelder, die kurz gesperrt sind (Filter) */
  --sd-laden-ein: 180ms;           /* Ein- und Ausblenden */
}

@keyframes sd-laden-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes sd-laden-weg { to { opacity: 0; } }
@keyframes sd-laden-zurueck { to { opacity: var(--sd-laden-zurueck); } }
@keyframes sd-laden-ruhig { to { opacity: var(--sd-laden-ruhig); } }

/* ---- 1. Font-Awesome-Spinner (Bibliothekslader, Kassen-Lader, Module) --------------------------------------- */
.fa-spinner.fa-spin, .fa-spinner.fa-pulse, .fa-circle-o-notch.fa-spin, .fa-refresh.fa-spin {
  -webkit-animation: none !important;
  animation: none !important;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  background: var(--sd-laden) center / contain no-repeat;
}
.fa-spinner.fa-spin::before, .fa-spinner.fa-pulse::before,
.fa-circle-o-notch.fa-spin::before, .fa-refresh.fa-spin::before { content: "" !important; }
/* in farbigen Knöpfen in Schriftfarbe */
:is(.btn-primary, .btn-buy, .btn-success, .btn-info, .btn-danger, .btn-warning) :is(.fa-spinner, .fa-circle-o-notch, .fa-refresh):is(.fa-spin, .fa-pulse) {
  background-image: var(--sd-laden-weiss);
}
/* L15 Bibliothekslader über der Bildbühne (Gambio: Weiß 80 %, Symbol 80 px): ruhiger Lader, 48 px in der Mitte */
.loading-spinner > .fa-spinner { background: var(--sd-laden-dezent) center / 48px 48px no-repeat; }

/* ---- 2. Gambio-Lader in Zeilen und Overlays ------------------------------------------------------------------- */
/* L01 Warenkorb und Merkzettel (product_cart_handler.js setzt tr.loading): keine weißen Kästen mehr. Der runde Knopf,
   der gedrückt wurde, wird zum Lader (Aktualisieren, wenn die Menge per Verlassen des Feldes gesendet wird); Zeile und
   Summen treten zurück, bis die neue Zeile da ist. Gambio ersetzt die Zeile danach komplett. */
.order-wishlist tr.loading td .loader { display: none !important; }
.order-wishlist tr.loading > td:not(.qty),
.order-wishlist tr.loading > td.qty > :not(.button-refresh):not(.button-delete):not(.button-to-cart) {
  animation: sd-laden-zurueck var(--sd-laden-ein) ease-out .25s both;
}
.order-wishlist tr.loading :is(.button-refresh, .button-delete, .button-to-cart) { position: relative; pointer-events: none; }
.order-wishlist tr.loading [data-sd-laden-hier] > *,
.order-wishlist tr.loading:not([data-sd-laden-anders]) .button-refresh > * {
  animation: sd-laden-weg var(--sd-laden-ein) ease-out .25s both;
}
.order-wishlist tr.loading [data-sd-laden-hier]::after,
.order-wishlist tr.loading:not([data-sd-laden-anders]) .button-refresh::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background: var(--sd-laden) center / contain no-repeat;
  animation: sd-laden-auf var(--sd-laden-ein) ease-out .25s both;
}
.order-wishlist tr.loading[data-sd-laden-anders] :is(.button-refresh, .button-delete, .button-to-cart):not([data-sd-laden-hier]),
.order-wishlist tr.loading:not([data-sd-laden-anders]) :is(.button-delete, .button-to-cart) {
  animation: sd-laden-zurueck var(--sd-laden-ein) ease-out .25s both;
}
/* die Summen ändern sich mit */
#cart_quantity:has(tr.loading) .total-box .order-total td + td {
  animation: sd-laden-zurueck var(--sd-laden-ein) ease-out .25s both;
}
/* L16 Artikelseite: Schleier über dem Kaufbereich (Eigenschaften-Prüfung) */
.product-info .loading-overlay {
  background: rgba(255, 255, 255, .6) var(--sd-laden-dezent) 50% 50% / 32px 32px no-repeat !important;
}
/* L04 Lupe: Großbild lädt */
.page-product-info .product-info .magnifier-target .preloader {
  background: #fff var(--sd-laden-dezent) 50% 50% / 40px 40px no-repeat !important;
}
/* L05 Kachel-Galerie im Flyover: Vorschaubild hat loading.gif als src, bis product_hover.js tauscht */
img.spinner[src*="loading.gif"] {
  object-position: -99999px 0;
  background: var(--sd-laden-dezent) 50% 50% / 24px 24px no-repeat;
}
/* L13 PayPal über Gambio Hub */
#loading-button-container {
  background-image: var(--sd-laden) !important;
  background-size: 32px 32px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Bildergalerie und Fenster (Magnific): „Lädt …“ als Text -> Lader auf der dunklen Bühne */
.mfp-preloader {
  width: 48px !important;
  height: 48px !important;
  margin: -24px auto 0 !important;
  left: 0 !important;
  right: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  background: var(--sd-laden-dunkel) center / 48px 48px no-repeat;
}
.mfp-preloader a { display: none !important; }

/* ---- 3. Knöpfe: der gedrückte Knopf zeigt den Lader und behält Farbe, Breite und Schrift ---------------------- */
/* Gambio-Scheinknopf beim Kauf (Artikelseite): voll deckend statt blass (disabled), Gambios Kringel entfällt –
   den Lader setzt sd-laden.js wie bei jedem anderen Knopf; auch die Erfolgsmeldung im Knopf bleibt kräftig */
.btn-add-to-cart-fake:disabled { opacity: 1 !important; cursor: progress; }
.btn-add-to-cart-fake.btn-buy-complete { cursor: default; }
.btn-buy .throbbler { display: none !important; }

.sd-laden-knopf[aria-busy="true"] { cursor: progress !important; opacity: 1 !important; }
button.sd-laden-knopf[aria-busy="true"], a.sd-laden-knopf[aria-busy="true"] { position: relative; }
/* Lader an der ausgemessenen Stelle: vor der Schrift, an Stelle des Symbols oder mittig. Hat der Knopf schon ein
   eigenes ::after (Gestaltung), nimmt der Lader ::before (--vor, entscheidet sd-laden.js). */
button.sd-laden-knopf:not(.sd-laden-knopf--vor):not(.sd-laden-knopf--pseudo-vor):not(.sd-laden-knopf--pseudo-nach)[aria-busy="true"]::after,
a.sd-laden-knopf:not(.sd-laden-knopf--vor):not(.sd-laden-knopf--pseudo-vor):not(.sd-laden-knopf--pseudo-nach)[aria-busy="true"]::after,
button.sd-laden-knopf--vor:not(.sd-laden-knopf--pseudo-vor)[aria-busy="true"]::before,
a.sd-laden-knopf--vor:not(.sd-laden-knopf--pseudo-vor)[aria-busy="true"]::before {
  content: "" !important;
  position: absolute !important;
  left: var(--sd-lx, 50%) !important;
  top: var(--sd-ly, 50%) !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: var(--sd-ls, 18px) !important;
  height: var(--sd-ls, 18px) !important;
  margin: calc(var(--sd-ls, 18px) / -2) 0 0 calc(var(--sd-ls, 18px) / -2) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  opacity: 1;
  background: var(--sd-laden-knopf-bild, var(--sd-laden)) center / contain no-repeat !important;
  pointer-events: none;
  animation: sd-laden-auf var(--sd-laden-ein) ease-out both !important;
}
/* Ton über eine Variable (erbt ins Pseudo-Element) statt über Spezifität: weiß, wenn die Knopfschrift hell ist */
.sd-laden-knopf--weiss { --sd-laden-knopf-bild: var(--sd-laden-weiss); }
/* Symbol: das eigene Symbol des Knopfs weicht dem Lader */
.sd-laden-knopf[aria-busy="true"] .sd-laden-symbol-weg { animation: sd-laden-weg var(--sd-laden-ein) ease-out both; }
/* Symbol als Pseudo-Element (Font Awesome, z. B. Einkaufswagen im Kasse-Knopf): das Zeichen wird durchsichtig, sein
   Kasten trägt den Lader – gleiche Stelle, gleiche Breite, nichts verschiebt sich */
.sd-laden-knopf--pseudo-vor[aria-busy="true"]::before,
.sd-laden-knopf--pseudo-nach[aria-busy="true"]::after {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: var(--sd-laden-knopf-bild, var(--sd-laden)) center / contain no-repeat !important;
  animation: sd-laden-auf var(--sd-laden-ein) ease-out both !important;
}
/* zu wenig Platz neben der Schrift: die Schrift tritt für die Dauer zurück (Breite bleibt), der Lader steht mittig */
.sd-laden-knopf--statt[aria-busy="true"] { color: transparent !important; text-shadow: none !important; }
.sd-laden-knopf--statt[aria-busy="true"] > * { visibility: hidden; }
/* <input> kennt kein Pseudo-Element: sd-laden.js legt den Lader als oberste Hintergrundebene inline an dieselbe
   ausgemessene Stelle (die eigenen Ebenen des Knopfs, z. B. ein Verlauf, bleiben darunter) */
/* Gambios Erfolgsmeldung im Knopf („✓ 1 Artikel im Warenkorb“) hat Vorrang vor einem nachlaufenden Lader */
.btn-buy-complete.sd-laden-knopf::after, .btn-buy-complete.sd-laden-knopf::before { content: none !important; }

/* ---- 4. Kasse: Vollbild-Lader nach dem Absenden (Modul CheckoutLoadingSpinner, nach 3 s) ------------------- */
.checkout-loading-spinner-container-backdrop { background-color: rgba(255, 255, 255, .9) !important; }
.checkout-loading-spinner-container-backdrop > div.container {
  width: 56px !important;
  height: 56px !important;
  left: 50% !important;
  top: 50% !important;
  margin: -28px 0 0 -28px !important;
  padding: 0 !important;
}
/* das Modul dreht sein <i class="fa fa-spinner"> selbst (ohne fa-spin): Symbol leeren, Drehung aus, Lader rein */
.checkout-loading-spinner-container-backdrop .spinner > i.fa-spinner {
  display: block;
  font-size: 56px !important;
  width: 56px;
  height: 56px;
  color: transparent !important;
  -webkit-animation: none !important;
  animation: none !important;
  background: var(--sd-laden) center / 56px 56px no-repeat;
}
.checkout-loading-spinner-container-backdrop .spinner > i.fa-spinner::before { content: "" !important; }
.checkout-loading-spinner-container-backdrop > .text {
  margin: 0 !important;
  top: calc(50% + 44px) !important;
  left: 0 !important;
  width: 100% !important;
  padding: 0 16px;
  font-size: 15px !important;                    /* Honeygrid: 1rem = 10 px */
  font-weight: 500;
  line-height: 1.4;
  color: #143d4c;
}

/* ---- 5. Nachladen (Zustand setzt sd-laden.js) ---------------------------------------------------------------- */
/* Fläche (Fenster, eigene Module über sdLaden.an): Inhalt tritt zurück, Lader in der Mitte */
.sd-laden-flaeche[aria-busy="true"] { position: relative; }
.sd-laden-flaeche[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: rgba(255, 255, 255, .6) var(--sd-laden-dezent) 50% 50% / 32px 32px no-repeat;
  pointer-events: none;
  animation: sd-laden-auf var(--sd-laden-ein) ease-out both;
}
/* N14/N15 Fenster und Großansicht: auf der dunklen Bühne kein heller Schleier; im Fenster 40 px */
.mfp-content.sd-laden-flaeche[aria-busy="true"]::after { background-color: transparent; background-size: 40px 40px; }
.mfp-content .sd-laden-flaeche[aria-busy="true"]::after { background-size: 40px 40px; }

/* Wert (Preis nach Optionswahl): Lader neben dem Preis auf Texthöhe, der alte Wert tritt zurück */
.sd-laden-zeile[aria-busy="true"] { position: relative; }
.sd-laden-zeile[aria-busy="true"]::after {
  content: "";
  position: absolute;
  left: var(--sd-lx, 4px);
  top: var(--sd-ly, 50%);
  width: var(--sd-ls, 22px);
  height: var(--sd-ls, 22px);
  margin: calc(var(--sd-ls, 22px) / -2) 0 0 calc(var(--sd-ls, 22px) / -2);
  background: var(--sd-laden-dezent) center / contain no-repeat;
  pointer-events: none;
  animation: sd-laden-auf var(--sd-laden-ein) ease-out both;
}
.sd-laden-zeile[aria-busy="true"] > *:not(.sd-laden-text) { animation: sd-laden-zurueck var(--sd-laden-ein) ease-out both; }

/* Auswahlfeld (Bundesland nach Landwahl, Versandrechner): der Lader nimmt den Platz des Pfeils ein */
.sd-laden-feld[aria-busy="true"] select {
  background-image: var(--sd-laden-dezent) !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 18px 18px !important;
  cursor: progress;
}

/* Liste (Artikel nach Filterwahl): Liste tritt zurück, ein Lader haftet in der Mitte des sichtbaren Teils */
.sd-laden-liste[aria-busy="true"] { animation: sd-laden-zurueck var(--sd-laden-ein) ease-out both; pointer-events: none; }
.sd-laden-haft {
  position: -webkit-sticky;
  position: sticky;
  top: calc(50vh - 84px);
  height: 0;
  z-index: 6;
  pointer-events: none;
}
/* der Lader steht auf einem weichen hellen Hof, damit er nie auf (blasser) Schrift sitzt – kein Kasten, keine Kante */
.sd-laden-haft::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48px;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  background: var(--sd-laden-dezent) center / 40px 40px no-repeat,
              radial-gradient(closest-side, rgba(255, 255, 255, .96) 62%, rgba(255, 255, 255, 0)) center / 100% 100% no-repeat;
  animation: sd-laden-auf var(--sd-laden-ein) ease-out both;
}
/* Bedienfeld kurz gesperrt (Filterkasten zwischen Klick und neuer Zählung): tritt leicht zurück, kein eigener Lader */
.sd-laden-ruhig[aria-busy="true"] { animation: sd-laden-ruhig var(--sd-laden-ein) ease-out both; }
.box-filter .preloader { cursor: progress; }

/* Suchvorschläge: die Lupe im Suchfeld wird zum Lader (ID-Schärfe nötig: das Kopf-CSS setzt den Hintergrund des
   Lupenknopfs mit html #header … !important durchsichtig) */
html #header form[role="search"].sd-laden-suche[aria-busy="true"] button.form-control-feedback > *,
form[role="search"].sd-laden-suche[aria-busy="true"] button.form-control-feedback > * {
  animation: sd-laden-weg var(--sd-laden-ein) ease-out both;
}
html #header form[role="search"].sd-laden-suche[aria-busy="true"] button.form-control-feedback,
form[role="search"].sd-laden-suche[aria-busy="true"] button.form-control-feedback {
  background: var(--sd-laden) center / 20px 20px no-repeat !important;
}

/* ---- 6. Eigene Module und eingebettete Inhalte ------------------------------------------------------------------ */
/* L06 UID-Prüfung (Registrierung, Firmenkonto): eigener Ring im Feld -> Lader, Statuszeile bleibt */
.sd-vat-ic:has(.sd-vat-spin) { background: var(--sd-laden) center / 22px 22px no-repeat; filter: none; }
.sd-vat-ic:has(.sd-vat-spin) svg { visibility: hidden; }
/* L07 Bestelltabelle: Preiszellen während des Abrufs („…“) – Lader statt der Punkte, ruhige Fassung */
.sd-bestell-preis[aria-busy="true"]::after,
.sd-bestell-auswahl-preis[aria-busy="true"]::after {
  content: "" !important;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  vertical-align: -4px;
  background: var(--sd-laden-dezent) center / 18px 18px no-repeat;
}
/* L08 Bestelltabelle: Zeilenknopf (Teal) behält seine Farbe, sein eigener Ring wird zum Lader in Schriftfarbe */
.sd-bestell-zeile .sd-bestell-knopf[aria-busy="true"] { opacity: 1 !important; cursor: progress !important; }
.sd-bestell-zeile .sd-bestell-knopf[aria-busy="true"]::before {
  width: 16px !important;
  height: 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  -webkit-animation: none !important;
  animation: none !important;
  background: var(--sd-laden-weiss) center / 16px 16px no-repeat;
}
/* L09 Anfrage-Fenster (Angebot, Frage, Vorführung): der gesperrte Knopf bleibt kräftig; den Lader setzt sd-laden.js */
.sd-form-submit:disabled { opacity: 1 !important; cursor: progress !important; }
/* L11 Reparatur & Service (Inhalt aus SEMPERconnect, repair-loader.js): Ring mit Inline-Stil -> Lader */
#sdr-repair-root div[style*="sdr-spin"] {
  border: 0 !important;
  border-radius: 0 !important;
  -webkit-animation: none !important;
  animation: none !important;
  background: var(--sd-laden) center / 36px 36px no-repeat !important;
}
/* N23 Vorführungen & Schulungen (training-loader.js): leer bis die Daten da sind */
#sdt-training-root:empty {
  min-height: 160px;
  background: var(--sd-laden-dezent) center / 32px 32px no-repeat;
}
/* N16 Video (MediaCenter): dunkle Bühne bis der Spieler geladen hat */
.sdmc-vlb-stage[aria-busy="true"]::after {
  background: var(--sd-laden-dunkel) center / 40px 40px no-repeat !important;
}

/* Nur für Bildschirmleser */
.sd-laden-text {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Windows-Kontrastdesign: Schleier nicht abdunkeln, Knöpfe nicht umfärben (die SVG regelt ihre Farben selbst) */
@media (forced-colors: active) {
  .sd-laden-flaeche[aria-busy="true"]::after { background-color: transparent; }
  .sd-laden-knopf[aria-busy="true"] { forced-color-adjust: none; }
}