/* DN Google Reviews — Marquee Frontend
 * Echter seamless Infinite Loop. Die Bewegung steuert JS (marquee.js) per requestAnimationFrame +
 * translate3d mit KARTEN-RECYCLING: nur ein kleiner Karten-Pool im DOM, die linke Karte wandert ans
 * Ende und bekommt die nächste Review → flüssig (GPU sub-pixel), kein riesiger Layer, kein Ruckeln,
 * browserweit (auch Safari). CSS macht hier KEINE Bewegung.
 * Card-Abstand via margin-right (jede Card "besitzt" ihre rechte Lücke).
 */

.dn-grev-marquee {
	--dn-grev-card-w: 360px;
	--dn-grev-gap: 24px;
	--dn-grev-radius: 16px;
	--dn-grev-bg: #ffffff;
	--dn-grev-fg: #1a1a1a;
	--dn-grev-muted: #6b7280;
	--dn-grev-shadow: 0 12px 28px rgba(17, 24, 39, 0.06), 0 4px 10px rgba(17, 24, 39, 0.045);
	--dn-grev-star-on: #f5b400;
	--dn-grev-star-off: #d8dbe0;
	--dn-grev-fade: 80px;
	--dn-grev-duration: 320s;

	display: flex;
	flex-wrap: nowrap;
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	scroll-behavior: auto;  /* JS bewegt per scrollLeft — kein Smooth-Scroll-Easing dazwischen */
	padding: 12px 0;
	box-sizing: border-box;

	/* Edge fades for elegant look */
	-webkit-mask-image: linear-gradient(to right,
		transparent 0,
		#000 var(--dn-grev-fade),
		#000 calc(100% - var(--dn-grev-fade)),
		transparent 100%);
	mask-image: linear-gradient(to right,
		transparent 0,
		#000 var(--dn-grev-fade),
		#000 calc(100% - var(--dn-grev-fade)),
		transparent 100%);
}

/* Single-track technique: one track holds the review set twice ([1..N][1..N]).
 * Each card owns its right gap via margin-right → the track width is EXACTLY 2× one set.
 * Die Bewegung macht JS (marquee.js) per scrollLeft — KEIN CSS-Keyframe, kein Composited-Layer,
 * Pause/Hover ebenfalls in JS (weiche Geschwindigkeits-Interpolation). */
.dn-grev-track {
	display: flex;
	flex-shrink: 0;
	flex-wrap: nowrap;
	align-items: flex-start;   /* nur die aufgeklappte Karte wächst; andere bleiben uniform (JS pinnt min-height) */
	will-change: transform;    /* GPU-Compositing für flüssige translate3d-Bewegung (Pool ist klein) */
}

/* ---------- Card ---------- */

