/* FS Bewertungen 0.2.5-D – Google-Bewertungen vom eigenen Server. Farben und Schriften über --fp-Token des Child-Themes. */

.fsbw-slider,
.fsbw-badge,
.fsbw-footer,
.fsbw-fenster {
	--fsbw-stern: var(--fp-bewertung-stern, #f4b400);
	--fsbw-karte-bg: var(--fp-bg-white, #fff);
	--fsbw-rand: var(--fp-surface-border, var(--fp-border-soft, rgba(0, 0, 0, .08)));
	--fsbw-text: var(--fp-text, #222);
	--fsbw-muted: var(--fp-form-text-muted, #6b6b6b);
	--fsbw-radius: var(--fp-radius, 14px);
	--fsbw-schatten: var(--fp-shadow-soft, 0 6px 20px rgba(0, 0, 0, .08));
	font-family: var(--fp-font-body, inherit);
	color: var(--fsbw-text);
}

/* Sterne */
.fsbw-sterne { display: inline-flex; gap: 2px; color: var(--fsbw-stern); line-height: 1; }
.fsbw-stern { width: 18px; height: 18px; fill: currentColor; }
.fsbw-sterne--gross .fsbw-stern { width: 28px; height: 28px; }
.fsbw-stern--leer { fill: transparent; stroke: currentColor; stroke-width: 1.5; }
.fsbw-stern--halb { fill: transparent; stroke: currentColor; stroke-width: 1.5; }
.fsbw-stern--halb path { fill: currentColor; clip-path: inset(0 50% 0 0); }

/* Google-Zeichen */
.fsbw-google { width: 20px; height: 20px; flex: 0 0 auto; }
.fsbw-kopf__google, .fsbw-badge__google, .fsbw-footer__knopf { display: inline-flex; align-items: center; gap: 6px; }
.fsbw-kopf__google > span, .fsbw-badge__google > span { font-weight: 600; color: var(--fsbw-muted); }

/* Kopf (Slider und Fenster) */
.fsbw-kopf { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin-bottom: 20px; }
/* 0.2.3-D (Danny, Vorbild Trustindex): Kopfblock links als Spalte, Karten rechts daneben; auf dem Handy untereinander. */
.fsbw-slider { display: flex; align-items: center; gap: 24px; }
.fsbw-slider > .fsbw-kopf { flex: 0 0 220px; margin-bottom: 0; }
.fsbw-slider > .fsbw-kopf .fsbw-kopf__wertung { font-size: clamp(20px, 2vw, 26px); }
.fsbw-slider > .fsbw-slider__rahmen { flex: 1 1 auto; min-width: 0; }
@media (max-width: 767px) {
	.fsbw-slider { flex-direction: column; gap: 12px; }
	.fsbw-slider > .fsbw-kopf { flex: 0 0 auto; width: 100%; }
	.fsbw-slider > .fsbw-slider__rahmen { width: 100%; }
}
.fsbw-kopf__wertung { font-family: var(--fp-font-headline, inherit); font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .04em; text-transform: uppercase; }
.fsbw-kopf__anzahl { font-size: 15px; color: var(--fsbw-muted); }
.fsbw-kopf__anzahl a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fsbw-kopf__google .fsbw-google { width: 24px; height: 24px; }

/* Slider */
.fsbw-slider__rahmen { position: relative; padding: 0 30px; }
@media (max-width: 767px) { .fsbw-slider__rahmen { padding: 0; } }
.fsbw-slider__spur {
	display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding: 6px 0 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fsbw-slider__spur::-webkit-scrollbar { display: none; }
/* Passen alle Karten in die Spur: mittig, keine Pfeile (Skript setzt die Klasse). */
.fsbw-slider--passt .fsbw-slider__spur { justify-content: center; }
.fsbw-slider--passt .fsbw-pfeil { display: none; }
.fsbw-slider__spur > .fsbw-karte { flex: 0 0 min(300px, 85vw); min-width: 0; scroll-snap-align: start; } /* min-width 0: sonst haelt die Mindestbreite des Inhalts die Karte breiter als ein Drittel der Spur (0.2.4-D) */
/* 0.2.4-D (Danny): Die Kartenbreite richtet sich nach der Spur – Desktop drei ganze Karten, Tablet zwei, Handy eine.
   Bei ein bis zwei Bewertungen bleibt die Breite gleich, die Karten stehen mittig (fsbw-slider--passt). */
/* Massgeblich ist die Breite der Spur, nicht des Fensters (Container-Abfrage): ab 750 px drei Karten, ab 500 px zwei, sonst eine –
   so bleibt jede Karte mindestens rund 240 px breit, auch wenn der Inhaltsbereich schmal ist. */
.fsbw-slider__rahmen { container-type: inline-size; }
.fsbw-slider__spur > .fsbw-karte { flex-basis: calc(100% - 8px); }
@container (min-width: 500px) { .fsbw-slider__spur > .fsbw-karte { flex-basis: calc((100% - 16px) / 2); } }
@container (min-width: 750px) { .fsbw-slider__spur > .fsbw-karte { flex-basis: calc((100% - 32px) / 3); } }
.fsbw-slider .fsbw-slider__rahmen .fsbw-pfeil {
	all: unset; box-sizing: border-box; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 40px; height: 40px; border-radius: 50%; cursor: pointer; opacity: 1;
	background: var(--fp-primary, #333); color: var(--fp-text-on-brand, #fff); box-shadow: var(--fsbw-schatten);
	display: grid; place-items: center; transition: background .15s;
}
/* Hover und Fokus aendern nur die Farbe – nie Position oder Deckkraft (0.2.0-D). */
.fsbw-slider .fsbw-slider__rahmen .fsbw-pfeil:hover,
.fsbw-slider .fsbw-slider__rahmen .fsbw-pfeil:focus,
.fsbw-slider .fsbw-slider__rahmen .fsbw-pfeil:active {
	background: var(--fp-primary-dark, var(--fp-primary, #333)); color: var(--fp-text-on-brand, #fff); opacity: 1; transform: translateY(-50%); outline: none; box-shadow: var(--fsbw-schatten);
}
.fsbw-slider .fsbw-slider__rahmen .fsbw-pfeil:focus-visible { outline: 2px solid var(--fp-primary-dark, #333); outline-offset: 2px; }
.fsbw-pfeil::before { content: ""; width: 10px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); margin-left: -3px; }
.fsbw-slider .fsbw-slider__rahmen .fsbw-pfeil--zurueck { left: 0; right: auto; }
.fsbw-pfeil--zurueck::before { transform: rotate(135deg); margin-left: 3px; }
.fsbw-slider .fsbw-slider__rahmen .fsbw-pfeil--weiter { right: 0; left: auto; }
.fsbw-slider .fsbw-slider__rahmen .fsbw-pfeil[disabled] { opacity: .45; cursor: default; }
/* 0.2.5-D (Danny, Handy-Durchsicht): Die Pfeile hingen auf dem Handy in der Karte. Jetzt stehen sie mittig unter der Karte,
   ohne Ueberlagerung; wischen geht weiterhin. Die alte Ausblende-Regel griff nie (zu schwache Spezifitaet) und ist ersetzt. */
@media (max-width: 767px) {
	.fsbw-slider > .fsbw-slider__rahmen { padding-bottom: 52px; }
	.fsbw-slider .fsbw-slider__rahmen .fsbw-pfeil,
	.fsbw-slider .fsbw-slider__rahmen .fsbw-pfeil:hover,
	.fsbw-slider .fsbw-slider__rahmen .fsbw-pfeil:focus,
	.fsbw-slider .fsbw-slider__rahmen .fsbw-pfeil:active { top: auto; bottom: 0; transform: none; }
	.fsbw-slider .fsbw-slider__rahmen .fsbw-pfeil--zurueck { left: calc(50% - 48px); right: auto; }
	.fsbw-slider .fsbw-slider__rahmen .fsbw-pfeil--weiter { left: calc(50% + 8px); right: auto; }
}

/* Karte */
.fsbw-karte {
	display: flex; flex-direction: column; gap: 10px; background: var(--fsbw-karte-bg); border: 1px solid var(--fsbw-rand);
	border-radius: var(--fsbw-radius); padding: 18px; box-shadow: var(--fsbw-schatten); min-height: 100%;
}
.fsbw-karte__kopf { display: flex; align-items: center; gap: 12px; }
.fsbw-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 40px; }
.fsbw-avatar--initialen { display: grid; place-items: center; background: var(--fp-primary, #333); color: var(--fp-text-on-brand, #fff); font-weight: 700; font-size: 15px; }
.fsbw-karte__wer { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.fsbw-karte__name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsbw-karte__zeit { font-size: 13px; color: var(--fsbw-muted); }
.fsbw-karte__text { font-size: 15px; line-height: 1.5; }
.fsbw-karte__text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.fsbw-karte__link { margin-top: auto; font-size: 13px; color: var(--fp-primary, var(--fsbw-muted)); text-decoration: none; }
.fsbw-karte__link:hover { text-decoration: underline; }

/* Abzeichen */
.fsbw-badge {
	display: inline-flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; text-decoration: none; color: inherit;
	background: var(--fsbw-karte-bg); border: 1px solid var(--fsbw-rand); border-radius: var(--fsbw-radius); padding: 14px 20px; box-shadow: var(--fsbw-schatten);
}
/* 0.2.5-D (Danny): Auf dem Handy nimmt das Abzeichen die volle Spaltenbreite ein, Innenabstand zu allen Seiten gleich.
   Der tragende Elementor-Block (von badge-ueber-kontakt.php rechts mittig gesetzt, Breite nach Inhalt) wird dafuer breit gezogen. */
@media (max-width: 767px) {
	.elementor-widget:has(.fsbw-badge) { width: 100%; }
	.fsbw-badge { display: flex; width: 100%; padding: 20px; gap: 6px; }
}
.fsbw-badge__wertung { font-family: var(--fp-font-headline, inherit); font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
.fsbw-badge__anzahl { font-size: 13px; color: var(--fsbw-muted); }
.fsbw-badge__google .fsbw-google { width: 18px; height: 18px; }

/* Footer-Abzeichen mit Fenster */
.fsbw-footer .fsbw-footer__knopf, .fsbw-footer .fsbw-footer__knopf:hover, .fsbw-footer .fsbw-footer__knopf:focus {
	all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; font: inherit;
	border: 1px solid var(--fsbw-rand); background: var(--fsbw-karte-bg); color: var(--fsbw-text); border-radius: var(--fsbw-radius);
	padding: 10px 14px; cursor: pointer; text-align: left; box-shadow: var(--fsbw-schatten);
}
.fsbw-footer__knopf .fsbw-google { width: 28px; height: 28px; }
.fsbw-footer__text { display: flex; flex-direction: column; gap: 2px; }
.fsbw-footer__wertung { font-weight: 700; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; }
.fsbw-footer__anzahl { font-size: 12px; color: var(--fsbw-muted); }
.fsbw-fenster { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 16px; }
.fsbw-fenster[hidden] { display: none; }
.fsbw-fenster__inhalt { outline: none; position: relative; background: var(--fsbw-karte-bg); border-radius: var(--fp-radius-xl, 20px); max-width: 960px; width: 100%; max-height: 90vh; overflow: auto; padding: 32px 24px 24px; }
.fsbw-fenster .fsbw-fenster__zu, .fsbw-fenster .fsbw-fenster__zu:hover, .fsbw-fenster .fsbw-fenster__zu:focus, .fsbw-fenster .fsbw-fenster__zu:active { all: unset; cursor: pointer; position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--fsbw-muted); }
.fsbw-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
body.fsbw-fenster-offen { overflow: hidden; }

.fsbw-leer { padding: 12px; border: 1px dashed #999; color: #555; font-size: 14px; }

/* 0.2.1-D: Der Elementor-Container, der den Slider traegt (weisse Flaeche, Theme-Klasse fp-reviews), bekommt dieselbe Rundung wie das Fenster. */
.e-con.fp-reviews,
.e-con:has(> .elementor-element > .elementor-widget-container > .fsbw-slider),
.e-con:has(> .e-con-inner > .elementor-element > .elementor-widget-container > .fsbw-slider) {
	border-radius: var(--fp-radius-xl, 20px);
	overflow: hidden;
}