section:not(:last-child) {
	margin-bottom: 0;
}

section {
	background-size: cover;
	background-position: center center;
}

section.contact > div {
	min-height: 75vh;
}

section, .panel div[id^="topic"] {
	scroll-margin-top: 200px;
}

/* Header */

header {
	position: sticky;
	top: 0;
	z-index: 990;
}

header img {
	height: var(--value-header-logo-height);
	width: auto;
	max-width: 100%;
}

/*
div[data-page="index"] header {
	display: none
}
*/

/* Nav */

header nav {
	font-weight: 600;
}
/* Kontaktzeile: leiser, mit eigener feiner Trennung statt roter Linie */
header nav .offcanvas > small {
	/* Gedämpft über die Textfarbe, nicht über opacity – sonst würde auch das
	   Karten-Dropdown darin halbtransparent */
	color: rgba(255, 255, 255, .72);
	letter-spacing: .04em;
	padding: 6px 0 8px;
}
header nav .offcanvas > small a:not(.dropdown-item):not(:hover),
header nav .offcanvas > small button.address-toggle:not(:hover) {
	color: rgba(255, 255, 255, .72) !important;
}
header nav .offcanvas > hr {
	color: var(--color-blue-main);
	margin-bottom: 4px;
}
header .navbar-nav {
	gap: 4px;
	padding: 6px 0 4px;
}
header .navbar-nav .nav-link {
	padding-top: 10px;
	padding-bottom: 10px;
}
/* Farbkante als Abschluss, wie am Footer und an der Formularkarte */
header::after {
	content: "";
	display: block;
	height: 2px;
	background: linear-gradient(115deg, var(--color-red-main) 0 42%, var(--color-blue-main) 100%);
}

header nav .nav-item {
	height: 100%;
	display: flex;
	align-items: center;
}

header nav .offcanvas.offcanvas-end {
	border-left: none;
}

header nav .offcanvas .logo {
	margin-bottom: 20px;
}

header nav .offcanvas.show .nav-item, header nav .offcanvas.showing .nav-item, header nav .offcanvas.show .dropdown-item, header nav .offcanvas.showing .dropdown-item {
	font-size: 2.5vh;
}
header nav .offcanvas.show, header nav .offcanvas.showing {
	padding: 20px;
	width: 80vw;
	backdrop-filter: blur(25px) saturate(3);
	-webkit-backdrop-filter: blur(25px) saturate(3);
}
header nav .offcanvas.show li, header nav .offcanvas.showing li {
	margin-bottom: 10px;
}

header nav .offcanvas.show li a, header nav .offcanvas.showing li a {
	padding-top: 0;
	padding-bottom: 0;
}

header nav .offcanvas-backdrop.fade.show {
	opacity: 1;
	backdrop-filter: blur(25px) saturate(3);
	-webkit-backdrop-filter: blur(25px) saturate(3);
}

.navbar-toggler {
	border: none;
}

.navbar-toggler-icon {
	background-color: var(--color-white)
}

.nav-item.current a {
	color: var(--color-red-main) !important;
}

div[data-page="apartments"] .nav-item.apartments.current, div[data-page]:not([data-page="apartments"]) .nav-item.apartments {
	display: block;
}
div[data-page]:not([data-page="apartments"]) .nav-item.apartments.current, div[data-page="apartments"] .nav-item.apartments {
	display: none;
}
div[data-page="suites"] .nav-item.suites.current, div[data-page]:not([data-page="suites"]) .nav-item.suites {
	display: block;
}
div[data-page]:not([data-page="suites"]) .nav-item.suites.current, div[data-page="suites"] .nav-item.suites {
	display: none;
}

.breadcrumb-item, .breadcrumb-item+.breadcrumb-item::before {
	color: var(--color-red-main);	
}



/* Intro */

section.intro {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Bildebene: liegt als eigene Ebene über dem Section-Hintergrund und erbt
   dessen background-image (gesetzt je data-page weiter unten). Nur so lassen
   sich Filter und Parallax anwenden, ohne den Inhalt mitzuziehen.
   inset: -8% gibt der Ebene Überstand, damit die Verschiebung nie eine
   leere Kante freilegt. */
section.intro::before {
	content: "";
	position: absolute;
	inset: -8%;
	z-index: -2;
	background-image: inherit;
	background-size: cover;
	background-position: center center;
	/* Die Fotos sind uneinheitlich in Qualität und Farbstimmung. Entsättigen
	   und Abdunkeln macht daraus eine bewusste Bildsprache statt zufälliger
	   Schnappschüsse – und trägt das dunkle Thema mit. */
	filter: grayscale(.45) contrast(1.08) brightness(.62) saturate(1.15);
	/* Ken Burns statt der scrollgebundenen Parallax: die lief in Safari und
	   Firefox gar nicht, weil dort animation-timeline: scroll() fehlt. */
	transform: scale(1.04);
	animation: hero-kenburns 32s ease-in-out infinite;
}

/* Mehrere Motive statt eines Standbilds. Liegt auf derselben Ebene wie
   ::before und übernimmt dessen Rolle, wenn eine Seite Motive mitgibt. */
.hero-media {
	position: absolute;
	inset: -8%;
	z-index: -2;
	overflow: hidden;
}
.hero-media-layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	filter: grayscale(.45) contrast(1.08) brightness(.62) saturate(1.15);
	opacity: 0;
	/* Weiche Diagonale im Winkel der Marken-Streifen */
	-webkit-mask-image: linear-gradient(115deg, #000 0 45%, rgba(0, 0, 0, .4) 54%, transparent 62%);
	mask-image: linear-gradient(115deg, #000 0 45%, rgba(0, 0, 0, .4) 54%, transparent 62%);
	-webkit-mask-size: 260% 100%;
	mask-size: 260% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	animation: hero-media-cycle calc(var(--count) * var(--slot)) linear infinite;
	/* Negativer Versatz um 9 % des Zyklus: Ebene 0 startet bereits
	   eingewischt, sonst ist der Hero die ersten ~2 s motivlos. */
	animation-delay: calc(var(--i) * var(--slot) - 0.09 * var(--count) * var(--slot));
}

/* Filmkorn: bricht Kompressionsartefakte der Fotos und nimmt dem dunklen
   Verlauf das Digitale. Liegt über Bild und Farbebene. */
section.intro > .grain, .hero-split > .grain {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .5;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 160px 160px;
}

@media (prefers-reduced-motion: reduce) {
	.hero-media-layer {
		animation-duration: 0.001s;
	}
}

/* Farbebene: Vignette bündelt den Blick, der Marken-Verlauf legt Rot und
   Blau des Logos als feinen Schleier über das Foto. */
section.intro::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(125% 95% at 50% 38%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .72) 100%),
		linear-gradient(155deg, rgba(0, 160, 227, .14) 0%, rgba(0, 0, 0, 0) 45%, rgba(227, 30, 36, .16) 100%);
}

