/*
 * Block: Kacheln mit Initial
 *
 * Figma: Ueber_uns_Unser_ansatz (3005:586).
 * Drei Kacheln zu 427 x 506 bei 1320 Inhaltsbreite, Abstand 20.
 *
 * Masse innerhalb einer Kachel, gemessen ab Kacheloberkante:
 *   Farbband        0 ... 95, volle Breite
 *   Buchstabe      ab 57, 96 Bold - ragt also aus dem Band heraus
 *   Titel          ab 172, 24/26 Bold
 *   Text           ab 315, 16/20 Book
 *   Innenabstand   30 links und rechts
 */

/*
 * ABSTAND ZUR GELBEN FLAECHE DARUEBER (DC-47).
 *
 * Gemeldet als "Mehr Abstand nach oben zur gelben Flaeche": Auf Diversity
 * Management folgt "Unser Ansatz" unmittelbar auf das gelbe Band der
 * Icon-Kacheln - gemessen null Abstand, die Ueberschrift klebte an der
 * Farbkante.
 *
 * Im Entwurf sind es 100: Der Kachelabschnitt
 * (Diversity_Management_und_Beratung_Kacheln, 3003:2269) endet bei 2281,
 * der Ansatz (3003:2270) beginnt bei 2381.
 *
 * Nur fuer diese Nachbarschaft, nicht fuer den Block allgemein: Auf
 * "Ueber uns" steht davor ein Textabschnitt, und dort regelt den Abstand
 * die Regel weiter unten in dieser Datei.
 */
.dc-ik + .dc-initial {
	padding-block-start: 100px;   /* Figma 3003:2269 endet 2281, 3003:2270 ab 2381 */
}

/*
 * DER INNENABSTAND UNTEN GEHOERT ZUM BAND, NICHT ZUM BLOCK (DC-63).
 *
 * Ohne Band ist er nur Luft: Im Entwurf (3005:586) endet der Rahmen genau
 * an der Unterkante der Kacheln (349 + 506 = 855), darunter folgt der
 * uebliche Abschnittsabstand.
 */
.dc-initial--gelb,
.dc-initial--grau {
	padding-block-end: var(--dc-abstand-section);
}

/* ---------------------------------------------------------------------------
 * Farbiges Band
 *
 * Der Abschnitt liegt ausserhalb des Containers, deshalb faerbt sich die
 * Section ueber die volle Fensterbreite ein. Im Entwurf steht die Trias auf
 * demselben grauen Band wie Ueberschrift und Einleitung darueber - und die
 * Kacheln haben dieselbe Fuellung. Sie heben sich nur durch Kontur und
 * Farbband ab, nicht durch die Flaeche.
 * --------------------------------------------------------------------------- */

.dc-initial--gelb {
	background-color: var(--dc-gelb);
}

.dc-initial--grau {
	background-color: var(--dc-grau);
}

/*
 * Direkt unter dem Einleitungstext.
 *
 * Im Entwurf (3005:586) gehoeren Ueberschrift, Einleitung und Kacheln zu
 * EINEM Abschnitt: Der Text endet bei 324, die Kacheln beginnen bei 349.
 * Steht davor ein text-zweispaltig, bringt der aber seinen vollen
 * Abschnittsabstand mit - dann klaffte eine Luecke von rund 100 statt 25.
 *
 * Die Regel steht hier und nicht im anderen Block, weil sie nur gebraucht
 * wird, wenn dieser Block vorkommt - und dann laedt auch nur diese Datei.
 */
.dc-zweispaltig:has( + .dc-initial ) {
	padding-block-end: 25px;   /* Figma */
}

/*
 * Optionale Ueberschrift. Auf "Diversity Management & Beratung" steht sie
 * im Block ("Unser Ansatz"), auf "Ueber uns" liefert sie der text-zweispaltig
 * darueber. Figma: Ueberschrift endet bei 2420, Kacheln ab 2452.
 */
.dc-initial__ueberschrift {
	margin: 0 0 30px;   /* Figma */
	font-size: var(--dc-fs-h2);
	line-height: var(--dc-lh-h2);
	font-weight: var(--dc-gewicht-bold);
	text-wrap: balance;
}

.dc-initial__liste {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;   /* Figma: Kachel bei 0, 447, 893 - je 427 breit */
	list-style: none;
	margin: 0;
	padding: 0;
}

.dc-initial__kachel {
	display: flex;
	flex-direction: column;
	min-height: 506px;   /* Figma */
	background-color: var(--dc-grau);
	border: var(--dc-kontur);
}

