/* ------------------------------------------------------------------
   Meyer & Fritzsche – Anpassungen an das bisherige Erscheinungsbild
   Siehe DESIGN-VORGABEN.md. Farben und Schriftgrößen stehen in
   main.css (über die Theme-Variablen erzeugt), hier steht nur, was
   sich darüber nicht einstellen lässt.
   ------------------------------------------------------------------ */

/* --- Schrift der Überschriften: Bree Serif ------------------------ */

@font-face {
	font-family: "Bree Serif";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/bree-serif-regular.woff2") format("woff2"),
	     url("../fonts/bree-serif-regular.woff") format("woff");
}

h1, h2, h3, h4, h5, h6,
.content-headline,
.headline,
.testimonial-text,
.rsts-slide .content-text {
	font-family: "Bree Serif", Georgia, serif;
	font-weight: 400;
	line-height: 1.4em;
	margin-bottom: 0.5em;
}

/* Die Hauptnavigation läuft ebenfalls in Bree Serif */
.nav-main a,
.mainmenu a,
nav.mainmenu ul li a {
	font-family: "Bree Serif", Georgia, serif;
	font-weight: 400;
}

/* --- Inhaltsbreite -------------------------------------------------- */
/* Die Altseite begrenzt den Inhalt auf 1280 px bei 28 px Seitenabstand
   (Inhalt also 1224 px). Oneo rechnet ab Desktop-Breite mit einem deutlich
   größeren Abstand – hier auf das alte Maß gesetzt. */

@media only screen and (min-width: 1280px) {
	:root {
		--main-padding-x: 28px;
	}

	/* Der Inhaltsbereich rechnet mit eigenem Rand; auf das alte Maß bringen */
	body .content-wrapper .main-content {
		width: calc(100% - 56px);
		max-width: calc(100% - 56px);
		margin-left: auto;
		margin-right: auto;
	}
}

/* Umschlagelemente mit Hintergrund laufen über die ganze Fensterbreite,
   ihr Inhalt bleibt bei 1200 px – wie auf der Altseite
   (.parallax-bg .content_boxed). Der innere Bereich bringt die 1200 px
   bereits selbst mit, hier bricht nur der Umschlag aus der Inhaltsbreite aus. */

.centered-wrapper {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Verhindert, dass die Fensterbreite inklusive Scrollleiste waagerecht scrollt */
body {
	overflow-x: hidden;
}

@media only screen and (min-width: 1280px) {
}

/* --- Kopfbereich ---------------------------------------------------- */
/* Die Altseite hat zwei Streifen: oben ein 37 px hohes Band in der
   Grundfarbe mit der Suche am rechten Rand, darunter eine 80 px hohe weiße
   Leiste mit Logo und Navigation. Beide Inhalte laufen auf 1280 px.
   Oneo setzt stattdessen alles in eine Leiste; der obere Streifen wird hier
   ergänzt und die Suche dorthin gesetzt. */

/* Oberes Band: eigener Layoutbereich (siehe var/_topbar.php), nicht mehr
   eine ::before-Fläche. Die ID lautet "topbar", weil Contao "top" bereits
   an das <body> vergibt. */
/* Das Band scrollt weg, die Navigationsleiste bleibt oben - wie auf der
   Altseite. Dafuer liegt es absolut am Dokumentanfang: Es nimmt keinen Platz
   im Fluss ein (den haelt das padding-top der Kopfzeile frei) und wandert
   beim Scrollen mit dem Dokument nach oben. Oneos script.js fixiert die
   Leiste genau dann, wenn sie ihren Platz verlaesst - der liegt durch dieses
   padding bei 37 px, nicht bei 0. */
#topbar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 6;
	height: 37px;
	background: #95896c;
}

/* Platz fuer das Band, das aus dem Fluss genommen ist */
.page-header {
	padding-top: 37px;
}

#topbar .inside {
	max-width: 1280px;
	height: 37px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

@media only screen and (max-width: 767px) {
	#topbar .inside {
		padding: 0 20px;
	}
}

/* Die Suche im Band: weiße Lupe am rechten Rand, wie auf der Altseite.
   Oneo blendet den Linktext mit text-indent aus und setzt die Lupe als
   ::after aus der Schrift "RockSolid Icons". Die Zeilenhöhe muss deshalb
   0 bleiben - sonst schiebt die unsichtbare Textzeile das Zeichen aus dem
   Kasten, den overflow: hidden beschneidet. */
#topbar .main-navigation-search {
	position: static;
	float: none;
	height: 37px;
	/* Unter 600 px zieht Oneo die Suche mit top: 50% und einem negativen
	   oberen Rand in die Mitte der Navigationsleiste - im Band ragte sie
	   dadurch 13 px nach oben heraus. */
	top: auto;
	margin-top: 0;
	margin-right: 0;
	/* feiner Trennstrich links der Lupe wie auf der Altseite */
	padding-left: 10px;
	border-left: 1px solid rgba(255, 255, 255, 0.4);
}

#topbar .main-navigation-search > a {
	display: flex;
	align-items: center;
	height: 37px;
	margin: 0;
	padding: 0;
	line-height: 0;
	color: #fff;
}

#topbar .main-navigation-search > a::after {
	padding: 0;
	border-left: 0;
	font-size: 1.14286em;   /* 16 px wie auf der Altseite */
}

#topbar .main-navigation-search > a:hover,
#topbar .main-navigation-search > a:focus {
	color: #fff;
	opacity: 0.8;
}

/* Logo und Navigation laufen auf 1280 px wie auf der Altseite */
.main-navigation-wrapper {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	/* Die Farbe liegt auf der Leiste, nicht auf dem Umschlag - sonst waere
	   sie nur 1280 px breit und die Durchsicht ginge verloren. */
	background: none;
}

/* Wie auf der Altseite leicht durchscheinend: im Ruhezustand liegt die weiße
   Seitenflaeche dahinter, beim Scrollen schimmert der Inhalt durch. */
.header-navigation {
	background: rgba(255, 255, 255, 0.9);
}

/* --- Ueberschriften --------------------------------------------------- */
/* Die Gliederung folgt der Bedeutung, die Groesse dem Aussehen der Altseite.
   Dort standen die Abschnitte "Unsere Leistungen" und "Unser Team" als h1
   (48 px) und die Kaesten darunter als h4 (20 px). Semantisch ist das
   falsch - es gab weder eine Hauptueberschrift noch eine zweite Ebene.
   Jetzt: h1 fuer die Seite, h2 fuer die Abschnitte, h3 fuer die Kaesten -
   bei unveraenderter Darstellung. */

/* Oneo bemisst die Groesse mit ".main-content h2" - der Selektor zaehlt ein
   Element mit, deshalb hier .main-content davor. */
.main-content .content-headline {
	font-size: 3.42857em;   /* 48 px */
	line-height: 1.4;
}

/* Die Hauptueberschrift der Startseite steht fuer sich; darunter folgt mit
   Abstand der erste Abschnitt. */
.main-content .seiten-titel {
	margin-bottom: 110px;
}

/* Auf schmalen Schirmen sind 48 px zu viel: Die Hauptueberschrift lief ueber
   vier Zeilen und aus dem Fenster heraus. */
@media only screen and (max-width: 767px) {
	.main-content .content-headline {
		font-size: 28px;
		line-height: 1.25;
	}

	.main-content .seiten-titel {
		margin-bottom: 50px;
	}

	.main-content .icon-boxes-item-text h2 {
		font-size: 18px;
	}
}

.main-content .icon-boxes-item-text h2 {
	font-size: 1.42857em;   /* 20 px, wie zuvor h4 */
	line-height: 1.4;
}

/* Kein weisser Streifen zwischen dem letzten Abschnitt und dem Fussbereich:
   Oneo setzt unter den Inhalt einen Abstand, der bei vollbreiten Abschnitten
   (Zitate, Parallax) als heller Balken stehen bleibt. */
.main-content {
	margin-bottom: 0;
}

/* --- Fussbereich ------------------------------------------------------ */
/* Die Altseite zeigt drei Spalten auf dunklem Grund (#242528, Text #8c8989):
   Kontakt, Schnellkontakt und Mitgliedschaften, Inhalt 1200 px breit mit
   80 px Polster oben und unten. Statt des Formulars steht hier die Sitemap.
   Die Spalten sind Module im Layoutbereich "footer" (siehe var/_footer.php),
   umschlossen von Oneos Modulpaar "Footer Info" (88/89). */

