/*
 * Block: Leistungen
 *
 * Figma: Startseite_Unsere_Leistungen (3001:1211), 1920 x 1092.
 *
 * Das gelbe Band ist 558 hoch, die Kacheln beginnen bei 379 - sie ragen
 * also 179 Pixel in das Band hinein. Statt einer festen Bandhoehe bekommt
 * das Band unten einen Innenabstand von 179 und die Kacheln denselben
 * Wert als negativen Aussenabstand. Dadurch stimmt die Ueberlappung auch
 * dann noch, wenn der Einleitungstext laenger oder kuerzer wird.
 */

.dc-leistungen {
	--dc-leistungen-ueberlappung: 179px;   /* Bandunterkante 558 minus Kacheloberkante 379 */

	/*
	 * Abstand zwischen dem Intro-Text und den Kacheln.
	 * Figma: Intro endet bei 319, Kacheln beginnen bei 379.
	 */
	--dc-leistungen-luft: 60px;
	--dc-leistungen-kachel-bild: 250px;    /* Figma: Logoelement 250 hoch */
}

/* ---------------------------------------------------------------------------
 * Gelbes Band mit zweispaltigem Kopf
 * --------------------------------------------------------------------------- */

.dc-leistungen__band {
	background-color: var(--dc-gelb);
	padding-block-start: var(--dc-abstand-section);
	padding-block-end: var(--dc-leistungen-ueberlappung);
}

.dc-leistungen__kopf {
	display: grid;
	grid-template-columns: 1fr 1fr;   /* Figma: 649 und 649 bei 1320 Inhalt */
	gap: var(--dc-abstand-block);
	align-items: start;
}

/* Ohne Einleitung eine Spalte - siehe Kommentar im template.php. */
.dc-leistungen__kopf--breit {
	grid-template-columns: 1fr;
}

/*
 * 923 breit, nicht die halbe Spalte: So steht sie im Entwurf (1536:6611
 * auf Ueber uns, 1575:962 auf Wissen & Ressourcen). In der halben Spalte
 * brach "Unsere Leistungen für mehr Diversity und Fairness" auf zwei
 * Zeilen um und schob die Kacheln 40 nach unten.
 */
.dc-leistungen__titel {
	max-width: 923px;   /* Figma */
	font-size: var(--dc-fs-h2);
	line-height: var(--dc-lh-h2);
	font-weight: var(--dc-gewicht-bold);
	margin: 0;
	text-wrap: balance;
}

.dc-leistungen__einleitung {
	display: flex;
	flex-direction: column;
	gap: var(--dc-abstand-element);
}

/* Vorspann: im Entwurf h6, also 20/22 Bold. */
.dc-leistungen__vorspann {
	font-size: var(--dc-fs-h6);
	line-height: var(--dc-lh-h6);
	font-weight: var(--dc-gewicht-bold);
	margin: 0;
}

.dc-leistungen__text p {
	margin: 0 0 var(--dc-abstand-absatz);
}

.dc-leistungen__text p:last-child {
	margin-bottom: 0;
}