@media (prefers-reduced-motion: reduce) {
	section.intro::before {
		animation: none !important;
		transform: scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
    .intro {
        animation: none !important;
    }
}

div[data-page="index"] section.intro {
	background-image: none;
}
div[data-page="heating"] section.intro {
	background-image: url('/img/schwing-heizung-intro.jpg');
}
div[data-page="bath"] section.intro {
	background-image: url('/img/schwing-bad-intro.jpg');
}
div[data-page="energy"] section.intro {
	background-image: url('/img/schwing-energie-intro.jpg');
}
div[data-page="jobs"] section.intro {
	background-image: url('/img/schwing-ausbildung.jpg');
}

section.intro div {
	z-index: 1;
}

/* Intro-Box: Container-Breite wie der Content darunter, volle Hero-Höhe */
section.intro > .container {
	display: flex;
}
section.intro > .container > .row {
	flex: 1 1 auto;
	margin-top: 0;
	margin-bottom: 0;
}
/* Logo im Hero: die Box ist inzwischen containerbreit, ein prozentualer
   Wert würde daraus ein riesiges Logo machen – deshalb harte Obergrenze. */
section.intro .box img {
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
}

/* Die Box füllt den Hero, der Inhalt darin bleibt aber auf lesbarer Breite.
   Überschriften dürfen weiterhin die volle Breite nutzen. */
section.intro .box p,
section.intro .box .widget,
section.intro .box > div > .button,
section.intro .box .d-flex.flex-wrap {
	max-width: 68ch;
	margin-left: auto;
	margin-right: auto;
}
section.intro .box > div {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
}

section.intro video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
section.intro video.background {
	display: none;
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
}

/* Main */

section .box {
	display: flex;
	position: relative;
	/* Gestufte Unschärfe statt einer einzigen Stärke: oben bleibt das Foto
	   ablesbar, nach unten wird es zunehmend milchig – dort steht der Text.
	   Grundstufe hier, zweite Stufe auf ::before. */
	backdrop-filter: blur(5px) saturate(1.25);
	-webkit-backdrop-filter: blur(5px) saturate(1.25);
}

/* Zweite Blurstufe, über eine Maske nach unten hin eingeblendet */
section.intro .box::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 12%, #000 62%);
	mask-image: linear-gradient(to bottom, transparent 12%, #000 62%);
}

/* Die frühere Verlaufs-Animation der Box ist entfallen – der gestufte
   Blur oben/::before übernimmt die Wirkung ohne wandernde Kante. */

section .sticky {
	position: sticky;
	top: calc(var(--value-header-height) + 50px);
	height: auto;
}
div[data-page="index"] section .sticky {
	top: 0
}

span.context {
	font-size: 16px;
	border-radius: 25px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 8px;
	display: inline-block;
}

.container:not(.intro) > .row {
	margin-top: 72px;
	margin-bottom: 72px;
}
/* Mehrere Rows in einer Section (Überschrift + Karten, Text + Feature-Grid)
   gehören zusammen – der große Abstand gilt nur nach außen. */
.container:not(.intro) > .row:not(:first-child) {
	margin-top: 40px;
}
.container:not(.intro) > .row:not(:last-child) {
	margin-bottom: 0;
}

.hero-content .hero, section.gallery {
	margin: auto;
	padding: 0;
	overflow: hidden;
}

/* Einheitliches Raster statt unterschiedlich hoher Zeilen */
section.gallery img {
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Beschreibungstexte in Karten und Feature-Grid sind als Versalien in
   ~11px über mehrere Zeilen schwer lesbar – hier gemischte Schreibweise. */
/* small ist global auf die kondensierte Headline-Schrift in Versalien gesetzt –
   für mehrzeiligen Fließtext in Karten und Feature-Grid ungeeignet. */
.card .card-text small, .feature-grid .description small {
	font-family: "body", serif;
	font-weight: 400;
	font-size: .92rem;
	line-height: 1.55;
	text-transform: none;
	letter-spacing: 0;
	color: rgba(255, 255, 255, .82);
}
.hero-content .content {
	margin-top: auto;
	margin-bottom: auto;
	padding-top: 25px;
	padding-bottom: 25px;
}

.widget {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-align: center;
}
.widget h2, .widget h3 {
	text-transform: uppercase;
	letter-spacing: -1px;
}
.widget .features {
	justify-content: center;
	gap: 1.1rem;
	font-size: 2rem;
	gap: .15rem
}
.collapse, .collapsing {
	border-left: 2px solid var(--color-red-main);
	border-right: 2px solid var(--color-red-main);
	padding-left: 5px;
	padding-right: 5px;
	z-index: 0 !important;
}

.copy-text {
	display: flex; 
	align-items: center; 
	width: 100%;
}
.copy-text.singleline > :first-child {
	text-align: left;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}
.copy-text .icon {
	padding-left: 3px;
	cursor: pointer;
	opacity: .8;
	margin-left: auto;
	transform: scale(1);
	transition: transform 0.2s, color 0.2s;
}
.copy-text .icon:hover {
	opacity: 1;
}
.copy-text .icon.success {
	transform: scale(1.3);
}
.copy-text .iconerror {
	color: var(--color-error);
}

/* Language */

.language-switcher {
	display: flex;
	/*gap: 5px;*/
	/*align-items: center;*/
	justify-content: right;
}

.language-switcher button {
	background: none;
	border: none;
	padding: 0 /*4px*/;
	cursor: pointer;
	/* Wir zeigen aktuell nur eine Flagge an */
	/*transition: transform 0.2s ease, filter 0.2s ease;*/
}

.language-switcher button img {
	width: 40px;
	height: 30px;
	transition: filter 0.2s ease;
}

.language-switcher button.inactive img {
	/* Wir zeigen aktuell nur eine Flagge an */
	/*filter: grayscale(100%) brightness(0.8);*/
	filter: grayscale(0%) brightness(0.9);
}
.language-switcher button.inactive:hover img {
	filter: grayscale(0%) brightness(1);
}
.language-switcher button.active img {
}
.language-switcher button.active {
	/* Wir zeigen aktuell nur eine Flagge an */
	display: none;
}

/* Footer */

footer nav a {
	display: block !important
}
footer a:not(.button):not(.no-hover):hover {
	 color: var(--color-white) !important;
}

footer .container {
	color: var(--color-white);
}

footer .container a, footer .container a:focus {
	color: var(--color-white) !important;
}

footer hr {
	color: var(--color-white)
}

footer .social img {
	width: 30px;
}
footer .social i {
	font-size: 30px;
	color: var(--color-white) !important;
}
footer .social img, footer .social i {
	display: flex;
	margin-top: auto;
	margin-bottom: auto;
}

/* Misc */

.accordion {
    --bs-accordion-color: inherit;
    --bs-accordion-bg: inherit
}

.accordion-button:not(.collapsed) {
    background-color: var(--color-red-main);
}
.accordion-button.collapsed {
    background-color: transparent;
}
.accordion-collapse {
    border: none;
}

.accordion-item {
    border-color: var(--color-red-main);
}
.dropdown button {
	width: 100%;
}
.dropdown-menu {
	border-radius: var(--radius);
	overflow: hidden;
	min-width: 260px;
	border: none;
	/* Rote Oberkante als Anschluss an den Menüpunkt */
	border-top: 2px solid var(--color-red-main);
	padding: 10px 0;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.dropdown-menu.show {
	animation: dropdown-in .22s ease-out both;
}

/* LinkComponent setzt die Klasse auf li und a – hier getrennt behandeln */
.dropdown-menu li.dropdown-item {
	padding: 0;
	background: transparent;
}
.dropdown-menu a.dropdown-item {
	display: block;
	padding: 10px 24px;
	border-left: 2px solid transparent;
	transition: border-color .25s ease, padding-left .25s ease, color .25s ease;
}
.dropdown-menu a.dropdown-item:hover, .dropdown-menu a.dropdown-item:focus {
	border-left-color: var(--color-red-main);
	padding-left: 32px;
}
/* Der animierte Unterstrich der Fließtext-Links stört in der Liste */
.dropdown-item:focus, .dropdown-item:hover {
	background-color: transparent;
}

.card {
	background: transparent;
}
/* Bildkarten bekommen dieselbe Fläche und denselben Rahmen wie die Zitat-
   und Service-Karten – vorher standen sie rahmenlos daneben. */
.card:not(.quote) {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .18) !important;
	transition: border-color .25s ease, transform .25s ease;
}
.card:not(.quote):has(a):hover {
	border-color: rgba(255, 255, 255, .4);
	transform: translateY(-3px);
}
.card:not(.quote) .card-body {
	padding: 22px 24px 6px !important;
}
.card:not(.quote) .card-footer {
	padding: 0 24px 24px !important;
}
.card:not(.quote) .card-title {
	margin-bottom: 10px;
}
.card:not(.quote) .eyebrow {
	margin-bottom: 8px;
	color: rgba(255, 255, 255, .6);
}

.card img[class*="card-img"]{
	border-radius: 0; /* die Karte selbst ist gerundet und schneidet zu */
	/* Einheitliches Format, damit Titel und Buttons der Karten
	   einer Reihe auf gleicher Höhe stehen. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Zitatkarten (Kundenstimmen) brauchen auf dunklem Grund eine sichtbare Fläche */
.card.quote {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .18) !important;
	padding: 30px;
}
.card.quote .card-body {
	padding: 0;
	display: flex;
	flex-direction: column;
}
.card.quote .tag-list {
	margin-bottom: 26px;
}
/* Abschließender Button in allen Karten einer Reihe auf gleicher Höhe */
.card.quote .card-body > .button:last-child {
	margin-top: auto;
}
.card.quote blockquote, blockquote.card.quote p {
	font-style: normal;
}
.card.quote div:last-child {
	margin-bottom: 0;
}

/* Kartentitel sind h3 (unter den h2 der Sektionen), optisch aber in h4-Größe */
.card-title, .feature-grid .title h3, .timeline h3, .carousel-caption h3 {
	font-size: 1.5rem;
}

.card .card-body {
	height: 100%;
}

.card .card-footer {
	margin-top: auto;
	background-color: transparent;
	border-top: none;
}

.card div:last-child {
	margin-bottom: 0;
}

/* Impressum und Datenschutz haben keinen Hero – ohne Abstand klebt die
   Überschrift am fixierten Header. Schmalere Spalte für lange Rechtstexte. */
section.legal {
	padding-top: 90px;
	padding-bottom: 60px;
}

/* Vollbreites Bildband als Inhaltstrenner */
.image-band {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 46vh;
	padding: 90px 0;
	background-size: cover;
	background-position: center center;
	text-align: center;
}
/* Eigene Bildebene: trägt den Filter, ohne den Text mitzuziehen – bewusst
   ohne Ken Burns, das Gebäudefoto steht ruhig */
.image-band .band-media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: inherit;
	background-size: cover;
	background-position: center center;
	filter: grayscale(.45) contrast(1.08) brightness(.5) saturate(1.15);
}
.image-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(120% 100% at 50% 50%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .7) 100%),
		linear-gradient(155deg, rgba(0, 160, 227, .12) 0%, rgba(0, 0, 0, 0) 48%, rgba(227, 30, 36, .14) 100%);
}
.image-band .band-content {
	position: relative;
	z-index: 1;
}
.image-band .band-content p:not(.eyebrow) {
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
}
.image-band h2 {
	text-shadow: 0 0 24px rgba(0, 0, 0, .55);
}

