/*
 * Block: Angebote (Liste mit Filter)
 *
 * Figma: Keynotes_Unsere_Keynotes (3001:1322).
 * Karte 1320 breit, Inhalt links ca. 860, Bild rechts ca. 440.
 * Zwischen den Karten 30, Kontur schwarz, keine Rundung.
 */

.dc-ang-liste {
}

/* ---------------------------------------------------------------------------
 * Kopfzeile: Ueberschrift links, Filterfeld rechts
 * --------------------------------------------------------------------------- */

.dc-ang-liste__kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--dc-abstand-element);
	margin-block-end: var(--dc-abstand-block);
	flex-wrap: wrap;
}

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

/* ---------------------------------------------------------------------------
 * Filterfeld
 *
 * <details> statt eigener Auf-Zu-Mechanik: Der Browser bringt Tastatur-
 * bedienung und den Zustand fuer Screenreader von sich aus mit.
 * --------------------------------------------------------------------------- */

.dc-ang-liste__filter {
	position: relative;
	border: var(--dc-kontur);
	/* Figma 3001:1322: Das Feld hat denselben Grund wie die Seite, #f0f0f0. */
	background-color: var(--dc-grau);
}

.dc-ang-liste__filter > summary {
	padding: 12px 20px;
	cursor: pointer;
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	font-weight: var(--dc-gewicht-bold);
	list-style: none;
}

.dc-ang-liste__filter > summary::-webkit-details-marker {
	display: none;
}

.dc-ang-liste__filter > summary::after {
	content: " ▾";
}

.dc-ang-liste__filter[open] > summary::after {
	content: " ▴";
}

/*
 * Das aufgeklappte Feld legt sich ueber den Inhalt, statt ihn nach unten zu
 * schieben - sonst springt die Liste beim Oeffnen weg.
 */
.dc-ang-liste__filter-inhalt {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 100%;
	z-index: 2;
	width: max-content;
	max-width: 90vw;
	padding: 20px;
	border: var(--dc-kontur);
	/* Grau wie das Feld selbst; abgehoben wird ueber den Schatten. */
	background-color: var(--dc-grau);
	box-shadow: var(--dc-schatten);
}

.dc-ang-liste__filter-inhalt fieldset {
	margin: 0 0 var(--dc-abstand-element);
	padding: 0;
	border: 0;
}

.dc-ang-liste__filter-inhalt legend {
	margin-block-end: 8px;
	padding: 0;
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	font-weight: var(--dc-gewicht-bold);
}

.dc-ang-liste__filter-inhalt label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-block: 4px;
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	cursor: pointer;
}

.dc-ang-liste__filter-fuss {
	margin: 0;
}


/* ---------------------------------------------------------------------------
 * Karten
 * --------------------------------------------------------------------------- */

.dc-ang-liste__karten {
	display: grid;
	gap: 30px;   /* Figma */
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * DER RAHMEN LIEGT UM DEN TEXTKASTEN, NICHT UM DIE GANZE KARTE.
 *
 * Nachgemessen an Keynotes_Unsere_Keynotes (3001:1322): Der Textkasten
 * (1052:961) ist 872 breit und schwarz umrandet, das Bild (1052:1011) steht
 * mit 427 daneben - dazwischen 21 Luft, zusammen die 1320 des Containers.
 * Vorher lag der Rahmen um beides und das Bild klebte am Text.
 */
.dc-ang-liste__karte {
	display: grid;
	grid-template-columns: minmax(0, 872fr) minmax(0, 427fr);   /* Figma */
	column-gap: 21px;   /* Figma */
}

.dc-ang-liste__inhalt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border: var(--dc-kontur);
	/*
	 * Figma 3001:1322: Der Textkasten ist NICHT weiss. Nachgemessen im
	 * Export sind Seitengrund, Karteninneres und Filterfeld alle #f0f0f0 -
	 * die Karte hebt sich allein ueber ihre schwarze Kontur ab.
	 */
	background-color: var(--dc-grau);

	/*
	 * Figma: Karte 500 hoch. Innen links 30, oben 50, unten 40 und rechts
	 * 50 - die Trennlinie der Fusszeile ist deshalb 792 breit (872 - 30 -
	 * 50). Vorher standen ueberall 24, dadurch sass alles rund 25 zu hoch
	 * und 5 zu weit links.
	 */
	min-height: 500px;              /* Figma */
	padding: 50px 50px 40px 30px;   /* Figma */

	/*
	 * Kein gap: Die Abstaende zwischen den Zeilen sind im Entwurf
	 * unterschiedlich (20 / 10 / 21 / 20) und stehen deshalb einzeln an den
	 * Elementen.
	 */
	gap: 0;
}