.footer-info .centered-wrapper-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 40px;
	align-items: start;
	max-width: 1200px;
	padding: 80px 0;
	color: #8c8989;
}

.footer-info h4 {
	margin: 0 0 30px;
	font-family: "Open Sans", sans-serif;
	font-size: 1.42857em;   /* 20 px */
	line-height: 1.4;
	color: #fff;
}

.footer-info a {
	color: #8c8989;
	text-decoration: underline;
}

.footer-info a:hover,
.footer-info a:focus {
	color: #fff;
}

/* Die Kontaktspalte folgt der Altseite: 12,6 px Schrift auf 24 px Zeilen,
   die Angaben stehen ohne Zwischenraum untereinander. Oneo setzt den
   Symbolen einen oberen Abstand, dadurch saessen sie tiefer als ihre
   Textzeile - deshalb margin 0 und dieselbe Zeilenhoehe wie der Text. */
.footer-kontakt .info-list {
	font-size: 0.9em;
	line-height: 24px;
}

.footer-kontakt .info-list-item {
	line-height: 24px;
}

/* Sitemap: schlichte Liste. Oneo setzt vor jeden Eintrag ein Ordner- bzw.
   Plussymbol aus seiner Icon-Schrift - im Fussbereich waere das Zierrat. */
.footer-sitemap ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Oneo polstert die Eintraege der Unterebenen mit 22,4 px links und 2,4 px
   oben und unten - daher kamen die grosse Einrueckung und die weiten
   Zeilenabstaende. Die Regel dort ist spezifischer, deshalb drei Klassen. */
.footer-info .footer-spalte.footer-sitemap li {
	margin: 0 0 4px;
	padding: 0;
}

/* Oneo setzt die Symbole mit ".mod_sitemap > ul > li::before" - drei
   Elemente im Selektor, deshalb hier zwei Klassen davor. */
.footer-info .footer-sitemap li::before {
	content: none;
}

/* Unterebenen: leicht eingerueckt, kleiner, mit Abstand zum naechsten
   Hauptpunkt - fuer jede Ebene gleich, nicht nur unter "Team". */
/* Die dritte Ebene faengt Oneo mit ".mod_sitemap ul li li.submenu ul" ab -
   zwei Klassen und vier Elemente. Hier stehen deshalb drei Klassen. */
.footer-info .footer-spalte.footer-sitemap ul ul {
	margin: 0 0 10px 5px;
	font-size: 12px;
}

/* Im Fussbereich ohne Unterstreichung; die Farbe zeigt den Verweis an. */
.footer-info .footer-sitemap a {
	text-decoration: none;
}

.footer-info .footer-sitemap a:hover,
.footer-info .footer-sitemap a:focus {
	color: #fff;
}

/* Nur zwischen Anschrift und Rufnummern steht ein Absatz - 15 px, wie auf
   der Altseite; die uebrigen Angaben folgen unmittelbar. */
.footer-kontakt .info-list-text p {
	margin: 0 0 15px;
}

/* Die beiden Verbandszeichen stehen untereinander, weiss hinterlegt */
.footer-mitgliedschaften-logos {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 200px;   /* Altseite: 175 px breit */
}

.footer-mitgliedschaften-logos img {
	display: block;
	width: 100%;
	height: auto;
	background: #fff;
}

/* Auf schmalen Schirmen stehen die drei Spalten untereinander und mittig.
   Der Block ist nur so breit wie sein Inhalt und wird als Ganzes zentriert -
   sonst stuenden die Zeilen zwar zentriert, der Kasten aber ueber die volle
   Breite. */
