/*
 * Block: Personen (Liste mit Filter)
 *
 * Figma: Personen_Uebersicht (1548:1048).
 *   Karte        650 x 420, zwei Spalten, Luecke 20
 *   Portraet     253 x 261, 31 vom linken Kartenrand, 41 von oben
 *   Inhalt       beginnt 335 vom Kartenrand
 *   Suchfeld     282 x 50
 *   Themenfilter 164 x 50, buendig an der Containerkante
 */

.dc-pl {
	--dc-pl-portraet: 253px;   /* Figma */
}

/* ---------------------------------------------------------------------------
 * Kopfzeile: Ueberschrift links, Suche und Filter rechts
 * --------------------------------------------------------------------------- */

.dc-pl__kopf {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--dc-abstand-element);
	margin-block-end: 24px;   /* Figma: Filterzeile endet bei 50, Karten ab 74 */
	flex-wrap: wrap;
}

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

/*
 * MIT EINLEITUNGSTEXT: ZWEISPALTIGER KOPF, FILTER DARUNTER (DC-64).
 *
 * Auf "Ueber uns" steht neben der Ueberschrift ein Text. Ohne die Regeln
 * hier nahm die Ueberschrift die volle Breite, schob die Filter in die
 * naechste Zeile und liess sie dort linksbuendig stehen - beides anders
 * als gezeichnet.
 *
 * Figma 3005:598 (Ueber_uns_Team), Container 1320:
 *
 *   Ueberschrift 1536:6357   x=0    427 breit
 *   Text         1536:6358   x=447  872 breit     -> 20 Luft
 *   Suchfeld     1182:2069   x=854  282 breit
 *   Themenfilter 1182:2064   x=1156 164 breit     -> endet bei 1320
 *
 * Senkrecht: Kopf bis 160, Filter ab 200 (40 Luft), Karten ab 274.
 *
 * OHNE TEXT bleibt es bei der Flex-Zeile darueber - so zeichnet es die
 * Personen-Uebersicht (3005:741): Ueberschrift links, Filter rechts
 * daneben, beide in derselben Zeile.
 */
.dc-pl__kopf--mit-text {
	display: grid;
	grid-template-columns: 427px 1fr;   /* Figma 1536:6357 */
	column-gap: 20px;                   /* Figma: 447 - 427 */
	row-gap: 40px;                      /* Figma: Kopf bis 160, Filter ab 200 */
	align-items: start;
}

.dc-pl__kopf--mit-text .dc-pl__werkzeuge {
	grid-column: 1 / -1;
	justify-content: flex-end;   /* Figma: Filter enden bei 1320 */
}

.dc-pl__einleitung > :first-child {
	margin-block-start: 0;
}

.dc-pl__einleitung > :last-child {
	margin-block-end: 0;
}

