/*
 * Freddy Reviews — Frontend-Widget-Styles
 *
 * SCOPE: Alle Selektoren beginnen mit .freddy-reviews — keine globalen Styles
 * fuer body, a, button, img, p, h1–h6 (FR-FE-004, AGENTS.md §5).
 * CSS-Custom-Properties auf .freddy-reviews (FR-FE-003, Style-Guide §0).
 *
 * Keine externe Abhaengigkeit, kein CDN (ADR-0004).
 * Kein React im Frontend (ADR-0004).
 *
 * Reduced-Motion: Animationen werden bei prefers-reduced-motion: reduce
 * vollstaendig deaktiviert (Style-Guide §0 Motion, FR-SLD-003).
 */

/* ==========================================================================
   Design-Tokens (CSS Custom Properties — Style-Guide §0)
   ========================================================================== */

.freddy-reviews {
    /* Farben */
    --fr-accent:          #2563eb;
    --fr-accent-hover:    #1d4ed8;
    --fr-accent-soft:     #eff6ff;
    --fr-on-accent:       #ffffff;
    --fr-success:         #16a34a;
    --fr-star:            #f59e0b;
    --fr-star-empty:      #e2e8f0;
    --fr-warning:         #d97706;
    --fr-danger:          #b91c1c;
    --fr-danger-soft:     #fbe6e7;
    --fr-card:            #ffffff;
    --fr-muted-bg:        #f8fafc;
    --fr-border:          #e2e8f0;
    --fr-border-strong:   #cbd5e1;
    --fr-ink:             #0f172a;
    --fr-ink-muted:       #64748b;
    --fr-ink-faint:       #94a3b8;

    /* Widget-spezifische ueberschreibbare Tokens (FR-FE-003).
       Farb-Vars werden vom Renderer nur ausgegeben, wenn der Nutzer sie
       gesetzt hat — hier stehen die Defaults, auf die sie sonst fallen. */
    --fr-text-color:        currentColor;
    --fr-muted-color:       #6b7280;
    --fr-secondary:         var(--fr-ink-muted);
    --fr-star-color:        #f59e0b;
    --fr-card-background:   #ffffff;
    --fr-widget-background: transparent;
    --fr-border-color:      var(--fr-border);
    --fr-border-width:      1px;
    --fr-button-bg:         var(--fr-accent);
    --fr-button-text:       var(--fr-on-accent);
    --fr-card-radius:       16px;
    --fr-card-padding:      24px;
    --fr-card-gap:          24px;
    --fr-star-size:         16px;
    --fr-star-gap:          2px;
    --fr-avatar-size:       40px;
    --fr-avatar-radius:     50%;
    --fr-author-font-size:  14px;
    --fr-button-radius:     8px;
    --fr-margin-top:        0px;
    --fr-margin-bottom:     0px;
    --fr-header-gap:        24px;
    --fr-font-size:         15px;
    --fr-font-weight:       400;
    --fr-line-height:       1.5;
    --fr-text-align:        start;

    /* Spacing */
    --fr-space-1: 4px;
    --fr-space-2: 8px;
    --fr-space-3: 12px;
    --fr-space-4: 16px;
    --fr-space-5: 20px;
    --fr-space-6: 24px;
    --fr-space-7: 32px;

    /* Radien */
    --fr-r-sm:   8px;
    --fr-r-md:   12px;
    --fr-r-lg:   16px;
    --fr-r-xl:   20px;
    --fr-r-pill: 999px;

    /* Schatten */
    --fr-shadow-card:    0 1px 2px rgba(15, 23, 42, 0.04);
    --fr-shadow-popover: 0 8px 24px rgba(15, 23, 42, 0.08);

    /* Basisstile */
    color: var(--fr-text-color);
    background: var(--fr-widget-background, transparent);
    margin-block: var(--fr-margin-top, 0) var(--fr-margin-bottom, 0);
    font-size: var(--fr-font-size, 15px);
    font-weight: var(--fr-font-weight, 400);
    line-height: var(--fr-line-height, 1.5);
    text-align: var(--fr-text-align, start);
    box-sizing: border-box;
}

.freddy-reviews *,
.freddy-reviews *::before,
.freddy-reviews *::after {
    box-sizing: inherit;
}

/* ==========================================================================
   Header
   ========================================================================== */

.freddy-reviews__header {
    margin-block-end: var(--fr-header-gap, var(--fr-space-6));
}

/* Optionales, vom Nutzer hinterlegtes Firmenlogo (Bild-URL) — unabhaengig vom
   Firmennamen schaltbar. Skaliert defensiv, damit beliebige Uploads passen. */
.freddy-reviews__business-logo {
    display: block;
    max-height: 48px;
    max-width: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-block-end: var(--fr-space-2);
}

.freddy-reviews--badge .freddy-reviews__business-logo {
    max-height: calc(40px * var(--fr-badge-scale, 1));
    margin-inline: auto;
}

/* Pflicht-Foto-Quellenangabe (Beitragender) beim Google-Orts-Foto — dezent. */
.freddy-reviews__business-logo-credit {
    display: block;
    font-size: 11px;
    line-height: 1.3;
    color: var(--fr-ink-muted);
    margin-block-start: 2px;
}

