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

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

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

/* ============================================================
   Layout: fixe Menüspalte links, Inhalt rechts auf Weiß
   ============================================================ */

.wrapper {
	min-height: 100vh;
}
.page {
	position: relative;
	min-height: 100vh;
	background-color: var(--color-white);
}

/* Menüspalte */

.sidebar {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	overflow: hidden;
	color: var(--color-white);
	/* Mobil: kein eigener Hintergrund – die echte Seite dahinter wird verwischt
	   und dunkel überlagert (siehe .sidebar-blur); Desktop setzt Navy + Bild. */
	background-color: transparent;
	/* Mobil: kreisförmige Enthüllung vom Burger-Button aus (Mitte des Buttons:
	   18px Rand + 23px = 41px von rechts, halbe Topbar-Höhe von oben) */
	visibility: hidden;
	clip-path: circle(0% at calc(100% - 41px) calc(var(--topbar-h) / 2));
	transition: clip-path .7s cubic-bezier(.77, 0, .18, 1), visibility 0s linear .7s;
}
.sidebar.open {
	visibility: visible;
	clip-path: circle(170% at calc(100% - 41px) calc(var(--topbar-h) / 2));
	transition: clip-path .8s cubic-bezier(.77, 0, .18, 1), visibility 0s;
}
/* Bild zoomt beim Öffnen leicht heraus */
.sidebar .sidebar-media {
	transform: scale(1.12);
	transition: transform 1.4s cubic-bezier(.22, 1, .36, 1);
}
.sidebar.open .sidebar-media {
	transform: scale(1);
}
/* Inhalte gestaffelt einblenden */
.sidebar .sidebar-brand, .sidebar .sidebar-nav > *, .sidebar .sidebar-footer > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.sidebar.open .sidebar-brand, .sidebar.open .sidebar-nav > *, .sidebar.open .sidebar-footer > * {
	opacity: 1;
	transform: none;
}
.sidebar.open .sidebar-brand { transition-delay: .3s; }
.sidebar.open .sidebar-nav > :nth-child(1) { transition-delay: .36s; }
.sidebar.open .sidebar-nav > :nth-child(2) { transition-delay: .4s; }
.sidebar.open .sidebar-nav > :nth-child(3) { transition-delay: .44s; }
.sidebar.open .sidebar-nav > :nth-child(4) { transition-delay: .48s; }
.sidebar.open .sidebar-nav > :nth-child(5) { transition-delay: .52s; }
.sidebar.open .sidebar-nav > :nth-child(6) { transition-delay: .56s; }
.sidebar.open .sidebar-nav > :nth-child(7) { transition-delay: .6s; }
.sidebar.open .sidebar-nav > :nth-child(8) { transition-delay: .64s; }
.sidebar.open .sidebar-nav > :nth-child(9) { transition-delay: .68s; }
.sidebar.open .sidebar-nav > :nth-child(10) { transition-delay: .72s; }
.sidebar.open .sidebar-nav > :nth-child(11) { transition-delay: .76s; }
.sidebar.open .sidebar-nav > :nth-child(12) { transition-delay: .8s; }
.sidebar.open .sidebar-footer > :nth-child(1) { transition-delay: .85s; }
.sidebar.open .sidebar-footer > :nth-child(2) { transition-delay: .9s; }
@media (prefers-reduced-motion: reduce) {
	.sidebar, .sidebar.open, .sidebar .sidebar-media, .sidebar .sidebar-brand, .sidebar .sidebar-nav > *, .sidebar .sidebar-footer > * {
		transition: none;
	}
}

/* Das Hero-Bild läuft unscharf hinter dem Menü weiter. background-attachment: fixed
   fixiert es am Viewport – dieselben Bildkoordinaten wie im Hero, daher nahtlos. */
.sidebar-media {
	position: absolute;
	inset: 0;
	display: none;
	background-size: cover;
	background-position: center center;
}
/* Mobil: dunkles Navy-Overlay im Menü (die Unschärfe liefert .menu-backdrop) */
.sidebar-blur {
	position: absolute;
	inset: 0;
	/* über beiden Bildebenen (Stapel: Bild 0/1, Unschärfe 2, Linie/Pfeil/Inhalt 3) */
	z-index: 2;
	background: linear-gradient(180deg, rgba(10, 19, 34, .68) 0%, rgba(10, 19, 34, .78) 60%, rgba(10, 19, 34, .88) 100%);
}
/* Mobil: Unschärfe-Ebene unter dem Menü, verwischt die echte Seite */
.menu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 999;
	backdrop-filter: blur(22px) saturate(1.1);
	-webkit-backdrop-filter: blur(22px) saturate(1.1);
	background: rgba(10, 19, 34, .25);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .6s ease, visibility 0s linear .6s;
}
.menu-backdrop.open {
	opacity: 1;
	visibility: visible;
	transition: opacity .6s ease, visibility 0s;
}
/* feine Goldkante zum Inhalt */
/* Desktop-Elemente (Haarlinie, Pfeil) – Regeln in style.responsive.css ab 1200px */
.sidebar-edge, .sidebar-arrow {
	display: none;
}
/* neues Menübild blendet über das alte (zwei Ebenen, siehe SidebarComponent) */
.sidebar-media.current {
	z-index: 1;
}
.sidebar-media.fade-in {
	animation: sidebar-media-in .7s ease both;
}
@keyframes sidebar-media-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.sidebar-inner {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 90px 30px 34px 30px;
	text-align: center;
	overflow-y: auto;
}

