/*
 * detail.css — Detailseiten der Inhaltstypen
 *
 * Gilt fuer single-dc_publikation.php, single-dc_pressebeitrag.php und
 * single-dc_stimme.php. Die drei sind sich aehnlich genug fuer ein
 * gemeinsames Grundlayout: Medium links, Inhalt rechts.
 *
 * Es gibt keinen Figma-Entwurf fuer diese Seiten. Das Layout folgt der
 * Bildsprache der Startseite: 1320er Container, schwarze Konturen,
 * gelber Button, keine Eckenrundung.
 */

.dc-detail {
	padding-block: var(--dc-abstand-section);
}

.dc-detail__raster {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--dc-abstand-block);
	align-items: start;
}

.dc-detail__medium img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--dc-kontur);
}

.dc-detail__inhalt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Kopfzeile
 * --------------------------------------------------------------------------- */

.dc-detail__titel {
	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-detail__datum,
.dc-detail__jahr,
.dc-detail__quelle,
.dc-detail__rolle {
	margin: 0 0 var(--dc-abstand-element);
}

/*
 * "Publiziert in ..." und das Jahr gehoeren zusammen und stehen deshalb
 * dicht beieinander - aber NUR, wenn das Jahr wirklich folgt. Ein fester
 * kleiner Abstand an der Quelle liess sie sonst am Vorspann kleben, wenn
 * kein Jahr gepflegt war.
 *
 * Die Rechnung nimmt den normalen Abstand zurueck und laesst 4 Pixel
 * stehen.
 */
.dc-detail__quelle + .dc-detail__jahr {
	margin-block-start: calc( 4px - var(--dc-abstand-element) );
}

.dc-detail__symbol {
	display: block;
	width: auto;
	height: 75px;
	margin-block-end: var(--dc-abstand-element);
}

.dc-detail__vorspann {
	font-size: var(--dc-fs-h6);
	line-height: var(--dc-lh-h6);
	font-weight: var(--dc-gewicht-bold);
	margin: 0 0 var(--dc-abstand-block);
}

/* ---------------------------------------------------------------------------
 * Fliesstext
 * --------------------------------------------------------------------------- */

.dc-detail__text {
	margin-block-end: var(--dc-abstand-block);
}

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

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

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

/* ---------------------------------------------------------------------------
 * Zugeordnete Begriffe
 *
 * Die Taxonomiebegriffe stehen als Kaesten mit Kontur, wie die Nummern in
 * den Publikationskacheln.
 * --------------------------------------------------------------------------- */

.dc-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--dc-abstand-block);
	padding: 0;
	list-style: none;
}

.dc-detail__meta a {
	display: inline-block;
	padding: 6px 12px;
	border: var(--dc-kontur);
	font-size: var(--dc-fs-fussnote);
	line-height: var(--dc-lh-fussnote);
	color: var(--dc-schwarz);
	text-decoration: none;
}

.dc-detail__meta a:hover,
.dc-detail__meta a:focus-visible {
	background-color: var(--dc-gelb);
}

/* ---------------------------------------------------------------------------
 * Zitat auf der Stimmen-Detailseite
 * --------------------------------------------------------------------------- */

.dc-detail__zeichen {
	font-size: 96px;
	line-height: 0.8;
	font-weight: var(--dc-gewicht-bold);
	display: block;
	margin-block-end: var(--dc-abstand-element);
}

.dc-detail__person {
	margin: 0 0 var(--dc-abstand-block);
}

.dc-detail__zitat {
	margin: 0 0 var(--dc-abstand-block);
}

.dc-detail__zitat p {
	margin: 0;
	font-size: var(--dc-fs-h5);
	line-height: var(--dc-lh-h5);
}

/* ---------------------------------------------------------------------------
 * Zurueck zur Uebersicht
 * --------------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------------
 * Kleine Bildschirme
 * --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

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

	.dc-detail__zeichen {
		font-size: 64px;
	}
}

/* ---------------------------------------------------------------------------
 * Archiv
 *
 * Schlichte Liste. Bewusst ohne Filter - fuer Presse ist entschieden, dass es
 * vorerst keine Uebersichtsseite gibt. Dieses Layout verhindert nur, dass die
 * Archiv-URLs ins Leere laufen.
 * --------------------------------------------------------------------------- */

