/* Anpassungen für t3sbootstrap 5 / Bootstrap 5. customize.css bleibt der Stand von Live (Bootstrap 4). */


/* Gutter: customize.css rechnet mit Bootstrap 4 (15px), Bootstrap 5 nutzt --bs-gutter-x (1.5rem, je Seite 0.75rem) */
div.ritter {
	margin-right: calc(-.5 * var(--bs-gutter-x));
}

/* News: t3sbootstrap.css setzt .media auf display: flex !important, customize.css (Live) überschreibt das ohne !important */
.SleighRide .media {
	display: initial !important;
}
.row .news li.media {
	display: block !important;
}
/* News-Liste (Layout 71): Bild 360px mit 32px Abstand zum Text wie Live (dort .mr-3 am Bild). Das Bild wird 900px
   breit erzeugt (HorizontalCards.fluid.html), damit es gestapelt (bis 900px, s. u.) die ganze Box füllt. */
.news .list-group-item .media > figure {
	flex: 0 0 360px;
	margin-right: 2rem;
	max-width: 360px;
}
.news .list-group-item .media > figure img {
	width: 100%;
}
@media screen and (max-width: 900px) {
	.news .list-group-item .media > figure {
		margin-right: 0;
		max-width: none;
	}
}
@media screen and (max-width: 900px) {
	/* Gleiche Regel steht ohne !important als CSS-Block im Inhalt der Nachrichtenseite */
	.news .media {
		display: initial !important;
	}
}

/* Akkordeon: Live (Bootstrap 4) zeigte die Titel als roten Link in h5-Größe, ohne Pfeil (Farben/Abstände: SCSS) */
.accordion-button,
.accordion-button:not(.collapsed) {
	box-shadow: none;
	color: var(--bs-link-color);
	font-size: 1.25rem;
	font-weight: 300;
}
.accordion-button::after {
	display: none;
}
.accordion-button:hover {
	color: var(--bs-link-hover-color);
}

/* Icons aus EXT:iconpack sind Inline-SVGs ohne eigene Größe (Live: Font-Awesome-Font, 1em) */
.pagetile-iconPack {
	height: 1em;
	vertical-align: -.125em;
	width: 1em;
}

/* Bootstrap-4-Klasse aus Inhalten (RTE, 2 Elemente auf Live), in Bootstrap 5: text-end */
.text-right {
	text-align: right !important;
}

/* Slider im Jumbotron: t3sbootstrap 5 legt ihn in ein Flex-Element (.jumbotron > .d-flex > div), das sich an die
   Bildbreite anpasst; kleine Originale (z. B. 1390px, TYPO3 14 skaliert nicht hoch) machten den Slider schmaler.
   Live (4.5) hatte keinen Flex-Wrapper und Bilder auf voller Breite. */
.jumbotron > .d-flex > div {
	width: 100%;
}
.carousel-item img {
	width: 100%;
}

/* Teilen-Buttons (rx_shariff, CSS ohne Font Awesome): Font Awesome 7 Brands kommt aus t3sbootstrap, dessen CSS kennt
   aber nur einen Teil der Icons. Facebook/Xing fehlten, für X ist dort das Quadrat-Icon hinterlegt (klebte am Rand).
   inline-block, damit die Icon-Breite aus shariff (35px, zentriert) greift – auf Live setzt das Font Awesome. */
.shariff li .fab {
	display: inline-block;
}
.shariff .fa-facebook-f::before,
.shariff .fa-x-twitter::before,
.shariff .fa-xing::before {
	font-family: "Font Awesome 7 Brands";
	font-style: normal;
	font-weight: 400;
}
.shariff .fa-facebook-f::before {
	content: "\f39e";
}
.shariff .fa-x-twitter::before {
	content: "\e61b";
}
.shariff .fa-xing::before {
	content: "\f168";
}

.back-to-top {
margin-bottom: 0;
}
.back-to-top .fas.fa-circle-chevron-up {
	width: 1em;
	height: 1em;
}