.sidebar-close {
	position: absolute;
	top: 16px;
	right: 18px;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, .35);
	background: transparent;
	color: var(--color-white);
	font-size: 22px;
}

.sidebar-brand img {
	width: 210px;
	max-width: 70%;
	margin: 0 auto;
}

.sidebar-nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 44px 0;
}
.sidebar .sidebar-nav a {
	position: relative;
	display: block;
	padding: 9px 0;
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82) !important;
	transition: color .25s ease;
}
.sidebar .sidebar-nav a:hover, .sidebar .sidebar-nav a.active {
	color: var(--color-white) !important;
	transform: none;
	display: block;
}
/* Mobil: aktiver Punkt als weißer Balken über die volle Breite */
.sidebar .sidebar-nav a {
	width: 100%;
	text-align: center;
}
.sidebar .sidebar-nav a.active {
	color: var(--color-primary-500) !important;
	background-color: var(--color-white);
	padding: 12px 20px;
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.sidebar-nav a.sub {
	font-weight: 500;
	font-size: .92rem;
	letter-spacing: .1em;
	padding: 7px 0;
}
.sidebar-nav .line {
	display: block;
	width: 44px;
	height: 1px;
	margin: 18px 0;
	background: linear-gradient(90deg, transparent, var(--color-accent-500));
}
/* Kennzeichnung des Situationen-Blocks: Serifenschrift in Gemischtschrift, gold */
.sidebar-nav .group {
	margin: 0 0 8px 0;
	font-family: var(--font-serif);
	font-size: .95rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: none;
	color: var(--color-accent-300);
}

.sidebar-footer {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	font-size: .85rem;
	color: rgba(255, 255, 255, .7);
}
.sidebar .sidebar-footer .phone {
	color: var(--color-white) !important;
	font-weight: 600;
	letter-spacing: .04em;
}
.sidebar-footer .phone i {
	color: var(--color-accent-500);
	margin-right: 6px;
}

/* Safari 26 färbt die Tab-Leiste nicht nach <meta theme-color>, sondern nach dem
   obersten fixierten Element unter dem Punkt (Breite/2, 4px): mindestens 90 % breit,
   über 10px hoch, deckende background-color, kein backdrop-filter in der Kette.
   Dieser unsichtbare Streifen liefert die Farbe. Im hellen Fenster übernimmt
   Safari nur helle Töne (Luma ab ca. 130), daher ein mittleres Grau; im dunklen
   Fenster das echte Navy. Nur in Safari eingeblendet. */
.safari-tint {
	display: none;
}
@supports (font: -apple-system-body) {
	.safari-tint {
		display: block;
		position: fixed;
		top: -8px;
		left: 0;
		width: 100%;
		height: 14px;
		opacity: .15;
		z-index: 2600;
		pointer-events: none;
		/* neutrales Grau, so dunkel wie Safari es im hellen Fenster noch annimmt (Luma ~141) */
		background-color: #8a8d92;
	}
	@media (prefers-color-scheme: dark) {
		.safari-tint {
			background-color: var(--color-primary-500);
		}
	}
}

/* Topbar (nur mobil): Logo + Burger */

.topbar {
	position: sticky;
	top: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--topbar-h);
	padding: 0 18px;
	background-color: rgba(255, 255, 255, .96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(200, 164, 93, .45);
}
.topbar-brand img {
	height: 44px;
	width: auto;
}
.burger {
	width: 46px;
	height: 46px;
	border: 1px solid var(--color-primary-500);
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.burger span {
	display: block;
	width: 20px;
	height: 2px;
	background-color: var(--color-primary-500);
	transition: transform .3s ease, opacity .3s ease;
}
.burger.open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.burger.open span:nth-child(2) {
	opacity: 0;
}
.burger.open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}
html.menu-open, html.menu-open body {
	overflow: hidden;
}

/* ============================================================
   Bühne (Hero): volle Displayhöhe, Foto am Viewport fixiert
   ============================================================ */

.stage {
	position: relative;
	display: flex;
	align-items: center;
	min-height: calc(100vh - var(--topbar-h));
	min-height: calc(100dvh - var(--topbar-h));
	overflow: hidden;
	color: var(--color-white);
	background-color: var(--color-primary-800);
}

.stage-media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
}
/* Navy-Verlauf für Lesbarkeit des Textes links */
.stage-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 19, 34, .88) 0%, rgba(10, 19, 34, .55) 45%, rgba(10, 19, 34, .2) 100%),
	            linear-gradient(180deg, rgba(10, 19, 34, .2) 0%, rgba(10, 19, 34, 0) 30%, rgba(10, 19, 34, .55) 100%);
}

.stage-body {
	position: relative;
	z-index: 1;
	/* unten Platz für den Scroll-Hinweis (Label + 80px Linie + Abstand) */
	padding: 60px 0 160px 0;
	max-width: 680px;
}

.stage .slogan {
	color: rgba(255, 255, 255, .85);
	margin-bottom: 26px;
	font-size: .9rem;
}
.stage .slogan::before, .stage .slogan::after {
	background-color: var(--color-accent-500);
}

.stage small, .stage h1 .eyebrow {
	color: var(--color-accent-300);
}
.stage small::before, .stage h1 .eyebrow::before {
	background-color: var(--color-accent-500);
}
/* Label innerhalb der H1: Optik der kleinen Kennzeichnung */
.stage h1 .eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
	font-family: "Karla", sans-serif;
	font-weight: 600;
	font-size: .82rem;
	line-height: 1.65;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-wrap: initial;
}
.stage h1 .eyebrow::before {
	content: "";
	flex: 0 0 28px;
	height: 1px;
}
.stage h1 .headline {
	display: block;
}