.dc-archiv {
	padding-block: var(--dc-abstand-section);
}

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

.dc-archiv__beschreibung {
	max-width: 65ch;
	margin: 0 0 var(--dc-abstand-block);
}

.dc-archiv__liste {
	display: grid;
	gap: var(--dc-abstand-element);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-archiv__eintrag {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--dc-abstand-element);
	align-items: start;
	background-color: var(--dc-grau);
	border: var(--dc-kontur);
	padding: var(--dc-abstand-element);
}

/* Ohne Bild soll der Text die volle Breite nutzen. */
.dc-archiv__eintrag:not(:has(.dc-archiv__bild)) {
	grid-template-columns: 1fr;
}

.dc-archiv__bild img {
	display: block;
	width: 100%;
	height: auto;
}

.dc-archiv__datum {
	margin: 0 0 8px;
}

.dc-archiv__eintrag-titel {
	font-size: var(--dc-fs-h6);
	line-height: var(--dc-lh-h6);
	font-weight: var(--dc-gewicht-bold);
	margin: 0 0 8px;
	text-wrap: balance;
}

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

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

.dc-archiv__auszug {
	margin: 0;
}

.dc-archiv__leer {
	margin: 0;
}

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

.dc-archiv__blaetterung .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: var(--dc-kontur);
	margin-inline-end: 8px;
	color: var(--dc-schwarz);
	text-decoration: none;
}

.dc-archiv__blaetterung .page-numbers.current {
	background-color: var(--dc-gelb);
}