.dn-grev-card {
	flex: 0 0 var(--dn-grev-card-w);
	margin-right: var(--dn-grev-gap);  /* Jede Card besitzt ihre rechte Lücke → Track = exakt 2× Satz */
	box-sizing: border-box;
	background: var(--dn-grev-bg);
	color: var(--dn-grev-fg);
	border-radius: var(--dn-grev-radius);
	padding: 24px 22px 20px;
	box-shadow: var(--dn-grev-shadow);
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 220px;
	font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.dn-grev-card-head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.dn-grev-meta {
	display: flex;
	flex-direction: row;      /* GO 11b: Name auf eigener Zeile (100 %), darunter Sterne + Datum in einer Zeile */
	flex-wrap: wrap;
	align-items: center;
	column-gap: 8px;
	row-gap: 4px;
	min-width: 0;
	flex: 1 1 auto;
}

.dn-grev-name {
	flex: 1 0 100%;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	color: var(--dn-grev-fg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Stars (SVG-based, encoding-safe) ---------- */

.dn-grev-stars {
	display: inline-flex;
	gap: 2px;
	font-size: 16px;
	line-height: 1;
}

.dn-grev-star {
	width: 14px;
	height: 14px;
	display: inline-block;
	background-color: var(--dn-grev-star-off);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.dn-grev-star.is-on {
	background-color: var(--dn-grev-star-on);
}

/* GO 11b (06.09.2026): relatives Datum ("vor 2 Monaten") rechts neben den Sternen, in der Typo der
   kleinen Quellenzeile (12px, 500, gedaempft), mittig zur Sternhoehe ausgerichtet. */
.dn-grev-date {
	font-size: 12px;
	line-height: 1;
	font-weight: 500;
	color: var(--dn-grev-muted);
	white-space: nowrap;
}

.dn-grev-text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--dn-grev-fg);
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* "Weiter lesen": nur die geklickte Karte klappt auf (Text vollständig, scrollt bei sehr langen Reviews).
 * Marquee pausiert beim Lesen (JS). Andere Karten bleiben unverändert. */
.dn-grev-card.is-expanded .dn-grev-text {
	-webkit-line-clamp: unset;
	display: block;
	max-height: 280px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.dn-grev-more {
	display: none;
	align-self: flex-start;
	margin-top: 2px;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--dn-grev-fg);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.dn-grev-card.has-more .dn-grev-more { display: inline-block; }

/* SSR (09/2026): Bis das Bauskript die vorgerenderte Teilmenge ersetzt und
   marquee.js die Karten auf gleiche Hoehe pinnt, reserviert die unsichtbare
   Knopfzeile ihren Platz. Ohne das wuchs die Sektion beim Boot um 36 px
   (Knopfhoehe), gemessen bei 390 px: 328 -> 364 px. Nach dem Ersetzen traegt
   die Sektion data-dn-full, dann gilt wieder das normale Verhalten. */
.dn-grev-injected-section[data-dn-ssr="1"]:not([data-dn-full]) .dn-grev-more { display: inline-block; visibility: hidden; }

.dn-grev-foot {
	margin-top: auto;
	font-size: 13px;
	color: var(--dn-grev-muted);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* Dezente Quellen-Kennzeichnung „Google Reviews" — einmal pro Karte, unten rechts.
 * Ersetzt Buchstaben-Avatar + per-Card-Google-Logo. Nur Quelle markieren, nicht dominant. */
.dn-grev-source {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 1;
	color: var(--dn-grev-muted);
	white-space: nowrap;
	text-decoration: none;   /* als Link kein Default-Unterstrich/Blau — Optik bleibt wie gehabt */
	cursor: pointer;
}
.dn-grev-source:hover .dn-grev-source-label,
.dn-grev-source:focus-visible .dn-grev-source-label {
	text-decoration: underline;   /* dezente Klick-Affordanz nur bei Hover/Fokus */
	text-underline-offset: 2px;
}
.dn-grev-source svg {
	width: 14px;
	height: 14px;
	display: block;
	flex: 0 0 14px;
}
.dn-grev-source-label {
	font-weight: 500;
}

/* ---------- Empty / Loading ---------- */

.dn-grev-empty {
	padding: 24px;
	text-align: center;
	color: #999;
	font-size: 15px;
}

/* ---------- Übergang unter der Marquee → nächste Sektion (nur Homepage) ----------
 * Weicher Verlauf hinter/unter den Review-Kacheln: oben reinweiß → unten der Ton der
 * Folgesektion (#dh-cta = #f6f6f4). Entfernt den großen weißen Leerraum, sodass die
 * CTA-Sektion direkt anschließt. Selektoren existieren nur auf der Homepage und nur,
 * solange das Plugin aktiv ist (marquee.css geladen) — Trustindex-Fallback bleibt intakt.
 * KEINE Änderung an den Kacheln selbst (Stil/Rahmen/Schatten/Avatar/Google-Icon/Text). */
.dn-grev-injected-section {
	background: linear-gradient(to bottom, #ffffff 0%, #ffffff 65%, #f6f6f4 100%) !important;
	padding-bottom: 24px !important;
}
/* Leere Alt-Reviews-Sektion (ersetztes Trustindex-Widget + Spacer, kein sichtbarer Inhalt)
 * zwischen Marquee und CTA ausblenden → kein weißer Leerblock mehr. */
.elementor-element-5802b90 {
	display: none !important;
}

/* ---------- Mobile (≤640px) ---------- */

@media (max-width: 640px) {
	.dn-grev-marquee {
		--dn-grev-card-w: 80vw;
		--dn-grev-gap: 14px;
		--dn-grev-fade: 24px;
		padding: 12px 0;
	}
	.dn-grev-card {
		min-height: 200px;
		padding: 20px 18px 16px;
	}
}

/* ---------- Reduced-motion: native scroll fallback ---------- */

@media (prefers-reduced-motion: reduce) {
	.dn-grev-marquee {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.dn-grev-marquee::-webkit-scrollbar { display: none; }
	.dn-grev-track {
		animation: none;
		left: 0 !important;
	}
	.dn-grev-track-clone,
	.dn-grev-card[aria-hidden="true"] {
		display: none; /* Reduced-motion: nur den Original-Satz nativ scrollen */
	}
	.dn-grev-card {
		scroll-snap-align: start;
	}
}