/* Die Hero-Überschrift ist bereits sehr groß: Mit der größeren Standardschrift
   („A+“) behält sie ihre bisherige Größe (rem-Werte entsprechend kleiner),
   damit sie das Foto nicht zudeckt – Fließtext und Buttons wachsen mit. */
.stage h1 {
	color: var(--color-white);
	font-size: 2.1rem;
	margin-bottom: 24px;
}

.stage .lead p {
	color: rgba(255, 255, 255, .85);
	font-size: 1.15rem;
	line-height: 1.65;
}
.stage .lead p:last-child {
	margin-bottom: 0;
}

.stage .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

/* Scroll-Hinweis: Label + Linie mit laufendem Goldlicht, klickbar */
.stage-scroll {
	position: absolute;
	left: 50%;
	bottom: 28px;
	z-index: 2;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-accent-300);
	cursor: pointer;
	transition: color .3s ease;
}
.stage-scroll:hover {
	color: var(--color-white);
}
.stage-scroll .label {
	font-family: "Karla", sans-serif;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	animation: scroll-hint-label 2.4s ease-in-out infinite;
}
.stage-scroll .line {
	position: relative;
	display: block;
	width: 1px;
	height: 80px;
	overflow: hidden;
	background: rgba(200, 164, 93, .3);
}
.stage-scroll .line::after {
	content: "";
	position: absolute;
	left: 0;
	top: -50%;
	width: 100%;
	height: 50%;
	background: linear-gradient(180deg, transparent, var(--color-accent-500) 60%, var(--color-white));
	animation: scroll-hint 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
/* Startseite: über dem Schnellzugriff-Streifen */
.stage.has-strip .stage-scroll {
	bottom: 24px;
}
@media (prefers-reduced-motion: reduce) {
	.stage-scroll .label, .stage-scroll .line::after {
		animation: none;
	}
	.stage-scroll .line::after {
		top: 25%;
	}
}

/* Wappen im Hero: unter der Überschrift, vor dem Fließtext */
.stage-crest {
	display: block;
	width: 104px;
	height: auto;
	margin: 4px 0 26px 0;
	filter: drop-shadow(0 8px 20px rgba(10, 19, 34, .45));
}

/* Schnellzugriff: weißer Streifen, der die Bühne unten überlappt */
.stage-strip-wrap {
	position: relative;
	z-index: 2;
	margin-top: -1px;
	/* nur ab Desktop-Breite, wo der Streifen den Hero überlappt – darunter läge
	   er auf weißem Grund und die beim Scrollen weiß werdende Schrift verschwände */
	display: none;
}
.stage-strip {
	--strip-progress: 0;
	display: grid;
	/* minmax(0, 1fr): Spalten dürfen schmaler als ihr Inhalt werden, sonst
	   drückt ein langer Titel den Streifen über den Viewport hinaus */
	grid-template-columns: minmax(0, 1fr);
	/* transparent mit kräftigem Blur; beim Scrollen wird der Streifen
	   durchsichtiger und die Schrift weiß (--strip-progress, siehe scripts.js) */
	background: rgb(255 255 255 / calc(1 - var(--strip-progress)));
	backdrop-filter: blur(50px) saturate(1.1);
	-webkit-backdrop-filter: blur(50px) saturate(1.1);
	border: 1px solid rgb(255 255 255 / calc(.6 - .25 * var(--strip-progress)));
	box-shadow: 0 40px 80px -50px rgb(10 19 34 / calc(.6 * (1 - var(--strip-progress))));
}
.stage-strip .strip-item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 18px 16px;
	border-bottom: 1px solid color-mix(in srgb, var(--color-secondary-200) calc((1 - var(--strip-progress)) * 100%), rgb(255 255 255 / .3));
	border-right: none;
	transition: background-color .3s ease;
}
.stage-strip .strip-item:hover {
	background-color: rgb(255 255 255 / calc(.55 - .43 * var(--strip-progress)));
}
.stage-strip .strip-item .num {
	flex: 0 0 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: color-mix(in srgb, var(--color-accent-300) calc(var(--strip-progress) * 100%), var(--color-accent-700));
	border: 1px solid color-mix(in srgb, var(--color-accent-500) calc(var(--strip-progress) * 100%), var(--color-accent-300));
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.stage-strip .strip-item .label {
	/* zweizeilige Titel gleichmäßig umbrechen, nie trennen */
	text-wrap: balance;
	hyphens: none;
	-webkit-hyphens: none;
	font-weight: 600;
	color: color-mix(in srgb, var(--color-white) calc(var(--strip-progress) * 100%), var(--color-primary-500));
	line-height: 1.25;
	flex-grow: 1;
	min-width: 0;
}
.stage-strip .strip-item .arrow {
	color: color-mix(in srgb, var(--color-accent-300) calc(var(--strip-progress) * 100%), var(--color-accent-700));
	font-size: 1.3rem;
	transition: transform .3s ease;
}
.stage-strip .strip-item:hover .arrow {
	transform: translateX(6px);
}

/* Main */

main > section:first-child:not(.stage) {
	margin-top: 40px;
}

section .sticky {
	position: sticky;
	top: 40px;
	height: auto;
}

.container:first-child:not(.stage) > .row {
	margin-top: 50px;
}
.container:not(.stage) > .row {
	margin-top: 90px;
	margin-bottom: 90px;
}

.hero-content .hero {
	margin: auto;
	padding: 0;
}
.hero-content .content {
	margin-top: auto;
	margin-bottom: auto;
	padding-top: 25px;
	padding-bottom: 25px;
}

/* Rasterspalten (Boxen) behalten den Bootstrap-Innenabstand, damit die negativen
   Ränder ihrer Zeile auf schmalen Bildschirmen nicht über den Rand hinausragen */
.hero-content > .hero.content {
	padding-left: calc(var(--bs-gutter-x) * .5);
	padding-right: calc(var(--bs-gutter-x) * .5);
}

/* Bilder in Inhaltsspalten: scharfe Kante, versetzter Goldrahmen dahinter */
.hero-content .hero > img,
.hero-content .hero > a,
.hero-content .hero > .portrait-frame {
	position: relative;
}
/* vergrößerbares Bild (Lightbox) */
.hero-content .hero > a {
	display: block;
	/* über dem Goldrahmen, der sonst quer über das helle Blatt liefe */
	z-index: 1;
	cursor: zoom-in;
}
.hero-content .hero:not(.content) {
	position: relative;
	padding: 0 18px 18px 0;
}
.hero-content .hero:not(.content)::after {
	content: "";
	position: absolute;
	inset: 18px 0 0 18px;
	border: 1px solid var(--color-accent-500);
	pointer-events: none;
}
.hero-content.hero-first .hero:not(.content) {
	padding: 0 0 18px 18px;
}
.hero-content.hero-first .hero:not(.content)::after {
	inset: 18px 18px 0 0;
}
.hero-content .hero:not(.content) img {
	box-shadow: 0 40px 70px -45px rgba(10, 19, 34, .6);
}

.hero-content .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

/* Kurzer Goldstrich unter freistehenden Abschnittsüberschriften */
.hero-content .content > h2,
.hero-content .content > h3 {
	position: relative;
	padding-bottom: 16px;
	margin-bottom: 22px;
}
/* kein Strich, wenn eine kleine Kennzeichnung darüber steht */
.hero-content .content > small + h2,
.hero-content .content > small + h3 {
	padding-bottom: 0;
}
.hero-content .content > small + h2::after,
.hero-content .content > small + h3::after {
	display: none;
}
.hero-content .content > h2::after,
.hero-content .content > h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 2px;
	background-color: var(--color-accent-500);
}