@media (max-width: 991.98px) {

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

/* ---------------------------------------------------------------------------
 * Personen-Detailseite
 * --------------------------------------------------------------------------- */

.dc-detail__pronomen {
	font-size: var(--dc-fs-h6);
	line-height: var(--dc-lh-h6);
	font-weight: var(--dc-gewicht-book);
	white-space: nowrap;
}

.dc-detail__funktion {
	font-size: var(--dc-fs-h6);
	line-height: var(--dc-lh-h6);
	margin: 0 0 var(--dc-abstand-block);
}

/* Portraits wie in der Uebersicht - die Form bringt das Bild mit. */
.dc-detail__portrait {
	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-detail__portrait img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * Angebot
 *
 * Figma: Muster_Keynote (3001:1387) und die beiden gleich gebauten
 * Geschwisterseiten. Anders als Publikation, Presse und Person hat das
 * Angebot ein Kopfbild ueber die volle Breite und darunter frei gesetzte
 * Bloecke statt einer festen zweispaltigen Anordnung.
 * --------------------------------------------------------------------------- */

/*
 * Das Bild ueber dem Kopf ist im Entwurf 1920 x 448 (Muster_Keynote
 * 1157:1586 und dieselbe Stelle auf Workshop und Fortbildung).
 *
 * Hier stand "max-height: 60vh". Das sind auf einem gewoehnlichen
 * Bildschirm 720 statt 448 - das Bild schob die ganze Seite um fast 300
 * nach unten und die Ueberschrift unter die Falz.
 */
/*
 * DAS BAND SCHLIESST OBEN AN DIE NAVIGATION AN (DC-33, DC-40).
 *
 * .dc-detail bringt 100 Innenabstand mit - richtig fuer Publikation,
 * Presse und Person, die mit einer Ueberschrift beginnen. Die
 * Angebotsseite beginnt mit dem Bildband, und das steht im Entwurf
 * (Muster_Keynote, 1157:1586) direkt unter der Navigation: Sie endet bei
 * 333, das Band beginnt bei 282.
 *
 * Der Innenabstand unten bleibt - dort folgen die Bloecke.
 */
/*
 * OHNE KOPFBILD BRAUCHT DIE SEITE IHREN ABSTAND OBEN (DC-33).
 *
 * Hier stand padding-block-start: 0. Das war richtig, solange ein 448
 * hohes Bild die Seite eroeffnete und buendig an der Navigation sass.
 * Seit dem 12.09.2026 beginnt die Seite mit dem Titel - ohne Abstand
 * klebte er am Kopfbereich.
 *
 * Der Abstand steht am Kopf selbst (.dc-detail__kopf weiter unten), nicht
 * hier: So bleibt er an einer Stelle, egal ob ein Bild davor steht.
 */
.dc-detail--angebot {
	padding-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * Kopf einer Angebotsseite
 *
 * Figma: Muster_Keynote_Einstieg (3001:1384).
 *
 *   Ueberschrift  24/26 Bold, darunter eine Linie ueber die volle Breite
 *   links   426   die Angaben, je mit einer Haarlinie darueber
 *   rechts  649   ab x=671, Untertitel fett und darunter der Vorspann
 *   Knopf         199 x 50 unter den Angaben
 * --------------------------------------------------------------------------- */

.dc-detail--angebot .dc-detail__kopf {
	padding-block: var(--dc-abstand-section);
}

/*
 * Die Ueberschrift ist im Entwurf eine h4-Groesse, nicht die uebliche h1.
 * Das ist Absicht: Ueber ihr steht das 448 hohe Bild, das die Seite
 * eroeffnet. Sie bleibt trotzdem die h1 der Seite - Groesse und Rangfolge
 * sind zweierlei.
 */
.dc-detail--angebot .dc-detail__titel {
	margin: 0 0 24px;   /* Figma: Titel endet 856, Linie bei 880 */
	font-size: var(--dc-fs-h4);
	line-height: var(--dc-lh-h4);
	font-weight: var(--dc-gewicht-bold);
}

.dc-detail--angebot .dc-detail__raster {
	display: grid;
	grid-template-columns: 426px 1fr;   /* Figma: linke Spalte 426 */
	column-gap: 245px;                  /* Figma: rechte Spalte ab 671 */
	align-items: start;
	padding-block-start: 30px;          /* Figma: Linie 880, erste Angabe 910 */
	border-block-start: 1px solid var(--dc-schwarz);   /* Figma: Linie ueber die volle Breite */
}

/* Die Angaben stehen untereinander, jede mit einer Linie darueber. */
.dc-detail__angaben {
	grid-column: 1;
	margin: 0;
}

.dc-detail__angabe + .dc-detail__angabe {
	margin-block-start: 30px;   /* Figma: Linie 960, naechste Angabe 990 */
	padding-block-start: 30px;
	border-block-start: 1px solid var(--dc-schwarz);
}

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

.dc-detail__angabe a {
	color: var(--dc-schwarz);
}

.dc-detail__plakette {
	display: inline-block;
	padding: 4px 12px;
	border: var(--dc-kontur);
}

.dc-detail__dimension {
	display: inline-flex;
	align-items: center;
	gap: 15px;   /* Figma: Quadrat bei 300, Name bei 335 */
}

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

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

/*
 * Der Knopf steht jetzt IM Textblock der rechten Spalte (DC-34), nicht
 * mehr als eigenes Rasterelement in der linken. Die Rasterangaben sind
 * damit hinfaellig; geblieben ist der Abstand nach oben.
 */
.dc-detail__anfrage {
	align-self: start;
	margin-block-start: 54px;   /* Figma: letzte Angabe endet 1212, Knopf 1266 */
}

/*
 * Die rechte Spalte beginnt auf der Hoehe der ersten Angabe und laeuft
 * ueber beide Zeilen des Rasters - neben den Angaben UND neben dem Knopf.
 *
 * Der Selektor traegt .dc-detail--angebot, weil .dc-detail__text auch auf
 * den Personen-, Publikations- und Presseseiten steht.
 */
.dc-detail--angebot .dc-detail__text {
	grid-column: 2;
	grid-row: 1 / span 2;
	max-width: 649px;   /* Figma */
	margin-block-end: 0;
	/*
	 * Spalte, damit der Knopf unter dem Text sitzt und nicht daneben -
	 * ein Block waere fuer einen Inline-Knopf zu wenig.
	 */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/*
 * Im Entwurf ist die Zeile ueber dem Vorspann Fliesstext in Fett (16/20),
 * nicht die h6 der uebrigen Detailseiten.
 */
.dc-detail--angebot .dc-detail__funktion {
	margin: 0 0 21px;   /* Figma: Zeile endet 930, Text ab 951 */
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	font-weight: var(--dc-gewicht-bold);
}

.dc-detail--angebot .dc-detail__vorspann {
	margin: 0;
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	font-weight: var(--dc-gewicht-book);
}

/* ---------------------------------------------------------------------------
 * Kleine Bildschirme: Angaben und Text untereinander.
 * --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

	.dc-detail--angebot .dc-detail__raster {
		grid-template-columns: 1fr;
		row-gap: var(--dc-abstand-block);
	}

	/*
	 * DIE TRENNLINIE UEBER DEM BESCHREIBUNGSTEXT (DC-79).
	 *
	 * Auf dem Desktop stehen Angaben und Text nebeneinander; die Linie ueber
	 * dem Raster trennt beide vom Titel, mehr braucht es nicht. Gestapelt
	 * laufen die Angaben direkt in den Text - jede Angabe hat eine Linie
	 * darueber, der Text als einziger nicht. Genau das hat der Kunde
	 * gemeldet.
	 */
	.dc-detail--angebot .dc-detail__text {
		grid-column: 1;
		grid-row: auto;
		max-width: none;
		padding-block-start: 30px;                        /* wie bei den Angaben */
		border-block-start: 1px solid var(--dc-schwarz);
	}

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

/*
 * Die Bloecke aus dem Editor stehen ausserhalb von .dc-container, damit
 * farbige Baender ueber die volle Fensterbreite laufen. Jeder Block bringt
 * seinen eigenen Innenabstand mit.
 */
.dc-detail__bloecke {
	margin: 0;
}

/*
 * Fliesstext, den die Redaktion direkt in den Editor schreibt, bekommt die
 * Containerbreite. Ganze Bloecke bleiben vollbreit - genau dafuer steht
 * dieser Bereich ueberhaupt ausserhalb von .dc-container.
 *
 * Ohne diese Regel laufen Absaetze randlos ueber die volle Fensterbreite.
 * Aufgefallen auf den Personen-Detailseiten, seit dort die Beschreibung aus
 * dem Loop-Dokument im Inhalt steht.
 */
.dc-detail__bloecke > p,
.dc-detail__bloecke > ul,
.dc-detail__bloecke > ol,
.dc-detail__bloecke > h2,
.dc-detail__bloecke > h3,
.dc-detail__bloecke > h4,
.dc-detail__bloecke > blockquote,
.dc-detail__bloecke > figure {
	/*
	 * 874 ist die Fliesstextbreite aus dem Entwurf - dieselbe wie beim
	 * News-Detail weiter unten in dieser Datei. Ueber die ganzen 1320 des
	 * Containers waere eine Zeile rund 180 Zeichen lang und kaum lesbar.
	 *
	 * Der linke Einzug ist derselbe Ausdruck wie bei den Slider-Reihen in
	 * base.css: er trifft die linke Kante von .dc-container. Zentriert
	 * stuende der Text sonst eingerueckt neben allem anderen.
	 */
	max-width: min(100% - 2 * var(--dc-rand-mobil), 874px);
	margin-inline-start: var(--dc-gasse);
	margin-inline-end: auto;
}

/* Der erste Absatz schliesst an den Kopf an, nicht mit doppeltem Abstand. */
.dc-detail__bloecke > p:first-child {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * Beitrag (News / Blog)
 *
 * Figma: News-Detail (3004:2478).
 *   Ueberschrift  873 breit, 64/64 Bold, linksbuendig oben
 *   Bild          762 x 425, rechts, beginnt bei y=160
 *   Fliesstext    874 breit, einspaltig
 *
 * Ueberschrift und Bild ueberlappen im Entwurf senkrecht: Das Bild beginnt
 * auf Hoehe der dritten Zeile. Deshalb ein Raster mit zwei Spalten, in dem
 * das Bild einen Abstand nach oben bekommt - kein absolutes Positionieren,
 * das bei laengeren oder kuerzeren Ueberschriften sofort auseinanderfaellt.
 * --------------------------------------------------------------------------- */

.dc-detail--beitrag {
	padding-block-start: var(--dc-abstand-section);
}

/*
 * Figma legt Ueberschrift und Bild uebereinander:
 *   Ueberschrift   x=0,   Breite 873
 *   Bild           x=559, Breite 762  (endet bei 1321, der Containerkante)
 *
 * BEWUSSTE ABWEICHUNG: Hier bekommt die Ueberschrift nur die erste Spalte
 * (bis 559), nicht die vollen 873. Im Entwurf ueberlappen sich beide, was
 * dort nicht auffaellt, weil die fuenf Zeilen zufaellig alle vor 559 enden.
 * Mit einer anderen Schrift oder einem laengeren Titel bricht der Text
 * anders um und verschwindet unter dem Bild - genau das ist beim Bauen
 * passiert. Eine Ueberschrift, die je nach Titellaenge halb verdeckt ist,
 * darf nicht ins Theme.
 *
 * 42.35% ist 559 von 1320 - die Stelle, an der das Bild beginnt.
 */
.dc-beitrag__kopf {
	display: grid;
	grid-template-columns: 42.35% 1fr;
	align-items: start;
	margin-block-end: 50px;   /* Figma: Bild endet bei 585, Fliesstext ab 635 */
}

/*
 * DIE UEBERSCHRIFT LIEGT UEBER DEM BILD, sie steht nicht daneben.
 *
 * Im Entwurf (1264:1344) ist sie 873 breit, das Bild beginnt aber schon bei
 * 559 - die unteren Zeilen laufen also ueber die linke Bildkante. Genau so
 * ist es gezeichnet: schwarze Schrift auf dem Bild.
 *
 * Sie belegt deshalb beide Rasterspalten und liegt mit z-index darueber.
 * Vorher stand sie in der linken Spalte und war damit 559 statt 873 breit -
 * derselbe Titel brauchte sieben Zeilen statt fuenf.
 *
 * WENN EIN BEITRAGSBILD SEHR DUNKEL IST, kann die Ueberschrift darauf
 * schwer zu lesen sein. Der Entwurf sieht das so vor; wer es vermeiden
 * will, waehlt ein Bild, dessen linkes Drittel hell ist.
 */
.dc-beitrag__titelspalte {
	position: relative;
	z-index: 1;
	grid-column: 1 / -1;
	grid-row: 1;
	min-width: 0;
	max-width: 873px;   /* Figma */
}

.dc-beitrag__datum {
	margin: 0 0 var(--dc-abstand-element);
	font-size: var(--dc-fs-fussnote);
	line-height: var(--dc-lh-fussnote);
}

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

.dc-beitrag__bild {
	grid-column: 2;
	grid-row: 1;
	margin-block-start: 160px;   /* Figma: Bild beginnt bei y=160 */
}

.dc-beitrag__bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 762 / 425;     /* Figma */
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Fliesstext
 *
 * Der Text steht ausserhalb von .dc-container, damit ein eingesetzter
 * Stoerer- oder Bildblock ueber die volle Breite laufen kann. Die Absaetze
 * bekommen ihre Breite deshalb hier.
 *
 * Sie stehen LINKSBUENDIG an derselben Kante wie die Ueberschrift, nicht
 * mittig - so steht es im Entwurf. --dc-beitrag-rand ist der Abstand von
 * der Fensterkante bis zu dieser Kante: auf breiten Schirmen die halbe
 * Differenz zum 1320er-Container, auf schmalen der Seitenrand.
 * --------------------------------------------------------------------------- */

.dc-detail--beitrag {
	--dc-beitrag-rand: var(--dc-gasse);
}

.dc-beitrag__text > :not(section):not(.alignfull) {
	max-width: min( 874px, calc( 100vw - var(--dc-scrollbar) - 2 * var(--dc-beitrag-rand) ) );   /* Figma: 874 */
	margin-inline: var(--dc-beitrag-rand) auto;
}

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

/*
 * Vorspann und Quellenknopf der Pressedetailseite.
 *
 * Beide stehen im .dc-container, richten sich aber an derselben Textspalte
 * aus wie der Fliesstext darunter - 874 breit, am selben linken Rand. Ohne
 * das saessen sie mittig unter einem linksbuendigen Text.
 */
.dc-beitrag__vorspann,
.dc-beitrag__quelle {
	max-width: 874px;   /* Figma */
	margin-inline: 0;
}

.dc-beitrag__vorspann {
	margin-block: 0 var(--dc-abstand-block);
	font-weight: var(--dc-gewicht-bold);
}

/*
 * Der Knopf traegt einen harten Versatzschatten nach unten. Ohne eigenen
 * Abstand steht der Zurueck-Link direkt darin.
 */
.dc-beitrag__quelle {
	margin-block: var(--dc-abstand-block);
}

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

/*
 * Der Stoerer im Beitrag ist schmaler als auf den Musterseiten: Dort laeuft
 * er ueber die ganze Containerbreite, hier steht er in der Textspalte
 * (Figma 1264:1301: 873 x 116, buendig unter dem Fliesstext).
 *
 * Er ist ein <section> und deshalb von der Breitenregel weiter oben
 * ausgenommen - die laesst Bloecke mit farbigem Vollbreiten-Band bewusst
 * durch. Hier holt er sich die Textbreite zurueck.
 */
.dc-beitrag__text > .dc-stoerer {
	max-width: min( 874px, calc( 100vw - var(--dc-scrollbar) - 2 * var(--dc-beitrag-rand) ) );   /* Figma: 873 */
	margin-block: 150px 50px;   /* Figma: Text endet 1815, Stoerer 1965 bis 2081 */
	margin-inline: var(--dc-beitrag-rand) auto;
}

/* Der Container im Block wuerde ein zweites Mal einruecken. */
.dc-beitrag__text > .dc-stoerer > .dc-container {
	max-width: none;
	padding-inline: 0;
}

.dc-beitrag__text > .dc-stoerer .dc-stoerer__leiste {
	min-height: 116px;   /* Figma */
}

/*
 * Die 50 ueber dem Link stehen als Aussenabstand am Stoerer darueber.
 * Darunter kommt nichts mehr: Den Abstand zum Footer vergibt main, und ein
 * zweiter hier ergaebe 200 statt 100.
 */
.dc-beitrag__zurueck {
	display: inline-flex;
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
 * Kleine Bildschirme
 *
 * Gestapelt. Das Bild wandert unter die Ueberschrift und verliert seinen
 * Versatz - der ergibt nur neben mehrzeiligem Text Sinn.
 * --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

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

	.dc-beitrag__titelspalte,
	.dc-beitrag__bild {
		grid-column: 1;
	}

	.dc-beitrag__titelspalte { grid-row: 1; }
	.dc-beitrag__bild        { grid-row: 2; }

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

/* ---------------------------------------------------------------------------
 * Personen-Detailseite
 *
 * Figma: Personen_Detail (1052:785).
 *   Einstieg     1320 breit. Links Name 64/64 Bold, Pronomen, Fliesstext
 *                650 breit ab y=265. Rechts Portrait 519 x 536 ab x=735,
 *                darunter ein gelbes Feld 650 x 220 mit dem Lieblingsjob.
 *   Kacheln      Zwei umrandete Kacheln 650 x 426 nebeneinander, Luecke 20.
 *                Icons ragen oben darueber hinaus. Darunter ein gelbes Band
 *                250 hoch ueber die volle Breite mit dem Button darin.
 *   Video        1320 x 741.
 * --------------------------------------------------------------------------- */

.dc-person__einstieg {
	display: grid;
	/* Figma: 650 + 20 + 650 = 1320, beide Spalten gleich breit. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 20px;
	align-items: start;
	padding-block-start: 51px;           /* Figma: Name bei y=51 */
}

.dc-person__name {
	font-size: var(--dc-fs-h1);
	line-height: 1;
	font-weight: var(--dc-gewicht-bold);
	margin: 0;
}

.dc-person__pronomen,
.dc-person__funktion {
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	margin: var(--dc-abstand-element) 0 0;
}

/* Figma: Fliesstext beginnt bei y=265, der Name bei y=51. */
.dc-person__text {
	margin-block-start: 60px;
}

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

/*
 * Das Portrait ragt im Entwurf oben ueber den Namen hinaus - es beginnt
 * bei y=0, der Name erst bei y=51. Deshalb der negative Abstand.
 */
.dc-person__portrait {
	/*
	 * Figma: Portrait 519 breit ab x=735, die rechte Spalte beginnt bei
	 * 670 - also 65 eingerueckt. Oben ragt es ueber den Namen hinaus, es
	 * beginnt bei y=0 und der Name erst bei y=51.
	 */
	max-width: 519px;
	margin-block-start: -51px;
	margin-inline-start: 65px;
}

.dc-person__portrait img {
	display: block;
	width: 100%;
	height: auto;
}

.dc-person__lieblingsjob {
	background-color: var(--dc-gelb);
	padding: 50px;                       /* Figma: Text bei 720/636 im Feld ab 670/586 */
	margin-block-start: 50px;
}

.dc-person__lieblingsjob-titel {
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	font-weight: var(--dc-gewicht-bold);
	margin: 0 0 var(--dc-abstand-absatz);
}

.dc-person__lieblingsjob p:last-child {
	margin-block-end: 0;
}

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

/* ---------------------------------------------------------------------------
 * Themen und Schwerpunkte
 * --------------------------------------------------------------------------- */

.dc-person__kacheln {
	position: relative;
	margin-block-start: var(--dc-abstand-section);
}

.dc-person__kacheln-raster {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;                           /* Figma: 300/970 bei 650 Breite */
	position: relative;
	z-index: 1;
}

/*
 * Nur eine Kachel: sie nimmt die ganze Breite. Sonst bliebe die halbe
 * Reihe leer und das gelbe Band darunter schiene daneben durch.
 */
.dc-person__kacheln-raster--einzeln {
	grid-template-columns: 1fr;
}

.dc-person__kachel {
	position: relative;
	border: var(--dc-kontur);
	background-color: var(--dc-weiss);
	padding: 60px 30px 30px;             /* Platz fuer das Icon oben */
	min-height: 426px;                   /* Figma */
}

/*
 * Das Icon ragt oben aus der Kachel heraus - im Entwurf sitzt es mit
 * negativem Versatz ueber der Kante.
 */
.dc-person__kachel-icon {
	position: absolute;
	inset-block-start: -80px;
	inset-inline-end: 30px;
	width: 160px;
	height: auto;
	pointer-events: none;
}

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

.dc-person__kachel-liste {
	margin: 0;
	padding-inline-start: 24px;          /* Figma: Aufzaehlung eingerueckt */
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
}

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

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

/*
 * Das gelbe Band laeuft ueber die volle Fensterbreite und liegt hinter der
 * unteren Kante der Kacheln. Der Button sitzt mittig darin.
 */
.dc-person__band {
	background-color: var(--dc-gelb);
	margin-block-start: -60px;
	padding-block: 90px 60px;
	display: flex;
	justify-content: center;
}

/* ---------------------------------------------------------------------------
 * Video
 * --------------------------------------------------------------------------- */

.dc-person__video {
	margin-block-start: var(--dc-abstand-section);
}

/*
 * Vor der Einwilligung steht hier die Hinweiskachel von Borlabs. Sie ist
 * nur rund 190 hoch, das Video braucht 741. Ohne die reservierte Flaeche
 * faellt die Seite um ueber 500 in sich zusammen und springt beim
 * Entsperren wieder auf. Derselbe Fall wie beim Terminkalender auf der
 * Kontaktseite - siehe blocks/termin/style.css.
 */
.dc-person__video > .brlbs-cmpnt-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: 1320 / 741;   /* Figma */
	border: var(--dc-kontur);
}

.dc-person__video-datei,
.dc-person__video-einbettung iframe {
	display: block;
	width: 100%;
	aspect-ratio: 1320 / 741;            /* Figma */
	height: auto;
	border: 0;
}

.dc-person__zurueck {
	display: grid;
	margin-block: var(--dc-abstand-section);
}

/* ---------------------------------------------------------------------------
 * Mittlere und kleine Bildschirme
 * --------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {

	.dc-person__einstieg {
		grid-template-columns: 1fr;
		row-gap: var(--dc-abstand-block);
	}

	/* Einspaltig steht das Portrait unter dem Text, nicht darueber. */
	.dc-person__portrait {
		margin-block-start: 0;
		margin-inline-start: 0;
	}

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

/*
 * Die beiden Kacheln tragen lange Aufzaehlungen. Nebeneinander bleiben bei
 * 992 nur 446 Pixel je Kachel - da bricht jeder zweite Eintrag um. Deshalb
 * schon hier einspaltig, nicht erst bei 768.
 */
@media (max-width: 991.98px) {

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

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

@media (max-width: 767.98px) {

	.dc-person__kachel {
		padding-block-start: 50px;
	}

	.dc-person__kachel-icon {
		width: 110px;
		inset-block-start: -55px;
	}

	.dc-person__lieblingsjob {
		padding: 30px;
	}
}

/* ---------------------------------------------------------------------------
 * Stellen-Detailseite
 *
 * Kein Figma-Entwurf - Stellen kamen im Entwurf nicht vor. Der Aufbau folgt
 * der Personen-Detailseite: Titel gross, Eckdaten klein darunter, Fliesstext
 * auf Lesebreite, Knopf am Ende.
 * --------------------------------------------------------------------------- */

.dc-detail--stelle {
	padding-block: var(--dc-abstand-section);
}

.dc-stelle__titel {
	font-size: var(--dc-fs-h1);
	line-height: var(--dc-lh-h1);
	font-weight: var(--dc-gewicht-bold);
	margin: 0 0 var(--dc-abstand-element);
	max-width: 873px;
	text-wrap: balance;
}

.dc-stelle__eckdaten {
	margin: 0 0 var(--dc-abstand-block);
	font-size: var(--dc-fs-h6);
	line-height: var(--dc-lh-h6);
	font-weight: var(--dc-gewicht-medium);
}

.dc-stelle__vorspann {
	font-size: var(--dc-fs-h6);
	line-height: var(--dc-lh-h6);
	font-weight: var(--dc-gewicht-bold);
	margin: 0 0 var(--dc-abstand-block);
	max-width: 874px;
}

/*
 * Die Ausschreibung auf Lesebreite. 874 ist dieselbe Textspalte wie auf der
 * News-Detailseite - ueber die vollen 1320 laufend waeren die Zeilen zu lang.
 */
.dc-stelle__text {
	max-width: 874px;
	margin-block-end: var(--dc-abstand-block);
}

.dc-stelle__text p,
.dc-stelle__text ul,
.dc-stelle__text ol {
	margin: 0 0 var(--dc-abstand-absatz);
}

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

.dc-stelle__text h2,
.dc-stelle__text h3 {
	font-size: var(--dc-fs-h5);
	line-height: var(--dc-lh-h5);
	font-weight: var(--dc-gewicht-bold);
	margin: var(--dc-abstand-block) 0 var(--dc-abstand-element);
}

.dc-stelle__frist {
	margin: 0 0 var(--dc-abstand-block);
	font-weight: var(--dc-gewicht-bold);
}

.dc-stelle__bewerben {
	margin: 0 0 var(--dc-abstand-block);
}

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

/* ---------------------------------------------------------------------------
 * BROTKRUMEN AUF DER ANGEBOTSSEITE (DC-69)
 *
 * Sie stehen ueber der Ueberschrift, dort wo bis zum 12.09.2026 das
 * Kopfband sass (DC-33). Der Entwurf zeichnet sie nicht - sie sind eine
 * Entscheidung aus dem Ticket, siehe inc/breadcrumb.php.
 *
 * Deshalb halten sie sich zurueck: Fliesstextgroesse, dieselbe Farbe wie
 * der uebrige Text, kein eigener Kasten. Der Trenner ist ein Pseudoelement
 * und damit nicht im Text - wer die Seite vorlesen laesst, hoert die
 * Stationen ohne Zwischenzeichen.
 * --------------------------------------------------------------------------- */

.dc-breadcrumb {
	/*
	 * Der Kopf darunter bringt seinen eigenen Abstand mit
	 * (.dc-detail--angebot .dc-detail__kopf). Hier steht nur der Abstand
	 * nach oben, zum mitfahrenden Kopfbereich.
	 */
	padding-block-start: var(--dc-abstand-block);
}

.dc-breadcrumb__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
}

.dc-breadcrumb__stufe + .dc-breadcrumb__stufe::before {
	content: "›";
	margin-inline-end: 8px;

	/*
	 * Der Trenner gehoert nicht zum Text - aria-hidden geht an einem
	 * Pseudoelement nicht, deshalb ueber die Rolle: Screenreader lesen
	 * generierte Inhalte ohnehin uneinheitlich vor, und ein Winkel mehr
	 * oder weniger stoert die Stationen nicht.
	 */
	color: var(--dc-schwarz);
}

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

.dc-breadcrumb__stufe a:hover,
.dc-breadcrumb__stufe a:focus-visible {
	text-decoration: none;
}

/* Die letzte Stufe ist die Seite selbst: kein Link, nicht unterstrichen. */
.dc-breadcrumb__stufe--hier {
	font-weight: var(--dc-gewicht-bold);
}

/*
 * Auf schmalen Schirmen bricht die Zeile um. Damit die Stationen dann
 * nicht aneinanderkleben, bekommt jede Zeile etwas Luft.
 */
@media (max-width: 767.98px) {

	.dc-breadcrumb__liste {
		gap: 4px 8px;
	}
}