.freddy-reviews--badge .freddy-reviews__business-logo-credit {
    text-align: center;
}

.freddy-reviews__place-name {
    /* Kein globaler h2-Stil; nur innerhalb .freddy-reviews */
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: var(--fr-ink);
    margin: 0 0 var(--fr-space-2) 0;
}

.freddy-reviews__rating-overview {
    display: flex;
    align-items: center;
    gap: var(--fr-space-2);
    flex-wrap: wrap;
}

.freddy-reviews__rating-score {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    color: var(--fr-ink);
}

.freddy-reviews__rating-count {
    font-size: 13px;
    color: var(--fr-secondary, var(--fr-ink-muted));
}

/* ==========================================================================
   Grid-Layout
   ========================================================================== */

.freddy-reviews__grid {
    display: grid;
    grid-template-columns: repeat(var(--fr-grid-cols, 3), 1fr);
    gap: var(--fr-card-gap);
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .freddy-reviews__grid {
        grid-template-columns: repeat(
            min(var(--fr-grid-cols, 3), 2),
            1fr
        );
    }
}

@media (max-width: 640px) {
    .freddy-reviews__grid {
        grid-template-columns: 1fr;
    }
}

/* Gleiche Kartenhoehe (equal_height): Karten fuellen die Zeilenhoehe. */
.freddy-reviews__grid--equal-height .freddy-reviews__card {
    height: 100%;
}

/* Masonry (nur Grid, AC-DES-Layout): Spalten-Layout statt Raster-Zeilen —
   Karten unterschiedlicher Hoehe "fliessen" ohne Zeilenluecken. */
.freddy-reviews--masonry .freddy-reviews__grid {
    display: block;
    column-count: var(--fr-grid-cols, 3);
    column-gap: var(--fr-card-gap);
}

.freddy-reviews--masonry .freddy-reviews__grid > * {
    break-inside: avoid;
    margin-bottom: var(--fr-card-gap);
}

@media (max-width: 1024px) {
    .freddy-reviews--masonry .freddy-reviews__grid {
        column-count: min(var(--fr-grid-cols, 3), 2);
    }
}

@media (max-width: 640px) {
    .freddy-reviews--masonry .freddy-reviews__grid {
        column-count: 1;
    }
}

/* ==========================================================================
   Listen-Layout
   ========================================================================== */

.freddy-reviews__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fr-card-gap);
}

.freddy-reviews__list-item {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Dichte (nur Listen-Layout, AC-DES-Layout): steuert Karten-Abstand +
   Innenabstand ueber die bestehenden --fr-card-gap/--fr-card-padding-Tokens. */
.freddy-reviews--list.freddy-reviews--density-compact {
    --fr-card-gap: 12px;
    --fr-card-padding: 12px;
}

.freddy-reviews--list.freddy-reviews--density-large {
    --fr-card-gap: 32px;
    --fr-card-padding: 32px;
}

/* ==========================================================================
   Review-Karte
   ========================================================================== */

/* Doppelte Root-Klasse (.freddy-reviews .freddy-reviews__card) für höhere
   Spezifität (0,2,0): manche Page-Builder-Themes (z. B. Futurio:
   `.page-builders article { padding:0 }`, 0,1,1) resetten sonst das
   Karten-Padding, weil die Karte ein <article> ist. So gewinnt FR wieder. */
.freddy-reviews .freddy-reviews__card {
    background: var(--fr-card-background);
    border-radius: var(--fr-card-radius);
    padding: var(--fr-card-padding);
    box-shadow: var(--fr-shadow-card);
    border: var(--fr-border-width, 1px) solid var(--fr-border-color, var(--fr-border));
    display: flex;
    flex-direction: column;
    gap: var(--fr-space-3);
}

/* Karten-Grundstil (AC-DES-Card): shadow = weicher Schatten/kaum Rahmen,
   outlined = sichtbarer Rahmen ohne Schatten, flat = weder noch. */
.freddy-reviews--card-shadow .freddy-reviews__card {
    box-shadow: var(--fr-shadow-card);
    border-color: transparent;
}

.freddy-reviews--card-outlined .freddy-reviews__card {
    box-shadow: none;
    border-color: var(--fr-border-color, var(--fr-border-strong));
}

.freddy-reviews--card-flat .freddy-reviews__card {
    box-shadow: none;
    border-color: transparent;
}

/* Hover-Effekt (AC-DES-Card): Transitions werden unter Reduced-Motion
   global auf ~0 gekappt (siehe Reduced-Motion-Block); die Transform-Endzustaende
   selbst werden dort zusaetzlich entfernt. */
.freddy-reviews--hover-lift .freddy-reviews__card,
.freddy-reviews--hover-scale .freddy-reviews__card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.freddy-reviews--hover-lift .freddy-reviews__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--fr-shadow-popover);
}

.freddy-reviews--hover-shadow .freddy-reviews__card:hover {
    box-shadow: var(--fr-shadow-popover);
}

.freddy-reviews--hover-scale .freddy-reviews__card:hover {
    transform: scale(1.02);
}