/* Aufzählungen als Chips statt als Punkteliste */
.tag-list {
	list-style: none;
	padding: 0;
	margin: 30px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.hero-content.hero-first .content .tag-list {
	justify-content: flex-end;
}
/* Bewusst ohne Rahmen und Hover: die Einträge sind Merkmale, keine Buttons */
.tag-list li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--color-white);
	font-weight: 600;
	font-size: .9rem;
	line-height: 1.3;
	text-transform: none;
}
.tag-list {
	gap: 10px 26px;
}

/* Einträge ohne Icon bekommen einen kleinen türkisen Schrägstrich als Marker */
.tag-list li:not(:has(i))::before {
	content: "";
	flex: none;
	width: 3px;
	height: 14px;
	background: var(--color-blue-main);
	transform: skewX(-25deg);
}

/* Zielgruppen als Spalten: Icon oben, feine Trennlinien dazwischen */
.tag-list.pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.tag-list.pillars li {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 14px;
	font-family: "headline", serif;
	font-weight: 500;
	font-size: .95rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	hyphens: auto;
	overflow-wrap: anywhere;
}
.tag-list.pillars li:first-child {
	padding-left: 0;
}
.tag-list.pillars li + li {
	border-left: 1px solid rgba(255, 255, 255, .14);
}
.tag-list.pillars i {
	font-size: 1.5rem;
}
.tag-list i {
	color: var(--color-blue-main);
}

