/*
 * RLV Voice Reader - Grundstil des Vorlese-Buttons.
 * Farbe und Größe über CSS-Variablen anpassbar, z. B. im Site-CSS:
 *   .rlv-voicereader { --rlv-voicereader-color: #008730; --rlv-voicereader-size: 1.6rem; }
 * Die Site-Einstellung "Farbe des Buttons" setzt --rlv-voicereader-color direkt am Element.
 */
.rlv-voicereader {
    /* Variablen hier bewusst nicht setzen: sonst überschreibt diese (später geladene)
       Datei die Werte aus dem Site-CSS. Standardwerte stehen als Fallback in var(). */
    margin: 0.5rem 0 1rem;
    min-height: 30px;
}

/* Button mit Font-Awesome-Icon und/oder Text (statt linguatec-Bild) */
.rlv-voicereader .rlv-voicereader__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--rlv-voicereader-color, currentColor);
    border-radius: 2rem;
    background: transparent;
    color: var(--rlv-voicereader-color, currentColor);
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.rlv-voicereader .rlv-voicereader__button i {
    font-size: var(--rlv-voicereader-size, 1.5rem);
    line-height: 1;
}

/* Nur Icon: ohne Rahmen */
.rlv-voicereader .rlv-voicereader__button--icon {
    padding: 0.2rem;
    border: 0;
    border-radius: 0.25rem;
}

.rlv-voicereader .rlv-voicereader__button:hover {
    opacity: 0.75;
}
.rlv-voicereader .rlv-voicereader__button:focus-visible {
    outline: 2px solid var(--rlv-voicereader-color, currentColor);
    outline-offset: 2px;
}

/* Text nur für Screenreader */
.rlv-voicereader .rlv-voicereader__sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*
 * Player in Seitenfarben (Einstellung "Player-Design" = "Farben der Seite").
 * Der Hover-Player hängt direkt am <body>, deshalb kommen die Farben aus
 * CSS-Variablen am :root, z. B. im Site-CSS:
 *   :root {
 *     --rlv-voicereader-player-bg: #008730;
 *     --rlv-voicereader-player-icon: #ffffff;
 *     --rlv-voicereader-highlight: #BFE7CD;
 *     --rlv-voicereader-highlight-word: #93c8a0;
 *   }
 * Die Symbole (PNG von linguatec) werden als Maske genutzt und so beliebig eingefärbt.
 */
html.rlv-voicereader-brand div.VR20S_h_player_container {
    background: var(--rlv-voicereader-player-bg, #222222) !important;
    border-color: var(--rlv-voicereader-player-bg, #222222) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

html.rlv-voicereader-brand .VR20S_h_button_play,
html.rlv-voicereader-brand .VR20S_h_button_pause,
html.rlv-voicereader-brand .VR20S_h_button_waiting,
html.rlv-voicereader-brand .VR20S_h_button_previous,
html.rlv-voicereader-brand .VR20S_h_button_next,
html.rlv-voicereader-brand .VR20S_h_button_config,
html.rlv-voicereader-brand .VR20S_h_button_close {
    background-image: none !important;
    background-color: var(--rlv-voicereader-player-icon, #ffffff) !important;
    border-color: transparent !important;
    -webkit-mask-image: var(--rlv-voicereader-mask);
    mask-image: var(--rlv-voicereader-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: opacity 0.15s ease;
}
html.rlv-voicereader-brand .VR20S_h_button_play { --rlv-voicereader-mask: url('../Linguatec/buttons/black/play.png'); }
html.rlv-voicereader-brand .VR20S_h_button_pause { --rlv-voicereader-mask: url('../Linguatec/buttons/black/pause.png'); }
html.rlv-voicereader-brand .VR20S_h_button_waiting { --rlv-voicereader-mask: url('../Linguatec/buttons/black/wait.png'); }
html.rlv-voicereader-brand .VR20S_h_button_previous { --rlv-voicereader-mask: url('../Linguatec/buttons/black/prev.png'); }
html.rlv-voicereader-brand .VR20S_h_button_next { --rlv-voicereader-mask: url('../Linguatec/buttons/black/next.png'); }
html.rlv-voicereader-brand .VR20S_h_button_config { --rlv-voicereader-mask: url('../Linguatec/buttons/black/config.png'); }
html.rlv-voicereader-brand .VR20S_h_button_close { --rlv-voicereader-mask: url('../Linguatec/buttons/black/close.png'); }

/* Die Maske blendet den Hover-Rahmen aus: stattdessen leicht abdunkeln */
html.rlv-voicereader-brand button.VR20S_h_player_button:hover,
html.rlv-voicereader-brand div.VR20S_h_player_button:hover {
    opacity: 0.7;
}
html.rlv-voicereader-brand button.VR20S_h_player_button:focus-visible {
    opacity: 0.7;
    outline: none;
}
html.rlv-voicereader-brand div.vrweb_hover_player:focus-within {
    outline: 2px solid var(--rlv-voicereader-player-bg, #222222);
    outline-offset: 3px;
}

/* Einstellungsfenster und Hinweis im Player */
html.rlv-voicereader-brand .vrweb_settings {
    background-color: var(--rlv-voicereader-player-bg, #222222);
    border-color: var(--rlv-voicereader-player-bg, #222222);
}
html.rlv-voicereader-brand .vrweb_settings .vrweb_s_content_header,
html.rlv-voicereader-brand .vrweb_settings button.vrweb_x,
html.rlv-voicereader-brand .vrweb_settings div.vrweb_x {
    color: var(--rlv-voicereader-player-icon, #ffffff);
}
html.rlv-voicereader-brand .vrweb_settings input[type="range"] {
    accent-color: var(--rlv-voicereader-player-bg, #222222);
}
html.rlv-voicereader-brand .vrweb_tapSubPlayerMessage {
    background-color: var(--rlv-voicereader-player-bg, #222222);
    color: var(--rlv-voicereader-player-icon, #ffffff);
}

/* Hervorhebung beim Vorlesen (eine im Player gewählte Farbe hat Vorrang) */
html.rlv-voicereader-brand span.VR20S_highlight:not([class*="VR20S_Color_"]) {
    background-color: var(--rlv-voicereader-highlight, #FFFF00);
}
html.rlv-voicereader-brand span.VR20S_highlight_word {
    background-color: var(--rlv-voicereader-highlight-word, #6fa3f7) !important;
}