/* Dekorative Anfuehrungszeichen (AC-DES-Card): rein optisch, kein Content-Ersatz. */
.freddy-reviews--quotes .freddy-reviews__text::before {
    content: "\201C";
    display: block;
    font-size: 40px;
    line-height: 1;
    font-weight: 800;
    color: var(--fr-accent);
    margin-block-end: var(--fr-space-1);
}

/* Mobiler Karten-Abstand/Innenabstand (nur wenn mobileSeparate gesetzt ist;
   sonst fallen die -mobile-Vars weg und die normalen Tokens greifen weiter). */
@media (max-width: 640px) {
    .freddy-reviews__grid,
    .freddy-reviews__list {
        gap: var(--fr-card-gap-mobile, var(--fr-card-gap));
    }

    .freddy-reviews .freddy-reviews__card {
        padding: var(--fr-card-padding-mobile, var(--fr-card-padding));
    }
}

/* ==========================================================================
   Autoren-Attribution (§2.6, AC-ATT-2) — nicht ausblendbar
   ========================================================================== */

.freddy-reviews__author {
    display: flex;
    align-items: center;
    gap: var(--fr-space-3);
}

.freddy-reviews__author-photo {
    width: var(--fr-avatar-size, 40px);
    height: var(--fr-avatar-size, 40px);
    border-radius: var(--fr-avatar-radius, 50%);
    object-fit: cover;
    flex-shrink: 0;
}

.freddy-reviews__author-initials {
    width: var(--fr-avatar-size, 40px);
    height: var(--fr-avatar-size, 40px);
    border-radius: var(--fr-avatar-radius, 50%);
    background: var(--fr-avatar-bg, var(--fr-accent-soft));
    color: var(--fr-avatar-color, var(--fr-accent));
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Eckiger Avatar (AC-DES-Avatar): Radius-Override, --fr-avatar-radius greift
   in author-photo/-initials oben automatisch mit. */
.freddy-reviews--avatar-square {
    --fr-avatar-radius: 6px;
}

.freddy-reviews__author-meta {
    display: flex;
    flex-direction: column;
    gap: var(--fr-space-1);
    min-width: 0;
}

.freddy-reviews__author-name {
    font-size: var(--fr-author-font-size, 14px);
    font-weight: 600;
    color: var(--fr-ink);
    text-decoration: none;
    /* Kein globaler a-Reset; nur innerhalb .freddy-reviews */
}

.freddy-reviews__author-name:hover {
    text-decoration: underline;
}

.freddy-reviews__review-link {
    font-size: 12px;
    color: var(--fr-secondary, var(--fr-ink-muted));
    text-decoration: none;
}

.freddy-reviews__review-link:hover {
    color: var(--fr-accent);
    text-decoration: underline;
}

/* ==========================================================================
   Sterne (A11Y-001)
   ========================================================================== */

.freddy-reviews__stars {
    display: flex;
    gap: var(--fr-star-gap, 2px);
}

.freddy-reviews__star {
    font-size: var(--fr-star-size, 16px);
    line-height: 1;
}

.freddy-reviews__star--filled {
    color: var(--fr-star-color, var(--fr-star));
}

.freddy-reviews__star--empty {
    color: var(--fr-star-empty);
}

/* Screen-Reader-Only Hilfsklasse (nur innerhalb des Widgets noetig) */
.freddy-reviews .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==========================================================================
   Datum
   ========================================================================== */

.freddy-reviews__date {
    font-size: 13px;
    color: var(--fr-secondary, var(--fr-ink-muted));
}

/* ==========================================================================
   Uebersetzungs-Badge (§31, AC-I18N-1)
   ========================================================================== */

.freddy-reviews__translated-badge {
    display: inline-block;
    font-size: 11px;
    /* --fr-ink-faint (#94a3b8) fällt auf Weiß unter 4.5:1 → --fr-ink-muted
       (#64748b, 4.76:1) für WCAG 1.4.3 AA. Bewusst NICHT auf --fr-secondary
       umgestellt: ein per Design-Override gesetztes --fr-secondary koennte
       den geprueften Kontrast wieder unterschreiten. */
    color: var(--fr-ink-muted);
    font-style: italic;
}

/* ==========================================================================
   Review-Text + Read-more (FR-FE-008, A11Y-006, AC-FE-3)
   ========================================================================== */

.freddy-reviews__text {
    font-size: 15px;
    line-height: 22px;
    color: var(--fr-text-color);
    margin: 0;
    /* Kein globaler p-Reset */
}

/*
 * Truncierter Text: wird per JS mit .is-expanded getoggled.
 * OHNE JS: voller Text sichtbar (keine height/overflow-Begrenzung im Basis-Zustand).
 * MIT JS: JS fuegt .is-truncated via data-attribute hinzu.
 */
.freddy-reviews__text--truncated {
    /* JS-off: voller Text */
}

.freddy-reviews__text--truncated.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.freddy-reviews__read-more {
    /* Kein globaler button-Reset */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--fr-accent);
    font-weight: 600;
    text-decoration: underline;
    /* Fokus sichtbar (AC-FE-3, WCAG 2.2 AA) */
}

