/*
 * Overlay-Text im Bild beim Element "Product Keyvisual (with slide text)".
 * Slider: 5 % vom rechten Bildrand, rechtsbuendig, 10 % vom unteren Bildrand.
 * Anpassen: right / bottom = Abstand zum Bildrand, max-width = maximale Textbreite, font-size = Schriftgroesse.
 * Vollbild (.slider-modal): Position und Schriftgroesse werden vom Skript passend zum Bild berechnet
 * (Werte MODAL_RIGHT / MODAL_BOTTOM / MODAL_FONT oben in productKeyvisualText.js).
 */
.product-keyvisual .left .keyvisual-text {
    position: absolute;
    right: 5%;
    bottom: 10%;
    z-index: 50;
    max-width: 60%;
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.3;
    text-align: right;
    pointer-events: none;
}

.product-keyvisual .slider-modal .keyvisual-text {
    position: absolute;
    right: 5%;
    bottom: 10%;
    z-index: 50;
    max-width: 60%;
    margin: 0;
    line-height: 1.3;
    text-align: right;
    pointer-events: none;
}

.product-keyvisual .keyvisual-text[hidden] {
    display: none;
}

.product-keyvisual .keyvisual-text[data-text-color="white"] {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.product-keyvisual .keyvisual-text[data-text-color="black"] {
    color: #000;
}