@media only screen and (max-width: 767px) {
	.footer-info .centered-wrapper-inner {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 40px 0;
		width: fit-content;
		/* ohne Deckel waere der Block so breit wie die laengste Zeile - die
		   Anschrift ragt sonst aus dem Fenster */
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	/* Symbole dicht beim Text, nicht am linken Rand: zwei Spalten nach
	   Inhaltsbreite statt einer, die den Rest fuellt. */
	/* Zentriert soll das Symbol beim Text stehen, nicht am linken Rand:
	   es wandert aus der absoluten Lage in den Textfluss. Der Absatz der
	   Anschrift muss dafuer inline werden, sonst begaenne der Text unter dem
	   Symbol. */
	.footer-kontakt .info-list-item {
		padding-left: 0;
	}

	.footer-kontakt .info-list-icon {
		position: static;
		margin-right: 6px;
	}

	.footer-kontakt .info-list-text,
	.footer-kontakt .info-list-text p {
		display: inline;
	}

	/* Die Sitemap zentriert; die Einrueckung der Unterebenen wuerde die
	   Mitte verschieben. */
	.footer-info .footer-spalte.footer-sitemap ul ul {
		margin-left: 0;
	}

	/* Die beiden Verbandszeichen mittig untereinander */
	.footer-mitgliedschaften-logos {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Die Fusszeile: Menue und Copyright stehen mittig untereinander. Oneo laesst
   das Menue (customnav) nach rechts schwimmen, wo es an den Rand stiess.

   Der obere Abstand kommt von hier, weil Oneo ihn unter 900 px streicht
   (.footer-links { padding-top: 0 }) - dort klebte das Menue am Knopf. Er
   traegt denselben Wert wie Oneos eigener darueber. */
.footer-links {
	float: none;
	margin: 0 0 6px;
	padding-top: 2.14286em;
	text-align: center;
}

/* Der Knopf "nach oben" sitzt auf der Kante zwischen dunklem Umschlag und
   heller Flaeche - dafuer zieht ihn ein negativer Rand hoch. Unter 600 px
   dreht Oneo das Vorzeichen um, und der Knopf faellt unter die Kante. */
.footer-top-link {
	margin-top: -1.66667em;
}

.footer-links ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links li {
	display: inline-block;
	margin: 0;
	padding: 0 10px;
}

.footer-links li::before {
	content: none;
}

.footer-links li + li {
	border-left: 1px solid #dcdcdc;
}

/* Die Unterebene der mobilen Schublade stand in #bfbfbf auf dem braunen Grund
   #95896c - ein Kontrast von 1,8 : 1, kaum zu lesen. Fast weiss bringt 3,1 : 1;
   der Unterschied zur ersten Ebene kommt weiter aus Einrueckung und Schnitt. */
.main-navigation-mobile .level_2 a,
.main-navigation-mobile .level_2 span,
.main-navigation-mobile .level_3 a,
.main-navigation-mobile .level_3 span {
	color: rgba(255, 255, 255, 0.9);
}

/* Die offene Seite steht als <strong> auf einem helleren Grund - dort war der
   Kontrast mit 1,5 : 1 am schlechtesten. Sie bekommt volles Weiss. */
.main-navigation-mobile .level_2 strong,
.main-navigation-mobile .level_2 strong.active,
.main-navigation-mobile .level_3 strong,
.main-navigation-mobile .level_3 strong.active {
	color: #fff;
}

/* Oben in der Schublade stand das Suchfeld; seit es weg ist, klebte der erste
   Punkt am Fensterrand. Der Platz bleibt - dort sitzt jetzt das Kreuz. */
.main-navigation-mobile {
	padding-top: calc(var(--safe-area-top) + 60px);
}

/* Der Streifen rechts neben der Schublade schliesst sie bei Beruehrung, trug
   aber kein Zeichen (text-indent: -99em, kein ::after). Er bekommt dasselbe
   Kreuz wie das Suchfeld - Zeichen \e14a der Theme-Schrift. */
.main-navigation-mobile-close {
	text-indent: 0;
	overflow: visible;
	color: #fff;
}

.main-navigation-mobile-close::after {
	content: "\e14a";
	font: 34px/1 "RockSolid Icons";
	-webkit-font-smoothing: antialiased;
	text-rendering: geometricPrecision;
	display: block;
	position: absolute;
	top: calc(var(--safe-area-top) + 13px);
	/* Der Streifen selbst liegt neben der Schublade, wo der Seiteninhalt
	   durchscheint - weiss auf hell. Das Zeichen rueckt deshalb an den rechten
	   Rand der braunen Flaeche; angetippt wird trotzdem der ganze Streifen. */
	right: 100%;
	margin-right: 14px;
}

/* --- Parallax-Streifen ---------------------------------------------- */
/* Der Streifen folgt auf ganz verschiedene Elemente - Akkordeon, Text,
   Iconboxen -, und ueberall stiess der Inhalt daran. Statt an jedem einzelnen
   Element einen Rand zu setzen, haelt der Streifen selbst Abstand. Der
   Umschlag traegt dafuer die Klasse parallax-bg; das Hintergrundbild darin
   liegt absolut und nimmt keinen Rand an.

   Vertikale Raender benachbarter Bloecke fallen zusammen: Wo davor schon mehr
   Platz steht (Iconboxen: 95 px), bleibt der groessere Wert stehen. */
.centered-wrapper.parallax-bg {
	margin-top: 60px;
}

/* Folgen zwei Streifen unmittelbar aufeinander - auf private-vorsorge das
   Foto und darunter das Zitat -, gehoert dazwischen kein weisser Spalt. Die
   beiden stecken in benachbarten Artikeln, nicht nebeneinander im selben
   Kasten; deshalb der Umweg ueber :has(). Die zweite Zeile faengt den Fall ab,
   dass sie doch einmal Geschwister sind. */
.mod_article:has(> .centered-wrapper.parallax-bg) + .mod_article > .centered-wrapper.parallax-bg,
.centered-wrapper.parallax-bg + .centered-wrapper.parallax-bg {
	margin-top: 0;
}

/* --- Iconboxen ------------------------------------------------------ */
/* Oneo laesst unter den Boxen 37 px. Wo ein Parallax-Streifen folgt, klebten
   die Knoepfe daran; die Altseite haelt dort 128 px Abstand. Mit 95 px kommt
   der letzte Knopf auf denselben Wert. */
.icon-boxes {
	margin-bottom: 95px;
}

/* --- Knoepfe der Iconboxen ------------------------------------------ */
/* Die Altseite setzt den Verweis am Fuss jeder Iconbox als gefuellten Kasten:
   goldbrauner Grund, weisse unterstrichene Schrift, Polster 10 x 12 px, 15 px.
   Bei uns steht dort ein <p>, weil die ganze Box der Link ist - gestaltet wird
   deshalb der Absatz, nicht ein a. */
.icon-boxes .icon-boxes-item-link {
	display: inline-block;
	padding: 10px 12px;
	background: #aea07d;
	color: #ffffff;
	font-size: 15px;
	text-decoration: underline;
}

.icon-boxes .icon-boxes-item:hover .icon-boxes-item-link,
.icon-boxes .icon-boxes-item:focus .icon-boxes-item-link,
.icon-boxes .icon-boxes-item-link:hover {
	background: #95896c;
}

/* Traegt der Knopf selbst den Verweis (Box mit Link im Text), soll der
   Kasten trotzdem so aussehen wie sonst. */
.icon-boxes .icon-boxes-item-link a {
	color: inherit;
	text-decoration: inherit;
}

/* Auf den Unterseiten steht der Verweis nicht im Link-Feld der Box, sondern
   als Absatz im Text: <p class="teamlink"><a ...>. Die Altseite macht daraus
   ebenfalls einen Kasten, dort allerdings in Grossbuchstaben und ohne
   Unterstreichung - beides live gemessen. */
.icon-boxes .teamlink a {
	display: inline-block;
	padding: 10px 12px;
	background: #aea07d;
	color: #ffffff;
	font-size: 15px;
	text-transform: uppercase;
	text-decoration: none;
}

.icon-boxes .teamlink a:hover,
.icon-boxes .teamlink a:focus {
	background: #95896c;
}

/* --- Slider-Navigation ------------------------------------------------ */
/* Die Altseite zeigt keine Punkte, sondern zwei weisse Flaechen von 70 x 70 px
   an den Seitenraendern, mittig auf der Hoehe des Bildes, mit einem grauen
   Winkel darin. Sie erscheinen erst, wenn der Zeiger ueber dem Slider steht.
   Die Punkte sind in den Modulen abgeschaltet (rsts_navType = none), die
   Flaechen kommen von hier. */

#layerslider .rsts-prev,
#layerslider .rsts-next,
.mod_rocksolid_slider .rsts-prev,
.mod_rocksolid_slider .rsts-next {
	position: absolute;
	top: 50%;
	width: 70px;
	height: 70px;
	margin: -35px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #fff;
	background-image: none;
	/* Die Altseite blendet die Flaechen erst beim Ueberfahren ein. Hier
	   stehen sie dauerhaft: unsichtbare Bedienelemente findet niemand, der
	   mit der Tastatur oder vom Tastschirm kommt. */
	opacity: 0.85;
	transition: opacity 0.2s linear;
}

.mod_rocksolid_slider .rsts-prev {
	left: 0;
	right: auto;
}

.mod_rocksolid_slider .rsts-next {
	right: 0;
	left: auto;
}

/* Der Winkel stammt aus Oneos Icon-Schrift - dieselben Zeichen, die das
   Theme im Zitat-Slider verwendet. */
.mod_rocksolid_slider .rsts-prev::after,
.mod_rocksolid_slider .rsts-next::after {
	font: 30px/70px "RockSolid Icons";
	-webkit-font-smoothing: antialiased;
	text-rendering: geometricPrecision;
	display: block;
	text-align: center;
	text-indent: 0;
	color: #aaa;
}

.mod_rocksolid_slider .rsts-prev::after {
	content: "\e018";
}

.mod_rocksolid_slider .rsts-next::after {
	content: "\e019";
}

/* Beim Ueberfahren voll deckend */
.mod_rocksolid_slider:hover .rsts-prev,
.mod_rocksolid_slider:hover .rsts-next,
.mod_rocksolid_slider .rsts-prev:hover,
.mod_rocksolid_slider .rsts-next:hover,
.mod_rocksolid_slider .rsts-prev:focus,
.mod_rocksolid_slider .rsts-next:focus {
	opacity: 1;
}

.mod_rocksolid_slider .rsts-prev:hover::after,
.mod_rocksolid_slider .rsts-next:hover::after {
	color: #95896c;
}



/* Die Beschriftung der Knoepfe bleibt fuer Screenreader, aber unsichtbar */
.rsts-prev-label,
.rsts-next-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Kontaktseite ---------------------------------------------------- */
/* Adresse links auf einem Drittel, Formular rechts - wie auf
   der Altseite (dort 408 px neben 792 px). */
@media only screen and (min-width: 768px) {
	.main-content:has(> .kontakt-adresse) {
		display: grid;
		grid-template-columns: 33% 1fr;
		gap: 0 40px;
		align-items: start;
	}
}

/* Symbol und Text stehen in einem Listenpunkt (siehe
   templates/oneo/rsce_oneo_info_list.html5). Das Symbol haengt am linken
   Rand, der Text rueckt ein - wie auf der Altseite. */
/* ".main-content ul" setzt Punkte und Einzug - der Selektor zaehlt ein
   Element mit, deshalb hier der Umschlag davor. */
.info-lists .info-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.info-list-item {
	position: relative;
	padding-left: 30px;
}

.info-list-icon {
	position: absolute;
	left: 0;
	top: 0;
}

.info-lists-headline {
	margin-bottom: 0.5em;
}

/* --- Formular --------------------------------------------------------- */
/* Die Altseite stellt Name/Telefon/E-Mail und Fax/Strasse/Ort in je eine
   Reihe zu dritt. Dort besorgte das die Erweiterung "autogrid", die es fuer
   Contao 5 nicht gibt - hier macht es ein Raster ueber die Formularfelder.
   Die sechs Textfelder stehen am Anfang des Formulars, deshalb reicht die
   Zaehlung ueber die ersten sechs .widget-text. */

@media only screen and (min-width: 768px) {
	.ce_form .formbody {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0 20px;
	}

	/* Alles ausser den sechs kurzen Textfeldern laeuft ueber die volle Breite */
	.ce_form .formbody > * {
		grid-column: 1 / -1;
	}

	.ce_form .formbody > .widget-text:nth-of-type(-n + 6) {
		grid-column: auto;
	}
}

/* Felder wie auf der Altseite: heller Grund, feiner Rahmen, dunkler Text,
   10 px Polster ringsum (Oneo setzt keinen Rahmen, faerbt den Text in der
   Grundfarbe und polstert seitlich fast doppelt so weit). */
.ce_form input[type="text"],
.ce_form input[type="email"],
.ce_form input[type="tel"],
.ce_form input[type="url"],
.ce_form input[type="number"],
.ce_form input[type="date"],
.ce_form input[type="search"],
.ce_form select,
.ce_form textarea {
	padding: 10px;
	border: 1px solid #E1E1E1;
	border-radius: 0;
	color: #333;
	background: #FCFCFC;
	box-shadow: none;
}

/* Contao gibt den Feldern eine feste Zeichenbreite; sie sollen stattdessen
   ihre Spalte ausfuellen wie auf der Altseite. */
.ce_form .formbody input[type="text"],
.ce_form .formbody input[type="email"],
.ce_form .formbody input[type="tel"],
.ce_form .formbody input[type="url"],
.ce_form .formbody input[type="number"],
.ce_form .formbody input[type="date"],
.ce_form .formbody input[type="search"],
.ce_form .formbody select,
.ce_form .formbody textarea {
	box-sizing: border-box;
	width: 100%;
}

.ce_form input:focus,
.ce_form select:focus,
.ce_form textarea:focus {
	border-color: #aea07d;
	background: #fff;
}

/* Die Altseite setzt die Reihen dicht untereinander: von der Unterkante
   eines Feldes bis zur Oberkante des naechsten sind es 24 px, darin steckt
   schon die Beschriftung der naechsten Reihe. Oneo braucht dafuer 61 px. */
/* Oneo setzt den Abstand mit ".main-content form .widget" - der Selektor
   zaehlt ein Element mehr, deshalb hier .formbody dazwischen. */
.ce_form .formbody .widget {
	margin: 0 0 3px;
}

.ce_form .formbody .widget > label {
	margin-bottom: 3px;
	line-height: 1.35;
}

/* Das Nachrichtenfeld beginnt einen Abschnitt; die kurzen Felder darueber
   stehen dicht, hier braucht es Luft. */
.ce_form .formbody .widget-textarea {
	margin-top: 15px;
}

/* Vor dem Absenden-Knopf und um die Einwilligung herum bleibt Luft */
.ce_form .widget-submit {
	margin-top: 20px;
}

/* Die Beschriftung der Einwilligung steht im Erklaerungstext daneben; das
   Wort "Datenschutz" am Haekchen waere doppelt. Auf der Altseite ist es
   ebenfalls nicht zu sehen. */
.datenschutz_form_box .checkbox_container label,
.datenschutz_form_box_fuss .checkbox_container label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Das Kontaktformular umschliesst die Einwilligung mit
   .datenschutz_form_box, der Schnellkontakt mit ..._fuss - gleiche Rolle. */
.datenschutz_form_box,
.datenschutz_form_box_fuss {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 20px 0;
	padding: 20px;
	border: 1px solid #e1e1e1;
}

.datenschutz_form_box .widget-explanation p:last-child,
.datenschutz_form_box_fuss .widget-explanation p:last-child {
	margin-bottom: 0;
}

/* --- Spamschutz: das Kästchen von ALTCHA ------------------------------ */
/* Es war praktisch unsichtbar - ein Punkt von 1 x 1 px. Schuld ist eine
   Regel aus Oneos main.css, die fuer alle Haekchen gilt:

     input[type="checkbox"], input[type="radio"], input[type="image"] {
         width: auto !important; height: auto !important;
     }

   ALTCHA zeichnet sein Kaestchen selbst (appearance: none) und bezieht die
   Groesse aus --altcha-checkbox-size. Gegen das !important kam es nicht an,
   also blieb nichts uebrig. Hier bekommt es seine Groesse zurueck - Rahmen,
   Fuellung und Haekchen bringt ALTCHA schon mit. */

.altcha-checkbox input[type="checkbox"] {
	width: var(--altcha-checkbox-size, 22px) !important;
	height: var(--altcha-checkbox-size, 22px) !important;
}

/* Das Haekchen liegt als SVG ueber dem Kaestchen und faengt die Klicks ab -
   es steckt nicht im Label, der Klick ginge also ins Leere. Solange das
   Kaestchen unsichtbar war, fiel das niemandem auf; jetzt klickt man
   darauf. */
.altcha-checkbox svg {
	pointer-events: none;
}

/* Farben aus dem Seitendesign statt ALTCHAs Grau und Signalgruen. Der
   Rahmen ist zwei Pixel breit, damit das Kaestchen auch auf hellen
   Flaechen steht. */
.altcha {
	--altcha-checkbox-border-color: #95896c;
	--altcha-checkbox-border-width: 2px;
	--altcha-color-success: #95896c;
}

/* --- Zitat-Slider ----------------------------------------------------- */
/* Die Zitate sollen nacheinander wechseln: erst verschwindet das alte, dann
   erscheint das neue. Der Slider blendet beide gleichzeitig, dabei standen
   die Texte uebereinander.

   Die Module 153/154 stehen dafuer auf "fade-in-out" (blendet das alte aktiv
   aus, statt es nur zu ueberdecken) mit 600 ms Dauer. Innerhalb dieser 600 ms
   werden die beiden Haelften hier getrennt: Der Slider setzt waehrend des
   Wechsels die Klasse rsts-postactive auf das gehende Slide. Die Wartezeit
   steht deshalb als Grundregel an allen Slides und wird fuer das gehende
   wieder aufgehoben - die Gegenklasse rsts-preactive nimmt der Slider schon
   nach 280 ms zurueck, eine Regel daran waere auf Kante genaeht. Die Dauer
   kommt als Inline-Stil vom Slider, deshalb !important; die Verzoegerung
   setzt er nicht, die gilt ohne.

   Zeitlich: 0-250 ms altes Zitat aus, 300-600 ms neues Zitat ein. Beides ist
   fertig, bevor der Slider nach 604 ms die Klassen umhaengt. */

.rsts-type-fade-in-out .rsts-slide {
	transition-delay: 300ms;
	transition-duration: 300ms !important;
}

.rsts-type-fade-in-out .rsts-slide.rsts-postactive {
	transition-delay: 0s;
	transition-duration: 250ms !important;
}

/* --- Parallax-Streifen ------------------------------------------------ */
/* Die Altseite zeigt zwischen den Abschnitten einen 520 px hohen Streifen mit
   dem Firmenschild als Hintergrund. Die Artikel tragen dafuer die Klasse
   parallax-fixed-height (aus der Altinstallation uebernommen), die Hoehe
   stand dort in .parallax-fixed-height .parallax-bg.
   
   Den Effekt macht wie auf der Altseite der Browser selbst: Das Bild haengt
   am Fenster und steht beim Scrollen still, waehrend der Ausschnitt darueber
   wandert. Oneos eigener Effekt (-background-parallax) ist deshalb
   abgeschaltet - er verschiebt das Bild im Scroll-Ereignis per translate3d,
   wodurch es mit gut der halben Scrollgeschwindigkeit mitkriecht und einen
   Frame hinterherhinkt. Gemessen: 0,56 Pixel Bildbewegung je Scroll-Pixel
   gegenueber 0,1 auf der Altseite. */

.parallax-fixed-height .centered-wrapper {
	min-height: 520px;
}

.parallax-bg > .centered-wrapper-background {
	background-attachment: fixed;
}

/* Wie auf der Altseite: kleine Bildschirme und iOS kommen mit einem am
   Fenster haengenden Hintergrund nicht zurecht. */
@media only screen and (max-width: 990px) {
	.parallax-bg > .centered-wrapper-background {
		background-attachment: scroll;
	}
}

/* Der Streifen der Altseite hat keinen eigenen Inhalt; ohne Polster bleibt
   das Bild auf voller Hoehe stehen. */
.parallax-fixed-height .centered-wrapper-inner:empty {
	padding: 0;
}

/* --- Brotkrumenband -------------------------------------------------- */
/* Die Altseite zeigt unter dem Kopf einen 65 px hohen Streifen in #eae7e2
   mit dem Navigationspfad am linken Rand - ohne Überschrift. Oneo stellt
   dort eine Signalfarbe mit weißer Schrift, rechtsbündigem Pfad und einer
   Überschrift ein; Farbe, Ausrichtung und Überschrift sind in den Modulen
   129, 76 und 131 geändert, die Maße stehen hier. */

#Tagline .breadcrumbs-wrapper {
	padding-bottom: 0;
}

#Tagline .mod_breadcrumb {
	padding: 20px 0;
	font-size: 14px;
	line-height: 24px;
}

/* Trenner wie auf der Altseite: ein schmaler Winkel, kein Schrägstrich */
#Tagline .mod_breadcrumb li + li::before {
	content: "\203a ";
	margin: 0 5px;
	font-size: 1.14286em;
}