.freddy-reviews__read-more:focus-visible {
    outline: 2px solid var(--fr-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.freddy-reviews__read-more:hover {
    color: var(--fr-accent-hover);
}

/* ==========================================================================
   Widget-Buttons (§19)
   ========================================================================== */

.freddy-reviews__buttons {
    display: flex;
    gap: var(--fr-space-3);
    flex-wrap: wrap;
    margin-block-start: var(--fr-space-6);
}

.freddy-reviews__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--fr-space-2) var(--fr-space-4);
    border-radius: var(--fr-button-radius, 8px);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    /* Fokus sichtbar (WCAG 2.2 AA) */
}

.freddy-reviews__button:focus-visible {
    outline: 2px solid var(--fr-accent);
    outline-offset: 2px;
}

/* Buttons getrennt stylebar: PRIMÄR = „Alle Bewertungen ansehen" (--maps,
   d_btn_*), SEKUNDÄR = „Bewerten" (--review, d_rbtn_*). Jede Rolle setzt ihre
   effektiven Farben als lokale Vars; die Sekundär-Rolle fällt ohne eigene Werte
   auf die Primär-Button-Farben (und dann den Akzent) zurück. Hover: explizite
   Hover-Farbe ODER automatisch aus der Button-Farbe abgeleitet (brightness). */
.freddy-reviews__button--maps {
    --fr-btn-c:  var(--fr-button-bg, var(--fr-accent));
    --fr-btn-t:  var(--fr-button-text, var(--fr-on-accent));
    --fr-btn-hc: var(--fr-button-hover-bg, var(--fr-btn-c));
    --fr-btn-ht: var(--fr-button-hover-text, var(--fr-btn-t));
    --fr-btn-hf: var(--fr-button-hover-filter, brightness(0.92));
    --fr-btn-ghost-hc: var(--fr-button-hover-bg, var(--fr-accent-soft));
}
.freddy-reviews__button--review {
    --fr-btn-c:  var(--fr-rbtn-bg, var(--fr-button-bg, var(--fr-accent)));
    --fr-btn-t:  var(--fr-rbtn-text, var(--fr-button-text, var(--fr-on-accent)));
    --fr-btn-hc: var(--fr-rbtn-hover-bg, var(--fr-btn-c));
    --fr-btn-ht: var(--fr-rbtn-hover-text, var(--fr-btn-t));
    --fr-btn-hf: var(--fr-rbtn-hover-filter, brightness(0.92));
    --fr-btn-ghost-hc: var(--fr-rbtn-hover-bg, var(--fr-accent-soft));
}

/* Solid */
.freddy-reviews--btn-solid .freddy-reviews__button--maps,
.freddy-reviews--rbtn-solid .freddy-reviews__button--review {
    background: var(--fr-btn-c);
    color: var(--fr-btn-t);
    border-color: transparent;
}
.freddy-reviews--btn-solid .freddy-reviews__button--maps:hover,
.freddy-reviews--rbtn-solid .freddy-reviews__button--review:hover {
    background: var(--fr-btn-hc);
    color: var(--fr-btn-ht);
    filter: var(--fr-btn-hf);
}

/* Outline */
.freddy-reviews--btn-outline .freddy-reviews__button--maps,
.freddy-reviews--rbtn-outline .freddy-reviews__button--review {
    background: transparent;
    color: var(--fr-btn-c);
    border-color: var(--fr-btn-c);
}
.freddy-reviews--btn-outline .freddy-reviews__button--maps:hover,
.freddy-reviews--rbtn-outline .freddy-reviews__button--review:hover {
    background: var(--fr-btn-hc);
    color: var(--fr-btn-ht);
}

/* Ghost */
.freddy-reviews--btn-ghost .freddy-reviews__button--maps,
.freddy-reviews--rbtn-ghost .freddy-reviews__button--review {
    background: transparent;
    color: var(--fr-btn-c);
    border-color: transparent;
}
.freddy-reviews--btn-ghost .freddy-reviews__button--maps:hover,
.freddy-reviews--rbtn-ghost .freddy-reviews__button--review:hover {
    background: var(--fr-btn-ghost-hc);
    color: var(--fr-btn-ht);
}

/* ==========================================================================
   Optionales "Google Reviews"-Marken-Element (§Marke)
   Abschaltbar/konfigurierbar — im Gegensatz zur Pflicht-Attribution unten.
   ========================================================================== */

.freddy-reviews__brand {
    display: flex;
    flex-direction: column;
    gap: var(--fr-space-2);
    padding: var(--fr-space-4);
    background: var(--fr-muted-bg);
    border: 1px solid var(--fr-border);
    border-radius: var(--fr-r-md);
}

/* Abstand richtet sich nach der Position (oben: nach unten, unten: nach oben).
   Oben ersetzt das Marken-Element den klassischen Header — nutzt daher
   denselben --fr-header-gap-Abstand zu den Reviews. */
.freddy-reviews__brand--top {
    margin-block-end: var(--fr-header-gap, var(--fr-card-gap));
}

.freddy-reviews__brand--bottom {
    margin-block-start: var(--fr-card-gap);
}

.freddy-reviews__brand--compact {
    flex-direction: row;
    align-items: center;
}

.freddy-reviews__brand-head {
    display: flex;
    align-items: center;
    gap: var(--fr-space-2);
}