.dc-leistungen__text a {
	color: var(--dc-schwarz);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Kacheln
 * --------------------------------------------------------------------------- */

/*
 * DIE KACHELN FUELLEN DIE BREITE, EGAL WIE VIELE ES SIND (DC-11).
 *
 * Auf den Leistungsseiten zeigt der Abschnitt die JEWEILS ANDEREN
 * Leistungsbereiche - auf "Trainings & Keynotes" also zwei statt drei. Bei
 * festen drei Spalten blieb die dritte leer: zwei Kacheln zu 427, rechts
 * 443 nichts. Der Kunde: "So sieht es aus, als ob etwas fehlt."
 *
 * DER ENTWURF ZEICHNET ES SO (3001:1295) - zwei Kacheln, rechts leer. Das
 * ist eine bewusste Abweichung auf Kundenwunsch, kein uebersehener Wert;
 * Noah hatte es zusaetzlich in Figma kommentiert.
 *
 * auto-fit statt einer festen Zahl: Leere Spuren fallen zusammen, die
 * uebrigen teilen sich die Breite. Damit stimmt es fuer jede Anzahl, ohne
 * dass jemand beim Hinzufuegen einer Kachel an das Blatt denken muss.
 *
 *   2 Kacheln -> je 650      (1320 - 20 Luft, halbiert)
 *   3 Kacheln -> je 427      wie gezeichnet, Figma 300 -> 747 -> 1193
 *   4 Kacheln -> je 315
 *
 * Die 300 im minmax sind die Untergrenze, ab der eine Kachel noch lesbar
 * ist. Sie begrenzt zugleich die Spaltenzahl auf vier - mehr passt in
 * 1320 nicht, und mehr sind auch nirgends vorgesehen.
 */
.dc-leistungen__kacheln {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	/*
	 * VIER ECHTE ZEILEN, NICHT NUR GEDACHTE (14.09.2026)
	 *
	 * Die Kacheln darunter holen sich ihre Zeilen per subgrid aus diesem
	 * Raster. Bis hierher standen hier gar keine Zeilen - die vier
	 * entstanden erst implizit durch "grid-row: span 4" der Kachel. Das
	 * ist der wackelige Fall: subgrid uebernimmt dann Spuren, die es
	 * selbst erst erzeugt, und nicht jede Umsetzung macht das gleich.
	 *
	 * Gemeldet wurde genau das (Christoph, 14.09.2026, Handy): Bild,
	 * Titel und Link lagen uebereinander in einer zu flachen Kachel - das
	 * Bild der Fall, in dem alle vier Zeilen zu einer zusammenfallen.
	 *
	 * Vier ausgeschriebene auto-Zeilen geben subgrid etwas Vorhandenes
	 * zum Erben. Umbrechen die Kacheln in eine zweite Reihe, legt das
	 * Raster die weiteren Zeilen wie bisher implizit an.
	 */
	grid-template-rows: repeat(4, auto);
	gap: 20px;                               /* Figma: 300 -> 747 -> 1193 */
	margin: calc( var(--dc-leistungen-luft) - var(--dc-leistungen-ueberlappung) ) 0 0;
	padding: 0;
	list-style: none;
	position: relative;
	z-index: 1;
}

/*
 * ALLE KACHELN TEILEN IHRE ZEILEN (DC-15).
 *
 * Der Kunde am 08.09.2026: "Ueberschriften und Fliesstexte sollten auf
 * einer gleichen Hoehe anfangen." Auf der Startseite braucht "Diversity
 * Management & Beratung" drei Zeilen, die beiden Nachbarn zwei - der
 * Fliesstext begann dadurch in der mittleren Kachel 40 tiefer. Im Entwurf
 * (3001:1211) beginnen alle drei Texte auf derselben Hoehe; dort ist fuer
 * die Ueberschrift der Platz der laengsten reserviert.
 *
 * subgrid statt flex: Die Kachel legt keine eigenen Zeilen an, sondern
 * benutzt vier Zeilen des umgebenden Rasters - Bild, Ueberschrift, Text,
 * Weiterlesen. Jede Zeile ist so hoch wie ihr hoechster Inhalt ueber ALLE
 * Kacheln hinweg. Damit stimmt es fuer jeden Text, ohne eine
 * Mindesthoehe zu raten.
 *
 * FESTE ZEILENNUMMERN, keine automatische Verteilung: Bild, Text und Link
 * sind einzeln abschaltbar. Ohne feste Nummern ruecken die vorhandenen
 * Teile nach oben und die Kacheln staenden wieder versetzt.
 *
 * row-gap: 0 - die 20 Luecke des Rasters gilt zwischen den Kacheln, nicht
 * zwischen ihren Zeilen. Die Abstaende innerhalb der Kachel machen
 * weiterhin die Aussenabstaende der Teile.
 *
 * OHNE subgrid (sehr alte Browser) faellt es auf das alte Bild zurueck:
 * vier Zeilen je Kachel, untereinander wie bisher - nur eben nicht mehr
 * ueber die Kacheln hinweg ausgerichtet.
 */
.dc-leistungen__kachel {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	row-gap: 0;
	background-color: var(--dc-grau);
	border: var(--dc-kontur);
	/*
	 * Figma (1575:1013 und die beiden Geschwister): Kachel bei 165, Logo
	 * bei 200, Unterlinie bei 656, Kachelende 692 - also 35 oben, 40 an
	 * den Seiten und 36 unten.
	 */
	padding: 35px 40px 36px;   /* Figma */
}

.dc-leistungen__kachel-bild {
	grid-row: 1;
	margin-block-end: 40px;   /* Figma: Logo endet 450, Titel ab 490 */
}

.dc-leistungen__kachel-bild img {
	display: block;
	width: auto;
	height: var(--dc-leistungen-kachel-bild);
	max-width: 100%;
	object-fit: contain;
}

/*
 * Die Kachelueberschrift ist im Entwurf genauso gross wie die
 * Hauptueberschrift des Blocks (36/40 Bold). Semantisch ist sie eine
 * Ebene darunter, deshalb h3 mit der Groesse von h2.
 */
.dc-leistungen__kachel-titel {
	grid-row: 2;
	font-size: var(--dc-fs-h2);
	line-height: var(--dc-lh-h2);
	font-weight: var(--dc-gewicht-bold);
	margin: 0 0 var(--dc-abstand-element);
	text-wrap: balance;
}

.dc-leistungen__kachel-text {
	grid-row: 3;
	margin: 0 0 var(--dc-abstand-block);
}

/* Der Weiterlesen-Link sitzt immer unten, auch bei unterschiedlich langen Texten. */
.dc-leistungen__kachel .dc-weiterlesen {
	grid-row: 4;
	align-self: end;
}

/* ---------------------------------------------------------------------------
 * Mittlere Bildschirme
 * --------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {

	.dc-leistungen__kachel {
		padding: 24px;
	}

	.dc-leistungen__kachel-titel {
		font-size: var(--dc-fs-h4);
		line-height: var(--dc-lh-h4);
	}
}

/* ---------------------------------------------------------------------------
 * Kleine Bildschirme
 *
 * Kopf und Kacheln stapeln. Die Ueberlappung entfaellt - sie funktioniert
 * nur, solange die Kacheln nebeneinander stehen.
 * --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

	.dc-leistungen {
		--dc-leistungen-ueberlappung: 0px;
		--dc-leistungen-kachel-bild: 160px;
	}

	.dc-leistungen__band {
		padding-block-end: var(--dc-abstand-block);
	}

	.dc-leistungen__kopf {
		grid-template-columns: 1fr;
		gap: var(--dc-abstand-element);
	}

	.dc-leistungen__kacheln {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		gap: var(--dc-abstand-element);
		margin-block-start: var(--dc-abstand-block);
	}

	/*
	 * KEIN SUBGRID, SOLANGE DIE KACHELN UNTEREINANDER STEHEN
	 *
	 * subgrid gibt es nur, damit Ueberschriften und Fliesstexte
	 * NEBENEINANDER stehender Kacheln auf gleicher Hoehe beginnen. In
	 * einer Spalte gibt es kein Nebeneinander - die Zeilenteilung bringt
	 * hier nichts und kostet nur das Risiko, dass die vier Zeilen
	 * zusammenfallen und der Inhalt uebereinanderliegt.
	 *
	 * Deshalb faellt die Kachel hier auf ein gewoehnliches Raster
	 * zurueck: vier eigene Zeilen, untereinander.
	 */
	.dc-leistungen__kachel {
		grid-template-rows: none;
		grid-row: auto;
	}
}