/* --- Hauptnavigation ------------------------------------------------ */
/* Bree Serif, 18 px, gemischte Schreibung – nicht Oneos versalgesetzte
   Variante in Open Sans. */

/* Contao gibt die aktive Seite als <strong> aus, nicht als <a> – beide
   brauchen dieselbe Auszeichnung. */
.main-navigation .level_1 > li > a,
.main-navigation .level_1 > li > strong,
.main-navigation > ul > li > a,
.main-navigation > ul > li > strong {
	font-family: "Bree Serif", Georgia, serif;
	font-size: 18px;
	font-weight: 400;
	text-transform: none;
	color: #bbaf91;
	letter-spacing: 0;
	margin: 0 15px;
	/* 28 + 24 + 28 ergibt die 80 px hohe Leiste der Altseite */
	padding: 28px 0;
	line-height: 24px;
	display: block;
}

.main-navigation .level_1 > li > strong.active,
.main-navigation > ul > li > strong.active {
	color: #95896c;
}

/* Aktive Seite und Pfad: gleicher Abstand wie bei den Punkten mit Untermenü */
.main-navigation > ul > li > a.active,
.main-navigation > ul > li > a.trail,
.main-navigation > ul > li > a.forward,
.main-navigation > ul > li > strong.active,
.main-navigation > ul > li > strong.trail,
.main-navigation > ul > li > strong.forward,
.main-navigation > ul > li > span.active,
.main-navigation > ul > li > span.trail,
.main-navigation > ul > li > span.forward {
	padding-top: 28px;
	padding-bottom: 0;
}