/* Zentrierter Textblock (Einleitungen) */
.statement {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	padding: 20px 0;
}
.statement h2, .statement h3 {
	margin-bottom: 22px;
}
/* Goldstrich nur ohne kleine Kennzeichnung darüber */
.statement > h2:first-child, .statement > h3:first-child {
	position: relative;
	padding-bottom: 16px;
}
.statement > h2:first-child::after, .statement > h3:first-child::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 48px;
	height: 2px;
	margin-left: -24px;
	background-color: var(--color-accent-500);
}
.statement p {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 1.2rem;
}
/* Großes Zitatzeichen als Zierelement */
.statement::before {
	content: "\201C";
	position: absolute;
	left: 50%;
	top: -50px;
	transform: translateX(-50%);
	font-family: var(--font-serif);
	font-size: 8rem;
	line-height: 1;
	color: var(--color-accent-200);
	pointer-events: none;
}

/* Helle Vollbreiten-Sektion mit dezentem Wappen-Wasserzeichen */

section.light {
	position: relative;
	overflow: hidden;
	background-color: var(--color-secondary-100);
	margin-top: 90px;
}
section.light::before {
	content: "";
	position: absolute;
	right: -140px;
	top: -80px;
	width: 620px;
	height: 700px;
	background: url('/img/logos/wappen.svg') no-repeat center center;
	background-size: contain;
	opacity: .05;
	pointer-events: none;
}
section.light > .container {
	position: relative;
	padding-top: 30px;
	padding-bottom: 40px;
}
section.light .container > .row {
	margin-top: 50px;
	margin-bottom: 50px;
}

/* Checkliste – Aufzählungen mit goldenem Haken */

ul.checklist, .highlight-box ul, .content ul:not(.navbar-nav):not(.dropdown-menu):not(.breadcrumb):not(.situations-list) {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
ul.checklist > li, .highlight-box ul > li, .content ul:not(.navbar-nav):not(.dropdown-menu):not(.breadcrumb):not(.situations-list) > li {
	position: relative;
	padding-left: 34px;
	margin-bottom: 12px;
	max-width: 66ch;
}
ul.checklist > li::before, .highlight-box ul > li::before, .content ul:not(.navbar-nav):not(.dropdown-menu):not(.breadcrumb):not(.situations-list) > li::before {
	content: "\f00c";
	font-family: "Font Awesome 6 Pro";
	font-weight: 300;
	position: absolute;
	left: 0;
	top: .1em;
	color: var(--color-accent-700);
}

/* Situationen, in denen sich Menschen wiederfinden: zweispaltig, Linien-Icon in Gold */
ul.situations-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: grid;
	/* minmax(0, …): ein langes Wort darf die Spalte nicht über den Rand drücken */
	grid-template-columns: minmax(0, 1fr);
	gap: 18px 36px;
}
ul.situations-list > li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
	color: var(--color-primary-700);
	font-weight: 500;
	line-height: 1.5;
}
ul.situations-list > li i {
	flex: 0 0 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--color-accent-700);
	border: 1px solid var(--color-accent-300);
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
/* erste Textzeile optisch auf Icon-Mitte: Zeilenhöhe 28px in 44px Rahmen,
   Versalhöhe sitzt etwas unter der Zeilenmitte, daher knapp weniger als 8px */