.dc-pl__werkzeuge {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

/*
 * Suchfeld und Filter teilen sich das Aussehen: grauer Grund, schwarze
 * Kontur, 50 hoch. Der Unterschied liegt nur in der Breite.
 */
.dc-pl__suche input,
.dc-pl__filter select {
	height: 50px;   /* Figma */
	padding-inline: 20px;
	border: var(--dc-kontur);
	border-radius: 0;
	background-color: var(--dc-grau);
	font-family: inherit;
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	color: var(--dc-schwarz);
}

.dc-pl__suche input {
	width: 282px;   /* Figma */
	max-width: 100%;
}

.dc-pl__filter select {
	/*
	 * Feste Breite, 170: die 164 aus dem Entwurf plus 6 fuer das Symbol.
	 *
	 * "width: auto" geht hier NICHT: ein Klappfeld misst sich an seiner
	 * laengsten Option, nicht an der sichtbaren. Mit Begriffen wie
	 * "Migrationsgeschichte, Nationalitaet & Anti-Rassismus" waere das Feld
	 * 523 breit und die Zeile gesprengt.
	 */
	width: 170px;
	max-width: 100%;
	text-overflow: ellipsis;
	/*
	 * KEIN eigener Hintergrundpfeil mehr.
	 *
	 * Hier stand ein zweiter Pfeil als background-image - zusaetzlich zu dem
	 * icon-chevron.svg, das die Vorlage als <img> daruebersetzt. Beide lagen
	 * zwei Pixel versetzt uebereinander und ergaben ein verwischtes Zeichen.
	 */
	background-size: 14px 8px;
}

/* ---------------------------------------------------------------------------
 * Kartenraster
 * --------------------------------------------------------------------------- */

.dc-pl__raster {
	display: grid;
	grid-template-columns: repeat(2, 1fr);   /* Figma: zwei Karten zu 650 */
	gap: 20px;                               /* Figma */
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-pl__karte {
	display: grid;
	grid-template-columns: var(--dc-pl-portraet) 1fr;
	gap: 51px;             /* Figma: Portraet endet bei 284, Inhalt ab 335 */
	align-items: start;
	min-height: 420px;     /* Figma */
	padding: 41px 31px;    /* Figma */
	border: var(--dc-kontur);
	/*
	 * Grau, nicht weiss - Kundenentscheidung vom 09.09.2026 zum Abschnitt
	 * "Lernen Sie unsere aktuellen Keynote-Speaker*innen kennen". Der
	 * Entwurf zeichnet die Karte weiss; die Abweichung ist gewollt.
	 */
	background-color: var(--dc-grau);
}

/*
 * Der Knopf "Mehr anzeigen" ist eine Zelle des Rasters und steht darin
 * mittig - Figma 3005:631 sitzt genau in der Mitte der vierten Zelle.
 *
 * Keine Hoehe: Faellt er in eine freie Zelle neben einer Karte, gibt die
 * Karte der Zeile ihre 420 und der Knopf steht mittig darin. Steht er
 * allein in einer neuen Zeile, ist die Zeile nur so hoch wie er. Beides
 * ergibt sich von selbst, sobald er ein Rasterelement ist.
 */
.dc-pl__nachladen {
	display: grid;
	place-items: center;
}

/*
 * Dieselbe Blob-Form wie in blim/personen - die Speaker*innen sollen auf
 * beiden Ansichten gleich aussehen.
 */
.dc-pl__form {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

/*
 * KEINE GELBE FLAECHE UND KEINE FORM AUS DEM CSS MEHR (14.09.2026)
 *
 * Hier standen "background-color: var(--dc-gelb)" und eine Blob-Form aus
 * vier ungleichen Radien. Beides ist doppelt gemoppelt: Die gelieferten
 * Portraits bringen die gelbe Form bereits MIT - sie sind fertig
 * gestaltete PNGs mit durchsichtigen Ecken.
 *
 * Nachgemessen am 14.09.2026 ueber den Alphakanal aller 21 Portraits:
 * Bei 19 von ihnen sind zwischen 25 und 46 Prozent der Bildflaeche gelb,
 * bevor irgendein CSS greift. Die Farbe aus dem CSS war nie zu sehen -
 * ausser bei Personen ohne Portrait.
 *
 * Schlimmer war der zweite Teil: Die CSS-Form deckt sich NICHT mit der
 * Form im Bild, und "object-fit: cover" schnitt oben und unten von der
 * gelben Bildform etwas ab. Das Ergebnis war eine zweite, leicht
 * versetzte Kante - genau das, was als "gelber Rand hinter dem Bild"
 * aufgefallen ist.
 *
 * Jetzt bestimmt allein die Grafik das Aussehen. "contain" zeigt das Bild
 * vollstaendig, nichts wird ein zweites Mal beschnitten.
 *
 * WER HIER WIEDER EINE FARBE EINTRAEGT, sollte vorher wissen, dass die
 * Portraits ihre eigene mitbringen.
 */
.dc-pl__form img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* ---------------------------------------------------------------------------
 * Karteninhalt
 * --------------------------------------------------------------------------- */

.dc-pl__inhalt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;                     /* Figma: Name endet 193, Themen ab 223 */
	padding-block-start: 26px;     /* Figma: Bild ab 41, Name ab 67 */
	min-width: 0;                  /* sonst sprengt ein langes Wort die Spalte */
	align-self: stretch;
}

.dc-pl__name {
	margin: 0;
	font-size: var(--dc-fs-h4);    /* Figma: 24/26 Bold */
	line-height: var(--dc-lh-h4);
	font-weight: var(--dc-gewicht-bold);
}

.dc-pl__name a {
	color: var(--dc-schwarz);
	text-decoration: none;
}

.dc-pl__name a:hover,
.dc-pl__name a:focus-visible {
	text-decoration: underline;
}

/*
 * Das Pronomen steht im Entwurf in eigener Zeile unter dem Namen, in
 * derselben Schrift. Der Umbruch steht hier und nicht als <br> im Markup:
 * So bleibt "Jana Bachmann (sie/ihr)" ein zusammenhaengender Satz, wenn ihn
 * eine Vorlesefunktion ausgibt.
 */
.dc-pl__pronomen {
	display: block;
}

.dc-pl__themen {
	margin: 0;
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
}

/* Der Weiterlesen-Link sitzt im Entwurf am unteren Rand der Karte. */
.dc-pl__inhalt .dc-weiterlesen {
	margin-block-start: auto;
}

/* ---------------------------------------------------------------------------
 * Fussbereich
 * --------------------------------------------------------------------------- */

.dc-pl__leer {
	margin-block: var(--dc-abstand-block) 0;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Kleine Bildschirme
 *
 * Eine Karte je Zeile. Das Portraet bleibt links neben dem Text, solange
 * Platz ist - erst ganz schmal wird gestapelt.
 * --------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {

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

@media (max-width: 575.98px) {

	.dc-pl {
		--dc-pl-portraet: 160px;
	}

	.dc-pl__karte {
		grid-template-columns: 1fr;
		gap: var(--dc-abstand-element);
		min-height: 0;
		padding: 24px;
	}

	.dc-pl__inhalt {
		padding-block-start: 0;
	}

	.dc-pl__nachladen {
		min-height: 0;
		padding-block-start: var(--dc-abstand-block);
	}

	.dc-pl__form {
		width: var(--dc-pl-portraet);
	}

	.dc-pl__kopf--mit-text {
		grid-template-columns: 1fr;
		row-gap: var(--dc-abstand-element);
	}

	.dc-pl__kopf--mit-text .dc-pl__werkzeuge {
		justify-content: flex-start;
	}

	.dc-pl__werkzeuge {
		width: 100%;
	}

	/*
	 * Beide Huellen auf volle Breite, sonst richtet sich das Suchfeld nach
	 * seinen 282 und das Klappfeld nach der Zeile - sie stuenden
	 * unterschiedlich breit untereinander.
	 */
	.dc-pl__suche,
	.dc-pl__filter {
		width: 100%;
	}

	.dc-pl__suche input,
	.dc-pl__filter select {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Symbole in den Filterfeldern
 *
 * Figma: Lupe im Suchfeld, Pfeil im Klappfeld, beide rechts mit 20 Abstand
 * zum Rand. Die Originaldateien stammen aus dem Entwurf.
 *
 * ZUM HINTERGRUND, HIER LAG EIN FEHLER: Die Felder tragen im Entwurf
 * #f0f0f0, und hier stand einmal, das sei nur die Flaeche dahinter, weshalb
 * die Felder weiss bleiben koennten. Das war zweierlei verwechselt: Der
 * graue Grund der Figma-Ansicht sind die Hilfslinien des Rasters, die
 * Fuellung der Felder dagegen ist ausdruecklich --dc-grau - dieselbe Farbe,
 * die tokens.css fuer "Kacheln, Karten, Eingabefelder" fuehrt. Auf der
 * weissen Seite sind die Felder deshalb grau und damit ueberhaupt erst als
 * Felder zu erkennen.
 * --------------------------------------------------------------------------- */

.dc-pl__suche,
.dc-pl__filter {
	position: relative;
}

.dc-pl__symbol {
	position: absolute;
	inset-inline-end: 20px;
	inset-block-start: 50%;
	translate: 0 -50%;
	width: 14px;
	height: 14px;
	/* Klicks gehen durch aufs Feld darunter. */
	pointer-events: none;
}

/*
 * Im Klappfeld zeigt der Pfeil nach unten.
 *
 * icon-chevron.svg ist der Figma-Pfeil "arrow_forward_ios" und zeigt nach
 * rechts - im Suchfeld sitzt an derselben Stelle die Lupe, die nicht gedreht
 * werden darf. Deshalb die Drehung hier und nicht in der Datei.
 */
.dc-pl__filter .dc-pl__symbol {
	rotate: 90deg;
}

/*
 * Platz fuer das Symbol, damit der Text nicht darunterlaeuft: 20 Rand,
 * 14 Symbol, 12 Luft.
 *
 * Auch der eingebaute Pfeil des Klappfelds faellt hier weg - er laesst sich
 * nicht gestalten und sieht je nach Betriebssystem anders aus.
 */
.dc-pl__suche input,
.dc-pl__filter select {
	padding-inline-end: 46px;
	appearance: none;
}

/* Die eingebaute Loeschen-Schaltflaeche des Suchfelds ebenso. */
.dc-pl__suche input::-webkit-search-cancel-button {
	appearance: none;
}