/* ==========================================================================
   SIMCONSULT – gemeinsames Stylesheet
   Layout nach dem Vorbild der bisherigen TYPO3-Seite.
   Farben:  Rot #c40d1e · Blau #00658b · Text #47525e · Linien #c8cbcf
   ========================================================================== */

/* ---------- Schriften ---------- */

@font-face { font-family: "sourcesanspro"; src: url("../fonts/sourcesanspro-regular-webfont.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: fallback; }
@font-face { font-family: "sourcesanspro"; src: url("../fonts/sourcesanspro-semibold-webfont.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: fallback; }
@font-face { font-family: "sourcesanspro"; src: url("../fonts/sourcesanspro-bold-webfont.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: fallback; }
@font-face { font-family: "sourcesanspro"; src: url("../fonts/sourcesanspro-black-webfont.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: fallback; }
/* Font Awesome 4 – nur für die kleinen Symbole (Pfeil, Mikrofon, Telefon …) */
@font-face { font-family: "fontawesome"; src: url("../fonts/fontawesome-webfont.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }

/* ---------- Grundlagen ---------- */

:root {
	--rot: #c40d1e;
	--blau: #00658b;
	--text: #47525e;
	--linie: #c8cbcf;
	--grau: #ebecee;
	--inhalt: 916px;
	/* Überstand von Kopfbild, Verlaufsbändern und Fußbereich nach links und rechts
	   (alte Seite: 142px, auf schmaleren Bildschirmen entsprechend weniger) */
	--ueberstand: clamp(0px, calc((100vw - var(--inhalt)) / 2), 142px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	overflow-x: hidden;
	background: #fff;
	color: var(--text);
	font-family: sourcesanspro, "Source Sans Pro", "Segoe UI", Arial, sans-serif;
	font-size: 18px;
	line-height: 1.33;
	hyphens: auto;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; border: 0; }
strong, b { font-weight: 700; }

::selection { background: var(--rot); color: #fff; }

a { color: var(--rot); text-decoration: none; }
a:hover { color: var(--text); }
a:focus-visible, label:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

/* Links im Inhalt nicht nur über die Farbe erkennbar (Barrierefreiheit) */
.content p a:not(.button), .content li a, .content td a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-skip-ink: none;
	text-decoration-color: rgba(196, 13, 30, .45);
}
.content p a:not(.button):hover, .content li a:hover { text-decoration-color: currentColor; }
.content p.kasten-titel a, .content ul.kuerzel a, .content .Roter-Hintergrund p a { text-decoration: none; }
.content .Roter-Hintergrund p a:hover { text-decoration: underline; text-decoration-color: currentColor; }
.Blauer-Hintergrund p a:not(.button), .Blauer-Hintergrund li a { text-decoration-color: rgba(255, 255, 255, .6); }

/* Sprunglink zum Inhalt, nur bei Tastaturbedienung sichtbar */
.sprunglink {
	position: absolute; z-index: 300; left: 10px; top: -100px;
	padding: 10px 16px; background: var(--rot); color: #fff; font-weight: 700;
}
.sprunglink:focus { top: 10px; color: #fff; outline: 2px solid var(--blau); outline-offset: 2px; }

/* Pfeil nur vor den „mehr“-Links in den roten Kästen der Startseite; sonst sind Links unterstrichen */
.kasten-inhalt p a::before { content: "\f061"; font-family: fontawesome; padding-right: 3px; font-weight: 400; }

h1 { font-size: 32px; line-height: 1.1; font-weight: 700; color: var(--rot); margin: 10px 0; }
h2 { font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--rot); margin: 10px 0; }
h3 { font-size: 18px; font-weight: 700; color: var(--rot); margin: 10px 0; }
h4, .einleitung { font-size: 22px; font-weight: 400; }

p + p, p + ul, ul + p { margin-top: 1.33em; }

.text-center { text-align: center; }
.text-right { text-align: right; }

.nur-screenreader {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* Abstände wie auf der alten Seite */
.mt-small { margin-top: 25px; }
.mt-medium { margin-top: 50px; }
.mb-small { margin-bottom: 25px; }
.mb-medium { margin-bottom: 50px; }

/* ---------- Listen mit Symbol ---------- */

/* Mikrofon (Dolmetschen) und Stift (Übersetzen) */
ul.interpreting li, ul.translate li, li.interpreting, li.translate {
	position: relative;
	padding-left: 30px;
}
ul.interpreting li::before, ul.translate li::before, li.interpreting::before, li.translate::before {
	position: absolute; left: 0; top: 0;
	font-family: fontawesome; color: var(--blau);
}
ul.interpreting li::before, li.interpreting::before { content: "\f130"; }
ul.translate li::before, li.translate::before { content: "\f040"; }

/* einfache Aufzählung mit Spiegelstrich */
/* einfache Aufzählung: kleines blaues Dreieck (Font Awesome caret-right) */
ul.strich li, ul.haken li { padding-left: 18px; position: relative; }
ul.strich li::before {
	content: "\f0da"; font-family: fontawesome; font-weight: 400;
	position: absolute; left: 2px; top: 0;
	color: var(--blau);
}
/* Checkliste: Haken (Font Awesome check), z. B. Tipps für Veranstalter */
ul.haken li { padding-left: 22px; }
ul.haken li::before {
	content: "\f00c"; font-family: fontawesome; font-weight: 400; font-size: 15px;
	position: absolute; left: 0; top: 1px;
	color: var(--blau);
}

/* Kontaktzeilen mit Symbol */
p.telephone, p.email, p.address { margin-top: 0; }
p.telephone::before, p.email::before, p.address::before {
	font-family: fontawesome; display: inline-block; width: 20px; padding-right: 5px; color: var(--blau);
}
p.telephone::before { content: "\f095"; }
p.email::before { content: "\f0e0"; }
p.address::before { content: "\f015"; }

/* ==========================================================================
   Seitengerüst
   ========================================================================== */

.siteBody { width: var(--inhalt); max-width: calc(100% - 40px); margin: 0 auto; }

/* ---------- Hauptnavigation ---------- */

.menu-schalter { position: absolute; opacity: 0; pointer-events: none; }
.push-menu-toggle, .menu-schliessen { display: none; }

.menu { text-align: center; font-size: 0; }
.menu li {
	display: inline-block;
	position: relative;
	padding: 18px 16px;
	font-size: 18px;
	text-transform: uppercase;
}
.menu li::before {
	content: ""; position: absolute; left: 0; top: 0;
	width: 1px; height: 100%;
	background: linear-gradient(to bottom, var(--linie), #fff);
}
.menu li.active::after {
	content: ""; position: absolute; left: 0; top: 0;
	width: 100%; height: 5px; background: var(--rot);
}
.menu li a { color: var(--text); }
.menu li.active a, .menu li a:hover { color: var(--rot); }

/* Sprachwahl */
.menu .langMenu { text-transform: none; }
.menu .langMenu::before { display: none; }
.menu .langMenu a {
	display: inline-block;
	width: 25px; height: 25px; margin-right: 8px;
	border-radius: 50%;
	background: var(--text); color: #fff;
	font-size: 11px; font-weight: 700; line-height: 25px; text-align: center; text-transform: uppercase;
}
.menu .langMenu a:last-child { margin-right: 0; }
.menu .langMenu a.active, .menu .langMenu a:hover { background: var(--rot); color: #fff; }

/* Logo */
a.home {
	display: block;
	width: 256px; height: 51px;
	margin: 25px auto 0;
	background: url("../img/simconsult-logo.png") no-repeat center / contain;
}
a.mobileHome { display: none; }

/* ---------- Kopfbild ---------- */

.siteHeader {
	position: relative;
	margin: 8px calc(-1 * var(--ueberstand)) 0;
}
.siteHeader img { display: block; width: 100%; }
/* SC-Signet mittig über dem Kopfbild, verlinkt auf die Startseite */
.siteHeader .signet {
	position: absolute; z-index: 10;
	left: 50%; top: 0; margin-left: -42px;
	width: 84px; height: 83px;
	border-radius: 50%;
	background: url("../img/simconsult-signet.png") no-repeat center / 80px 80px;
}

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

.content { position: relative; }
.content:focus { outline: none; }

/* zwei Spalten, 50:50 */
.cont-50-50 { display: flex; justify-content: space-between; gap: 36px; }
.cont-50-50 > .left, .cont-50-50 > .right { width: 440px; flex: 0 1 440px; }

/* zwei Spalten, 66:33 (Unterseiten mit Randspalte) */
.cont-66-33 { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; position: relative; margin-top: -58px; }
.cont-66-33 > .left { flex: 0 1 530px; }
.cont-66-33 > .right { flex: 0 1 293px; margin-top: 98px; }

/* drei Spalten */
.cont-33-33-33 { display: flex; justify-content: space-between; gap: 20px; }
.cont-33-33-33 > div { flex: 0 1 292px; }

/* senkrechte Trennlinien zwischen Spalten */
.Spaltentrennlinien .cont-50-50 { position: relative; }
.Spaltentrennlinien .cont-50-50::before {
	content: ""; position: absolute; left: 50%; top: 0;
	width: 1px; height: 100%; background: var(--linie);
}

/* ---------- Roter Kasten (überlappt das Kopfbild) ---------- */

.Roter-Hintergrund {
	position: relative;
	margin: -58px auto 45px;
	padding: 17px;
	border-radius: 3px;
	background: var(--rot) url("../img/red-bg.png") no-repeat left top;
	color: #fff;
}
.Roter-Hintergrund a, .Roter-Hintergrund h1, .Roter-Hintergrund h2, .kasten-titel { color: #fff; }
.Roter-Hintergrund a:hover { color: #fff; text-decoration: underline; }
.Roter-Hintergrund h1 { font-size: 52px; font-weight: 700; }
.Roter-Hintergrund h2, .kasten-titel { font-size: 38px; line-height: 1.2; font-weight: 600; text-transform: uppercase; margin: -10px 0 10px; }
.Roter-Hintergrund p + p { margin-top: 0; }
.Roter-Hintergrund .icon { display: block; margin: 0 auto 10px; }

/* Startseite: zwei rote Kästen nebeneinander */
.negativeMarginTop { position: relative; margin-top: -58px; }
.negativeMarginTop .Roter-Hintergrund { margin-top: 0; }
.right .Roter-Hintergrund { background-image: url("../img/red-bg-xover.png"); background-position: right top; }

.kasten-inhalt { display: flex; align-items: center; gap: 20px; }
.kasten-inhalt .icon { flex: 0 0 auto; margin: 0; }
.kasten-links h2, .kasten-links .kasten-titel { text-align: right; }
.kasten-links .kasten-inhalt { padding-left: 0; }
.kasten-rechts .kasten-inhalt { flex-direction: row-reverse; justify-content: space-between; }

/* roter Kasten als Seitentitel auf Unterseiten ohne Randspalte */
.content > .Roter-Hintergrund.seitentitel { width: 450px; text-align: center; }
.Roter-Hintergrund.seitentitel h1 { text-align: center; }

/* ---------- Graues Verlaufsband ---------- */

.Hintergrundverlauf {
	margin: 20px calc(-1 * var(--ueberstand));
	padding: 0 var(--ueberstand);
	background: url("../img/contentgradient-sprite.png") center top / 300% auto repeat-y;
}
.Hintergrundverlauf::before, .Hintergrundverlauf::after {
	content: ""; display: block;
	height: 14px;
	margin: 0 calc(-1 * var(--ueberstand));
	background: url("../img/contentgradient-sprite.png") left top / 300% 14px no-repeat;
}
.Hintergrundverlauf::after { background-position: right top; }
.Hintergrundverlauf .band-inhalt { padding: 30px 0; }
/* Band-Überschriften sind h2, sollen aber so groß wirken wie früher die h1 */
.Hintergrundverlauf .band-inhalt > h2 { font-size: 32px; line-height: 1.1; margin-top: 0; }

/* einzige h1 der Startseite */
.startseite-titel { text-align: center; font-size: 36px; margin: 10px 0 30px; }
.Hintergrundverlauf .band-inhalt > p + p:not([class]) { margin-top: 0; }
.Hintergrundverlauf h1 { margin-top: 0; }

/* ---------- Blauer Kasten ---------- */

.Blauer-Hintergrund { padding: 5px 10px 4px; background: var(--blau); color: #fff; }
.Blauer-Hintergrund * { color: #fff; }
.Blauer-Hintergrund a:hover { color: #fff; text-decoration: underline; }
.Blauer-Hintergrund a:focus-visible, .Roter-Hintergrund a:focus-visible { outline-color: #fff; }
.Blauer-Hintergrund li::before { color: #fff !important; }
.Blauer-Hintergrund h1, .Blauer-Hintergrund h2 { margin-top: 0; }

/* Startseite: Linkliste unten */
.linkliste { padding: 30px 20px 20px; font-size: 16px; }
.linkliste h3 { margin: 25px 0 10px; }
.linkliste h3:first-of-type { margin-top: 10px; }
.linkliste li { margin-left: 30px; }
.linkliste .cont-50-50 { gap: 20px; }

/* Button für die Anfrage (führt zur Kontaktseite) */
a.button {
	display: inline-block;
	padding: 8px 22px 7px;
	border-radius: 20px;
	background: var(--rot); color: #fff;
	font-weight: 700; line-height: 1.2; text-decoration: none;
	transition: background .2s ease;
}
p a.button::before { content: none; }
a.button:hover, a.button:focus-visible { background: #9e0a18; color: #fff; text-decoration: none; }
.Blauer-Hintergrund a.button:hover { text-decoration: none; }
/* Absatz mit Button immer mit Abstand nach oben, auch in den grauen Bändern */
p:has(> a.button) { margin-top: 15px; }

/* Randspalte auf Unterseiten: oben Kontakt, darunter ein kleiner Hinweis */
.kontaktkasten { padding: 20px 18px 18px; border-radius: 3px; }
.kontaktkasten h2 { margin: 10px 0; }
.kontaktkasten p + p { margin-top: 0; }
.kontaktkasten p.mt-small { margin-top: 15px; font-weight: 700; }
.kontaktkasten p.telephone::before, .kontaktkasten p.email::before { color: #fff; }
.rand-hinweis { margin-top: 25px; padding-top: 15px; border-top: 1px solid var(--linie); font-size: 16px; }
.rand-hinweis h3 { margin-top: 0; }
.rand-hinweis p + p { margin-top: 8px; }

/* Symbol mit Überschrift, z. B. Info-„i“ */
.icon-zentriert { display: block; margin: 0 auto; }

/* Raster für mehrere kurze Abschnitte (z. B. Dolmetscharten, Sprachen) */
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; }
.raster h3 { margin-bottom: 5px; }
.raster p + p { margin-top: .5em; }

/* Liste in drei Spalten */
.spalten-3 { columns: 3; column-gap: 20px; }
.spalten-3 li { break-inside: avoid; margin-bottom: 6px; }
.sprachliste { font-size: 20px; }

/* Sprachliste mit Kürzel-Plaketten (wie der DE/EN-Umschalter) */
ul.kuerzel li { margin-bottom: 12px; }
ul.kuerzel a { display: inline-flex; align-items: center; gap: 12px; }
ul.kuerzel a::before { content: none; }
.kuerzel-plakette {
	flex: none;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--text); color: #fff;
	font-size: 12px; font-weight: 700; line-height: 34px; text-align: center; letter-spacing: .5px;
	transition: background .2s;
}
ul.kuerzel a:hover .kuerzel-plakette, ul.kuerzel a:focus-visible .kuerzel-plakette { background: var(--rot); }

/* Symbol über einer Überschrift (kleine runde Icons) */
.icon-klein { display: block; margin-bottom: 10px; }

/* Häufige Fragen: aufklappbar ohne JavaScript */
.faq { margin-top: 10px; }
.faq details { border-top: 1px solid var(--linie); }
.faq details:last-child { border-bottom: 1px solid var(--linie); }
.faq summary {
	position: relative;
	padding: 12px 0 12px 30px;
	color: var(--rot); font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
	content: "\f055"; font-family: fontawesome; font-weight: 400;
	position: absolute; left: 0; top: 12px;
	color: var(--blau);
}
.faq details[open] summary::before { content: "\f056"; }
.faq summary:hover { color: var(--text); }
.faq .antwort { padding: 0 0 15px 30px; }

/* ---------- Tooltips für Fachbegriffe (siehe assets/js/tooltips.js) ---------- */

.tooltip { position: relative; display: inline; }
.tooltip-begriff {
	display: inline;
	margin: 0; padding: 0;
	border: 0; border-bottom: 1px dotted var(--blau);
	background: none;
	color: inherit; font: inherit; line-height: inherit; text-align: inherit;
	cursor: help;
	hyphens: inherit;
}
.tooltip-begriff:hover, .tooltip.offen .tooltip-begriff { color: var(--blau); }
.tooltip-begriff:focus { outline: none; }
.tooltip-begriff:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

.tooltip-text {
	display: none;
	position: absolute; z-index: 50; left: 0; top: 100%;
	width: 300px; max-width: calc(100vw - 20px);
	margin-top: 4px;
	padding: 10px 12px;
	border-radius: 3px;
	background: var(--blau); color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	font-size: 15px; font-weight: 400; font-style: normal; line-height: 1.35;
	text-align: left; text-transform: none;
	hyphens: manual;
}
/* kleine Brücke, damit die Maus vom Begriff in die Box wandern kann */
.tooltip-text::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; }
.tooltip-text a { color: #fff; text-decoration: underline; white-space: nowrap; }
.tooltip-text a::before { content: none; }
.tooltip-text a:hover { color: #fff; }

.tooltip.offen .tooltip-text,
.tooltip-begriff:focus-visible + .tooltip-text,
.tooltip-text:focus-within { display: block; }
@media (hover: hover) {
	.tooltip:hover .tooltip-text { display: block; }
}

/* Trenner mit Verlauf */
.trenner { height: 7px; margin: 35px 0 10px; background: linear-gradient(to bottom, #eceeef, #fff); border: 0; }

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

.foot {
	margin: 60px calc(-1 * var(--ueberstand)) 0;
	padding: 115px var(--ueberstand) 20px;
	background: url("../img/footer-bg.png") center top / 1200px auto no-repeat;
	font-size: 14px;
}
.foot .cont-50-50 > .left, .foot .cont-50-50 > .right { flex-basis: 430px; }
.foot p + p { margin-top: 0; }
.foot p.telephone::before, .foot p.email::before, .foot p.address::before { color: var(--rot); }

.social { text-align: center; margin: 25px 0 50px; }
.social a { display: inline-block; margin: 0 7px; color: var(--rot); }
.social a:hover { color: var(--text); }
.social svg { display: block; width: 40px; height: 40px; }

/* Sprachen und Orte im Fußbereich: zwei getrennte Blöcke */
.foot p a::before { content: none; }
.foot-listen {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0;
	margin: 30px auto 0; max-width: 880px;
	border-top: 1px solid var(--linie);
}
.foot-listen > nav { padding: 18px 25px 0; }
.foot-listen > nav + nav { border-left: 1px solid var(--linie); }
.foot-titel {
	margin-bottom: 8px;
	color: var(--rot); font-size: 13px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
}
.foot-liste { display: flex; flex-wrap: wrap; gap: 3px 14px; }
.foot-liste a { color: var(--text); white-space: nowrap; }
.foot-liste a:hover { color: var(--rot); }

.footerNav { text-align: center; margin: 25px auto; }
.footerNav li { display: inline-block; }
.footerNav li::before { content: "•"; padding: 0 10px; }
.footerNav li:first-child::before { content: none; }
.footerNav a { color: var(--text); text-transform: uppercase; }
.footerNav a:hover { color: var(--rot); }

/* ==========================================================================
   Smartphone und Tablet (wie alte Seite: bis 920px)
   ========================================================================== */

@media (max-width: 920px) {

	body { font-size: 17px; }
	h1 { font-size: 28px; }
	h4, .einleitung { font-size: 19px; }

	.siteBody { width: auto; max-width: none; margin: 0 20px; }
	:root { --ueberstand: 20px; }

	/* Logo rechts oben */
	a.home { display: none; }
	a.mobileHome {
		display: block;
		width: 128px; height: 60px;
		margin: 10px 0 5px auto;
		background: url("../img/simconsult-logo.png") no-repeat center center / 128px 26px;
	}

	/* Menü fährt von links herein (ohne JavaScript über ein Kontrollkästchen) */
	.push-menu-toggle {
		display: block;
		position: fixed; z-index: 120; left: 10px; top: 10px;
		width: 43px; height: 43px;
		border-radius: 50%;
		background: var(--text);
		cursor: pointer;
		transition: left .3s ease, background .3s ease;
	}
	.push-menu-toggle::before {
		content: "\f0c9"; font-family: fontawesome; color: #fff; font-size: 25px;
		position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	}
	.menu-schalter:focus-visible + .push-menu-toggle { outline: 2px solid var(--blau); outline-offset: 2px; }

	.push-menu {
		position: fixed; z-index: 100; top: 0; left: -240px;
		width: 240px; height: 100%;
		overflow-y: auto;
		background: #fff;
		visibility: hidden;
		transition: left .3s ease, box-shadow .3s ease, visibility .3s;
	}
	.menu { text-align: left; padding-top: 70px; }
	.menu li { display: block; padding: 0; }
	.menu li::before { width: 100%; height: 1px; background: linear-gradient(to right, var(--linie), #fff); }
	.menu li.active::after { width: 5px; height: 100%; }
	.menu li a { display: block; padding: 18px 16px; }
	.menu .langMenu { padding: 20px 16px; }
	.menu .langMenu a { display: inline-block; width: 40px; height: 40px; padding: 0; margin-right: 12px; font-size: 14px; line-height: 40px; }

	.menu-schliessen {
		position: fixed; inset: 0; z-index: 90;
		background: rgba(255, 255, 255, .8);
	}

	.menu-schalter:checked ~ .push-menu { left: 0; visibility: visible; box-shadow: 10px -8px 15px -8px rgba(0, 0, 0, .75); }
	.menu-schalter:checked ~ .push-menu-toggle { left: 250px; background: var(--rot); }
	.menu-schalter:checked ~ .push-menu-toggle::before { content: "\f00d"; }
	.menu-schalter:checked ~ .menu-schliessen { display: block; }

	/* Kopfbild */
	.siteHeader { margin: 8px -20px 0; }
	.siteHeader .signet { margin-left: -21px; width: 42px; height: 42px; background-size: 40px 40px; }

	/* Spalten untereinander */
	.cont-50-50, .cont-66-33, .cont-33-33-33 { display: block; }
	.cont-50-50 > .left, .cont-50-50 > .right,
	.cont-66-33 > .left, .cont-66-33 > .right,
	.cont-33-33-33 > div { width: auto; margin-bottom: 40px; }
	.cont-66-33 { margin-top: 0; }
	.cont-66-33 > .right { margin-top: 0; max-width: 293px; }
	.Spaltentrennlinien .cont-50-50::before { display: none; }
	.spalten-3 { columns: 1; }
	.raster { grid-template-columns: 1fr; gap: 0; }
	.raster > div { margin-bottom: 20px; }
	.negativeMarginTop { margin-top: 0; }

	/* Roter Kasten: roter Balken mit Titel, darunter graue Fläche */
	.Roter-Hintergrund,
	.content > .Roter-Hintergrund.seitentitel {
		width: auto;
		margin: 0 0 20px;
		background: linear-gradient(135deg, #f5d2d5 0%, #c60f21 25%, #c60f21 100%);
	}
	.right .Roter-Hintergrund { background: linear-gradient(135deg, #f5d2d5 0%, #c60f21 25%, #c60f21 100%); }
	.Roter-Hintergrund h1 { font-size: 30px; line-height: 1.1; margin: 0; }
	.Roter-Hintergrund h2, .kasten-titel { font-size: 30px; margin: 0; }
	.kasten-links h2, .kasten-links .kasten-titel { text-align: left; }
	.Roter-Hintergrund .kasten-inhalt {
		display: block;
		margin: 17px -17px -17px;
		padding: 20px;
		background: var(--grau);
		color: var(--rot);
	}
	.Roter-Hintergrund .kasten-inhalt a { color: var(--rot); }
	.Roter-Hintergrund .kasten-inhalt .icon { width: 41px; margin: 0 0 15px; }
	.cont-50-50 > .left .Roter-Hintergrund { margin-bottom: 0; }

	/* Verlaufsband ohne Schatten oben und unten */
	.Hintergrundverlauf { margin: 20px -20px; padding: 0 20px; background: var(--grau); }
	.Hintergrundverlauf::before, .Hintergrundverlauf::after { display: none; }

	/* Fußbereich */
	/* Grau unter dem Bild fortsetzen, falls der Fußbereich höher ist als das Bild */
	.foot {
		margin: 60px -20px 0; padding: 70px 20px 20px; font-size: 16px;
		background:
			url("../img/footer-bg.png") center top / 600px auto no-repeat,
			linear-gradient(to bottom, #fff 24px, #e8e9eb 24px);
	}
	.foot .cont-50-50 > .left, .foot .cont-50-50 > .right { margin-bottom: 15px; }
	.foot p, .foot .text-right { text-align: center; }
	.startseite-titel { font-size: 28px; margin-top: 20px; }
	.foot-listen { grid-template-columns: 1fr; }
	.foot-listen > nav { padding: 18px 0 0; text-align: center; }
	.foot-listen > nav + nav { border-left: 0; border-top: 1px solid var(--linie); margin-top: 18px; }
	.foot-liste { justify-content: center; }
	.Hintergrundverlauf .band-inhalt > h2 { font-size: 28px; }
	.footerNav li { display: block; }
	.footerNav li::before { content: none; }
	.footerNav li + li { margin-top: 8px; }
}