/* Unter Überschriften eine kurze Akzentlinie in beiden CI-Farben statt einer
   durchlaufenden roten Linie über die ganze Spaltenbreite. */
.hero-content .content > hr,
.contact-form ~ hr,
/* Impressum/Datenschutz: Themenblöcke ohne Trennlinie, nur mit Luft dazwischen */
section.legal > div + div {
	margin-top: 56px;
}
.hero-content .content.text-center > hr {
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 1400px) {
	.hero-content.hero-first .content > hr {
		margin-left: auto;
	}
}

/* Sektionsmarke: Bildmarke zwischen zwei Linien (Gestaltungsmittel der alten Seite) */
.section-mark {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 12px;
}
.section-mark .rule {
	flex: 1 1 auto;
	height: 1px;
	/* Türkis als Zweitfarbe – Rot bleibt Handlungen und Links vorbehalten */
	background-color: var(--color-blue-main);
}
/* Klasse heißt bewusst nicht „mark“ – die belegt Bootstrap mit gelbem Highlight-Hintergrund */
.section-mark img.emblem {
	width: auto;
	height: 56px;
	flex: 0 0 auto;
}

/* Kleinversalien-Zeile über der Überschrift */
.eyebrow {
	font-family: "headline", serif;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .22em;
	font-size: .8rem;
	margin-bottom: 18px;
}

/* Marken- und Partnerlogos: Quelldateien sind unterschiedlich eingefärbt,
   deshalb einheitlich auf Weiß normalisiert. */
.partner-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 45px 60px;
}
.partner-logos img {
	width: auto;
	height: 34px;
	filter: brightness(0) invert(1);
	opacity: .55;
	transition: opacity .3s ease;
}
.partner-logos img:hover {
	opacity: 1;
}

/* Marken-Diagonalen (img/decoration) als Sektionstrenner */
.decoration {
	/* Originalformat der Grafiken ist 2000 x 563 (~3,55:1). Über die volle
	   Seitenbreite wären das rund 450px Höhe – deshalb mittig begrenzt,
	   damit das Verhältnis unverzerrt bleibt. */
	width: min(100%, 420px);
	aspect-ratio: 2000 / 563;
	/* Die Grafik rückt in die Sektionsabstände hinein, sonst entsteht
	   darum herum eine doppelte Leerfläche */
	margin: -28px auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
}
.decoration.lines-a { background-image: url('/img/decoration/lines-a.dark.webp'); }
.decoration.lines-b { background-image: url('/img/decoration/lines-b.dark.webp'); }
.decoration.lines-c { background-image: url('/img/decoration/lines-c.webp'); }
.decoration.lines-d { background-image: url('/img/decoration/lines-d.webp'); }

/* Bildmarke als großes Wasserzeichen im Footer – bringt das CI in die
   Fläche, ohne mit dem Inhalt zu konkurrieren. */