/*
 * OBEN RECHTS STEHT DER GELBE KNOPF, DARUNTER DER TEXTLINK (DC-67).
 *
 * So zeichnet es der Entwurf (3001:1322), und dorthin ist es am
 * 10.09.2026 zurueckgekehrt. Getauscht wurden nur die INHALTE der beiden
 * Elemente, nicht ihre Plaetze: Der Knopf fuehrt jetzt auf die
 * Detailseite, der Textlink zum Kontaktformular.
 *
 * Der Textlink steht im Quelltext und im Fluss unter dem Teaser - erst
 * Titel und Text lesen, dann Kontakt aufnehmen.
 */
.dc-ang-liste__anfrage {
	position: absolute;
	inset-block-start: 50px;    /* Figma 3001:1322 */
	inset-inline-end: 50px;     /* Figma 3001:1322 */
	min-width: 196px;           /* Figma 3001:1322: Knopf 196 x 50 */
}

/*
 * Der Textlink muss ueber die Flaeche des Kachellinks (DC-9), sonst
 * schluckt ihn dessen Pseudoelement und jeder Klick landet auf der
 * Detailseite statt im Kontaktformular.
 */
.dc-ang-liste__mehr {
	position: relative;
	z-index: 1;
}

/* Marken: Bestseller-Plakette und Dimensionen */

/*
 * Plakette und Dimensionsmarke sind im Entwurf nicht klein gesetzt, sondern
 * so gross wie der Fliesstext (1052:984 "Geschlecht": 20 hoch). Die
 * Plakette misst 102 x 35 (3001:1323), das Farbquadrat 20 x 20.
 */
.dc-ang-liste__marken {
	/* Figma: Marken ab 50, Titel ab 90. */
	margin-block-end: 20px;
	display: flex;
	align-items: center;
	gap: 29px;   /* Figma: Plakette endet bei 129, Marke ab 158 */
	flex-wrap: wrap;
	/*
	 * Reserviert den Platz fuer den gelben Knopf oben rechts: 196 breit
	 * plus 4 Luft (Figma 3001:1322).
	 */
	padding-inline-end: 200px;   /* Figma 3001:1322: Knopf 196 breit, oben rechts */
}

.dc-ang-liste__plakette {
	padding: 7px 12px;   /* Figma: 35 hoch bei 20 Zeilenhoehe */
	border: var(--dc-kontur);
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
}

.dc-ang-liste__dimension {
	display: inline-flex;
	align-items: center;
	gap: 15px;   /* Figma: Quadrat bis 50, Wort ab 65 */
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
}

.dc-ang-liste__punkt {
	--dc-dim-farbe: var(--dc-schwarz);   /* falls der Begriff keine Farbe hat */

	display: block;
	width: 20px;    /* Figma */
	height: 20px;   /* Figma */
	flex-shrink: 0;
	background-color: var(--dc-dim-farbe);
}

/* Text */

.dc-ang-liste__karte-titel {
	margin: 0 0 10px;   /* Figma: Titel bis 116, Untertitel ab 126 */
	font-size: var(--dc-fs-h4);
	line-height: var(--dc-lh-h4);
	font-weight: var(--dc-gewicht-bold);
	/*
	 * Reserviert den Platz fuer den gelben Knopf oben rechts: 196 breit
	 * plus 4 Luft (Figma 3001:1322).
	 */
	padding-inline-end: 200px;   /* Figma 3001:1322: Knopf 196 breit, oben rechts */
}

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

