/* Bewertungskarte unter dem Produktbild (Variante B, Felix 17.10.2026) – inc/kern/sterne_produktbild.php. Nur auf Produktseiten geladen. */
.cfs-sb-rahmen { container-type: inline-size; margin: 14px 0 0; }
.cfs-sb {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 18px;
  margin: 0; padding: 14px 18px 12px;
  border: 1px solid rgba(127,184,87,.45); border-radius: 10px; background: rgba(18,23,15,.62); box-shadow: var(--cf-glow);
  color: rgba(255,255,255,.97) !important; text-decoration: none !important;
  transition: border-color 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1);
}
.cfs-sb:focus-visible { outline: 2px solid #9ad072; outline-offset: 3px; }
.cfs-sb:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  .cfs-sb:hover { border-color: #7fb857; }
  .cfs-sb:hover .cfs-sb-mehr { color: #c8f59d; }
}
.cfs-sb-gesamt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-right: 18px; border-right: 1px solid rgba(127,184,87,.3); text-align: center; }
.cfs-sb-note { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cfs-sb-anzahl { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; line-height: 1.3; color: #b9c7b4; white-space: nowrap; }
.cfs-sb-verif { display: inline-flex; align-items: center; gap: 5px; }
.cfs-sb-verif::before { content: ""; width: 9px; height: 5px; border-left: 2px solid #9ad072; border-bottom: 2px solid #9ad072; transform: rotate(-45deg) translateY(-2px); }
.cfs-sb-kriterien { list-style: none; margin: 0 !important; padding: 0 !important; min-width: 0; display: grid; grid-template-columns: max-content minmax(32px, 1fr) max-content; gap: 9px 10px; align-items: center; }
.cfs-sb-kriterien li { display: contents; }
.cfs-sb-kriterien li::before { content: none !important; }
.cfs-sb-kname { font-size: 13px; line-height: 18px; white-space: nowrap; }
.cfs-sb-balken { height: 6px; border-radius: 3px; background: rgba(127,184,87,.18); overflow: hidden; }
.cfs-sb-balken span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #7fb857, #c8f59d); }
.cfs-sb-kwert { font-size: 13px; font-weight: 800; color: #c8f59d; text-align: right; font-variant-numeric: tabular-nums; }
.cfs-sb-mehr { grid-column: 1 / -1; justify-self: end; font-size: 12.5px; font-weight: 700; color: #9ad072; transition: color 160ms ease; }
.cfs-sb-ohne-kriterien { grid-template-columns: 1fr; }
.cfs-sb-ohne-kriterien .cfs-sb-gesamt { padding-right: 0; border-right: 0; }
.cfs-sb-ohne-kriterien .cfs-sb-mehr { justify-self: center; }
/* Schmale Karte: Gesamt etwas kleiner; unter 300 px (Tablet-Galerie) Gesamt als Zeile über den Balken */
@container (max-width: 400px) {
  .cfs-sb { gap: 12px 14px; padding: 12px 14px 10px; }
  .cfs-sb-gesamt { padding-right: 14px; }
  .cfs-sb-note { font-size: 28px; }
}
@container (max-width: 300px) {
  .cfs-sb { grid-template-columns: minmax(0, 1fr); }
  .cfs-sb-gesamt { flex-direction: row; justify-content: center; gap: 10px; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid rgba(127,184,87,.3); }
}
#bewertungen { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { .cfs-sb, .cfs-sb:active { transition: none; transform: none; } }
/* Die Badges im Bild (Bestseller, Theme-Labels) hängen absolut am Bilderrahmen. Mit der Karte wird der Rahmen höher – damit sie am
   Bild bleiben, wird der Bildbereich ihr Bezug. Bei mehreren Bildern übernimmt das der Schieber des Themes (.flex-viewport). */
.woocommerce-product-gallery:has(.cfs-sb-rahmen):not(:has(.flex-viewport)) > .woocommerce-product-gallery__wrapper { position: relative; }
/* Bei mehreren Bildern hängt der Schieber des Themes sein Bildfenster (.flex-viewport) ans Ende der Galerie – die Karte bleibt per
   Reihenfolge trotzdem unter dem Bild. Auslöser (Lupe) und Vorschaubilder sind absolut gesetzt und davon unberührt. */
.woocommerce-product-gallery:has(> .cfs-sb-rahmen) { display: flex; flex-direction: column; }
.woocommerce-product-gallery > .cfs-sb-rahmen { order: 2; }