footer .container {
	position: relative;
	overflow: hidden;
}
footer .container::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -110px;
	width: 460px;
	height: 460px;
	background: url('/img/logos/schwing-emblem.png') no-repeat center / contain;
	opacity: .07;
	pointer-events: none;
}
footer .container > .row {
	position: relative;
	z-index: 1;
}

/* Footer: durchgängig linksbündig – CTA-Band, vier Spalten, Unterzeile */
footer .container {
	padding-left: 40px !important;
	padding-right: 40px !important;
	padding-top: 12px !important;
	padding-bottom: 28px !important;
	margin-bottom: 36px;
	border-radius: var(--radius);
}
footer .container::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 2;
	background: linear-gradient(115deg,
		var(--color-red-main) 0%,
		var(--color-red-main) 45%,
		var(--color-blue-main) 100%);
}
footer .footer-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	padding: 56px 0 46px;
	border-bottom: 1px solid rgba(255, 255, 255, .15);
}
footer .footer-cta h2 {
	margin: 0 0 10px;
}
footer .footer-cta .footer-cta-text p:last-child {
	margin: 0;
	max-width: 56ch;
	color: rgba(255, 255, 255, .8);
}
footer .footer-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
footer .footer-columns {
	padding: 52px 0 10px;
	position: relative;
	z-index: 1;
}
footer .footer-logo {
	width: auto;
	max-width: 240px;
	height: auto;
	display: block;
}
footer .footer-columns .contact-list {
	margin-top: 26px;
	gap: 12px;
}
footer .footer-columns .contact-list li {
	align-items: flex-start;
}
footer .footer-columns .contact-list i {
	margin-top: 5px;
}
footer .footer-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
footer .footer-links a {
	width: fit-content;
}

/* Footer: Claim und Unterzeile */
footer .claim {
	font-family: "headline", serif;
	font-weight: 300;
	letter-spacing: .08em;
	margin: 6px 0 0;
}
footer .footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 30px;
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .15);
	font-size: .8rem;
	color: rgba(255, 255, 255, .7);
}
footer .footer-bottom .process span + span::before {
	content: "|";
	margin: 0 .6em;
	color: var(--color-blue-main);
}

/* Übergang von der dunklen Seite in den Footer */
/* Nur der Seiten-Footer, nicht jedes <footer>-Element: In Zitaten ist
   <footer> das semantisch richtige Element für die Quellenangabe und
   bekam sonst ebenfalls die Diagonale untergeschoben. */
div[data-page] > footer::before {
	content: "";
	display: block;
	width: min(100%, 420px);
	aspect-ratio: 2000 / 556;
	/* Luft zum Bildband darüber, sonst klebt die Grafik an dessen Unterkante */
	margin: 64px auto 24px;
	background: url('/img/decoration/lines-c.webp') no-repeat center / contain;
}

.panel .index a, .panel .index a:focus {
	color: var(--color-white) !important;
}
.panel .index a:not(.button):hover, .panel .index .nav-link.active  {
	color: var(--color-white) !important;
}

.modal {
	backdrop-filter: blur(25px) grayscale(50%);
	-webkit-backdrop-filter: blur(25px) grayscale(50%);
}
.modal-content {
	border-radius: var(--radius);
}

.lightbox-caption em {
	font-style: normal;
	font-weight: 600;
}
@media (min-width: 1200px) {
	.modal-xl {
		--bs-modal-width: 1480px;
	}
}

.feature-grid .col {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	height: 100%;
	padding: 1rem;
	overflow: hidden;
}

.feature-grid .title {
	margin-top: 5px;
	margin-bottom: 5px;
	min-height: 50px;
	display: flex;
}

.feature-grid .title h3 {
	margin: auto;
	color: var(--color-white);
}
.feature-grid .col > i.highlight {
	width: 66px;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	font-size: 1.55rem;
	color: var(--color-red-main);
	margin-bottom: 14px;
}

.feature-grid .description {
	margin-top: auto;
}

i.highlight {
	font-size: 40px;
	color: var(--color-red-main);
}

.carousel-item {
	margin-bottom: 0 !important;	
}
.carousel-control-prev-icon, .carousel-control-next-icon {
	background-image: none;
}
.carousel-control-next, .carousel-control-prev, .carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {
	opacity: 1;
}
.carousel-control-prev-icon:after, .carousel-control-next-icon:after {
	font-family: "Font Awesome 6 Duotone", serif;
	font-weight: 900;
	font-size: 50px;
	position: absolute;
	overflow: hidden;
}
.carousel-control-prev-icon:after, .carousel-control-next-icon:after, .carousel-control-prev-icon:hover:after, .carousel-control-next-icon:hover:after {
	transition: all 0.3s;	
}
.carousel-control-prev-icon:after{
	content: "\f32a";
	left: 0;
}
.carousel-control-next-icon:after {
	content: "\f32b";
	right: 0;
}
.carousel-control-prev-icon:hover:after, .carousel-control-next-icon:hover:after {
	color: var(--color-red-main);
	transform: scale(1.125);
}
.carousel-caption {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 15px 25px 25px 25px;
	backdrop-filter: blur(25px) saturate(3);
	-webkit-backdrop-filter: blur(25px) saturate(3);
	
}
.carousel-caption h3 {
	color: var(--color-red-main);
}

.cti-float, .cti-float:hover, .cti-float i {
	transition: all 0.3s;
}
.cti-float {
	position:fixed; 
	right: 20px; 
	bottom: 20px;
	z-index: 2000;
	font-size: 36px;
	padding: 10px 20px;
	background-color: var(--color-brand-whatsapp);
	border: 2px solid var(--color-brand-whatsapp);
}
.cti-float:hover {
	background-color: var(--color-white);
	transform: scale(0.95);
}
.cti-float i {
	color: #ffffff;
}
.cti-float:hover i {
	color: var(--color-brand-whatsapp);
}