/* Oneo markiert die aktive Seite mit einem gedrehten Quadrat als Pfeilspitze.
   Die Altseite setzt einen Balken unter den Punkt – also Drehung, Fläche und
   Maße abschalten und nur den unteren Rand stehen lassen. */
.main-navigation > ul > li > a.active:not(.highlight)::after,
.main-navigation > ul > li > a.trail:not(.highlight)::after,
.main-navigation > ul > li > a.forward:not(.highlight)::after,
.main-navigation > ul > li > strong.active:not(.highlight)::after,
.main-navigation > ul > li > strong.trail:not(.highlight)::after,
.main-navigation > ul > li > strong.forward:not(.highlight)::after,
.main-navigation > ul > li > span.active:not(.highlight)::after,
.main-navigation > ul > li > span.trail:not(.highlight)::after,
.main-navigation > ul > li > span.forward:not(.highlight)::after {
	left: 0;
	width: 100%;
	height: auto;
	margin-left: 0;
	border: 0;
	border-bottom: 10px solid currentColor;
	background: none;
	transform: none;
}

/* Beim Ueberfahren setzt Oneo demselben Element zusaetzlich einen oberen
   Rand in der helleren Farbe - unter dem aktiven Punkt standen dann zwei
   Balken uebereinander. Der obere faellt weg, der vorhandene wechselt nur
   die Farbe. Der Selektor fuehrt fuenf Klassen, weil Oneos Hover-Regel
   (.header-navigation.is-bottom … li.submenu:hover > strong::after) vier
   mitbringt. */
.header-navigation .main-navigation > ul > li:hover > a.active:not(.highlight)::after,
.header-navigation .main-navigation > ul > li:hover > a.trail:not(.highlight)::after,
.header-navigation .main-navigation > ul > li:hover > a.forward:not(.highlight)::after,
.header-navigation .main-navigation > ul > li:hover > strong.active:not(.highlight)::after,
.header-navigation .main-navigation > ul > li:hover > strong.trail:not(.highlight)::after,
.header-navigation .main-navigation > ul > li:hover > strong.forward:not(.highlight)::after,
.header-navigation .main-navigation > ul > li:hover > span.active:not(.highlight)::after,
.header-navigation .main-navigation > ul > li:hover > span.trail:not(.highlight)::after,
.header-navigation .main-navigation > ul > li:hover > span.forward:not(.highlight)::after {
	top: auto;
	border-top: 0;
	border-bottom: 10px solid #aea07d;
	border-radius: 0;
	box-shadow: none;
}

/* Das Mega-Menü bringt eigenen Raum unterhalb der Punkte mit; die Leiste
   soll wie auf der Altseite 80 px hoch sein. */
.main-navigation {
	height: 80px;
}

.main-navigation .level_1 > li {
	line-height: 24px;
}

/* --- Zwischenbereich: Navigation unter dem Logo ----------------------- */
/* Nebeneinander brauchen Logo (162 px) und Navigation (767 px) samt Raendern
   rund 1000 px. Darunter schoben sie sich ineinander - bei 891 px Platz
   begann die Navigation bei x = 114, das Logo reichte bis x = 199.
   Zwischen dem Mobilmenue und dieser Grenze steht die Navigation deshalb
   unter dem Logo. Oneo sieht das ab 900 px vor, zu spaet fuer sieben Punkte
   in Bree Serif. */

@media screen and (min-width: 881px) and (max-width: 1015px) {
	/* Das seitliche Mass des absolut gesetzten Logos uebernimmt hier der
	   Umschlag, sonst klebten Logo und Navigation am Rand. */
	.main-navigation-wrapper {
		padding-left: 2.66667em;
		padding-right: 2.66667em;
	}

	/* Das Logo steht sonst absolut im Kopf; hier nimmt es seinen Platz im
	   Fluss ein, damit die Navigation darunter passt. */
	.logo {
		position: static;
		height: auto;
		margin: 0;
		padding: 14px 0 0;
	}

	.main-navigation {
		float: none;
		clear: both;
		height: auto;
		padding: 0 0 12px;
	}

	.main-navigation > ul > li:first-child {
		margin-left: 0;
	}
}

/* --- Umschaltpunkt zum Mobilmenü -------------------------------------- */
/* Oneo wechselt erst bei 599 px, viel zu spaet: Die sieben Punkte brauchen
   767 px und stehen darunter zweizeilig.

   Gerechnet wird von innen nach aussen: 767 px Navigation + 75 px seitliches
   Polster = 842 px Platz, dazu 15 px fuer die Scrollleiste, weil Media
   Queries mit der Fensterbreite einschliesslich Leiste rechnen. Mit etwas
   Reserve steht die Grenze bei 880 px - bei 885 px Platz bleiben im Umschlag
   810 px fuer 767 px Navigation.

   Uebernommen sind dieselben Schalter, die Oneo bei 599 px stellt. */

@media screen and (max-width: 880px) {
	.main-navigation,
	.secondary-navigation {
		display: none;
	}

	.main-navigation-mobile-open {
		display: block;
	}

	/* ohne JavaScript steht das Menue offen, mit JavaScript klappt es auf -
	   Oneo unterscheidet das ueber .is-enabled */
	.main-navigation-mobile,
	.main-navigation-mobile.is-enabled {
		display: block;
	}

}

/* Oneo kennt unterhalb von 600 px noch eine zweite Kopfvariante: Logo in der
   Mitte, Knopf links daneben. Die brauchen wir nicht - der Kopf sieht von
   880 px abwaerts ueberall gleich aus, Logo links und Knopf rechts. */
@media screen and (max-width: 880px) {
	.main-navigation-mobile-open {
		left: auto;
		right: 2.66667em;
		margin-left: 0;
	}

	/* Gleicher Abstand oben und unten: Das Logo steht damit auf derselben
	   Hoehe wie der Knopf, und die Leiste bekommt ihre Hoehe aus dem Logo
	   (49 + 2 x 20 = 89 px) statt aus dem Clearfix. */
	.logo {
		float: left;
		text-align: left;
		margin: 20px 0 20px var(--page-padding-left);
		padding-top: 0;
	}

	.main-navigation-wrapper::after {
		min-height: 0;
	}
}

/* --- Aufklappmenü --------------------------------------------------- */
/* Die Altseite setzt die Untereinträge in Versalien, Open Sans 12 px,
   mit feiner Trennlinie. Oneo nimmt die Grundschrift in gemischter
   Schreibung und rahmt den aufgeklappten Hauptpunkt weiß ein. */

.main-navigation .level_2 a,
.main-navigation .level_2 strong,
.main-navigation ul ul a,
.main-navigation ul ul strong {
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	color: #95896c;
	padding: 8px 25px 10px 20px;
	line-height: 1.4;
}

.main-navigation ul ul li {
	border-bottom: 1px solid #d2cec5;
}

.main-navigation ul ul li:last-child {
	border-bottom: 0;
}

