/**
 * NB Kundenbewertungen – Frontend-Styling (v1.9.1)
 *
 * WICHTIGE ARCHITEKTUR-ÄNDERUNG ggü. v1.8: Mobile (<=700px) läuft jetzt über
 * reines CSS Grid (1 Spalte, volle Bildschirmbreite) OHNE jegliche JS-
 * Positionierung - robuster und unabhängig von JS-Ausführung/Optimierungs-
 * Plugins. Klick auf eine normale Kachel entfernt per einfachem Klassen-
 * Toggle (nb-offen) die Teaser-Kürzung -> die Kachel wächst in ihrer Zelle in
 * die Höhe, kein Vollbild/Overlay mehr, kein position:fixed. Der Auslöser
 * dafür ist ein Plus-Kreis (weißes "+" auf Highlight-Farbe), der sich beim
 * Öffnen zu einem "×" dreht.
 *
 * Desktop (>700px) bleibt beim echten spaltenbasierten JS-Masonry (nb-frontend.js)
 * mit Feature-/Werbekacheln über volle Breite - dort gab es keine gemeldeten
 * Probleme, deshalb unverändert.
 *
 * Farben: --nb-color-link ist final (#e54e83), --nb-color-star ist final (#f5b301,
 * Gelb). Übrige Kartenfarben Platzhalter.
 */
.nb-bewertungen-wrapper {
	--nb-color-link: #e54e83;
	--nb-color-star: #f5b301;
	--nb-color-star-empty: #e2ded9;
	--nb-color-text: #3a3a3a;
	--nb-color-text-soft: #74706c;
	--nb-color-text-mute: #a39d97;
	--nb-color-card-bg: #ffffff;
	--nb-color-card-border: #f0e9e4;
	--nb-radius: 16px;
	--nb-shadow: 0 6px 20px rgba(60, 40, 30, 0.08);
	--nb-gap: 16px;

	max-width: 1080px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--nb-color-text);
}

.nb-hinweis {
	font-size: 0.95em;
	color: var(--nb-color-text-soft);
	text-align: center;
	max-width: 640px;
	margin: 28px auto 0;
	line-height: 1.5;
}
.nb-hinweis a { color: var(--nb-color-link); text-decoration: underline; }

/* ===== Mobile (Default): reines CSS Grid, 1 Spalte (volle Bildschirmbreite), kein JS nötig ===== */
.nb-bewertungen-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nb-gap);
	align-items: start;
}

.nb-karte {
	position: static;
	background: var(--nb-color-card-bg);
	border: 1px solid var(--nb-color-card-border);
	border-radius: var(--nb-radius);
	box-shadow: var(--nb-shadow);
	padding: 18px 16px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-sizing: border-box;
}

.nb-karte-feature { padding: 18px 16px 14px; }
.nb-karte-feature .nb-headline { font-size: 1.05em; }

/* Werbekachel: eigene, dezent andersfarbige Optik + kleines Eyebrow-Label.
   Auf Mobile ohnehin schon volle Breite (nur 1 Spalte), auf Desktop volle Breite
   über das JS-Masonry (siehe unten). */
.nb-karte-werbung {
	background: linear-gradient(135deg, #fff8ef, #fdf1f5);
	border-color: rgba(245, 179, 1, 0.35);
}
.nb-karte-werbung .nb-werbung-label {
	display: inline-block;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nb-color-link);
	margin-bottom: 4px;
}

.nb-sterne { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.nb-sterne-inner { position: relative; font-size: 0.95em; line-height: 1; letter-spacing: 0.5px; white-space: nowrap; }
.nb-sterne-leer { color: var(--nb-color-star-empty); }
.nb-sterne-voll { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--nb-color-star); white-space: nowrap; }
.nb-sterne-zahl { font-size: 0.78em; color: var(--nb-color-text-soft); font-weight: 600; white-space: nowrap; }

.nb-headline {
	margin: 4px 0 6px;
	font-size: 0.98em;
	font-weight: 700;
	line-height: 1.32;
	color: var(--nb-color-text);
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	overflow-wrap: break-word;
}

