/* 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);
	/* Vorgabe Micha, 24.10.2026: „Basierend auf …", „Google" und das Datum nie
	   grau, sondern in der normalen Textfarbe. Werkzeuggebaute Seiten behalten
	   ihr Token, nur die Notfarbe ist nicht mehr #6b6b6b. */
	--fsbw-muted: var(--fp-form-text-muted, var(--fp-text, #222));
	--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);
}

/* Themes faerben <strong> gern global ein – auf Wollys steht dort
   `strong { color: var(--text-light) }`, also Weiss. Das traf „BEWERTUNGEN"
   und die Zahl in „Basierend auf 19 Bewertungen" und machte beides auf weisser
   Karte unsichtbar (24.10.2026). Innerhalb unserer Bausteine erbt <strong>
   deshalb die Farbe des Elternelements. */
.fsbw-slider strong,
.fsbw-badge strong,
.fsbw-footer strong,
.fsbw-fenster strong { color: inherit; }

/* 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).
   Die Pfeile werden weiter unten ausgeblendet, direkt nach der Regel, die sie
   setzt – diese hier allein reicht nicht, siehe dort. */
.fsbw-slider--passt .fsbw-slider__spur { justify-content: center; }
.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;
	/* Vorgabe Micha, 24.10.2026: Der Kreis hinter dem Pfeil traegt immer die
	   Hausfarbe. Handgebaute Seiten haben kein --fp-primary, dort greift die
	   globale Elementor-Farbe des Kits (2er #B40614, Isermann #E90084,
	   Wollys #81C448). #333 ist nur noch die letzte Notfarbe. */
	background: var(--fp-primary, var(--e-global-color-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, var(--e-global-color-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; }
/* Nichts zu blaettern: Pfeile ganz weg statt blass und tot. Muss mindestens so
   spezifisch sein wie die Regel oben, die display:grid setzt – sonst greift die
   kurze Fassung bei .fsbw-slider--passt nicht. */
.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; }
	.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; }
/* Auch der Kreis mit den Initialen traegt die Hausfarbe, nicht Grau. */
.fsbw-avatar--initialen { display: grid; place-items: center; background: var(--fp-primary, var(--e-global-color-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(--e-global-color-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%;
	align-self: stretch;
}
.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;
}
.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,
/* Ohne Profil-Adresse steht die Zahl ohne Link da – dann bricht das <strong>. */
.fsbw-slider > .fsbw-kopf .fsbw-kopf__anzahl > strong {
	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;
}