/* 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; }
/* Passen alle Karten in die Spur, verschwinden die Pfeile.
   Die Regel weiter oben (.fsbw-slider--passt .fsbw-pfeil) reicht dafuer NICHT:
   der Pfeil-Block darueber ist dreiteilig und steht spaeter, gewinnt also. Diese
   Fassung ist vierteilig und muss hinter dem Block stehen. Schon zweimal bei
   Zusammenfuehrungen verlorengegangen - nicht wieder entfernen.
   Sichtbar wird es dort, wo nur EINE Bewertung steht: auf den Referenzseiten
   von marketing-fahrschule.de. */
.fsbw-slider.fsbw-slider--passt .fsbw-slider__rahmen .fsbw-pfeil { display: none; }
/* 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; }
	/* Passt alles in die Spur, stehen dort keine Pfeile - dann darf der Platz
	   fuer sie auch nicht reserviert bleiben. Sonst klafft unter der Karte eine
	   leere Flaeche von 52 px, was bei EINER Bewertung sofort auffaellt
	   (Referenzseiten von marketing-fahrschule.de). */
	.fsbw-slider.fsbw-slider--passt > .fsbw-slider__rahmen { padding-bottom: 0; }
	.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;
}

/* 0.3.1-A: Steht der Shortcode in einem Elementor-Container mit align-items:center, schrumpft der
   Block auf Inhaltsbreite – die Spur wird dann 0 breit und es ist keine Karte mehr zu sehen
   (MOIN-Startseite, 24.10.2026). Die Bewertungen brauchen immer die volle Breite. */
.elementor-widget-shortcode:has(.fsbw-slider),
.elementor-widget-shortcode:has(.fsbw-badge),
.elementor-widget-shortcode:has(.fsbw-footer) {
	width: 100%;
	/* 0.3.4-A: Hat der Block in Elementor eine eigene Breite bekommen (dort „Breite:
	   Eigene", z. B. 80 %), begrenzt die Vorgabe die 100 % und der Block saesse links.
	   `align-self: center` stellt ihn mittig; bei voller Breite aendert es nichts.
	   Automatische Seitenraender taugen dafuer nicht: Elementor setzt `margin` als
	   Kurzschreibweise mit hoeherer Spezifitaet und wuerde sie auf 0 zuruecksetzen. */
	align-self: center;
	margin-inline: auto;
}
.elementor-widget-container:has(> .elementor-shortcode > .fsbw-slider),
.elementor-shortcode:has(> .fsbw-slider) {
	width: 100%;
}

/* 0.3.2-A: Nie Grau auf Dunkel.
   Der Kopf des Sliders ist der einzige Teil, der auf dem Seitenhintergrund steht – Karten,
   Abzeichen, Footer-Knopf und Fenster bringen ihre eigene helle Flaeche mit. Die feste
   Nebenfarbe (--fsbw-muted, von Haus aus #6b6b6b) ergibt dort auf dunklen Seiten Grau auf
   Schwarz: „Basierend auf … Bewertungen" und das Wort „Google" waren auf MOIN kaum zu lesen
   (Kontrast 3,5).

   Welche Farbe hinter dem Kopf liegt, kann CSS nicht wissen. `color: inherit` hilft nicht:
   auf MOIN steht die geerbte Schriftfarbe auf #333, obwohl die Seite schwarz ist – das war
   mit Kontrast 1,5 schlechter als vorher. Das Skript misst den Hintergrund und setzt
   .fsbw-slider--dunkel. Laeuft kein Skript, bleibt alles wie bisher.

   Nur die Nebenfarbe wird gesetzt, nicht `color` des Kopfes: die Wertung holt ihre Farbe
   oft aus dem Theme (auf MOIN Blau) und soll sie behalten. */
.fsbw-slider--dunkel > .fsbw-kopf {
	--fsbw-muted: rgba(255, 255, 255, .88);
}

/* 0.3.3-A: „AUSGEZEICHNET" fuellte die 220 px breite Kopfspalte bis an den Rand aus
   (236 px bei 26 px Schrift) und stiess damit an die weisse Flaeche. Das deutsche Wort ist
   laenger als das englische „EXCELLENT", fuer das die Groesse gedacht war. Kleiner, und
   die Spalte darf ein Stueck mitwachsen. */
.fsbw-slider > .fsbw-kopf {
	flex: 0 1 240px;
}
/* 0.3.6-A: Dieselbe Angabe wirkt auf dem Handy ganz anders. Dort ist der Slider
   eine Spalte (flex-direction: column), und flex-basis bemisst dann nicht die
   BREITE, sondern die HOEHE: Der Kopf wurde 240 px hoch, obwohl sein Inhalt rund
   150 px braucht - 90 px Leerraum unter dem Google-Logo. Weil diese Regel nach
   der Handy-Abfrage weiter oben steht, hat sie deren `flex: 0 0 auto`
   ueberschrieben. Also hier erneut zuruecknehmen. */
@media (max-width: 767px) {
	.fsbw-slider > .fsbw-kopf { flex: 0 0 auto; }
}
.fsbw-slider > .fsbw-kopf .fsbw-kopf__wertung {
	font-size: clamp(17px, 1.5vw, 21px);
}
/* „Basierend auf" bleibt in der ersten Zeile, die verlinkte Zahl rutscht darunter –
   in der schmalen Kopfspalte wird es dadurch deutlich ruhiger. Im Fenster des
   Footer-Abzeichens ist der Kopf breit, dort bleibt es einzeilig. */
.fsbw-slider > .fsbw-kopf .fsbw-kopf__anzahl a {
	display: block;
}

/* 0.3.3-A: Das Footer-Abzeichen sass linksbuendig im Block, das Trustindex-Widget davor
   stand mittig. Der Knopf ist inline-flex, text-align genuegt – auf jeder Breite. */
.fsbw-footer {
	text-align: center;
}