.dc-ang-liste__karte-titel a:hover,
.dc-ang-liste__karte-titel a:focus-visible {
	text-decoration: underline;
}

.dc-ang-liste__untertitel {
	margin: 0 0 21px;   /* Figma: Untertitel bis 146, Teaser ab 167 */
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	font-weight: var(--dc-gewicht-bold);
}

/*
 * Figma: Der Teaser ist 618 breit und 100 hoch - fuenf Zeilen, danach ist
 * Schluss. Ungekappt schiebt ein langer Auszug die Karte ueber ihre 500
 * hinaus.
 */
.dc-ang-liste__teaser {
	margin: 0 0 20px;   /* Figma: Teaser bis 267, Element darunter ab 287 */
	max-width: 618px;   /* Figma */

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
}

.dc-ang-liste__mehr {
	/* Stil unveraendert - nur die Position ist getauscht, siehe oben. */
	font-weight: var(--dc-gewicht-bold);
	color: var(--dc-schwarz);
	text-decoration: underline;
}

/* Fusszeile: Personen links, Schwerpunkte rechts, mit Trennlinien */

/*
 * Figma: Die Trennlinie liegt bei 358, die Namen beginnen bei 373 - also 15
 * Abstand. Die Schrift ist dieselbe wie im Fliesstext (die drei Namen
 * ergeben zusammen 60, das sind drei Zeilen zu 20), nicht die kleine
 * Fussnotengroesse.
 */
.dc-ang-liste__fuss {
	display: grid;
	grid-template-columns: 305px 1fr;   /* Figma: Namen ab 30, Themen ab 335 */
	gap: var(--dc-abstand-element);
	width: 100%;
	margin-block-start: auto;
	padding-block-start: 15px;   /* Figma */
	border-block-start: var(--dc-kontur);
}

.dc-ang-liste__fuss ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
}

/*
 * Nur die Themen rechts sind einzeln unterstrichen (Linien bei 409 und
 * 460). Die Namen links stehen ohne Linie direkt untereinander - deshalb
 * bekommen sie auch keinen Zeilenabstand obendrauf.
 */
.dc-ang-liste__schwerpunkte li {
	padding-block-end: 16px;              /* Figma: Wort bis 393, Linie 409 */
	border-block-end: var(--dc-kontur);
}

.dc-ang-liste__schwerpunkte li + li {
	margin-block-start: 15px;   /* Figma: Linie 409, naechstes Wort 424 */
}

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

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

/* Bild */

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

/* ---------------------------------------------------------------------------
 * Fussbereich der Liste
 * --------------------------------------------------------------------------- */