ul.situations-list > li span {
	padding-top: 5px;
	min-width: 0;
	/* lange Wörter (z. B. Vorfälligkeitsentschädigung) bei großer Schrift trennen */
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}
/* zweispaltig, wenn genug Breite: gestapelt ab Tablet, neben dem Bild erst ab 1400px */
@media (min-width: 576px) and (max-width: 1399px) {
	ul.situations-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1400px) {
	ul.situations-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 32px;
	}
}
/* im Zweispalter neben dem Bild: die Liste darf die ganze Spalte nutzen */
.hero-content .content ul.situations-list {
	max-width: none;
}

/* ============================================================
   Lebenssituationen – angeschnittene Kacheln mit Goldrahmen
   ============================================================ */

.situations .tile-wrap {
	position: relative;
	width: 100%;
	display: flex;
	padding: 0 14px 14px 0;
}
/* versetzter Goldrahmen hinter der Kachel */
.situations .tile-wrap::after {
	content: "";
	position: absolute;
	inset: 14px 0 0 14px;
	border: 1px solid var(--color-accent-500);
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
	transition: inset .35s cubic-bezier(.22, 1, .36, 1);
	pointer-events: none;
}
.situations .tile-wrap:hover::after {
	inset: 8px 6px 6px 8px;
}

.situations .situation-tile {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var(--color-white);
	border: 1px solid var(--color-secondary-200);
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.situations .tile-wrap:hover .situation-tile {
	transform: translate(-4px, -4px);
}
.situations .tile-image {
	position: relative;
	overflow: hidden;
	background: var(--color-primary-800);
}
.situations .tile-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}
.situations .tile-wrap:hover .tile-image img {
	transform: scale(1.05);
}
.situations .tile-icon {
	position: absolute;
	left: 18px;
	bottom: 18px;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: var(--color-white);
	background: rgba(10, 19, 34, .55);
	border: 1px solid rgba(200, 164, 93, .7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.situations .tile-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 28px 28px 26px 28px;
}
.situations .tile-body small {
	margin-bottom: 12px;
	font-size: .9rem;
	color: var(--color-primary-500);
}
/* Vier Kacheln (Startseite): unter 1500px zwei je Reihe mit flacherem Bild,
   ab 1500px vier nebeneinander – derselbe Umbruchpunkt wie der Schnellzugriff
   im Hero. Titel und Text werden in den schmalen Kacheln nicht getrennt. */
.situations .tile-body small, .situations .tile-body p {
	hyphens: none;
	-webkit-hyphens: none;
}
@media (min-width: 768px) and (max-width: 1499px) {
	.situations.quad .tile-image img {
		aspect-ratio: 16 / 9;
	}
}
@media (min-width: 1500px) {
	.situations.quad {
		--bs-gutter-x: 20px;
	}
	.situations.quad > [class*="col-"] {
		flex: 0 0 25%;
		width: 25%;
		min-width: 0;
	}
	.situations.quad .tile-wrap {
		padding: 0 10px 10px 0;
	}
	.situations.quad .tile-wrap::after {
		inset: 10px 0 0 10px;
	}
	.situations.quad .tile-body {
		padding: 24px 22px 22px 22px;
	}
	.situations.quad .tile-body small {
		font-size: .82rem;
	}
	.situations.quad .tile-body p {
		font-size: 1rem;
		line-height: 1.55;
	}
}
.situations .tile-body p {
	flex-grow: 1;
	font-weight: 400;
	margin-bottom: 16px;
	color: var(--color-text);
}
.situations .more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .82rem;
	color: var(--color-accent-900);
}
.situations .more .arrow {
	transition: transform .3s ease;
}
.situations .tile-wrap:hover .more .arrow {
	transform: translateX(6px);
}

/* Vorteile / Leistungsbausteine */

.feature-grid .feature {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	width: 100%;
	padding: 30px 28px;
	background-color: var(--color-white);
	border: 1px solid var(--color-secondary-200);
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.feature-grid i.highlight {
	font-size: 30px;
	color: var(--color-accent-700);
	margin-bottom: 20px;
}
.feature-grid .title {
	margin-bottom: 8px;
}
.feature-grid .title h3 {
	margin: 0;
	font-size: 1.15rem;
}
.feature-grid .description p {
	margin-bottom: 0;
	font-size: 1.02rem;
	line-height: 1.55;
}

/* Partner – Boxen mit Logo, Text und Link */

.partner-intro {
	max-width: 46rem;
	margin-bottom: 50px;
}

.partner-grid .partner {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var(--color-white);
	border: 1px solid var(--color-secondary-200);
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
	transition: border-color .3s ease;
}
.partner-grid .partner:hover {
	border-color: var(--color-accent-500);
}
.partner-grid .partner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 170px;
	padding: 34px 40px;
	border-bottom: 1px solid var(--color-secondary-200);
	background-color: var(--color-secondary-100);
}
.partner-grid .partner-logo img {
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.partner-grid .partner-logo span {
	font-family: var(--font-serif);
	font-size: 1.2rem;
	letter-spacing: .08em;
	color: var(--color-primary-500);
	text-align: center;
}
.partner-grid .partner-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 28px 28px 26px 28px;
}
.partner-grid .partner-body small {
	margin-bottom: 10px;
}
.partner-grid .partner-body h3 {
	margin: 0 0 12px 0;
	font-size: 1.3rem;
}
.partner-grid .partner-body p {
	flex-grow: 1;
	max-width: none;
	margin-bottom: 18px;
	font-size: 1.02rem;
	line-height: 1.55;
}
.partner-grid .more {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .82rem;
	color: var(--color-accent-900);
}
.partner-grid .more .arrow {
	transition: transform .3s ease;
}
.partner-grid .more:hover .arrow {
	transform: translateX(6px);
}