/* =====================================================================
   Hero „Diagonalschnitt“
   Text links, Motiv rechts in einer im Marken-Winkel angeschnittenen
   Fläche, dahinter dasselbe Motiv stark weichgezeichnet als Farbraum.
   ===================================================================== */
.hero-split {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	padding: 48px 0 40px;
	min-height: calc(100vh - var(--value-header-height));
}
.hero-split.tall {
	min-height: 100vh;
}
/* Die globale Regel .container:not(.intro) > .row legt 150px Außenabstand
   auf jede Row – im Hero trieb das die Höhe über den Viewport hinaus. */
section.hero-split > .container > .row {
	margin-top: 0;
	margin-bottom: 0;
}
.hero-split .hero-bg {
	position: absolute;
	inset: -10%;
	z-index: -2;
	background-size: cover;
	background-position: center center;
	filter: blur(22px) grayscale(.5) brightness(.32) saturate(1.2);
	transform: scale(1.05);
}
.hero-split::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(120% 100% at 30% 50%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .62) 100%),
		linear-gradient(155deg, rgba(0, 160, 227, .14) 0%, rgba(0, 0, 0, 0) 45%, rgba(227, 30, 36, .16) 100%);
}

/* Textspalte */
.hero-split .hero-copy {
	text-align: left;
}
.hero-split .hero-logo {
	width: auto;
	max-width: min(100%, 420px);
	height: auto;
	margin-bottom: 28px;
	display: block;
}
.hero-split .hero-copy .widget .features {
	justify-content: flex-start;
	gap: .9rem;
	font-size: 1.5rem;
	margin-bottom: 16px;
}
.hero-split .hero-copy .eyebrow {
	margin-bottom: 14px;
}
.hero-split .hero-copy h1 {
	font-family: "headline", serif;
	font-weight: 700;
	text-transform: uppercase;
	line-height: .92;
	font-size: clamp(3rem, 6vw, 6.4rem);
	margin: 0 0 18px;
	color: var(--color-white);
	text-shadow: 0 0 26px rgba(0, 0, 0, .55);
}
/* Subline ist ein <p> – als Überschrift wäre sie ein Sprung von h1 auf h3 */
.hero-split .hero-copy .subline {
	font-family: "headline", serif;
	font-weight: 900;
	line-height: 1;
	font-size: clamp(1.25rem, 2vw, 1.9rem);
	margin-bottom: 22px;
}
.hero-split .hero-copy .lead-text {
	max-width: 52ch;
	color: rgba(255, 255, 255, .86);
}
.hero-split .hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
}
.hero-split .hero-copy > i.highlight {
	display: block;
	text-align: left !important;
	margin-top: 28px !important;
	margin-bottom: 0 !important;
}

/* Bildfläche */
.hero-split .hero-frame {
	position: relative;
	isolation: isolate;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 100%);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.hero-split .hero-frame .hero-media {
	inset: -6%;
	z-index: 0;
}
.hero-split .hero-frame .hero-media-layer {
	filter: grayscale(.15) contrast(1.05) brightness(.9) saturate(1.1);
}
.hero-split .hero-frame .hero-media-layer.static {
	opacity: 1;
	-webkit-mask-image: none;
	mask-image: none;
	animation: hero-kenburns 32s ease-in-out infinite;
}
/* CI-Farbkante entlang der Schnittkante, 7px breit, im selben Winkel */
.hero-split .hero-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(180deg, var(--color-red-main) 0%, var(--color-blue-main) 100%);
	clip-path: polygon(17% 0, calc(17% + 7px) 0, 7px 100%, 0 100%);
}