/* Doppelte Root-Klasse (Spezifität 0,2,0): Page-Builder-Themes setzen oft
   `.elementor img { height:auto }` (0,1,1) → das riesige Google-Wordmark. So
   gewinnt FR wieder. Größe über --fr-brand-logo-size einstellbar. */
.freddy-reviews .freddy-reviews__brand-logo-img {
    display: block;
    width: auto;
    height: var(--fr-brand-logo-size, 24px);
    max-width: 100%;
}

.freddy-reviews .freddy-reviews__brand--logo-maps .freddy-reviews__brand-logo-img {
    height: var(--fr-brand-logo-size, 18px);
}

.freddy-reviews__brand-label {
    font-weight: 600;
    color: var(--fr-ink);
}

.freddy-reviews__brand-logo-text {
    font-weight: 600;
    color: var(--fr-ink-muted);
}

.freddy-reviews__brand-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fr-space-2) var(--fr-space-3);
}

.freddy-reviews__brand-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--fr-ink);
}

.freddy-reviews__brand-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--fr-space-2);
}

.freddy-reviews__brand-score {
    font-weight: 700;
    color: var(--fr-ink);
}

.freddy-reviews__brand-count {
    color: var(--fr-secondary, var(--fr-ink-muted));
    font-size: 14px;
}

.freddy-reviews__brand-body .freddy-reviews__button--review {
    margin-inline-start: auto;
}

/* ==========================================================================
   Google-Maps-Attribution (Pflicht, AC-ATT-1, §2.5, A11Y-007)
   Kein display:none, kein visibility:hidden, kein opacity:0 — nie!
   ========================================================================== */

.freddy-reviews__attribution {
    margin-block-start: var(--fr-space-4);
}

/* Im Badge-Layout sitzt die Pflicht-Attribution unterhalb der (teils
   eigenstaendig eingefaerbten) Badge-Box — etwas mehr Abstand haelt sie
   optisch abgesetzt und immer lesbar (AC-ATT-1). */
.freddy-reviews--badge > .freddy-reviews__attribution {
    margin-block-start: var(--fr-space-4);
}

.freddy-reviews__attribution--google {
    display: flex;
    align-items: center;
}

.freddy-reviews__attribution-google-text {
    font-size: 12px;
    color: var(--fr-ink-muted);
    font-weight: 500;
}

/* Offizielles Google-Maps-Logo (SVG) — Seitenverhältnis nie verzerren (§2.5). */
.freddy-reviews__attribution-google-logo {
    display: block;
    width: auto;
    height: 18px;
    max-width: 100%;
}

.freddy-reviews__attribution--google a {
    text-decoration: none;
    color: inherit;
}

.freddy-reviews__attribution--google a:hover .freddy-reviews__attribution-google-text {
    text-decoration: underline;
}

/* ==========================================================================
   Filter-Hinweis (§2.7)
   ========================================================================== */

.freddy-reviews__filter-notice {
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: var(--fr-r-md);
    padding: var(--fr-space-3) var(--fr-space-4);
    margin-block-end: var(--fr-space-4);
}

.freddy-reviews__filter-notice p {
    margin: 0;
    font-size: 13px;
    /* --fr-warning (#d97706) auf #fefce8 = 3.08:1 (unter AA). Dunkleres Amber
       #92400e = 6.84:1 für WCAG 1.4.3 AA. */
    color: #92400e;
}

/* ==========================================================================
   Empty-State (FR-FE-005, AC-FE-2)
   ========================================================================== */

.freddy-reviews__empty-state {
    padding: var(--fr-space-7) var(--fr-space-4);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fr-space-4);
}

.freddy-reviews__empty-text {
    font-size: 15px;
    color: var(--fr-secondary, var(--fr-ink-muted));
    margin: 0;
}

/* ==========================================================================
   Error-State (FR-FE-006/007)
   ========================================================================== */

.freddy-reviews__error-state {
    padding: var(--fr-space-6) var(--fr-space-4);
    text-align: center;
}

.freddy-reviews__error-text {
    font-size: 15px;
    color: var(--fr-secondary, var(--fr-ink-muted));
    margin: 0;
}

/* ==========================================================================
   Badge-Layout (§13 FR-SCG-005, AC-FE-1) — 7 Varianten
   ========================================================================== */

/*
 * Struktur: .freddy-reviews--badge ist nur der Ausrichtungs-Rahmen
 * (justify-content per Align-Modifier). Die eigentliche optische "Box"
 * (Hintergrund/Rahmen/Radius/Schatten/Innenabstand) traegt IMMER das
 * .freddy-reviews__badge-inner-Element ueber seine zusaetzliche
 * Varianten-Klasse (__badge-pill/__badge-card/…) — so entsteht bei keiner
 * Variante ein doppelter Rahmen.
 */
/* Spalten-Layout: Badge-Box OBEN, Pflicht-Attribution DARUNTER (nicht rechts
   daneben). Die Ausrichtung (links/zentriert/rechts) wirkt daher als
   align-items auf der Querachse — so sitzt „Google Maps" sauber unter dem
   Badge statt als Flex-Nachbar rechts (AC-ATT-1, Attribution bleibt sichtbar). */