.nb-text-wrapper { flex-grow: 1; position: relative; }
.nb-text {
	margin: 0;
	font-size: 0.92em;
	line-height: 1.5;
	color: var(--nb-color-text-soft);
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	overflow-wrap: break-word;
	/* !important auf allen vier Zeilen-Clamp-Eigenschaften: Divi/Theme-CSS setzt auf
	   vielen Installationen generische Regeln wie "p { overflow: visible; }", die sonst
	   die Kürzung lautlos aushebeln (Text bleibt unclamped, "scrollHeight>clientHeight"
	   in JS liefert dann fälschlich "nicht gekürzt" -> auch der Plus-Button bleibt aus). */
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 4 !important;
	overflow: hidden !important;
}
/* Feature-/Werbekachel und per Klick geöffnete Kachel: immer voller Text.
   !important nötig, um die !important-Basisregel oben gezielt wieder aufzuheben. */
.nb-karte-feature .nb-text,
.nb-karte-werbung .nb-text,
.nb-karte.nb-offen .nb-text {
	-webkit-line-clamp: unset !important;
	overflow: visible !important;
}

/* "Weiterlesen"-Auslöser als Plus-Kreis (weißes "+" auf Highlight-Farbe), zentriert.
   Wird nur gerendert, wenn PHP anhand der Textlänge entscheidet, dass es sich lohnt
   (siehe class-nb-shortcode.php, $ist_lang) - deshalb hier per Default sichtbar,
   KEIN JS-Höhenvergleich mehr nötig, der durch externe CSS-Eingriffe verfälscht
   werden könnte. Auf Desktop weiterhin per Media Query ausgeblendet. Dreht sich
   beim Öffnen um 45° - aus dem "+" wird optisch ein "×" (kein Icon-Austausch nötig).
   WICHTIG: .nb-text-wrapper (der Elternblock) ist KEIN Flex-Container, deshalb greift
   "align-self" hier nicht (das war der Bug: Button landete links statt zentriert).
   Zentrierung stattdessen klassisch per margin:auto links/rechts auf dem Button selbst,
   der wegen expliziter width als Block mit definierter Breite zentrierbar ist. */
.nb-weiterlesen {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4px auto 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: var(--nb-color-link);
	color: #ffffff;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.15s ease;
}
.nb-karte.nb-offen .nb-weiterlesen { transform: rotate(45deg); }

.nb-meta {
	margin: 2px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--nb-color-card-border);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	font-size: 0.82em;
	color: var(--nb-color-text-soft);
}
.nb-name { font-weight: 700; color: var(--nb-color-text); display: block; }
.nb-portal-inline { font-weight: 400; font-size: 0.85em; color: var(--nb-color-text-mute); margin-left: 3px; }
.nb-datum { font-size: 0.95em; }

.nb-keine-bewertungen { text-align: center; color: var(--nb-color-text-soft); }

/* ===== Desktop (>700px): zurück zum JS-gesteuerten Spalten-Masonry ===== */
@media (min-width: 701px) {
	.nb-bewertungen-grid {
		display: block;
		position: relative;
		width: 100%;
	}
	.nb-karte {
		position: absolute;
		top: 0;
		left: 0;
		padding: 22px 20px 18px;
		gap: 10px;
		transition: top 0.25s ease, left 0.25s ease, width 0.25s ease;
	}
	.nb-karte-feature { padding: 28px 26px 22px; }
	.nb-karte-feature .nb-headline { font-size: 1.15em; }
	.nb-karte-werbung { grid-column: auto; }

	.nb-sterne { gap: 10px; }
	.nb-sterne-inner { font-size: 1.15em; letter-spacing: 2px; }
	.nb-sterne-zahl { font-size: 0.85em; }

	.nb-headline { margin: 6px 0 10px; font-size: 1em; }
	.nb-text { font-size: 0.95em; line-height: 1.55; -webkit-line-clamp: unset !important; overflow: visible !important; }
	.nb-weiterlesen { display: none !important; }

	.nb-meta {
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
		font-size: 0.88em;
		gap: 8px;
	}
	.nb-name { display: inline; }
}