/*
	Layout-Nachtraege zu main.css
	-----------------------------
	Wird nach main.css geladen (siehe BottomStylesheetChunk) und ueberschreibt
	deshalb ohne !important. Eigene Datei, weil main.css ein Webpack-Build ist,
	dessen Quellen nicht im Repository liegen. Formularsachen stehen daneben in
	forms.css.
*/


/* ============================================ Buehne: seitlicher Ueberlauf

	Am Handy liess sich jede Themenseite (z.B. /themen/mitarbeiterbefragung/,
	/ueber-uns/) mit dem Finger seitlich verschieben, die Startseite nicht.

	Ursache ist die Deko-Grafik svg.buehne__orbit in der Buehne. Sie steht
	absichtlich ueber den Rand hinaus:

		.buehne__orbit { position:absolute; bottom:-8px; right:-4.3vw;
		                 min-width:260px; width:30vw }

	Der Anschnitt gehoert zum Bild - die Ellipse soll aus der Buehne
	herauslaufen. Auf dem Desktop faellt er nicht auf, weil main.css die
	Buehne clippt. Geclippt wird dort aber nur in zwei Faellen:

		@media (min-width: 850px) { .buehne       { …; overflow: hidden } }
		@media (max-width: 850px) { .buehne__inner{ …; overflow: hidden } }

	Auf der Startseite steckt die Buehne im Slider-Wrapper .buehne__inner,
	deshalb greift dort der zweite Fall. Die Themenseiten rendern
	header.buehne > div.buehne__item ganz ohne .buehne__inner - unterhalb von
	850px clippt sie also niemand, und die 260px breite Grafik schiebt das
	Dokument bei 390px Bildschirmbreite 9px nach rechts.

	Deshalb genau diese Buehnen nachtraeglich clippen, so wie es ab 850px
	ohnehin passiert. Das :not(:has(...)) ist wichtig: die Slider-Buehne der
	Startseite braucht es nicht und darf es nicht bekommen - ihre
	Flickity-Punkte liegen 25px UNTER der Buehne und wuerden sonst
	verschwinden. Browser ohne :has() ignorieren die Regel und verhalten sich
	wie bisher.
*/
@media screen and (max-width: 849px) {
	.buehne:not(:has(.buehne__inner)) {
		position: relative;
		overflow: hidden;
	}
}


/* ================================== Lange Woerter und URLs im Inhaltstext

	Auf /leistungen/change-steuerung/ steht eine Quellenangabe als
	ausgeschriebene Adresse im Linktext:

		https://journals.sagepub.com/doi/10.1177/0021886310396550

	Das ist ein einziges Wort ohne Trennstelle - 377px breit in einem 311px
	breiten Absatz. Am Handy schob es die Seite 26px nach rechts und man
	konnte sie seitlich verschieben.

	break-word greift nur, wenn ein Wort sonst ueber den Rand liefe; normaler
	Text bricht weiter an den Wortgrenzen um. Bewusst siteweit auf den
	Inhaltsbereichen und nicht auf dieser einen Seite: Adressen und lange
	Fachwoerter koennen in jedem redaktionellen Text stehen.
*/
.article__content,
.default__content {
	overflow-wrap: break-word;
}


/* ======================================== Nur fuer Vorlesen und Suchmaschinen

	Manche Seiten tragen ihre Ueberschrift nicht sichtbar - die Startseite
	zeigt einen Bildwechsler, /ueber-uns/karriere/ beginnt direkt mit
	Fliesstext. Ohne H1 fehlt beiden aber die Angabe, worum es auf der Seite
	geht: Screenreader springen ueber Ueberschriften, Suchmaschinen gewichten
	die H1 direkt nach dem Titel.

	Deshalb eine Ueberschrift, die im Layout keinen Platz einnimmt, aber
	vorgelesen und ausgewertet wird. Bewusst nicht display:none und nicht
	visibility:hidden - beides nimmt sie auch dem Screenreader.
*/
.nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}


/* ============================== Seiten ohne Titelbild: Platz für den Header

	Auf /meta/impressum/, /meta/datenschutz/ und /ueber-uns/karriere/ lag die
	Überschrift teilweise unter dem fixierten Kopfbereich - gemessen bei
	1400px Breite 7px, bei 1024px 15px, am Handy 10px. Sichtbar wurde das als
	oben abgeschnittene Überschrift.

	Ursache ist ein Klassenname, der nicht zusammenpasst. main.css hält den
	Platz für den Kopfbereich so frei:

		.barba-wrapper--no-home { margin-top: 80px }

	im Markup steht aber

		<div class="barba-container barba-container--no-home">

	wrapper gegen container - die Regel greift auf keiner einzigen Seite. Auf
	Seiten mit Titelbild faellt das nicht auf, dort liegt der Kopfbereich
	bewusst ueber dem Bild. Nur wo der Text direkt oben beginnt, ueberdeckt
	er ihn.

	Bewusst nicht die Regel in main.css "repariert": .barba-container--no-home
	sitzt auf jeder Seite ausser der Startseite, ein margin-top dort haette
	ueber allen 250 Titelbildern einen weissen Streifen erzeugt. Stattdessen
	bekommt genau der Fall Platz, in dem Inhalt ohne Titelbild ganz oben
	steht: ein .default__container als erstes Kind von .main.

	Die 96px sind nicht geraten - mit ihnen beginnt der Text bei 169px, also
	genau dort, wo er auf /ueber-uns/team/ und /ueber-uns/referenzen/ ohnehin
	beginnt.
*/
.main > .default__container:first-child {
	padding-top: 96px;
}

@media screen and (max-width: 849px) {
	.main > .default__container:first-child {
		padding-top: 64px;
	}
}