.freddy-reviews--badge {
    display: flex;
    flex-direction: column;
    width: 100%;
    --fr-badge-scale: 1;
}

.freddy-reviews--badge-s {
    --fr-badge-scale: 0.82;
}

.freddy-reviews--badge-m {
    --fr-badge-scale: 1;
}

.freddy-reviews--badge-l {
    --fr-badge-scale: 1.24;
}

.freddy-reviews--badge-align-left {
    align-items: flex-start;
}

.freddy-reviews--badge-align-center {
    align-items: center;
}

.freddy-reviews--badge-align-right {
    align-items: flex-end;
}

.freddy-reviews__badge-inner {
    box-sizing: border-box;
    max-width: 100%;
}

/* Schatten/Rahmen sind pro Badge zuschaltbare Modifier (badge.shadow/border) —
   unabhaengig von den generellen --shadow-*-Karten-Stufen der Reviewkarten.
   Der Schatten enthaelt eine feine 1px-Kontur (ring), damit eine weisse Badge-Box
   auch auf hellem Seitenhintergrund immer sichtbar absetzt (zuvor kaum zu sehen). */
.freddy-reviews--badge-shadow .freddy-reviews__badge-inner {
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 2px 10px rgba(15, 23, 42, 0.12);
}

.freddy-reviews--badge-border .freddy-reviews__badge-inner {
    border: var(--fr-border-width, 1px) solid var(--fr-border-color, var(--fr-border));
}

/* Gemeinsame Bausteine (in mehreren Varianten wiederverwendet) --------- */

.freddy-reviews__badge-place {
    font-size: 14px;
    font-weight: 600;
    color: var(--fr-badge-text, var(--fr-ink));
    margin: 0;
}

.freddy-reviews__badge-rating {
    display: flex;
    align-items: center;
    gap: calc(11px * var(--fr-badge-scale, 1));
}

.freddy-reviews__badge-score {
    font-size: calc(30px * var(--fr-badge-scale, 1));
    font-weight: 800;
    line-height: 1;
    color: var(--fr-badge-text, var(--fr-ink));
}

.freddy-reviews__badge-count {
    font-size: calc(13px * var(--fr-badge-scale, 1));
    color: var(--fr-ink-muted);
    margin: 0;
}

/* Sterne-Farbe im Badge: eigener --fr-badge-star-Token, faellt auf die
   normale Sterne-Farbe zurueck (AC-DES-Badge). */
.freddy-reviews--badge .freddy-reviews__star--filled {
    color: var(--fr-badge-star, var(--fr-star-color, var(--fr-star)));
}

/* Akzentfarbe im Badge (badge.accent) tint die Gesamtnote und den
   „Alle Bewertungen ansehen"-Button — analog zur Karten-Akzentfarbe. Ohne
   gesetzten badge.accent faellt es sauber auf den globalen Akzent zurueck. */
.freddy-reviews--badge .freddy-reviews__badge-score {
    color: var(--fr-badge-accent, inherit);
}

.freddy-reviews--badge .freddy-reviews__button--maps {
    background: var(--fr-badge-accent, var(--fr-button-bg, var(--fr-accent)));
}

.freddy-reviews--badge .freddy-reviews__button--maps:hover {
    background: var(--fr-badge-accent, var(--fr-accent-hover));
    filter: brightness(0.93);
}

/* badge.showLogo = false: das dekorative Google-„G" im Badge-Koerper
   ausblenden. Die Pflicht-Quellenangabe (img.__attribution-google-logo,
   separater Block) bleibt unberuehrt und immer sichtbar (AC-ATT-1). */
.freddy-reviews--badge-nologo .freddy-reviews__badge-logo,
.freddy-reviews--badge-nologo .freddy-reviews__badge-inline-src,
.freddy-reviews--badge-nologo .freddy-reviews__badge-inner .freddy-reviews__g-icon {
    display: none;
}

/* Quellenangabe-Variante fuer dunkle Hintergruende: das monochrome graue
   „Google Maps"-Logo wird weiss dargestellt, damit es lesbar bleibt. Die
   Quellenangabe wird NIE ausgeblendet — nur die Farbe wechselt (AC-ATT-1). */
.freddy-reviews--attr-ondark .freddy-reviews__attribution-google-logo {
    filter: brightness(0) invert(1);
}

.freddy-reviews--attr-ondark .freddy-reviews__attribution-google-text {
    color: #ffffff;
}

/* Score+Sterne in einer Zeile, Anzahl in der naechsten (Pille/Floating):
   .badge-count bekommt flex-basis:100%, was in einem wrappenden Flex-
   Container einen Zeilenumbruch erzwingt — ohne zusaetzliches Wrapper-Div. */
.freddy-reviews__badge-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: calc(9px * var(--fr-badge-scale, 1));
    row-gap: 3px;
}

.freddy-reviews__badge-main .freddy-reviews__badge-count {
    flex-basis: 100%;
}

.freddy-reviews__badge-logo {
    display: flex;
    flex-shrink: 0;
}

