/* =============================================================================
   BAUGRUPPENBILD (.spfbg) — Silhouette der Baugruppe statt Produktfoto
   -----------------------------------------------------------------------------
   Ersatzteile ohne Foto zeigen auf der Produktkarte und im Galeriefeld der
   Produktseite die Silhouette der Baugruppe, in der das Teil sitzt (Kili,
   27.10.2026: „nur noch das Baugruppenbild, so wie es die Suchvorschau schon
   zeigt“). Markup aus SPF_Part_Reference::karte_html() und ::baugruppe_html(),
   das SVG bettet spf-baugruppenbild.js ein.

   Aufbau der Dateien (componentgroups/…/*.svg): Grund `fill="white"`, Umriss
   `fill="#D0D0D0"`, markiertes Bauteil `fill="#000000"` — als Attribut.

   Hover wie auf den Kacheln in Schritt 4 des Ersatzteilkatalogs: Das Bauteil
   färbt sich in der Markenfarbe, das Bild wächst leicht.

   Farbe: tags die Arbeitsfarbe der Marke, nachts die Nacht-Signatur. KTM
   führt beide als dasselbe Orange, Husky tags Dunkelblau und nachts Gelb —
   dieselbe Regel wie `--spfcard-orange` (spf-product-card.css).

   Kein `filter:invert()` auf dem eingebetteten SVG: Es kippte die Markenfarbe
   des Hovers ins Gegenteil. Nachts wird stattdessen je Fläche umgefärbt, und
   zwar UMGEKEHRT: Die Dateien sind für hellen Grund gebaut (Umriss dezent,
   Bauteil schwarz); auf dunklem Grund verschwände sonst genau das Bauteil.
   ============================================================================= */

