/*
 * Block: Text zweispaltig
 *
 * Figma: Startseite_Beratung_mit_Haltung (3001:1213).
 * Zwei gleich breite Spalten zu 649 bei 1320 Inhaltsbreite, Abstand 21.
 */

/*
 * KEIN INNENABSTAND OHNE BAND.
 *
 * Hier stand "padding-block: var(--dc-abstand-section)" fuer alle Faelle.
 * Zusammen mit dem Abstand, den base.css zwischen zwei Abschnitten setzt,
 * ergab das 200 statt 100 Luft - und zwar oben UND unten. Der Abschnitt
 * "Was unsere Keynotes auszeichnet" mass dadurch 541 statt der 325 des
 * Entwurfs, ohne dass eine einzige Zeile Text anders gewesen waere.
 *
 * Im Entwurf sind die Rahmen dieser Abschnitte genau so hoch wie ihr
 * Inhalt; die Luft dazwischen ist der Abschnittsabstand. Nur die farbigen
 * Baender brauchen einen eigenen Innenabstand - sonst klebte die Farbe am
 * Text.
 */
.dc-zweispaltig--gelb,
.dc-zweispaltig--pink,
.dc-zweispaltig--tuerkis,
.dc-zweispaltig--rose,
.dc-zweispaltig--grau {
	padding-block: var(--dc-abstand-section);
}

.dc-zweispaltig__raster {
	display: grid;
	/*
	 * Figma (Startseite_Beratung_mit_Haltung, 3001:1213): Ueberschrift 649,
	 * Luecke 21, Text 649 - zusammen die 1320 des Containers. Mit der
	 * Blockluecke von 56 waren beide Spalten je 18 zu schmal.
	 */
	grid-template-columns: 1fr 1fr;
	column-gap: 21px;   /* Figma */
	row-gap: var(--dc-abstand-block);
	align-items: start;
}

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

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

/*
 * Das letzte Element im Text traegt keinen Abstand nach unten - was darunter
 * folgt, bringt seinen eigenen mit. Frueher galt das nur fuer Absaetze;
 * endete der Text mit einer Aufzaehlung, standen 16 zu viel unter dem Block
 * (aufgefallen auf "Diversity Beratung & Strategie", DC-50: der Stoerer
 * sass 36 statt der gezeichneten 20 unter der Spalte).
 */
.dc-zweispaltig__text > :last-child {
	margin-block-end: 0;
}

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

@media (max-width: 991.98px) {

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

/* ---------------------------------------------------------------------------
 * Farbiges Band
 *
 * Der Block liegt ausserhalb des Containers, deshalb faerbt sich die Section
 * ueber die volle Fensterbreite ein. Der Inhalt bleibt durch .dc-container
 * bei 1320.
 * --------------------------------------------------------------------------- */

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

/*
 * Die drei Farben der uebrigen Leistungsarten. Auf den
 * Angebots-Detailseiten traegt das Vollbreitband die Farbe der
 * Leistungsart - im Entwurf ist das Band der Workshop-Musterseite pink
 * (1236:604, #f1529e nachgemessen), das der Keynote-Seite gelb.
 */
.dc-zweispaltig--pink {
	background-color: var(--dc-kachel-pink);
}

.dc-zweispaltig--tuerkis {
	background-color: var(--dc-kachel-tuerkis);
}

.dc-zweispaltig--rose {
	background-color: var(--dc-kachel-rose);
}

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

/* ---------------------------------------------------------------------------
 * Trennlinie
 *
 * Auf "Diversity Management & Beratung" trennt der Entwurf die vier
 * Leistungsabschnitte durch eine durchgehende waagerechte Linie ueber die
 * Containerbreite - nicht durch wechselnde Hintergruende.
 *
 * Dasselbe Muster auf "Agenturleistungen & Meldestelle". Die Masse stehen
 * unten an den Regeln; der uebliche Abschnittsabstand aus base.css waere
 * hier doppelt so viel.
 * --------------------------------------------------------------------------- */

/*
 * DIE TRENNLINIE TRENNT ZWEI ABSCHNITTE, SIE SCHLIESST KEINEN AB (DC-55).
 *
 * Zwei Anlaeufe hat das gebraucht. Zuerst stand sie ueber jedem Abschnitt,
 * auch ueber dem ersten, wo sie ohne Bezug in der Luft hing (DC-49). Dann
 * stand sie unter dem Abschnitt - aber der Block endet beim Text, und der
 * Stoerer, der inhaltlich dazugehoert, ist ein eigener Block. Die Linie
 * lief also zwischen Text und zugehoerigem Knopf hindurch.
 *
 * Nachgemessen im Entwurf (Agentur_und_Meldestelle_Diskriminierungsstelle,
 * 3004:2351): Der Stoererkasten des ersten Abschnitts endet bei 773, die
 * Linie liegt bei 823, die Ueberschrift "Fuer Privatpersonen" bei 873 -
 * also 50 darueber und 50 darunter. Beim zweiten Paar sind es 40 und 50
 * (Stoerer bis 1366, Linie 1406, Ueberschrift 1456); auf
 * Diversity_Management_und_Beratung_Diversity_check (3003:2271) wieder 50
 * (Stoerer bis 433, Linie 483).
 *
 * Die Linie gehoert damit an den KOPF des folgenden Abschnitts. Der erste
 * Abschnitt einer Gruppe bekommt sie deshalb nicht - bei vier Abschnitten
 * zeichnet der Entwurf drei Linien.
 */

main section + section.dc-zweispaltig--linie {
	margin-block-start: 50px;   /* Figma 3004:2351: Stoerer bis 773, Linie 823 */
}

/*
 * Die Linie kommt als Pseudoelement, nicht als border auf dem Container.
 *
 * Der Container traegt seitlich einen Innenabstand; ein border darauf waere
 * 80 breiter als der Inhalt. Im Entwurf laeuft die Linie von 300 bis 1620 -
 * genau die 1320 der Inhaltsbreite. Das Pseudoelement wird deshalb auf
 * denselben Innenabstand eingerueckt.
 *
 * position: absolute nimmt es aus dem Fluss - sonst waere es im Raster des
 * Blocks eine dritte Spalte.
 */
.dc-zweispaltig--linie .dc-container {
	position: relative;
	padding-block-start: 50px;   /* Figma 3004:2351: Linie 823, Ueberschrift 873 */
}

.dc-zweispaltig--linie .dc-container::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: var(--dc-rand-mobil);
	border-block-start: var(--dc-kontur);
}