/* Ausrichtung fuer Block-Varianten (Karte/Minimal/Siegel): links/rechts
   verschiebt zusaetzlich zum aeusseren justify-content auch die Kind-Elemente
   und den Text innerhalb der Box (AC-DES-Badge). */
.freddy-reviews--badge-align-center .freddy-reviews__badge-card,
.freddy-reviews--badge-align-center .freddy-reviews__badge-minimal,
.freddy-reviews--badge-align-center .freddy-reviews__badge-seal {
    align-items: center;
    text-align: center;
}

.freddy-reviews--badge-align-left .freddy-reviews__badge-card,
.freddy-reviews--badge-align-left .freddy-reviews__badge-minimal,
.freddy-reviews--badge-align-left .freddy-reviews__badge-seal {
    align-items: flex-start;
    text-align: left;
}

.freddy-reviews--badge-align-right .freddy-reviews__badge-card,
.freddy-reviews--badge-align-right .freddy-reviews__badge-minimal,
.freddy-reviews--badge-align-right .freddy-reviews__badge-seal {
    align-items: flex-end;
    text-align: right;
}

/* 1) Kompakt-Pille --------------------------------------------------- */

.freddy-reviews__badge-pill {
    display: inline-flex;
    align-items: center;
    gap: calc(14px * var(--fr-badge-scale, 1));
    max-width: 100%;
    background: var(--fr-badge-bg, var(--fr-card-background));
    color: var(--fr-badge-text, var(--fr-ink));
    border-radius: var(--fr-badge-radius, 999px);
    padding: calc(11px * var(--fr-badge-scale, 1)) calc(22px * var(--fr-badge-scale, 1));
}

.freddy-reviews__badge-pill .freddy-reviews__badge-count {
    color: var(--fr-ink-muted);
}

/* 2) Karte ------------------------------------------------------------ */

.freddy-reviews__badge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: min(320px, 100%);
    box-sizing: border-box;
    background: var(--fr-badge-bg, var(--fr-card-background));
    color: var(--fr-badge-text, var(--fr-ink));
    border-radius: var(--fr-badge-radius, var(--fr-r-lg));
    padding: calc(22px * var(--fr-badge-scale, 1));
    gap: calc(8px * var(--fr-badge-scale, 1));
}

.freddy-reviews__badge-card .freddy-reviews__badge-place {
    font-size: calc(15px * var(--fr-badge-scale, 1));
    font-weight: 700;
}

.freddy-reviews__badge-card .freddy-reviews__button {
    margin-block-start: calc(7px * var(--fr-badge-scale, 1));
}

/* 3) Schwebend / Floating ---------------------------------------------
   Bewusst "in normal flow": kein position:fixed/absolute, damit das
   Badge nie ueber anderem Seiteninhalt schwebt oder die Pflicht-Attribution
   verdeckt — nur die Elevation (starker Schatten) signalisiert "floating". */

.freddy-reviews__badge-floating {
    display: inline-flex;
    align-items: center;
    gap: calc(10px * var(--fr-badge-scale, 1));
    max-width: 100%;
    background: var(--fr-badge-bg, var(--fr-card-background));
    color: var(--fr-badge-text, var(--fr-ink));
    border-radius: var(--fr-badge-radius, var(--fr-r-lg));
    padding: calc(10px * var(--fr-badge-scale, 1)) calc(14px * var(--fr-badge-scale, 1));
    /* Immer elevated, unabhaengig vom badge.shadow-Toggle — das ist die
       Kernidentitaet dieser Variante; steht bewusst NACH dem generischen
       --badge-shadow-Toggle im Quelltext, damit es diesen ueberstimmt. */
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.freddy-reviews__badge-floating .freddy-reviews__badge-main .freddy-reviews__badge-score {
    font-size: calc(17px * var(--fr-badge-scale, 1));
}

.freddy-reviews__badge-floating .freddy-reviews__badge-main .freddy-reviews__badge-count {
    flex-basis: 100%;
    font-size: calc(11px * var(--fr-badge-scale, 1));
    color: var(--fr-ink-muted);
}

/* 4) Groß / Hero -------------------------------------------------------- */

.freddy-reviews__badge-hero {
    display: flex;
    align-items: center;
    gap: calc(24px * var(--fr-badge-scale, 1));
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    background: var(--fr-badge-bg, var(--fr-card-background));
    color: var(--fr-badge-text, var(--fr-ink));
    border-radius: var(--fr-badge-radius, var(--fr-r-lg));
    padding: calc(22px * var(--fr-badge-scale, 1));
}

.freddy-reviews__badge-hero-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    text-align: center;
}

.freddy-reviews__badge-hero-score .freddy-reviews__badge-score {
    font-size: calc(56px * var(--fr-badge-scale, 1));
    line-height: 0.92;
}

.freddy-reviews__badge-hero-score .freddy-reviews__stars {
    justify-content: center;
    margin-block-start: 6px;
}

.freddy-reviews__badge-hero-body {
    flex: 1;
    min-width: 0;
    border-inline-start: 1px solid var(--fr-border-color, var(--fr-border));
    padding-inline-start: calc(24px * var(--fr-badge-scale, 1));
}

