/* Vergleichsinstitut Frontend CSS
 *
 * Externes Vergleichsinstitut-Siegel (self-contained SVG /siegel/{uuid}).
 *
 * Zwei Pfade, sauber getrennt:
 *
 *  1) Auto-Platzierung in der WooCommerce-Produktgalerie (oben rechts über dem
 *     Produktbild). Das KLICKBARE Siegel (a.vergleichsinstitut-seal-link mit <img>) wird
 *     serverseitig als direktes Kind des ÄUSSEREN, nie geclippten Containers
 *     div.woocommerce-product-gallery (= trägt auch die Klasse .images)
 *     eingesetzt – GESCHWISTER der __wrapper, also AUSSERHALB des per JS
 *     transformierten Slider-Tracks. Positioniert wird es absolut oben rechts
 *     per Inline-CSS, siehe Vergleichsinstitut_Verification::auto_gallery_inline_css()
 *     und ::gallery_buffer_end(). KEIN JavaScript.
 *
 *     Warum direktes Kind des äußeren Containers statt <a> in der __wrapper:
 *     Der frühere Hook woocommerce_product_thumbnails rendert INNERHALB der
 *     __wrapper (= Slider-Track), deren Inhalt der Slider transformiert/clippt –
 *     dort würde das Siegel mitscrollen bzw. abgeschnitten. Der äußere Container
 *     wird NICHT transformiert/geclippt und existiert IMMER (auch bei Produkten
 *     mit nur einem Bild), daher sitzt das Siegel dort zuverlässig und stabil
 *     oben rechts – und bleibt klickbar.
 *
 *  2) Shortcode [vergleichsinstitut_badge]: klickbares, eigenständiges Inline-Siegel zur
 *     freien Platzierung. Dessen Styles stehen unten (statisch, cachebar).
 * ------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * Shortcode / freie Platzierung ([vergleichsinstitut_badge]): Siegel als eigenständiges
 * Inline-Element. Die Breite kommt aus dem width-Attribut, die Höhe folgt
 * automatisch dem hochkanten Seitenverhältnis 936:1280. Dieser Pfad ist bewusst
 * getrennt und berührt die CSS-::after-Auto-Platzierung (Inline-CSS) NICHT.
 * ------------------------------------------------------------------------- */
.vergleichsinstitut-seal-img {
    display: block;
    max-width: 100%;
    height: auto;
    /* Seitenverhältnis HART gesperrt (hochkant 936:1280). Selbst wenn ein Theme
       oder eine gecachte Regel eine feste Höhe erzwingt, bleibt das Siegel dank
       object-fit:contain unverzerrt (kein Stauchen / Breiterziehen). */
    aspect-ratio: 480 / 600;
    object-fit: contain;
}

/* Der klickbare Shortcode-Link darf das hochkant-Bild NIE beschneiden – auch
   nicht, falls eine fremde/gecachte Regel
   .vergleichsinstitut-seal-link{height:150px;overflow:hidden} lauert. */
.vergleichsinstitut-seal-link {
    overflow: visible;
}

/* --------------------------------------------------------------------------
 * Hover-Zoom (analog zum Kundenurteil-Siegel im Shop): sanfter Lift + leichte
 * Vergrößerung beim Überfahren. Gilt für ALLE klickbaren Vergleichsinstitut-Siegel –
 * Galerie-Auto-Platzierung UND Shortcode ([vergleichsinstitut_badge], Footer etc.).
 * Rein CSS, kein JS; transform beeinflusst das Layout nicht (kein Shift).
 * ------------------------------------------------------------------------- */
a.vergleichsinstitut-seal-link {
    transition: transform .18s ease, filter .18s ease;
    will-change: transform;
}
a.vergleichsinstitut-seal-link:hover,
a.vergleichsinstitut-seal-link:focus-visible {
    transform: translateY(-3px) scale(1.03);
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .18));
}
/* Barrierefreiheit: reduzierte Bewegung respektieren. */
@media (prefers-reduced-motion: reduce) {
    a.vergleichsinstitut-seal-link { transition: none; }
    a.vergleichsinstitut-seal-link:hover,
    a.vergleichsinstitut-seal-link:focus-visible { transform: none; filter: none; }
}