.spfbg{
  --spfbg-sig:var(--brand-accent,#ff6600);
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  color:#16181c;
}
html.spf-night .spfbg,
body.spf-night .spfbg{
  --spfbg-sig:var(--spf-brand-night,var(--brand-accent,#ff6600));
}

.spfbg img,
.spfbg svg{
  display:block;width:100%;height:100%;
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.spfbg img{object-fit:contain}

.spfbg svg [fill="white"],
.spfbg svg [fill="#fff"],
.spfbg svg [fill="#ffffff"],
.spfbg svg [fill="#FFFFFF"]{fill:transparent !important}
.spfbg svg [fill="#000000"],
.spfbg svg [fill="#000"],
.spfbg svg [fill="black"]{transition:fill .2s ease}

/* --- Nachtmodus ------------------------------------------------------------
   Solange das SVG noch als <img> steht, lässt es sich nicht je Fläche
   umfärben; bis zum Einbetten kehrt eine Invertierung das Verhältnis um. */
html.spf-night .spfbg img,
body.spf-night .spfbg img{filter:invert(.9)}

html.spf-night .spfbg svg [fill="#D0D0D0"],
html.spf-night .spfbg svg [fill="#d0d0d0"],
body.spf-night .spfbg svg [fill="#D0D0D0"],
body.spf-night .spfbg svg [fill="#d0d0d0"]{fill:#3a3d42 !important}

html.spf-night .spfbg svg [fill="#000000"],
html.spf-night .spfbg svg [fill="#000"],
html.spf-night .spfbg svg [fill="black"],
body.spf-night .spfbg svg [fill="#000000"],
body.spf-night .spfbg svg [fill="#000"],
body.spf-night .spfbg svg [fill="black"]{fill:#e8eaed !important}

/* --- Produktkarte ----------------------------------------------------------
   Der Rahmen ist `.spfcard__imgwrap--riss` (mittig, mit Rand, nachts dunkler
   Grund). Ausgelöst wird der Hover von der ganzen Karte, wie in Schritt 4 von
   der ganzen Kachel; Tastatur über `:focus-within`.

   Die Hover-Regeln tragen ein `html` mehr als die Nacht-Regeln: Beide sind
   `!important`, und ohne den Vorsprung bliebe das Bauteil nachts hellgrau. */
.spfbg--karte{width:100%;height:100%}

@media (hover:hover){
  .spfcard:hover .spfbg--karte img,
  .spfcard:hover .spfbg--karte svg{transform:scale(1.06)}
  html body .spfcard:hover .spfbg--karte svg [fill="#000000"],
  html body .spfcard:hover .spfbg--karte svg [fill="#000"],
  html body .spfcard:hover .spfbg--karte svg [fill="black"]{fill:var(--spfcard-orange,var(--spfbg-sig)) !important}
}
.spfcard:focus-within .spfbg--karte svg{transform:scale(1.06)}
html body .spfcard:focus-within .spfbg--karte svg [fill="#000000"],
html body .spfcard:focus-within .spfbg--karte svg [fill="#000"],
html body .spfcard:focus-within .spfbg--karte svg [fill="black"]{fill:var(--spfcard-orange,var(--spfbg-sig)) !important}

/* --- Produktseite (Galeriefeld) --------------------------------------------
   Die Figur nutzt die Klassen der Einbaulage weiter (`spfloc`, `spfloc__stage`,
   `spfloc__link`), damit OEM-Schild und Link-Fokus wie bisher greifen. Rahmen
   und Grund der Zeichnungsbühne braucht die Silhouette nicht: Sie steht frei
   auf der Galeriefläche. Drei Klassen schlagen `body.spf-night .spfloc__stage`. */
.spfloc.spfloc--baugruppe{width:100%;align-items:center}
.spfloc.spfloc--baugruppe .spfloc__stage{
  width:min(100%,460px);
  background:transparent;border:0;border-radius:0;
  overflow:visible;
}
.spfloc--baugruppe .spfloc__link{width:100%}
.spfbg--gross{width:100%;padding:12px 16px}
.spfbg--gross svg,
.spfbg--gross img{height:auto}

/* In der neuen Produktseite hat die Bühne eine feste Höhe. Die Figur füllt sie,
   das SVG passt sich ein (`preserveAspectRatio` ist „meet“) — so bleibt auch auf
   dem Handy (Bühne rund 250 px hoch) Platz für die Zeile darunter. */
.ppv2 .gal__buehne .spfloc--baugruppe{height:100%}
.ppv2 .gal__buehne .spfloc--baugruppe .spfloc__stage{flex:1 1 auto;min-height:0}
.ppv2 .gal__buehne .spfloc--baugruppe .spfloc__link,
.ppv2 .gal__buehne .spfloc--baugruppe .spfbg--gross{height:100%}
.ppv2 .gal__buehne .spfbg--gross svg,
.ppv2 .gal__buehne .spfbg--gross img{height:100%}

/* spf-product-v2.css legt `mix-blend-mode: multiply` und nachts Rundung und
   Schatten auf jedes Galeriebild. Für das Platzhalter-<img> der Silhouette ist
   beides falsch; vier Klassen schlagen deren drei. */
.ppv2 .gal__buehne .spfbg.spfbg--gross img{
  mix-blend-mode:normal;border-radius:0;box-shadow:none;
  max-width:100%;max-height:100%;
}

@media (hover:hover){
  .spfloc--baugruppe .spfloc__link:hover .spfbg img,
  .spfloc--baugruppe .spfloc__link:hover .spfbg svg{transform:scale(1.06)}
  html body .spfloc--baugruppe .spfloc__link:hover .spfbg svg [fill="#000000"],
  html body .spfloc--baugruppe .spfloc__link:hover .spfbg svg [fill="#000"],
  html body .spfloc--baugruppe .spfloc__link:hover .spfbg svg [fill="black"]{fill:var(--spfbg-sig) !important}
}
.spfloc--baugruppe .spfloc__link:focus-visible .spfbg svg{transform:scale(1.06)}
html body .spfloc--baugruppe .spfloc__link:focus-visible .spfbg svg [fill="#000000"],
html body .spfloc--baugruppe .spfloc__link:focus-visible .spfbg svg [fill="#000"],
html body .spfloc--baugruppe .spfloc__link:focus-visible .spfbg svg [fill="black"]{fill:var(--spfbg-sig) !important}

@media (prefers-reduced-motion:reduce){
  .spfbg img,
  .spfbg svg,
  .spfbg svg [fill]{transition:none}
  .spfcard:hover .spfbg img,
  .spfcard:hover .spfbg svg,
  .spfcard:focus-within .spfbg svg,
  .spfloc--baugruppe .spfloc__link:hover .spfbg img,
  .spfloc--baugruppe .spfloc__link:hover .spfbg svg,
  .spfloc--baugruppe .spfloc__link:focus-visible .spfbg svg{transform:none}
}

@media print{
  .spfbg img{filter:none !important}
}