.freddy-reviews__badge-hero-body .freddy-reviews__badge-place {
    display: block;
    font-weight: 800;
    font-size: calc(19px * var(--fr-badge-scale, 1));
    letter-spacing: -0.01em;
}

.freddy-reviews__badge-hero-body .freddy-reviews__badge-count {
    display: block;
    font-size: calc(13px * var(--fr-badge-scale, 1));
    margin-block-start: calc(5px * var(--fr-badge-scale, 1));
}

.freddy-reviews__badge-hero-body .freddy-reviews__button {
    margin-block-start: calc(14px * var(--fr-badge-scale, 1));
}

@media (max-width: 480px) {
    .freddy-reviews__badge-hero {
        flex-direction: column;
        text-align: center;
    }

    .freddy-reviews__badge-hero-body {
        border-inline-start: none;
        padding-inline-start: 0;
        padding-block-start: calc(16px * var(--fr-badge-scale, 1));
        border-block-start: 1px solid var(--fr-border-color, var(--fr-border));
        text-align: center;
    }
}

/* 5) Inline-Zeile -------------------------------------------------------- */

.freddy-reviews__badge-inline {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(8px * var(--fr-badge-scale, 1));
    max-width: 100%;
    background: var(--fr-badge-bg, transparent);
    color: var(--fr-badge-text, var(--fr-ink));
    border-radius: var(--fr-badge-radius, var(--fr-r-pill));
    padding: calc(9px * var(--fr-badge-scale, 1)) calc(15px * var(--fr-badge-scale, 1));
    font-size: calc(13px * var(--fr-badge-scale, 1));
}

.freddy-reviews__badge-inline .freddy-reviews__badge-score {
    font-size: 1em;
    font-weight: 800;
}

.freddy-reviews__badge-inline .freddy-reviews__badge-count {
    font-size: 1em;
    color: var(--fr-ink-muted);
}

.freddy-reviews__badge-inline-src {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* 6) Minimal -------------------------------------------------------- */

.freddy-reviews__badge-minimal {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: calc(7px * var(--fr-badge-scale, 1));
    max-width: 100%;
    box-sizing: border-box;
    background: var(--fr-badge-bg, transparent);
    color: var(--fr-badge-text, var(--fr-ink));
    border-radius: var(--fr-badge-radius, var(--fr-r-md));
    padding: calc(11px * var(--fr-badge-scale, 1)) calc(22px * var(--fr-badge-scale, 1));
}

.freddy-reviews__badge-minimal .freddy-reviews__badge-count {
    font-size: calc(12px * var(--fr-badge-scale, 1));
    color: var(--fr-ink-muted);
}

/* 7) Siegel / Emblem -------------------------------------------------------- */

.freddy-reviews__badge-seal {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: calc(13px * var(--fr-badge-scale, 1));
}

.freddy-reviews__badge-seal-disc {
    width: calc(158px * var(--fr-badge-scale, 1));
    height: calc(158px * var(--fr-badge-scale, 1));
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--fr-badge-bg, var(--fr-card-background));
    /* Der Ring ist Teil der Siegel-Identitaet — immer sichtbar, unabhaengig
       vom generischen badge.border-Toggle. */
    border: 3px solid var(--fr-badge-accent, var(--fr-accent));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(12px * var(--fr-badge-scale, 1));
}

.freddy-reviews--badge-shadow .freddy-reviews__badge-seal-disc {
    box-shadow: var(--fr-shadow-card);
}

.freddy-reviews__badge-seal-disc .freddy-reviews__badge-score {
    font-size: calc(34px * var(--fr-badge-scale, 1));
    margin-block-start: 4px;
}

.freddy-reviews__badge-seal-disc .freddy-reviews__stars {
    margin-block-start: 3px;
}

.freddy-reviews__badge-seal-label {
    display: block;
    font-size: calc(9px * var(--fr-badge-scale, 1));
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fr-ink-muted);
    margin-block-start: 5px;
}

.freddy-reviews__badge-seal .freddy-reviews__badge-count {
    font-size: calc(12px * var(--fr-badge-scale, 1));
}

/* ==========================================================================
   Karten-Schatten-Staerke (AC-DES-Card): steuert --fr-shadow-card, das
   .freddy-reviews__card und .freddy-reviews__badge-inner bereits konsumieren.
   ========================================================================== */

.freddy-reviews--shadow-none {
    --fr-shadow-card: none;
}

.freddy-reviews--shadow-sm {
    --fr-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.freddy-reviews--shadow-md {
    --fr-shadow-card: 0 4px 10px rgba(15, 23, 42, 0.1);
}

.freddy-reviews--shadow-lg {
    --fr-shadow-card: 0 16px 32px rgba(15, 23, 42, 0.18);
}

/* ==========================================================================
   Reduced-Motion (Style-Guide §0 Motion, FR-SLD-003)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .freddy-reviews *,
    .freddy-reviews *::before,
    .freddy-reviews *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Nicht nur die Transition kappen, sondern den Hover-Endzustand selbst
       entfernen — keine sichtbare Positions-/Groessenaenderung mehr. */
    .freddy-reviews--hover-lift .freddy-reviews__card:hover,
    .freddy-reviews--hover-scale .freddy-reviews__card:hover {
        transform: none;
    }
}