/* Der Eintrag unter dem Mauszeiger wird ausgefüllt. Die Regel muss hier
   stehen, weil die Farbvorgabe oben Oneos eigenen Hover sonst überschreibt. */
.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus,
.main-navigation .level_2 a:hover,
.main-navigation .level_2 a:focus {
	color: #fff;
	background: #aea07d;
}

/* Punkte mit Untermenü: Oneo zieht den unteren Abstand zusammen, sobald das
   Feld aufklappt. Der Abstand bleibt oben stehen, unten entfällt er. */
.main-navigation > ul > li.submenu > a,
.main-navigation > ul > li.submenu > strong,
.main-navigation > ul > li.submenu > span {
	padding-top: 28px;
	padding-bottom: 0;
}

/* Statt den Hauptpunkt einzurahmen, setzt die Altseite einen kräftigen
   Balken darunter. Oneos Rahmen-Attrappe (::after) zieht sich sonst über den
   ganzen Punkt – deshalb die Oberkante freigeben und nur den Balken zeichnen. */
.main-navigation > ul > li.submenu:hover > a::after,
.main-navigation > ul > li.submenu:hover > strong::after,
.main-navigation > ul > li.submenu:hover > span::after,
.main-navigation > ul > li.submenu:focus-within > a::after,
.main-navigation > ul > li.submenu:focus-within > strong::after,
.main-navigation > ul > li.submenu:focus-within > span::after {
	top: auto;
	border-top: 10px solid #aea07d;
	border-radius: 0;
	box-shadow: none;
}

/* --- Logo ---------------------------------------------------------- */
/* Feste Höhe statt der prozentualen Theme-Vorgabe: Oneo bemisst das Logo
   an der Leistenhöhe, die Leiste wiederum richtet sich nach der Navigation.
   Wird das Logo zu groß, bricht die Navigation um, die Leiste wächst und das
   Logo mit ihr. Die feste Angabe durchbricht diesen Kreis. */

.logo {
	height: 49px;
	top: 15px;
	bottom: auto;
}

.logo img {
	height: 49px;
	width: auto;
	max-width: none;
}

/* --- Zweites Logo im TenneT-Baum ------------------------------------ */
/* Die Altseite stellt das Zeichen von TenneT rechts neben das eigene, getrennt
   durch eine duenne Linie: Bild 195 x 38, border-left 1px #ccc, 10 px Abstand
   dahinter. Auf dem Telefon stehen beide untereinander, ohne Linie.

   Der Kopfbereich haengt in Contao am Layout, nicht am Seitenbaum. TenneT hat
   deshalb eigene Layouts (20 und 21, siehe var/_tennet-logo.php); sie setzen
   die Body-Klasse "tennet", an der die folgenden Regeln haengen. */

/* Ueber 1015 px steht Oneos Logo absolut (left: 2.6666em, top: 15px, 162 px
   breit). Das zweite Zeichen setzt sich daneben: 162 + 18 px Abstand. Der
   Kasten ist 62 px hoch (38 + 2 x 12), damit die Linie so hoch steht wie auf
   der Altseite; top 8 px stellt ihn mittig zum ersten Logo. */
.tennet .logo-tennet {
	position: absolute;
	top: 8px;
	left: calc(2.6666em + var(--safe-area-left) + 180px);
	padding: 12px 0 12px 10px;
	border-left: 1px solid #ccc;
}

.tennet .logo-tennet img {
	display: block;
	width: 195px;
	height: 38px;
}

/* 881 bis 1015 px: Das Logo steht im Fluss, die Navigation darunter. Beide
   Zeichen schwimmen nebeneinander. */
@media screen and (max-width: 1015px) {
	.tennet .logo {
		float: left;
	}

	.tennet .logo-tennet {
		position: static;
		float: left;
		padding: 14px 0 0 10px;
	}
}

/* Unter 881 px ist der Platz neben dem Menueknopf zu knapp - die Altseite
   stellt die beiden Zeichen dort untereinander. */
@media screen and (max-width: 880px) {
	.tennet .logo-tennet {
		float: none;
		clear: both;
		padding: 0 0 14px;
		margin-left: var(--page-padding-left);
		border-left: 0;
	}
}

/* --- Slider -------------------------------------------------------- */
/* Der Slider haelt das Verhaeltnis 1600 : 680. Die Altseite deckelt die Hoehe
   zusaetzlich bei 680 px; ab etwa 1600 px Fensterbreite wird das Bild dadurch
   immer staerker vergroessert und beschnitten - bei 1885 px fuellt der Kopf
   die ganze Flaeche. Die Deckelung faellt deshalb weg, der Slider waechst
   mit der Breite und der Ausschnitt bleibt derselbe.
   Die Beschriftung steht weiss ueber dem Bild. */

.mod_rocksolid_slider,
.mod_rocksolid_slider .rsts-slider,
.mod_rocksolid_slider .rsts-view {
	overflow: hidden;
}

.rsts-slide .content-text,
.rsts-slide .mod_article,
.rsts-slide .ce_text {
	text-align: center;
}

/* Langsamer Zoom auf dem Bild, wie auf der Altseite: Der Revolution Slider
   vergroessert dort den Hintergrund von 100 auf 107 Prozent ueber zehn
   Sekunden (data_bgscale, data_duration). Hier macht es eine Animation, die
   an .rsts-active haengt - sie beginnt damit bei jedem Slidewechsel von vorn.
   Der Ursprung liegt unten mittig, wie die Bildausrichtung der Altseite. */
@keyframes slider-zoom {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.07);
	}
}

.rsts-slide.rsts-active img[data-rsts-background] {
	transform-origin: 50% 100%;
	animation: slider-zoom 10s linear forwards;
}

/* Nicht im TenneT-Slider: Dort ist das Bild eine Zeichnung, keine Fotografie -
   die langsame Vergroesserung wirkt darauf unruhig. Ausserdem stimmt der
   Ausschnitt ohne sie genau mit der Altseite ueberein (1938 x 950 statt
   2074 x 1017 bei 1920 px Fensterbreite). */
.rsts-slide.slide-tennet.rsts-active img[data-rsts-background] {
	animation: none;
	transform: none;
}

/* Auf schmalen Schirmen nehmen die Flaechen zu viel vom Bild weg; dort wird
   gewischt statt geklickt. */
@media only screen and (max-width: 767px) {
	.mod_rocksolid_slider .rsts-prev,
	.mod_rocksolid_slider .rsts-next {
		display: none;
	}
}

/* Wer Bewegung im System abbestellt hat, bekommt das Bild ruhig */
@media (prefers-reduced-motion: reduce) {
	.rsts-slide.rsts-active img[data-rsts-background] {
		animation: none;
	}
}

/* Der Zitat-Slider läuft auf dem Hintergrund des Umschlags – RockSolid gibt
   den Slides sonst eine eigene weiße Fläche. */
.centered-wrapper .mod_rocksolid_slider,
.centered-wrapper .rsts-slider,
.centered-wrapper .rsts-view,
.centered-wrapper .rsts-slide,
.centered-wrapper .rsts-slide.rsts-slide-default {
	background: transparent;
	max-height: none;
}