.dc-ang-liste__nachladen,
.dc-ang-liste__leer {
	margin-block: var(--dc-abstand-block) 0;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Kleine Bildschirme
 *
 * Das Bild wandert nach oben, der Anfrage-Button verlaesst die absolute
 * Position - nebeneinander bleibt dafuer kein Platz.
 * --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

	/*
	 * MOBIL UMSCHLIESST DER RAHMEN AUCH DAS BILD (DC-76).
	 *
	 * Auf der gezeichneten Breite liegt der Rahmen nur um den Textkasten,
	 * das Bild steht mit 21 Luft daneben (Figma 3001:1322). Untereinander
	 * ergibt dasselbe ein loses Bild ueber einem Kasten - der Kunde am
	 * 13.09.2026: "Das Bild ist weiterhin ausserhalb der Kachel."
	 *
	 * Gemessen war es nie ausserhalb der KARTE: Bild und Text standen bei
	 * 390 Fensterbreite beide von 40 bis 331. Ausserhalb war es nur vom
	 * RAHMEN - und der ist das, was man als Kachel sieht.
	 *
	 * Deshalb wandert der Rahmen mobil an die ganze Karte, und die Luecke
	 * zwischen Bild und Text faellt weg. Das Bild sitzt damit oben IN der
	 * Kachel, wie in der urspruenglichen Meldung gewuenscht.
	 */
	.dc-ang-liste__karte {
		grid-template-columns: 1fr;
		/* Untereinander gibt es keine Spaltenluecke mehr. */
		column-gap: 0;
		row-gap: 0;
		border: var(--dc-kontur);
	}

	.dc-ang-liste__inhalt {
		border: 0;
	}

	/*
	 * Die feste Hoehe und die grossen Innenabstaende gelten nur fuer die
	 * gezeichnete Breite. Untereinander waechst die Karte mit ihrem Inhalt,
	 * sonst steht unter kurzen Texten ein halber Bildschirm Leere.
	 */
	.dc-ang-liste__inhalt {
		min-height: 0;
		padding: 30px;
	}

	/*
	 * DAS FILTERFELD RAGTE LINKS AUS DEM BILD.
	 *
	 * Es klappt rechtsbuendig unter dem Filterknopf auf und war
	 * "max-width: 90vw" breit. 90vw messen aber am FENSTER, waehrend die
	 * rechte Kante am Knopf haengt - gemessen bei 390 Fensterbreite: Feld
	 * 347 breit, rechte Kante bei 236, linke also bei -113.
	 *
	 * Aufgefallen ist es, als mit DC-77 jeder Knopf die volle Breite bekam
	 * und "Auswahl zuruecksetzen" das Feld noch weiter aufzog. Der Fehler
	 * war aber schon vorher da.
	 *
	 * Mobil nimmt der Filter deshalb die volle Breite - als Bedienelement
	 * auf dem Handy ohnehin die bessere Form -, und das Feld folgt ihm.
	 * Damit kann es nirgends mehr hinausragen, und der Knopf darin darf
	 * die Breite fuellen wie jeder andere.
	 */
	.dc-ang-liste__filter {
		width: 100%;
	}

	.dc-ang-liste__filter-inhalt {
		width: 100%;
		max-width: none;
	}

	.dc-ang-liste__anfrage {
		position: static;
		min-width: 0;

		/*
		 * ABSTAND ZWISCHEN KNOPF UND LINKTEXT (DC-76, Kommentar).
		 *
		 * Der Kunde am 11.09.2026: "Der Abstand zwischen gelbem Button und
		 * Linktext ist zu klein." Gemessen bei 390 Fensterbreite: Der Knopf
		 * endete bei 3645, "Mehr Infos" begann bei 3645 - null Abstand.
		 *
		 * Auf der gezeichneten Breite steht der Knopf oben rechts und hat
		 * mit dem Linktext nichts zu tun; der Abstand ist deshalb eine
		 * reine Frage des schmalen Schirms und steht nur hier.
		 */
		margin-block-end: var(--dc-abstand-element);
	}

	/*
	 * TRENNLINIE ZWISCHEN NAMEN UND THEMEN (DC-76, Kommentar).
	 *
	 * Der Kunde: "im responsive Design fehlt eine Trennlinie zwischen
	 * Person und Leistungsart."
	 *
	 * Nebeneinander braucht es keine - die beiden Spalten stehen getrennt
	 * (deshalb steht auf der gezeichneten Breite auch keine, Figma
	 * 3001:1322). Untereinander stossen sie aneinander, und die Namen
	 * lesen sich wie der erste Eintrag der Themenliste. Die Linie hat
	 * denselben Abstand wie die Linien der Themen darunter.
	 */
	.dc-ang-liste__personen {
		padding-block-end: 16px;              /* wie .dc-ang-liste__schwerpunkte li */
		border-block-end: var(--dc-kontur);
	}

	.dc-ang-liste__bild {
		order: -1;
	}

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

	.dc-ang-liste__marken,
	.dc-ang-liste__karte-titel {
		padding-inline-end: 0;
	}

	.dc-ang-liste__fuss {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/*
 * Die Namen der Referent*innen bleiben ueber der Klickflaeche (DC-9).
 *
 * Sie fuehren auf die Personenseite, nicht auf das Angebot - sie duerfen
 * nicht von der Flaeche der Karte geschluckt werden. "Mehr Infos" braucht
 * das nicht: Der Link ist ohnehin absolut positioniert und steht im
 * Quelltext hinter dem Titel.
 */
.dc-ang-liste__karte .dc-ang-liste__personen a {
	position: relative;
	z-index: 1;
}