/* Kundenstimmen – auf Navy */

section.quotes {
	position: relative;
	overflow: hidden;
	margin-top: 90px;
	padding: 80px 0;
	color: var(--color-white);
	background: var(--color-primary-700);
	background-image: linear-gradient(160deg, var(--color-primary-600) 0%, var(--color-primary-900) 100%);
}
section.quotes > .container {
	position: relative;
}
/* direkt nach der hellen Sektion: keine weiße Lücke dazwischen */
section.light + section.quotes {
	margin-top: 0;
}

/* Endlos-Band, links und rechts weich ausgeblendet. Es läuft von selbst und
   lässt sich ziehen/wischen (Bewegung per Script, siehe initQuotes). */
.quotes-marquee {
	position: relative;
	overflow: hidden;
	/* senkrechtes Scrollen der Seite bleibt beim Wischen erhalten */
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}
.quotes-marquee.dragging {
	cursor: grabbing;
}
/* Ausblenden links/rechts als Verlaufs-Overlays statt mask-image: eine Maske
   würde den backdrop-filter der Karten aushebeln */
.quotes-marquee::before, .quotes-marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	/* breite Ausblendzonen: das sichtbare Band wirkt schmaler */
	width: 26%;
	z-index: 2;
	pointer-events: none;
}
.quotes-marquee::before {
	left: 0;
	background: linear-gradient(90deg, var(--color-primary-700) 0%, rgba(20, 37, 61, .92) 30%, rgba(20, 37, 61, 0) 100%);
}
.quotes-marquee::after {
	right: 0;
	background: linear-gradient(270deg, var(--color-primary-900) 0%, rgba(10, 19, 34, .92) 30%, rgba(10, 19, 34, 0) 100%);
}
.quotes-track {
	display: flex;
	width: max-content;
	will-change: transform;
}
.quotes-controls {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: -10px 0 16px 0;
}
.quotes-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, .35);
	background: transparent;
	color: var(--color-white);
	font-size: 1rem;
}
.quotes-nav:hover {
	border-color: var(--color-accent-500);
	color: var(--color-accent-300);
}
/* Play/Pause: gleiches Quadrat wie die Pfeile, etwas abgesetzt */
.quotes-toggle {
	margin-right: 8px;
	font-size: .85rem;
}
.quotes-group {
	display: flex;
	gap: 24px;
	padding-right: 24px;
}
.quotes-group .quote {
	flex: 0 0 380px;
	width: 380px;
	height: auto;
}
/* Smartphone: eine Karte passt ganz in den sichtbaren Bereich, damit sie sich
   beim Wischen in Ruhe lesen lässt; die Ausblendzonen sind entsprechend schmal */
@media (max-width: 767px) {
	.quotes-group {
		gap: 16px;
		padding-right: 16px;
	}
	.quotes-group .quote {
		flex-basis: 78vw;
		width: 78vw;
	}
	.quotes-marquee::before, .quotes-marquee::after {
		width: 9%;
	}
}
section.quotes h2 {
	color: var(--color-white);
}
section.quotes small {
	color: var(--color-accent-300);
}
section.quotes .quotes-subline {
	margin: -6px auto 0 auto;
	text-align: center;
	font-size: .95rem;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .7);
}

.quote {
	margin: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 40px 30px 30px 30px;
	height: 100%;
	background-color: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
	border-top: 3px solid var(--color-accent-500);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.quote blockquote {
	margin: 0;
	font-family: "Karla", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.12rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .9);
}
.quote figcaption {
	/* Name und Quelle einheitlich am unteren Rand */
	margin-top: auto;
	padding-top: 18px;
	display: flex;
	flex-direction: column;
	font-size: .95rem;
}
.quote figcaption strong {
	color: var(--color-accent-300);
	font-family: var(--font-serif);
	font-weight: 500;
	letter-spacing: .04em;
}
.quote figcaption span {
	opacity: .75;
}

/* Vollbreiten-Band als Abschluss-CTA (Foto mit Navy-Verlauf) */

section.band {
	position: relative;
	margin: 90px 0 0 0;
	background-size: cover;
	background-position: center center;
	color: var(--color-white);
	overflow: hidden;
}
section.band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 28, 47, .97) 0%, rgba(15, 28, 47, .88) 48%, rgba(15, 28, 47, .3) 100%);
}
/* diagonale Goldlinie als Zäsur */
section.band::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 58%;
	width: 1px;
	background: linear-gradient(180deg, transparent, var(--color-accent-500), transparent);
	transform: skewX(-12deg);
	opacity: .7;
}
section.band > .container {
	position: relative;
	z-index: 1;
	padding-top: 100px;
	padding-bottom: 100px;
}
section.band > .container > .row {
	margin-top: 0;
	margin-bottom: 0;
}
section.band small {
	color: var(--color-accent-300);
}
section.band h2, section.band h3, section.band p, section.band li {
	color: var(--color-white);
}
section.band h2 {
	font-size: 2.3rem;
}
section.band p {
	color: rgba(255, 255, 255, .82);
}
section.band .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

/* Ablauf-Schritte */

ol.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	counter-reset: step;
}

ol.steps .step {
	position: relative;
	counter-increment: step;
	padding-left: 64px;
	padding-bottom: 35px;
}
ol.steps .step:last-child {
	padding-bottom: 0;
}