/* ---------------------------------------------------------------------------
 * Farbband
 *
 * Eigene Kontur, damit die Unterkante als Linie stehen bleibt - im Entwurf
 * hat das Rechteck denselben Rahmen wie die Kachel.
 * --------------------------------------------------------------------------- */

.dc-initial__band {
	height: 95px;   /* Figma */
	margin: -1px -1px 0;
	border: var(--dc-kontur);
	flex-shrink: 0;
}

.dc-initial__band--gelb    { background-color: var(--dc-kachel-gelb); }
.dc-initial__band--pink    { background-color: var(--dc-kachel-pink); }
.dc-initial__band--tuerkis { background-color: var(--dc-kachel-tuerkis); }
.dc-initial__band--rose    { background-color: var(--dc-kachel-rose); }

/* ---------------------------------------------------------------------------
 * Inhalt
 * --------------------------------------------------------------------------- */

/*
 * DER TEXT STEHT AUF DER GEZEICHNETEN HOEHE, EGAL WIE LANG ER IST (DC-48).
 *
 * Hier stand eine Flexspalte, und der Text bekam margin-block-start: auto -
 * er klebte damit am unteren Kachelrand. Wie weit er vom Titel entfernt
 * stand, haing dadurch an SEINER EIGENEN LAENGE: Lokal mit einem
 * siebenzeiligen Text begann er bei 317, an der Stage mit vier Zeilen erst
 * bei 395. Der Kunde am 08.09.2026: "Fliesstexte in der Kachel weiter nach
 * oben setzen."
 *
 * Jetzt drei Rasterzeilen - Buchstabe, Titel, Text - mit fester Titelzeile.
 * Der Text beginnt damit immer an derselben Stelle, und die drei Kacheln
 * stehen auf einer Linie. Dasselbe Mittel wie in blocks/icon-kacheln.
 *
 * ZUR ZAHL: Im Entwurf (3003:2270) beginnt der Titel bei 172 und der Text
 * bei 315 unter der Kacheloberkante - das waeren 143. Unser Buchstabe endet
 * sieben hoeher als gezeichnet (Gotham setzt die Versalien tief, siehe
 * unten), der Titel beginnt deshalb bei 165. 150 statt 143 laesst den Text
 * genau bei den gezeichneten 315 anfangen.
 *
 * minmax und nicht 150 fest: Bricht ein Titel auf zwei Zeilen, waechst die
 * Zeile mit, statt den Text zu ueberdecken.
 */
.dc-initial__inhalt {
	display: grid;
	grid-template-rows: auto minmax(150px, auto) auto;
	align-content: start;
	flex-grow: 1;
	padding: 0 30px 30px;   /* Figma: Text beginnt 30 vom Kachelrand */
}

/*
 * Der Buchstabe ragt ins Farbband hinein.
 *
 * Im Entwurf endet das Band bei 95, die Oberkante der Versalie liegt bei 64
 * - der Buchstabe steht also knapp zur Haelfte im Band.
 *
 * Der Wert ist gemessen, nicht gerechnet: Gotham setzt die Versalien tief
 * in den Zeilenkasten, deshalb reicht der Versatz aus der Figma-Angabe
 * (Textkasten bei 57, also -38) nicht aus. Wer die Schriftgroesse aendert,
 * muss ihn neu abgleichen.
 */
.dc-initial__buchstabe {
	font-size: 96px;   /* Figma */
	line-height: 1.2;
	font-weight: var(--dc-gewicht-bold);
	margin: -45px 0 0;
}

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

/* Die Hoehe steuert jetzt die Titelzeile der Kachel, siehe oben. */
.dc-initial__text {
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Kleine Bildschirme
 *
 * Untereinander statt nebeneinander. Die feste Mindesthoehe faellt weg, sonst
 * entstuende unter jedem Text ein leerer Block.
 * --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

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

	.dc-initial__kachel {
		min-height: 0;
	}

	.dc-initial__buchstabe {
		font-size: 64px;
		margin-block-start: -30px;   /* -45 im selben Verhaeltnis wie 64 zu 96 */
	}

	.dc-initial__inhalt {
		padding: 0 20px 20px;
	}

	/*
	 * Untereinander gibt es nichts auszurichten - die feste Titelzeile
	 * risse dann nur eine Luecke unter kurzen Titeln.
	 */
	.dc-initial__inhalt {
		grid-template-rows: auto auto auto;
	}

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