/*
 * Block: Stimmen
 *
 * Figma: Startseite_Zufriedene_Kund*innen (3001:1217), 1585 x 631.
 *
 * Die Karten sind breiter als der Inhaltsbereich und laufen rechts aus dem
 * Bild. Umgesetzt als waagerecht scrollbare Reihe mit Einrastpunkten.
 * Der linke Rand richtet sich am Container aus, rechts laeuft die Reihe
 * bis zum Fensterrand - so ist sichtbar, dass es weitergeht.
 */

.dc-stimmen {
	--dc-stimmen-karte: 762px;   /* Figma: Karte 762 breit */
	--dc-stimmen-bild:  315px;   /* Figma: Bildspalte */
	--dc-stimmen-hoehe: 548px;   /* Figma: Kartenhoehe */
	--dc-stimmen-band:  250px;   /* Figma: Hoehe des gelben Bandes unten */

}

.dc-stimmen__titel {
	font-size: var(--dc-fs-h2);
	line-height: var(--dc-lh-h2);
	font-weight: var(--dc-gewicht-bold);
	margin: 0 0 var(--dc-abstand-block);
}

.dc-stimmen__reihe {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;

	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/*
	 * DIE REIHE BLEIBT IM CONTAINER.
	 *
	 * Vorher lief sie ueber die volle Fensterbreite und war nur links wie
	 * der Container eingerueckt - rechts liefen die Karten bis an den
	 * Bildschirmrand. Jetzt hat die Reihe genau den Inhaltsbereich des
	 * Containers als Kasten: Was nicht hineinpasst, wird an seiner rechten
	 * Kante angeschnitten. Genau das zeigt der Entwurf.
	 *
	 * Die Rechnung ist dieselbe wie in .dc-container: hoechstens 1320, auf
	 * schmalen Schirmen die Fensterbreite abzueglich zweimal Seitenrand.
	 */
	width: min( var(--dc-container), calc( 100% - 2 * var(--dc-rand-mobil) ) );
	margin-inline: auto;
	padding-inline: 0;
	scroll-padding-inline-start: 0;
	/* Platz fuer den Fokusrahmen der Reihe. */
	padding-block: 4px;

	/*
	 * WEICHER RAND STATT HARTER KANTE (DC-6).
	 *
	 * Der Entwurf legt ueber den rechten Rand ein eigenes Element namens
	 * "Verlauf" (3001:992): 368 breit, in der Farbe des Seitengrunds,
	 * durchsichtig nach links. Die angeschnittene Karte blendet damit aus,
	 * statt abgehackt zu enden. Gebaut war bisher nur der Anschnitt.
	 *
	 * ALS MASKE, NICHT ALS EINGEFAERBTES RECHTECK. Der Block steht auch auf
	 * gelbem Grund (die vier Leistungsseiten, stimmen_hintergrund => gelb).
	 * Ein graues Rechteck waere dort ein grauer Fleck; die Maske blendet
	 * gegen das aus, was tatsaechlich dahinterliegt. Beides an der Stage
	 * angesehen, grau und gelb.
	 *
	 * -webkit- zuerst: Safari kennt mask-image ohne Praefix erst ab 15.4.
	 */
	--dc-stimmen-verlauf: 368px;   /* Figma 3001:992 */
	-webkit-mask-image: linear-gradient( to right, #000 calc( 100% - var(--dc-stimmen-verlauf) ), transparent );
	mask-image: linear-gradient( to right, #000 calc( 100% - var(--dc-stimmen-verlauf) ), transparent );
}

/*
 * EIN LEERES STUECK HINTER DER LETZTEN KARTE.
 *
 * Ohne das steht am Ende der Reihe die letzte Karte buendig am rechten
 * Rand - und die Maske blendet dann ihre rechte Haelfte aus, also Text,
 * den niemand mehr lesen kann. Mit dem Zwischenstueck liegt am Ende der
 * Reihe genau die Verlaufsbreite an leerer Flaeche unter der Maske, und
 * die letzte Karte bleibt vollstaendig sichtbar.
 *
 * flex-shrink 0, sonst drueckt es die Flexbox auf null zusammen.
 */
.dc-stimmen__reihe::after {
	content: "";
	flex: 0 0 var(--dc-stimmen-verlauf);
}

.dc-stimmen__karte {
	display: grid;

	/*
	 * Figma: Karte 762 breit, davon 315 Bild und 447 Text - nicht halbe
	 * und halbe. Mit 1fr 1fr war das Bild 379 breit und die Karte wurde
	 * ueber ihre 548 hinaus hoch.
	 */
	grid-template-columns: var(--dc-stimmen-bild) 1fr;
	height: var(--dc-stimmen-hoehe);   /* Figma */

	flex: 0 0 var(--dc-stimmen-karte);
	max-width: 100%;
	scroll-snap-align: start;
	background-color: var(--dc-grau);
	border: var(--dc-kontur);
}

/*
 * Karte ohne Bild: Der Text nimmt die ganze Breite ein, statt die rechte
 * Haelfte zu belegen und links eine leere Flaeche zu lassen.
 */
.dc-stimmen__karte--ohne-bild {
	grid-template-columns: 1fr;
}

.dc-stimmen__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dc-stimmen__inhalt {
	/*
	 * Raster statt Spalte: Anfuehrungszeichen und Name stehen im Entwurf
	 * NEBENEINANDER (Zeichen bei 663/120, Name bei 821/155), das Zitat
	 * darunter ueber die volle Breite.
	 *
	 * Ein Float hat das nicht geleistet - .dc-stimmen__person ist ein
	 * Flex-Kasten und weicht Floats aus, statt sich danebenzulegen.
	 */
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 60px;   /* Figma: Zeichen ab 663, Name ab 821 */
	align-content: start;
	margin: 0;
	padding: 47px 32px 68px 50px;   /* Figma */
	min-width: 0;
}

/*
 * Grosses Anfuehrungszeichen als Schmuck. Fuer Screenreader ausgeblendet -
 * das blockquote-Element sagt bereits, dass es ein Zitat ist.
 */
.dc-stimmen__zeichen {
	grid-column: 1;
	grid-row: 1;

	/*
	 * 250, nicht 96. Im Entwurf (3001:989) ist das Zeichen Gotham Bold in
	 * 250 - der Textrahmen misst 99 x 173, das ist die Zeilenbox, nicht die
	 * Schriftgroesse. Mit 96 war es weniger als halb so gross wie
	 * gezeichnet.
	 *
	 * Die Zeilenhoehe von 0,69 bringt die Box auf die 173 des Entwurfs
	 * (250 x 0,692). Der Keil selbst haengt oben in der Zeile.
	 */
	font-size: 250px;    /* Figma */
	line-height: 0.692;  /* Figma: Zeilenbox 173 bei 250 */
	font-weight: var(--dc-gewicht-bold);

	/*
	 * Der Rahmen ist im Entwurf 99 breit, die Vorschubbreite des Zeichens in
	 * unserer Gotham-Datei aber 135. Ohne die feste Breite beginnt der Name
	 * daneben 38 zu weit rechts. Die Zeichen selbst sind rund 100 breit und
	 * bleiben damit im Rahmen; nur die Luft dahinter faellt weg.
	 */
	width: 99px;   /* Figma */
}

.dc-stimmen__person {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	margin-block-start: 35px;   /* Figma: Zeichen ab 120, Name ab 155 */
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
}

.dc-stimmen__zitat {
	grid-column: 1 / -1;
	grid-row: 2;
	margin-block-start: var(--dc-abstand-block);
}

.dc-stimmen__name {
	font-weight: var(--dc-gewicht-bold);
}

.dc-stimmen__zitat {
	margin: 0;
}

.dc-stimmen__zitat p {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Kleine Bildschirme
 *
 * Eine Karte fuellt die Breite, Bild ueber dem Text.
 * --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

	.dc-stimmen {
		/*
		 * PROZENT DER REIHE, NICHT vw (DC-78).
		 *
		 * Hier stand min(88vw, 420px). Das misst am FENSTER, die Reihe ist
		 * aber nur so breit wie der Inhaltsbereich: bei 390 Fensterbreite
		 * 291. 88vw sind dann 340 - mehr als die Reihe. Das max-width: 100%
		 * an der Karte kappte sie auf 291, und die Karte fuellte die Reihe
		 * wieder genau aus. Der Anschnitt, um den es in DC-78 geht, war
		 * damit wieder weg. Am 12.09.2026 auf der Stage nachgemessen:
		 * 291 von 291 = 100 %.
		 *
		 * 88 % beziehen sich auf die Reihe und lassen zuverlaessig 12 %
		 * der naechsten Karte stehen.
		 */
		--dc-stimmen-karte: 88%;
	}

	/*
	 * Der Verlauf muss mit der Karte schrumpfen. 368 sind hier fast eine
	 * halbe Karte - der Text wuerde ausblenden statt der Kante. Sichtbar
	 * ist am rechten Rand ohnehin nur der Streifen der naechsten Karte
	 * (Karte 88 % der Reihe, es bleiben rund 12 %), und genau darueber
	 * blendet es aus.
	 */
	.dc-stimmen__reihe {
		--dc-stimmen-verlauf: 12%;
	}

	.dc-stimmen__karte {
		grid-template-columns: 1fr;
	}

	.dc-stimmen__bild img {
		aspect-ratio: 4 / 3;
	}

	.dc-stimmen__inhalt {
		padding: 24px;
	}

	/* Gestapelt haette das Zeichen in voller Groesse die halbe Karte. */
	.dc-stimmen__zeichen {
		font-size: 120px;
	}
}

/* ---------------------------------------------------------------------------
 * Farbiges Band
 *
 * Figma: Auf ALLEN Unterseiten steht der Abschnitt auf einem gelben Band
 * ueber die volle Fensterbreite (1920 x 761, nachgemessen #f8d74a). Nur auf
 * der Startseite steht er ohne Band - dort ist der Abschnitt 1585 x 631.
 *
 * Der Innenabstand steht ausnahmsweise hier und nicht in base.css: Ohne ihn
 * liefe die Farbflaeche bis an die Karten.
 * --------------------------------------------------------------------------- */

/*
 * DAS BAND LIEGT NUR UNTEN, NICHT HINTER DEM GANZEN ABSCHNITT.
 *
 * ACHTUNG, HIER STAND ETWAS ANDERES: Zuerst war die ganze Section gelb.
 * Nachgemessen im Entwurf (Keynotes_Zufriedene_kundinnen, 3001:1338, 1920
 * x 761) beginnt das Gelb erst bei y=511 - die Karten stehen mit dem
 * oberen Teil auf dem Seitengrund und ragen 110 in das Band hinein.
 *
 * Als Verlauf und nicht als zweites Element: So braucht der Block kein
 * zusaetzliches Markup, und die Karten liegen von selbst darueber.
 */
.dc-stimmen--gelb,
.dc-stimmen--grau {
	padding-block-end: 140px;   /* Figma: Karten enden bei 621, Abschnitt bei 761 */
}

.dc-stimmen--gelb {
	background-image: linear-gradient(
		to bottom,
		transparent calc( 100% - var(--dc-stimmen-band) ),
		var(--dc-gelb) calc( 100% - var(--dc-stimmen-band) )
	);
}

.dc-stimmen--grau {
	background-image: linear-gradient(
		to bottom,
		transparent calc( 100% - var(--dc-stimmen-band) ),
		var(--dc-grau) calc( 100% - var(--dc-stimmen-band) )
	);
}

/* ---------------------------------------------------------------------------
 * Laenge des Zitats
 *
 * Figma: Der Textblock ist 365 x 260 - dreizehn Zeilen, danach ist die
 * Karte zu Ende. Ungekappt sprengt ein langes Zitat die 548 und alle
 * Karten der Reihe werden mitgezogen.
 * --------------------------------------------------------------------------- */

.dc-stimmen__zitat {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 13;
	line-clamp: 13;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Kleine Bildschirme
 *
 * Feste Hoehe und feste Bildspalte passen dort nicht - die Karte waechst
 * mit ihrem Inhalt, und das Zitat wird nicht gekappt.
 * --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

	.dc-stimmen {
		--dc-stimmen-hoehe: auto;
		--dc-stimmen-bild: 1fr;
		--dc-stimmen-band: 160px;
	}

	.dc-stimmen__inhalt {
		padding: 30px;
	}

	/*
	 * DAS ZITAT BLEIBT AUCH MOBIL GEKAPPT (DC-73, zweite Runde).
	 *
	 * Hier stand "display: block; overflow: visible" - das Zitat lief also
	 * ungekappt durch. Damit wurde jede Karte so lang wie ihr Zitat, und um
	 * den Weissraum unter den kurzen loszuwerden, durfte die Reihe die
	 * Karten nicht mehr angleichen. Der Kunde am 13.09.2026: "jetzt wirkt
	 * es sehr unruhig. Das ist im Desktop besser, weil die Bilder an der
	 * Seite Stabilitaet geben. Ausserdem entsteht der Weissraum jetzt
	 * optisch unter dem Element und ist nicht weg."
	 *
	 * Beides stimmt. Die Loesung liegt eine Stufe frueher: Wenn alle Zitate
	 * gleich lang gekappt sind, sind die Karten von selbst aehnlich hoch -
	 * dann braucht es weder ungleiche Karten noch Weissraum.
	 *
	 * Zehn Zeilen statt der dreizehn von der gezeichneten Breite: Mobil ist
	 * die Karte schmaler, dieselbe Zeilenzahl waere deutlich mehr Text.
	 */
	.dc-stimmen__zitat {
		-webkit-line-clamp: 10;
		line-clamp: 10;
	}

	/* Gestapelt: Zeichen, Name, Zitat - eine Spalte. */
	.dc-stimmen__inhalt {
		grid-template-columns: 1fr;
	}

	.dc-stimmen__zeichen,
	.dc-stimmen__person,
	.dc-stimmen__zitat {
		grid-column: 1;
		grid-row: auto;
	}

	.dc-stimmen__person {
		margin-block-start: var(--dc-abstand-element);
	}

	/*
	 * TRENNUNG ZWISCHEN NAME UND ZITAT (DC-73).
	 *
	 * Der Kunde am 13.09.2026: "Es braucht eine optische Trennung zwischen
	 * Referenztext und Beschreibung der Person. Im Desktopdesign ist ein
	 * Absatz, im responsive Design geht ineinander ueber."
	 *
	 * Auf der gezeichneten Breite stehen Name und Zitat nebeneinander
	 * beziehungsweise klar abgesetzt; gestapelt folgen sie direkt
	 * aufeinander. Eine Haarlinie wie in den Angebotskacheln trennt sie
	 * deutlicher als noch mehr Abstand - und bleibt bei der Formensprache
	 * der Seite.
	 */
	.dc-stimmen__zitat {
		margin-block-start: var(--dc-abstand-element);
		padding-block-start: var(--dc-abstand-element);
		border-block-start: var(--dc-kontur);
	}
}

/* ---------------------------------------------------------------------------
 * Handy: kein Weissraum unter dem Zitat, kleineres Bild (DC-73)
 *
 * Der Kunde am 11.09.2026: "Auf dem Handy entsteht sehr viel Weissraum am
 * Ende der Kund*innenstimmen. Das Bild der Kund*innenstimmen duerfte im
 * responsive Design gerne auch kleiner werden."
 *
 * ZWEI URSACHEN, NACHGEMESSEN AM 11.09.2026 BEI 390 FENSTERBREITE:
 *
 * 1. Die Reihe ist ein Flex-Kasten, und dessen Voreinstellung "stretch"
 *    zieht JEDE Karte auf die Hoehe der hoechsten. Gemessen waren alle
 *    Karten 1082 hoch, obwohl die erste ihren Inhalt schon bei 830 beendet
 *    - 250 leere Flaeche unter dem Zitat. Genau das zeigt der Screenshot
 *    im Ticket. "flex-start" laesst jede Karte so hoch werden, wie ihr
 *    Inhalt ist; im Slider steht ohnehin nur eine zur Zeit im Blick.
 *
 * 2. Das Bild war 437 hoch. Die Regel "aspect-ratio: 4/3" weiter oben
 *    konnte nie greifen, weil daneben "height: 100%" steht - und eine feste
 *    Hoehe sticht das Seitenverhaeltnis. Mit "height: auto" greift es, und
 *    16:9 macht aus 437 noch 163.
 * --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

	/*
	 * DIE KARTEN SIND WIEDER GLEICH HOCH.
	 *
	 * "align-items: flex-start" stand hier seit der ersten Runde zu DC-73.
	 * Es hat den Weissraum beseitigt und dafuer Unruhe gebracht - siehe den
	 * Kommentar am gekappten Zitat weiter oben. Mit gekapptem Zitat
	 * braucht es das nicht mehr: Die Voreinstellung "stretch" gibt der
	 * Reihe die Ruhe zurueck, die der Kunde am Desktop lobt.
	 */

	.dc-stimmen__bild img {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}