ol.steps .step-marker {
	position: absolute;
	left: 0;
	top: 0;
	width: 42px;
	height: 42px;
	border: 1px solid var(--color-accent-500);
	color: var(--color-primary-500);
	font-family: var(--font-serif);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
ol.steps .step-marker::before {
	content: counter(step);
}

ol.steps .step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 48px;
	bottom: 8px;
	width: 1px;
	background: linear-gradient(180deg, var(--color-accent-300), var(--color-accent-100));
}

ol.steps .step-body h3 {
	margin-bottom: 6px;
	padding-top: 7px;
}
ol.steps .step-body p {
	margin-bottom: 0;
}

/* Prozess-Abschnitte (Immobilie verkaufen) – riesige, nur umrissene Serifen-Ziffer */

.process-number {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 6.5rem;
	line-height: .85;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--color-accent-500);
	margin-bottom: 14px;
	margin-left: -4px;
	opacity: .9;
	user-select: none;
}

/* Akkordeon */

.accordion {
	--bs-accordion-border-color: transparent;
	--bs-accordion-btn-focus-box-shadow: none;
	--bs-accordion-active-bg: transparent;
	--bs-accordion-active-color: var(--color-primary-500);
	--bs-accordion-btn-bg: transparent;
	--bs-accordion-bg: transparent;
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a4823f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a4823f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion .accordion-item {
	background-color: var(--color-white);
	border: 1px solid var(--color-secondary-200);
	border-radius: 0;
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color .25s ease;
}
.accordion .accordion-item:last-child {
	margin-bottom: 0;
}
.accordion .accordion-item:hover {
	border-color: var(--color-accent-300);
}

.accordion .accordion-button {
	background-color: transparent;
	padding: 18px 22px;
	font-family: "Karla", sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.35;
	color: var(--color-primary-500);
	box-shadow: none;
	border-radius: 0;
	transition: color .25s ease;
}
.accordion .accordion-button:not(.collapsed) {
	color: var(--color-accent-700);
	box-shadow: none;
}
.accordion .accordion-button::after {
	margin-left: auto;
	transition: transform .3s ease;
}

.accordion .collapse, .accordion .collapsing {
	border: none;
	padding-left: 0;
	padding-right: 0;
}
.accordion .accordion-body {
	padding: 0 22px 20px 22px;
}
.accordion .accordion-body p:last-child {
	margin-bottom: 0;
}

/* Hinweis-Box */

.highlight-box {
	display: flex;
	gap: 20px;
	padding: 28px 30px;
	background-color: var(--color-secondary-100);
	border-left: 3px solid var(--color-accent-500);
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.highlight-box .highlight-icon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	background-color: transparent;
	border: 1px solid var(--color-accent-500);
	display: flex;
	align-items: center;
	justify-content: center;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.highlight-box .highlight-icon i {
	font-size: 20px;
	color: var(--color-accent-700);
}
/* gestapelte Hinweisboxen als ein zusammenhängender Block */
.highlight-stack {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.highlight-stack > div + div .highlight-box {
	clip-path: none;
	border-top: 1px solid rgba(200, 164, 93, .35);
}
.highlight-box ul {
	column-gap: 40px;
}
.highlight-box .highlight-body h3 {
	margin-bottom: 8px;
}
.highlight-box .highlight-body p:last-child {
	margin-bottom: 0;
}

/* Über mich – Portrait mit Goldrahmen und angeschnittener Ecke */

.portrait-frame {
	position: relative;
}
.portrait-frame img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

/* Kontakt */

.contact-details .detail {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-secondary-200);
}
.contact-details .detail:last-child {
	border-bottom: none;
}
.contact-details .detail i {
	flex: 0 0 24px;
	font-size: 20px;
	color: var(--color-accent-700);
	margin-top: 4px;
}
.contact-details .detail span {
	display: block;
	font-size: .95rem;
	color: var(--color-secondary-700);
}

.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);
}

/* Footer */

footer {
	position: relative;
	margin-top: 0;
}
/* feine goldene Haarlinie mit Verlauf, wie an der Menüspalte */
footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(200, 164, 93, .1), rgba(200, 164, 93, .6) 50%, rgba(200, 164, 93, .1));
	z-index: 1;
}

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

footer .container {
	position: relative;
	overflow: hidden;
	color: var(--color-white);
	/* seitlich derselbe Innenabstand wie alle anderen Container */
	padding: 70px calc(var(--bs-gutter-x, 1.5rem) * .5) 25px;
}

footer .container > .row {
	margin-top: 0;
	margin-bottom: 0;
}

/* Wappen als dezentes Wasserzeichen */
footer .container::after {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -90px;
	width: 380px;
	height: 420px;
	background: url('/img/logos/wappen.white.svg') no-repeat center center;
	background-size: contain;
	opacity: .05;
	pointer-events: none;
}
footer .container > * {
	position: relative;
	z-index: 1;
}

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

footer p, footer small {
	color: var(--color-white);
}

footer .footer-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 55px;
	padding: 28px 32px;
	background-color: rgba(255, 255, 255, .04);
	border: 1px solid rgba(200, 164, 93, .45);
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
footer .footer-cta strong {
	display: block;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 1.35rem;
	line-height: 1.2;
	margin-bottom: 4px;
}
footer .footer-cta-text span {
	opacity: .85;
}
footer .footer-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
footer .button.style-outline {
	color: var(--color-white);
	background-color: transparent;
	border-color: rgba(255, 255, 255, .55);
}
footer .button.style-outline:hover {
	background-color: rgba(255, 255, 255, .14);
	border-color: var(--color-white);
}