/* ---------------------------------------------------------------------------
 * Breite Textspalte
 *
 * Figma: bei den laengeren Texten steht die Ueberschrift schmaler und der
 * Text nimmt zwei Drittel ein. Auf "Ueber uns" (1052:443) ist das die
 * Regel - dort aber mit EINER Textspalte.
 * --------------------------------------------------------------------------- */

/*
 * Figma (Ueber_uns_Was_und_auszeichnet, 3005:587): Ueberschrift 427,
 * Luecke 20, Text 873.
 */
.dc-zweispaltig--breit .dc-zweispaltig__raster {
	grid-template-columns: 427fr 873fr;
	column-gap: 20px;   /* Figma */
}

@media (max-width: 991.98px) {

	.dc-zweispaltig--breit .dc-zweispaltig__raster {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * Zweispaltiger Fliesstext
 *
 * "columns" statt Grid, weil der Text frei zwischen den Spalten umbrechen
 * soll. Ein Absatz darf dabei nicht auseinandergerissen werden.
 * --------------------------------------------------------------------------- */

/*
 * Der Vorspann steht ueber den Spalten, nicht darin: Er gehoert zum
 * Rasterfeld, die Mehrspaltigkeit sitzt eine Ebene tiefer im Text.
 * Figma: Individuelles_Coaching_ablauf (1536:5888) - 873 breit ueber
 * beiden Spalten, fett gesetzt.
 */
.dc-zweispaltig__vorspann {
	font-weight: var(--dc-gewicht-bold);
	margin-block-end: var(--dc-abstand-block);
}

.dc-zweispaltig__vorspann p {
	margin: 0;
}

.dc-zweispaltig--spalten .dc-zweispaltig__text {
	columns: 2;
	/*
	 * Figma 3001:1249: Spalte eins endet bei 873, Spalte zwei beginnt bei
	 * 893. Dasselbe im Coaching-Ablauf (3003:2199). Vorher stand hier der
	 * Blockabstand - fast dreimal so viel.
	 */
	column-gap: 20px;   /* Figma 3001:1249 */
}

/*
 * WO DIE ZWEITE SPALTE BEGINNT (DC-50).
 *
 * "columns: 2" verteilt gleichmaessig auf die Hoehe. Der Entwurf teilt
 * dagegen nach dem INHALT: links der Fliesstext, rechts der fette Vorspann
 * mit seiner Aufzaehlung (3003:2272 - links 447/0 mit 426, rechts 893/0 mit
 * 427; genauso 3004:2351 auf der Meldestelle). Auf der Meldestelle traf
 * sich das zufaellig, auf "Diversity Beratung & Strategie" nicht: Dort
 * stand die halbe Aufzaehlung links.
 *
 * Erkennungszeichen ist der Absatz, der NUR aus fettem Text besteht -
 * "Unsere Diversity Beratung verbindet ...", "Folgendes erwartet Sie:".
 * Er leitet in beiden Faellen die rechte Spalte ein. Der erste Absatz ist
 * ausgenommen: Er beginnt die Spalte ohnehin.
 */
.dc-zweispaltig--spalten .dc-zweispaltig__text p:not(:first-child):has( > strong:only-child ) {
	break-before: column;
}

/*
 * WAS UMBRECHEN DARF UND WAS NICHT (DC-10).
 *
 * Hier stand "> * { break-inside: avoid }". Bei einer Aufzaehlung ist das
 * direkte Kind aber die ganze <ul> - die blieb damit unteilbar und stand
 * vollstaendig in der ersten Spalte. Der Abschnitt "Was unsere Keynotes
 * und Trainings auszeichnet" hatte deshalb zwar zwei Spalten eingestellt,
 * zeigte aber alle fuenf Punkte untereinander. Im Entwurf stehen drei
 * links und zwei rechts (3001:1249).
 *
 * Jetzt darf die Liste umbrechen, der einzelne Punkt nicht: Ein
 * Aufzaehlungspunkt soll nicht mitten im Satz die Spalte wechseln.
 */
.dc-zweispaltig--spalten .dc-zweispaltig__text > :not(ul):not(ol),
.dc-zweispaltig--spalten .dc-zweispaltig__text li {
	break-inside: avoid;
}

@media (max-width: 991.98px) {

	.dc-zweispaltig--spalten .dc-zweispaltig__text {
		columns: 1;
	}

	/*
	 * "columns: 1" ALLEIN REICHT NICHT - DER SPALTENUMBRUCH MUSS AUCH WEG.
	 *
	 * Aufgefallen beim Pruefen von DC-87 auf
	 * /diversity-management-beratung/: Die Seite war bei 360 Pixel 590
	 * breit, der Text lief rechts aus dem Bild.
	 *
	 * Die Regel weiter oben setzt "break-before: column" vor dem fetten
	 * Vorspann. Das gilt weiter, auch wenn nur noch eine Spalte
	 * eingestellt ist - der Browser legt dann eine zweite Spalte NEBEN die
	 * erste, ausserhalb des Containers. Nachgemessen: der Textblock 265
	 * breit, sein Inhalt 550 (zwei Spalten plus 20 Abstand).
	 *
	 * Mit "break-before: auto" laeuft der Text wieder durch.
	 */
	.dc-zweispaltig--spalten .dc-zweispaltig__text p:not(:first-child):has( > strong:only-child ) {
		break-before: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Zwischenueberschriften im Fliesstext
 *
 * Global ist h3 36px Medium - das ist die Groesse fuer eigenstaendige
 * Abschnittstitel. Im Fliesstext dieses Blocks sind es laut Figma nur
 * fette Vorspaenne in Textgroesse. Deshalb hier zurueckgesetzt statt am
 * globalen Token gedreht.
 * --------------------------------------------------------------------------- */

.dc-zweispaltig__text :is(h3, h4, h5, h6) {
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	font-weight: var(--dc-gewicht-bold);
	margin: var(--dc-abstand-absatz) 0 0;
}

.dc-zweispaltig__text > :is(h3, h4, h5, h6):first-child {
	margin-block-start: 0;
}

/*
 * Ueberschriften duerfen trennen.
 *
 * "Organisationsentwicklung" passt in der schmalen Titelspalte nicht in
 * eine Zeile und wurde vorher mitten im Wort umgebrochen.
 */
.dc-zweispaltig__titel {
	hyphens: auto;
}

/*
 * Rasterspalten duerfen schrumpfen.
 *
 * Ohne min-width:0 bekommt eine Grid-Spalte als Mindestbreite die Breite
 * ihres laengsten Wortes. Auf schmalen Schirmen sprengt das die Seite.
 */
.dc-zweispaltig__raster > * {
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Ein Stoerer MITTEN im Abschnitt (DC-50)
 *
 * Steht der Stoerer am Fuss eines Abschnitts, haelt er 40 Abstand - so ist
 * es in blocks/stoerer/style.css belegt. Geht der Text darunter weiter,
 * sind es im Entwurf weniger: 3003:2272 zeigt die rechte Spalte bis 180,
 * den Kasten ab 200 und den Text darunter ab 316 (Kasten endet 293).
 *
 * Erkennbar ist der Fall am Textblock OHNE Ueberschrift, der auf den
 * Stoerer folgt: Ein Abschnitt beginnt mit einer Ueberschrift, eine
 * Fortsetzung nicht.
 * --------------------------------------------------------------------------- */

/*
 * Ohne Ueberschrift bleibt die Textspalte, wo sie gehoert: in der zweiten
 * Rasterspalte. Sonst rutscht sie in das leere erste Feld und steht ploetzlich
 * dort, wo sonst die Ueberschrift steht.
 */
.dc-zweispaltig--fortsetzung .dc-zweispaltig__spalte {
	grid-column: 2;
}

main section.dc-zweispaltig + section.dc-stoerer:has( + section.dc-zweispaltig--fortsetzung ) {
	margin-block-start: 20px;   /* Figma 3003:2272: Spalte bis 180, Kasten ab 200 */
}

main section.dc-stoerer + section.dc-zweispaltig--fortsetzung {
	margin-block-start: 23px;   /* Figma 3003:2272: Kasten bis 293, Text ab 316 */
}