.rsts-slide h1,
.rsts-slide h2,
.rsts-slide h3 {
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.rsts-slide h1 {
	font-size: 90px;
	line-height: 1.1;
	margin-bottom: 0.2em;
}

.rsts-slide h2 {
	font-size: 30px;
	line-height: 1.3;
}

@media only screen and (max-width: 1280px) {
	.rsts-slide h1 { font-size: 7vw; }
	.rsts-slide h2 { font-size: 2.4vw; }
}

/* Das Bild behaelt das Verhaeltnis 1600 : 680, die Hoehe faellt also mit der
   Breite: 352 px bei 767, 159 px bei 375. Der Text muss mitschrumpfen, sonst
   fuellt er die ganze Flaeche. Die Altseite skaliert ihn mobil auf 3 px
   herunter - hier bleibt er lesbar. */
@media only screen and (max-width: 767px) {
	.rsts-slide h1 { font-size: 20px; }
	.rsts-slide h2 { font-size: 12px; }
}

@media only screen and (max-width: 599px) {
	.rsts-slide h1 { font-size: 16px; }
	.rsts-slide h2 { font-size: 10px; }
}

/* Das erste Bild zeigt ein Portraet. Der Kopf sitzt darin links, die freie
   Flaeche liegt rechts - dorthin rueckt der Text, eine Stufe kleiner, damit
   das Gesicht frei bleibt. Die Slide traegt dafuer die Klasse
   slide-text-links (im Backend am Slide hinterlegt). */
.slide-text-links .content-text,
.slide-text-links .mod_article,
.slide-text-links .ce_text {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	text-align: left;
}

.slide-text-links h1,
.slide-text-links h2 {
	/* rechte Haelfte des Bildes: der Kopf endet bei rund der Haelfte */
	margin-left: 52%;
}

.slide-text-links h1 {
	font-size: 60px;
	max-width: 8em;
}

.slide-text-links h2 {
	font-size: 22px;
	max-width: 22em;
}

@media only screen and (max-width: 1280px) {
	.slide-text-links h1 { font-size: 4.7vw; }
	.slide-text-links h2 { font-size: 1.8vw; }
}

@media only screen and (max-width: 767px) {
	.slide-text-links h1 {
		font-size: 20px;
		max-width: none;
	}

	.slide-text-links h2 {
		font-size: 12px;
		line-height: 1.35;
		max-width: none;
	}

	.slide-text-links .content-text,
	.slide-text-links .mod_article,
	.slide-text-links .ce_text {
		padding: 0 20px;
	}
}

/* Auf dem Telefon bleiben nur noch rund 160 px Bildhoehe. Der Kopf endet dort
   bei etwa 56 % der Breite; der Text rueckt dahinter und wird so klein, dass
   seine vier Zeilen daneben Platz finden - wie auf der Altseite, wo er
   ebenfalls neben dem Kopf steht und das Gesicht frei laesst. */
@media only screen and (max-width: 599px) {
	.slide-text-links h1 { font-size: 14px; }
	.slide-text-links h2 { font-size: 9px; }

	.slide-text-links h1,
	.slide-text-links h2 {
		margin-left: 56%;
	}

	.slide-text-links .content-text,
	.slide-text-links .mod_article,
	.slide-text-links .ce_text {
		padding: 0 12px;
	}
}

/* --- TenneT-Slider: Hoehe ------------------------------------------- */
/* Die Altseite haelt das Verhaeltnis 1600 : 950, hoert aber bei 950 px auf:
   Bei 1920 px Fenster ist der Slider dort 1905 x 950, waehrend ein reines
   Verhaeltnis 1131 px ergaebe - darunter blieb bei uns eine grosse leere
   Flaeche. Ein Verhaeltnis allein kann beides nicht; deshalb steht an den
   Modulen 151 und 152 die Hoehe auf "css" (der Slider rechnet dann nicht mehr
   selbst) und die Rechnung steht hier. */
.slider-tennet,
.slider-tennet .rsts-slider,
.slider-tennet .rsts-view {
	/* width: 100% ist noetig - ohne sie rechnet der Browser die Breite aus
	   aspect-ratio und max-height zurueck und der Slider schrumpft bei breiten
	   Fenstern auf 1600 px. */
	width: 100%;
	aspect-ratio: 1600 / 950;
	height: auto;
	max-height: 950px;
}

/* --- TenneT-Slider -------------------------------------------------- */
/* Der grosse Slider zeigt weisse Schrift ueber einem Foto; die beiden
   TenneT-Slider tragen dagegen dunklen Text auf heller Zeichnung, links neben
   den Figuren. Nachgemessen auf der Altseite bei 1425 px Sliderbreite:
   h1 41 px und h2 27 px in #95896c ohne Schatten, die Hinweise 18 px fett in
   Blau, darunter zwei gefuellte Knoepfe (21 px, weiss auf #aea07d, Polster
   9 x 11 px). Der Revolution Slider skaliert das mit der Breite - hier
   uebernehmen vw-Werte diese Aufgabe.

   Die Slides tragen dafuer die Klasse slide-tennet (siehe
   var/_tennet-slider.php); der Selektor fuehrt zwei Klassen, damit er die
   Media Queries des grossen Sliders ueberstimmt. */

/* Der Revolution Slider rechnet gegen ein Raster von 1600 px: Bis dahin
   waechst alles mit der Breite, darueber bleibt es stehen und das Raster wird
   mittig gestellt. Nachgemessen bei 1920 px Fenster: Textanfang x = 193,
   h1 46 px - nicht 55 px, wie eine ungebremste Skalierung ergaebe.
   min() bildet beides ohne zusaetzliche Medienabfrage ab. */
.rsts-slide.slide-tennet .content-text,
.rsts-slide.slide-tennet .mod_article,
.rsts-slide.slide-tennet .ce_text {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 40px;
	text-align: left;
}

.rsts-slide.slide-tennet h1,
.rsts-slide.slide-tennet h2,
.rsts-slide.slide-tennet h3 {
	color: #95896c;
	text-align: left;
	text-shadow: none;
}

.rsts-slide.slide-tennet h1 {
	font-size: min(2.85vw, 46px);
	line-height: 1.1;
	margin: 0 0 0.5em;
	max-width: none;
}

.rsts-slide.slide-tennet h2 {
	font-size: min(1.875vw, 30px);
	line-height: 1.2;
	margin: 0 0 0.5em;
}

.rsts-slide.slide-tennet h2.slide-hinweis {
	color: rgba(0, 69, 147, 0.8);
	font-size: min(1.25vw, 20px);
	font-weight: 700;
}

.rsts-slide.slide-tennet h3 {
	margin: 0 0 0.5em;
}

.rsts-slide.slide-tennet h3 a {
	display: inline-block;
	padding: 9px 11px;
	color: #fff;
	background: #aea07d;
	font-size: min(1.46vw, 24px);
	text-decoration: none;
}

.rsts-slide.slide-tennet h3 a:hover,
.rsts-slide.slide-tennet h3 a:focus {
	background: #95896c;
}

/* Der leere Absatz zwischen Text und Knoepfen stammt aus der Altseite. */
.rsts-slide.slide-tennet p:empty {
	display: none;
}

/* Der Text faehrt von links ein. Die Altseite macht das mit der
   Revolution-Slider-Klasse "lfl" (long from left); ihre Werte stehen als
   data-Attribute an der Caption: data-speed 500, data-start 1500,
   data-easing easeInQuad. Uebernommen sind die Verzoegerung und das Easing
   (easeInQuad als cubic-bezier); die Fahrt selbst laeuft auf Wunsch 20 %
   langsamer als auf der Altseite, also in 600 statt 500 ms. "both" haelt den
   Anfangszustand waehrend der Wartezeit fest, sonst stuende der Text
   1,5 Sekunden sichtbar da und spraenge dann. */
@keyframes slide-tennet-ein {
	from {
		opacity: 0;
		transform: translateX(-100%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.rsts-slide.slide-tennet.rsts-active .content-text {
	animation: slide-tennet-ein 600ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 1500ms both;
}

/* Der Slider rechnet sich bei jeder Groessenaenderung neu - auf dem Telefon
   schon, wenn beim Scrollen die Adressleiste ein- und ausfaehrt. Dabei wird
   der Inhalt kurz ausgeblendet, und eine CSS-Animation beginnt danach von
   vorn: Der Text fuhr immer wieder neu ein. Ein kurzes Skript in den beiden
   TenneT-Layouts setzt deshalb nach dem ersten Durchlauf die Klasse
   is-eingefahren, und die hebt die Animation auf. */
.rsts-slide.slide-tennet .content-text.is-eingefahren {
	animation: none !important;
	opacity: 1;
	transform: none;
}

/* Wer Bewegung abbestellt hat, bekommt den Text sofort und ohne Fahrt. */
@media (prefers-reduced-motion: reduce) {
	.rsts-slide.slide-tennet.rsts-active .content-text {
		animation: none;
	}
}

/* Der Slider stellt den Textblock senkrecht mittig (data-rsts-center setzt
   dafuer margin-top als Inline-Stil, gemessen 192 px). Die Altseite setzt ihn
   hoeher an: 89 px unter der Oberkante bei 1425 px Breite, also 6,2 % der
   Fensterbreite - derselbe Massstab, nach dem hier auch die Schrift waechst.
   Inline-Stile weichen nur mit !important. */
.rsts-slide.slide-tennet > [data-rsts-center] {
	margin-top: min(6.2vw, 100px) !important;
}

/* Unter 900 px wird die Zeichnung zu schmal, um Text daneben zu stellen -
   die Schrift faellt auf feste Groessen zurueck. */
@media only screen and (max-width: 900px) {
	.rsts-slide.slide-tennet h1 { font-size: 22px; }
	.rsts-slide.slide-tennet h2 { font-size: 15px; }
	.rsts-slide.slide-tennet h2.slide-hinweis { font-size: 11px; }
	.rsts-slide.slide-tennet h3 a { font-size: 12px; padding: 6px 8px; }

	.rsts-slide.slide-tennet .content-text,
	.rsts-slide.slide-tennet .mod_article,
	.rsts-slide.slide-tennet .ce_text {
		padding: 0 20px;
	}
}

/* Auf schmalen Schirmen wird der Slider flach - bei 650 px noch 386 px hoch,
   bei 375 px nur noch 223 px -, der Text braucht in den Groessen von oben aber
   gleich viel Platz und lief unten heraus. Die Altseite umgeht das, indem sie
   diesen Slider dort gar nicht zeigt (sie blendet ein eigenes Bild ohne Text
   ein). Hier bleibt er sichtbar, dafuer ruecken Schrift und Abstaende ab
   650 px enger zusammen.

   Die Grenze steht auf 660 px, nicht auf 650: Bei einem 650 px breiten Fenster
   greift "max-width: 650px" noch nicht, weil der Browser die Fensterbreite
   knapp darueber ansetzt (nachgemessen: innerWidth 650, Abfrage trifft nicht). */
@media only screen and (max-width: 660px) {
	.rsts-slide.slide-tennet h1 { font-size: 14px; line-height: 1.15; }
	.rsts-slide.slide-tennet h2 { font-size: 10px; }
	.rsts-slide.slide-tennet h2.slide-hinweis { font-size: 8px; }
	.rsts-slide.slide-tennet h3 a { font-size: 9px; padding: 4px 6px; }
}

/* Unter 560 px reicht die Hoehe auch dafuer nicht mehr - bei 375 px sind es
   noch 223 px, der Block braucht dort jede Zeile. Deshalb ruecken hier
   zusaetzlich die Abstaende zusammen. */
@media only screen and (max-width: 560px) {
	.rsts-slide.slide-tennet h1 { line-height: 1.05; margin-bottom: 0.3em; }
	.rsts-slide.slide-tennet h2 { line-height: 1.15; margin-bottom: 0.25em; }
	.rsts-slide.slide-tennet h2.slide-hinweis { margin-bottom: 0.2em; }
	.rsts-slide.slide-tennet h3 { margin-bottom: 0.2em; }
	.rsts-slide.slide-tennet h3 a { padding: 3px 5px; }

	.rsts-slide.slide-tennet > [data-rsts-center] {
		margin-top: 6px !important;
	}
}

/* --- Fließtext ---------------------------------------------------- */

body,
.content-text,
p {
	font-weight: 400;
}

/* Der Fließtext in den Iconboxen läuft auf der Altseite in 15 px
   (.iconbox_content), nicht in der Grundgröße von 14 px. */
.icon-boxes-item-text p {
	font-size: 15px;
}

/* Die Symbole stehen auf der Altseite frei über der Box: 62 px, in der
   Grundfarbe, ohne Fläche dahinter. Oneo stellt sie weiß auf ein farbiges
   Quadrat. */
.icon-boxes-item-icon {
	background: transparent;
	color: #95896c;
	font-size: 62px;
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	margin-bottom: 0.3em;
}

/* Oneo hebt die Überschriften der Iconboxen mit der Akzentfarbe hervor;
   die Altseite lässt sie in der Grundfarbe stehen. */
.icon-boxes-item h1,
.icon-boxes-item h2,
.icon-boxes-item h3,
.icon-boxes-item h4,
.icon-boxes-item h5,
.icon-boxes-item h6 {
	color: #95896c;
}

/* Großzügiger Abstand unter Abschnittsüberschriften wie bisher */
#main .mod_article h2,
main .mod_article h2 {
	margin-bottom: 50px;
}

/* --- Fußbereich --------------------------------------------------- */

#footer,
.footer {
	background: #242528;
	color: #8C8989;
}

#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	color: #fff;
}

/* --- Teamdarstellung ---------------------------------------------- */
/* Die Altseite zeigt die Bilder quadratisch, dreispaltig, ohne Abstand
   und in Schwarzweiß. Die Spaltenzahl kommt aus rocksolid-columns
   (rs_columns_large = 3), hier bleibt die Bildbehandlung. */

.team-boxes .team-boxes-item {
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

.team-boxes .team-boxes-image-wrapper {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	line-height: 0;
}

.team-boxes .team-boxes-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}

/* Die beiden letzten Kacheln sind keine Portraits, sondern eine Farbflaeche
   und eine Schrifttafel ("Wir sind gerne fuer Sie da"). Der Graustufen-Filter
   der Portraits nahm ihnen die Farbe - auf der Altseite sind sie goldbraun.
   Sie tragen keinen Namen; daran erkennt sie das Template und setzt die
   Klasse -ohne-person (siehe templates/oneo/rsce_oneo_team_boxes.html5). */
.team-boxes .team-boxes-item.-ohne-person .team-boxes-image-wrapper img {
	filter: none;
}

/* Die Sonderkacheln haben kein Namensband. Damit unter ihnen kein heller
   Streifen stehen bleibt, fuellen sie die ganze Rasterzeile - die Portraits
   daneben sind Bild plus Band hoch. */
.team-boxes .team-boxes-item.-ohne-person .team-boxes-image-wrapper {
	flex: 1 1 auto;
	aspect-ratio: auto;
}

/* Beim Ueberfahren bekommt das Portrait seine Farbe zurueck - so macht es die
   Altseite. Die Ueberblendung steckt schon in der transition oben.

   Dazu muss die Deckkraft zurueck auf 1: Oneo blendet das Bild beim
   Ueberfahren auf 0,5 ab, und der goldbraune Grund des Rahmens schien
   hindurch - das sah aus wie eine Farbschicht ueber dem Foto. */
.team-boxes .team-boxes-item:hover .team-boxes-image-wrapper img,
.team-boxes .team-boxes-item:focus-within .team-boxes-image-wrapper img {
	filter: none;
	opacity: 1;
}

/* Die Altseite setzt die Portraits ohne Fugen aneinander; Oneos Spalten
   lassen 5 % Abstand. Statt die Randwerte einzeln zurueckzunehmen (float mit
   Prozentbreiten haette an den Kanten Rundungsluecken hinterlassen) traegt
   das Raster hier ein Grid. Die Umbruchpunkte sind Oneos eigene: 900 px
   (3 -> 2 Spalten) und 599 px (2 -> 1). */
.team-boxes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 2 px Rand je Kachel ergeben zwischen zweien eine Fuge von 4 px; aussen
	   bleiben die 2 px am Raster selbst. */
	gap: 4px;
	/* Unten mehr Luft: Das Raster stiess sonst direkt an den Parallax-Streifen,
	   der als naechstes Element folgt. */
	margin: 2px 2px 60px;
}

/* Oneo raeumt die Float-Spalten mit zwei Pseudoelementen auf. In einem Grid
   zaehlen die als Zellen - die erste Reihe begann dadurch in Spalte 2. */
.team-boxes::before,
.team-boxes::after {
	display: none;
}

/* Der Selektor fuehrt die Klasse rs-column mit, weil Oneos Breitenangabe
   drei Klassen hat (.oneo-no-sidebar .rs-column.-large-col-3-1: 31,1111 %) -
   mit zwei Klassen blieben die Kacheln 127 px schmal. */
.team-boxes .team-boxes-item.rs-column {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	margin: 0;
}

@media screen and (max-width: 900px) {
	.team-boxes {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 599px) {
	.team-boxes {
		grid-template-columns: 1fr;
	}
}

/* Das Namensband: immer sichtbar, nicht erst beim Ueberfahren. Es fuellt den
   Rest der Rasterzeile, damit die Baender einer Reihe unten buendig
   abschliessen - auch wenn eine Funktionsbezeichnung ueber drei Zeilen laeuft. */
.team-boxes .team-boxes-item-text {
	flex: 1 1 auto;
	padding: 14px 12px 18px;
	background: #aea07d;
	color: #ffffff;
	text-align: center;
}

.team-boxes .team-boxes-item-text h2 {
	margin: 0;
	color: #ffffff;
	font-size: 1.28571em;   /* 18 px */
	text-align: center;
}

.team-boxes .team-boxes-item-text h3 {
	margin: 0.2em 0 0;
	color: #ffffff;
	font-family: "Open Sans", sans-serif;
	font-size: 1em;
	font-weight: 400;
	text-align: center;
}