footer .footer-main > [class*="col-"] {
	margin-bottom: 35px;
}

footer .footer-col > small {
	color: var(--color-accent-300);
	margin-bottom: 18px;
	white-space: nowrap;
}

footer .footer-brand p {
	margin-top: 20px;
	max-width: 36ch;
	opacity: .85;
}
footer .footer-brand img {
	max-width: 280px;
}
footer .footer-brand .slogan {
	color: var(--color-white);
	margin-top: 18px;
	font-size: .9rem;
}
footer .footer-brand .slogan::after {
	display: none;
}
footer .footer-seal {
	display: inline-block;
	margin-top: 24px;
	max-width: 100%;
}
footer .footer-seal img {
	height: auto;
	transition: transform .3s ease;
}
footer .footer-seal:hover img {
	transform: scale(1.04);
}

footer .footer-col nav a {
	position: relative;
	padding: 4px 0 4px 16px;
	font-weight: 400;
	transition: color .25s ease;
}
footer .footer-col nav a::before {
	content: "\203A";
	position: absolute;
	left: 0;
	top: 4px;
	color: var(--color-accent-500);
	opacity: .7;
	transition: opacity .25s ease, transform .25s ease;
}
footer .footer-col nav a:hover::before {
	opacity: 1;
	transform: translateX(3px);
}

footer .footer-col .detail {
	display: flex;
	gap: 12px;
	margin-bottom: 10px;
}
footer .footer-col .detail i {
	flex: 0 0 20px;
	margin-top: 5px;
	color: var(--color-accent-500);
}

footer .footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 25px;
	align-items: center;
	justify-content: space-between;
	margin-top: 45px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .15);
	font-size: .9rem;
	opacity: .85;
}
footer .footer-bottom nav {
	display: flex;
	gap: 25px;
}
footer .footer-bottom nav a {
	display: inline-block !important;
}

/* Panel (Index-Navigation, z. B. FAQ) */

.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-accent-300) !important;
}
.panel .index {
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

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

/* Lightbox: die Bibliothek legt das Bild in einen 16:9-Kasten mit schwarzem
   Hintergrund (Inline-Stil). Bei anderen Seitenverhältnissen blieben links und
   rechts schwarze Balken – der Kasten wird durchsichtig, das Bild steht frei vor
   dem abgedunkelten Hintergrund. */
.modal.lightbox .ratio {
	background-color: transparent !important;
}
.lightbox-caption em {
	font-style: normal;
	font-weight: 600;
}
@media (min-width: 1200px) {
	.modal-xl {
		--bs-modal-width: 1480px;
	}
}

.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;
	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-accent-700);
	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);
}

section.gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: opacity .25s ease;
}
section.gallery a:hover img {
	opacity: .85;
}

.highlight-box, .accordion, ol.steps {
	text-align: left;
}

@media (min-width: 1400px) {
	.hero-content .content:has(> .sticky) {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0;
	}
}

.breadcrumb {
	margin-bottom: 0;
}

/* Statement ohne Zier-Zitatzeichen */
.statement.plain::before {
	display: none;
}

/* Impressum / Datenschutz: lange Wörter in Überschriften trennen statt überlaufen */
section.legal h1, section.legal h2, section.legal h3 {
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

/* Impressum / Datenschutz: volle Content-Breite */
section.legal p, section.legal li {
	max-width: none;
}

/* Schriftgrößen-Umschalter in der Menüspalte */
.text-size {
	display: flex;
	align-items: center;
	gap: 6px;
}
.text-size-label {
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
	margin-right: 4px;
}
.text-size button {
	min-width: 38px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid rgba(255, 255, 255, .35);
	background: transparent;
	color: var(--color-white);
	font-family: var(--font-serif);
	font-size: .9rem;
	line-height: 1;
	transition: background-color .25s ease, border-color .25s ease;
}
.text-size button sup {
	font-family: "Karla", sans-serif;
	font-size: .6em;
	top: -.5em;
}
.text-size button:hover, .text-size button[aria-pressed="true"] {
	background-color: rgba(255, 255, 255, .14);
	border-color: var(--color-accent-500);
}

/* Edle Kundenzitate auf den Themenseiten */
section.light.pull-quotes > .container {
	padding-top: 60px;
	padding-bottom: 70px;
}
section.light.pull-quotes .container > .row {
	margin-top: 0;
	margin-bottom: 0;
}
.pull-quotes-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 44px;
	max-width: 1100px;
	margin: 0 auto;
}
.pull-quote {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	text-align: center;
}
.pull-quote .quote-mark {
	display: block;
	font-family: var(--font-serif);
	font-size: 4.5rem;
	line-height: .6;
	color: var(--color-accent-500);
	margin-bottom: 14px;
}
.pull-quote blockquote {
	flex-grow: 1;
	margin: 0 auto;
	max-width: 44ch;
	font-family: "Karla", sans-serif;
	font-weight: 300;
	font-size: 1.45rem;
	line-height: 1.5;
	color: var(--color-primary-700);
}
.pull-quote figcaption {
	margin-top: 24px;
	font-family: var(--font-serif);
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--color-primary-500);
}
@media (min-width: 992px) {
	.pull-quotes-grid {
		grid-template-columns: 1fr 1fr;
		gap: 70px;
	}
	.pull-quote + .pull-quote::before {
		content: "";
		position: absolute;
		left: -35px;
		top: 12%;
		bottom: 12%;
		width: 1px;
		background: linear-gradient(180deg, transparent, var(--color-accent-300), transparent);
	}
}