@media (max-width: 991.98px) {
	.hero-split {
		padding-top: 24px;
	}
	.hero-split .hero-panel {
		order: -1;
	}
	.hero-split .hero-frame {
		aspect-ratio: 16 / 10;
		clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
	}
	.hero-split .hero-frame::before {
		clip-path: polygon(0 calc(100% - 7px), 100% calc(86% - 7px), 100% 86%, 0 100%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.hero-split .hero-frame .hero-media-layer.static {
		animation: none;
	}
}


/* Social-Media-Links (Hero der Startseite, Footer) */
.social-links {
	display: flex;
	align-items: center;
	gap: 12px;
}
.social-links .eyebrow {
	margin: 0 6px 0 0;
}
.social-links a {
	width: 44px;
	height: 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	font-size: 1.15rem;
	transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.social-links a::after {
	display: none;
}
.social-links a:hover {
	border-color: var(--color-blue-main);
	background: rgba(255, 255, 255, .08);
	transform: translateY(-2px);
}
.hero-split .social-links {
	margin-top: 30px;
}

/* Drei Hochformat-Motive nebeneinander */
.image-trio img {
	display: block;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* Zeitstrahl auf der Über-uns-Seite */
.timeline {
	list-style: none;
	/* Luft links, damit die Punkte nicht vom overflow der Spalte halbiert werden */
	margin: 0 0 0 10px;
	padding: 10px 0 10px 34px;
	border-left: 2px solid;
	border-image: linear-gradient(180deg, var(--color-red-main) 0%, var(--color-blue-main) 100%) 1;
	text-align: left;
}
.timeline li {
	position: relative;
	padding: 0 0 44px 10px;
}
.timeline li:last-child {
	padding-bottom: 0;
}
.timeline li::before {
	content: "";
	position: absolute;
	left: -43px;
	top: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--color-grey-main);
	border: 3px solid var(--color-red-main);
}
.timeline .year {
	font-family: "headline", serif;
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--color-red-main);
}
.timeline h3 {
	margin: 6px 0 4px;
}
.timeline p {
	margin: 0;
	color: rgba(255, 255, 255, .8);
}

/* Überschrift und Galerie sind zwei Sections, gehören aber zusammen
   (Startseite: Ausstellung, Über uns: Firmengebäude) */
section:has(+ section.gallery) > .row {
	margin-bottom: 40px !important;
}
section.gallery > .row {
	margin-top: 0 !important;
}
/* Startseiten-Hero trägt Logo, Buttons und Social-Links – kompakter setzen,
   damit alles in einen Viewport passt */
.hero-split .hero-logo + .eyebrow {
	margin-top: 0;
}
div[data-page="index"] .hero-split .hero-logo {
	margin-bottom: 20px;
}
div[data-page="index"] .hero-split .hero-copy > i.highlight {
	display: none !important;
}
div[data-page="index"] .hero-split {
	padding: 22px 0 22px;
}
div[data-page="index"] .hero-split .hero-copy h1 {
	font-size: clamp(2.8rem, 5.2vw, 5.4rem);
	margin-bottom: 12px;
}
div[data-page="index"] .hero-split .hero-copy .subline {
	margin-bottom: 14px;
}
div[data-page="index"] .hero-split .hero-actions {
	margin-top: 20px;
}
div[data-page="index"] .hero-split .social-links {
	margin-top: 20px;
}

/* =====================================================================
   Lightbox (bs5-lightbox): ohne schwarze 16:9-Box, Bild auf Bildschirmhöhe,
   eigene Pfeile und Schließen-Button in der Sprache der Seite
   ===================================================================== */
.modal:has(.lightbox-carousel) {
	backdrop-filter: blur(18px) saturate(1.2);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	background: rgba(20, 20, 19, .82);
}
.modal:has(.lightbox-carousel) .modal-dialog {
	max-width: min(1480px, calc(100vw - 40px));
	margin-inline: auto;
}
/* Der Schatten aus style.schemes.css zeichnet sonst wieder eine dunkle Box */
.modal:has(.lightbox-carousel) .modal-content {
	box-shadow: none !important;
}
.lightbox-carousel .ratio {
	background: transparent !important;
	height: calc(100dvh - 120px);
}
.lightbox-carousel .ratio::before {
	display: none;
}
.lightbox-carousel .ratio > img {
	box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}

/* Pfeile (Lightbox und Slider): runde Glasknöpfe am Rand */
.carousel .carousel-control-prev,
.carousel .carousel-control-next {
	width: 80px;
}
.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon {
	position: relative;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .3);
	background: rgba(29, 29, 27, .55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: border-color .25s ease, background-color .25s ease;
}
.carousel .carousel-control-prev-icon:after,
.carousel .carousel-control-next-icon:after {
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Font Awesome 6 Pro", serif;
	font-weight: 300;
	font-size: 22px;
	color: var(--color-white);
	background: none !important;
	transform: none !important;
}
.carousel .carousel-control-prev-icon:after { content: "\f053"; }
.carousel .carousel-control-next-icon:after { content: "\f054"; }
.carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.carousel .carousel-control-next:hover .carousel-control-next-icon {
	border-color: var(--color-blue-main);
	background: rgba(0, 160, 227, .18);
}
.carousel .carousel-control-prev:hover .carousel-control-prev-icon:after,
.carousel .carousel-control-next:hover .carousel-control-next-icon:after {
	color: var(--color-white);
}

.lightbox-carousel .carousel-control-prev,
.lightbox-carousel .carousel-control-next {
	height: 100% !important;
}

/* Slider-Indikatoren: kurze Balken, aktiver in Türkis */
.carousel .carousel-indicators {
	margin-bottom: 18px;
	gap: 6px;
}
.carousel .carousel-indicators [data-bs-target] {
	width: 26px;
	height: 3px;
	margin: 0;
	border: none;
	background: var(--color-white);
	opacity: .45;
	transition: width .3s ease, opacity .3s ease, background-color .3s ease;
}
.carousel .carousel-indicators .active {
	width: 44px;
	opacity: 1;
	background: var(--color-blue-main);
}

/* Schließen oben rechts im gleichen Stil */
.modal:has(.lightbox-carousel) .btn-close {
	width: 46px;
	height: 46px;
	padding: 0 !important;
	margin: 12px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .3);
	background: rgba(29, 29, 27, .55) !important;
	opacity: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .25s ease, transform .35s ease;
}
.modal:has(.lightbox-carousel) .btn-close svg {
	width: 14px;
	height: 14px;
	top: 0 !important;
}
.modal:has(.lightbox-carousel) .btn-close:hover {
	border-color: var(--color-blue-main);
	transform: rotate(90deg);
}
@media (max-width: 767.98px) {
	.lightbox-carousel .ratio {
		height: calc(100dvh - 160px);
	}
	.carousel .carousel-control-prev,
	.carousel .carousel-control-next {
		width: 56px;
	}
	.carousel .carousel-control-prev-icon,
	.carousel .carousel-control-next-icon {
		width: 42px;
		height: 42px;
	}
}

/* Ganz verlinkte Karten (stretched-link): Button und Bild reagieren auf die ganze Box */
.card:has(.stretched-link) {
	overflow: hidden;
}
.card:has(.stretched-link) .card-img-top {
	transition: transform .6s ease;
}
.card:has(.stretched-link):hover .card-img-top {
	transform: scale(1.04);
}
.card:has(.stretched-link):hover .button.style2 {
	background-color: var(--color-red-dark);
	border-color: var(--color-red-dark);
}

/* Schalter für die Schriftgröße (Header) */
.fontsize-control {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	margin-left: 18px;
}
.fontsize-control button {
	background: none;
	border: 1px solid transparent;
	color: var(--color-white);
	font-family: "headline", serif;
	font-weight: 700;
	line-height: 1;
	padding: 3px 6px;
	opacity: .7;
	transition: opacity .2s ease, border-color .2s ease;
}
.fontsize-control button:nth-child(1) { font-size: .8rem; }
.fontsize-control button:nth-child(2) { font-size: .95rem; }
.fontsize-control button:nth-child(3) { font-size: 1.1rem; }
.fontsize-control button:hover,
.fontsize-control button[aria-pressed="true"] {
	opacity: 1;
	border-color: var(--color-blue-main);
}
header nav .offcanvas .menu-foot .fontsize-control {
	margin-left: 0;
}

/* Bildband-Headline: der rote Teil bleibt zusammen („für Sie da“ statt „für Sie / da“) */
.image-band h2 .style1 {
	white-space: nowrap;
}

/* .button trägt einen (Identitäts-)Transform – der machte den Button zum
   Bezugsrahmen seines stretched-link-Overlays, das Overlay war nur buttongroß */
.card .stretched-link {
	transform: none !important;
}

/* =====================================================================
   Einheitlicher Eckenradius (--radius) für Bilder und Boxen.
   Ausnahmen: das vollbreite Bildband und der Diagonalschnitt im Hero.
   ===================================================================== */
.hero-content .hero,
.card,
.carousel,
section.gallery img,
.image-trio img,
.lightbox-carousel .ratio > img {
	border-radius: var(--radius);
}
.hero-content .hero,
.card,
.carousel {
	overflow: hidden;
}

/* Adresse im Header: Kartenwahl wie auf der Kontaktseite */
header nav .address-dropdown > button.address-toggle {
	padding: 0;
	font: inherit;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: inherit;
	background: none;
	border: none;
}
header nav .address-dropdown > button.address-toggle::after {
	margin-left: .35em;
	vertical-align: .15em;
}
header nav .address-dropdown .dropdown-menu {
	min-width: 200px;
	font-size: .9rem;
	/* Einträge wie auf der Kontaktseite: normale Schreibweise */
	text-transform: none;
	letter-spacing: 0;
}
header nav .offcanvas .address-mobile .maps {
	display: block;
	margin-top: 6px;
}
header nav .offcanvas .address-mobile .maps a + a {
	margin-left: 14px;
}

/* =====================================================================
   Google-Rezensionen: Scroll-Snap-Slider
   ===================================================================== */
.review-slider .review-viewport {
	position: relative;
}
.review-slider .review-track {
	display: flex;
	align-items: stretch;
	column-gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 6px 0 10px;
	outline: none;
}
.review-slider .review-track::-webkit-scrollbar {
	display: none;
}
.review-slider .review-track:focus-visible {
	outline: 2px solid var(--color-blue-main);
	outline-offset: 6px;
	border-radius: var(--radius);
}
/* Karten: Desktop zwei im Blick, darunter eine mit Anschnitt */
.review-slider .review-card {
	position: relative;
	flex: 0 0 calc((100% - 24px) / 2);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 30px 32px 32px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--radius);
	overflow: hidden;
}
/* Großes Anführungszeichen als Wasserzeichen */
.review-slider .review-card::before {
	content: "\201E";
	position: absolute;
	right: 22px;
	bottom: -54px;
	font-family: "headline", serif;
	font-weight: 900;
	font-size: 180px;
	line-height: 1;
	color: rgba(255, 255, 255, .05);
	pointer-events: none;
}
.review-slider .review-card .review-head {
	display: flex;
	align-items: center;
	gap: 14px;
}
.review-slider .review-card .review-head > div {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
}
.review-slider .review-card .review-head strong {
	font-family: "headline", serif;
	font-weight: 500;
	font-size: 1.15rem;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.review-slider .avatar {
	flex: none;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-red-main) 0%, var(--color-red-dark, #b5151a) 100%);
	color: var(--color-white);
	font-family: "headline", serif;
	font-weight: 700;
	font-size: 1.25rem;
}
.review-slider .review-card:nth-child(even) .avatar {
	background: linear-gradient(135deg, var(--color-blue-main) 0%, #0b7fb5 100%);
}
.review-slider .stars {
	display: inline-flex;
	gap: 3px;
	color: var(--color-blue-main);
	font-size: .8rem;
}
.review-slider .review-card .google {
	font-size: 1.3rem;
	color: rgba(255, 255, 255, .55);
}
.review-slider .review-card p {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .9);
}
/* Pfeile außerhalb der Spur, Punkte darunter */
.review-slider .review-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .3);
	background: transparent;
	color: var(--color-white);
	font-size: 22px;
	transition: border-color .25s ease, background-color .25s ease;
	z-index: 2;
}
.review-slider .review-nav.prev { left: 0; }
.review-slider .review-nav.next { right: 0; }
.review-slider .review-nav:hover {
	border-color: var(--color-blue-main);
	background: rgba(0, 160, 227, .18);
}
.review-slider .review-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 22px;
}
.review-slider .review-dots button {
	width: 26px;
	height: 3px;
	padding: 0;
	border: none;
	background: var(--color-white);
	opacity: .45;
	transition: width .3s ease, opacity .3s ease, background-color .3s ease;
}
.review-slider .review-dots button.active {
	width: 44px;
	opacity: 1;
	background: var(--color-blue-main);
}
@media (max-width: 991.98px) {
	.review-slider .review-card {
		flex-basis: 86%;
		padding: 24px 22px 26px;
	}
	.review-slider .review-card p {
		font-size: 1rem;
	}
	.review-slider .review-nav {
		display: none; /* am Handy: wischen und Punkte */
	}
}
@media (min-width: 992px) {
	/* Eigene Spur für die Pfeile links und rechts der Karten */
	.review-slider .review-viewport {
		padding: 0 76px;
	}
}