/* rating-badge.css - the Google Maps rating medallion in the award row on the
   St. Gallen and Luzern pages. Replaces the Elfsight hero widget: no third-party
   script, no client-side fetch, and the score is in the markup rather than painted
   in afterwards. Loaded only by the four pages that show the badge. */

.ec-rating {
    display: block;
    width: 130px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 50%;
}

.ec-rating svg {
    display: block;
    width: 100%;
    height: auto;
}

/* The neighbouring award badges have no hover state, so keep ours quiet enough to
   sit with them - just enough to read as clickable. */
.ec-rating:hover,
.ec-rating:focus {
    opacity: .88;
}

.ec-rating:focus-visible {
    outline: 3px solid #4285F4;
    outline-offset: 3px;
}

.ec-rating-score {
    font-family: "Roboto Slab", "Times New Roman", serif;
    font-weight: 700;
    font-size: 33px;
    fill: #222629;
    text-anchor: middle;
    font-variant-numeric: tabular-nums;
}

.ec-rating-rim {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 9.4px;
    letter-spacing: .05em;
    fill: #5B6570;
    text-anchor: middle;
}

/* The badge is an in-page jump to the reviews. The navbar is fixed-top, so without
   scroll-margin the target lands underneath it. */
#bewertungen {
    scroll-margin-top: 90px;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}