/* ==========================================================================
   Font faces
   Nunito           -> Überschriften (Headings)
   Playfair Display -> Body, p, Captions (Standard)
   ========================================================================== */

/* --- Nunito (variable) --- */
@font-face {
	font-family: "Nunito Sans";
	src: url("../Fonts/nunito_sans/woff2/NunitoSans-VariableFont_YTLC\,opsz\,wdth\,wght.woff2") format("woff2"),
		url("../Fonts/nunito_sans/ttf/NunitoSans-VariableFont_YTLC\,opsz\,wdth\,wght.ttf") format("truetype");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Nunito Sans";
	src: url("../Fonts/nunito_sans/woff2/NunitoSans-Italic-VariableFont_YTLC\,opsz\,wdth\,wght.woff2") format("woff2"),
		url("../Fonts/nunito_sans/ttf/NunitoSans-Italic-VariableFont_YTLC\,opsz\,wdth\,wght.ttf") format("truetype");
	font-weight: 200 1000;
	font-style: italic;
	font-display: swap;
}

/* --- Playfair Display (variable) --- */
@font-face {
	font-family: "Playfair Display";
	src: url("../Fonts/playfair_display/woff2/PlayfairDisplay-VariableFont_wght.woff2") format("woff2"),
		url("../Fonts/playfair_display/ttf/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Playfair Display";
	src: url("../Fonts/playfair_display/woff2/PlayfairDisplay-Italic-VariableFont_wght.woff2") format("woff2"),
		url("../Fonts/playfair_display/ttf/PlayfairDisplay-Italic-VariableFont_wght.ttf") format("truetype");
	font-weight: 400 900;
	font-style: italic;
	font-display: swap;
}

/* ==========================================================================
   root variables
   ========================================================================== */

:root {
	--font-family-headings: "Playfair Display", "Segoe UI", Arial, sans-serif;
	--font-family-standard: "Nunito Sans", Georgia, serif;

	--brand-color-scarlet-flame: #FF3F16;
	--brand-color-scarlet-flame-rgb: 255, 63, 22;
	--brand-color-scarlet-flame-light: #FF6A4D;
	--brand-color-scarlet-flame-light-rgb: 255, 106, 77;
	--brand-color-scarlet-flame-dark: #B32A0D;
	--brand-color-scarlet-flame-dark-rgb: 179, 42, 13;


	--brand-color-aesthetic-lavender: #DAADF4;
	--brand-color-aesthetic-lavender-rgb: 218, 173, 244;
	--brand-color-aesthetic-lavender-light: #E9D9F8;
	--brand-color-aesthetic-lavender-light-rgb: 233, 217, 248;
	--brand-color-aesthetic-lavender-dark: #A67ED9;
	--brand-color-aesthetic-lavender-dark-rgb: 166, 126, 217;

	--brand-color-mirage: #111826;
	--brand-color-mirage-rgb: 17, 24, 38;
	--brand-color-mirage-light: #1A2030;
	--brand-color-mirage-light-rgb: 26, 32, 48;
	--brand-color-mirage-dark: #0D111C;
	--brand-color-mirage-dark-rgb: 13, 17, 28;


	--bs-body-font-family: var(--font-family-standard);
	--bs-body-font-size: 1rem;
	--bs-body-font-weight: 400;
	--bs-body-line-height: 1.5;
	--bs-body-color: var(--brand-color-mirage);
	--bs-body-color-rgb: var(--brand-color-mirage-rgb);
	--bs-body-bg: #fff;
	--bs-body-bg-rgb: 255, 255, 255;

	--bs-primary-color: var(--brand-color-scarlet-flame);
	--bs-primary-color-rgb: var(--brand-color-scarlet-flame-rgb);
	--bs-primary-bg: #fff;
	--bs-primary-bg-rgb: 255, 255, 255;

	--bs-emphasis-color: var(--brand-color-mirage);
	--bs-emphasis-color-rgb: var(--brand-color-mirage-rgb);
	--bs-emphasis-bg: #fff;
	--bs-emphasis-bg-rgb: 255, 255, 255;

	--bs-secondary-color: var(--brand-color-aesthetic-lavender);
	--bs-secondary-color-rgb: var(--brand-color-aesthetic-lavender-rgb);
	--bs-secondary-bg: #e9ecef;
	--bs-secondary-bg-rgb: var(--brand-color-mirage-rgb);

	--bs-tertiary-color: var(--brand-color-mirage);
	--bs-tertiary-color-rgb: var(--brand-color-mirage-rgb);
	--bs-tertiary-bg: #f8f9fa;
	--bs-tertiary-bg-rgb: 248, 249, 250;

	--bs-heading-color: inherit;

	--bs-link-color: var(--brand-color-scarlet-flame);
	--bs-link-color-rgb: var(--brand-color-scarlet-flame-rgb);
	--bs-link-decoration: underline;
	--bs-link-hover-color: var(--brand-color-scarlet-flame-dark);
	--bs-link-hover-color-rgb: var(--brand-color-scarlet-flame-dark-rgb);
	--bs-code-color: var(--brand-color-aesthetic-lavender);

	/* ==========================================================================
       bs override variables
       ========================================================================== */
	--bs-primary: var(--brand-color-scarlet-flame);
	--bs-primary-rgb: var(--brand-color-scarlet-flame-rgb);
	--bs-secondary: var(--brand-color-aesthetic-lavender);
	--bs-secondary-rgb: var(--brand-color-aesthetic-lavender-rgb);

	--bs-gradient: linear-gradient(180deg, rgba(var(--bs-secondary-rgb), 1), rgba(var(--bs-primary-rgb), 1));

	--bs-font-size-sm: 0.56rem;
}

html {
	scroll-behavior: auto !important;
}

/* XS: unter 576px */
html {
	font-size: 16px;
}

/* SM: ab 576px */
@media (min-width: 576px) {
	html {
		font-size: 17px;
	}
}

/* MD: ab 768px */
@media (min-width: 768px) {
	html {
		font-size: 19px;
	}
}

/* LG: ab 992px */
@media (min-width: 992px) {
	html {
		font-size: 21px;
	}
}

/* XL: ab 1200px */
@media (min-width: 1200px) {
	html {
		font-size: 23px;
	}
}

/* XXL: ab 1400px */
@media (min-width: 1400px) {
	html {
		font-size: 25px;
	}
}


/* ==========================================================================
   Scroll-Sperre während des Ladens der Canvas-Sequenz
   ========================================================================== */

html.is-sequence-loading,
html.is-sequence-loading body {
	overflow: hidden !important;
	overscroll-behavior: none;
}

html.is-sequence-loading {
	height: 100%;
}

html.is-sequence-loading body {
	height: 100%;
	touch-action: none;
}

/* Optional: Mauszeiger zeigt den Ladevorgang an */
html.is-sequence-loading,
html.is-sequence-loading * {
	cursor: wait !important;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/* Standard: Body, Absätze, Bildunterschriften -> Playfair Display */
body,
p,
figcaption,
.caption {
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-font-size);
	font-weight: var(--bs-body-font-weight);
	line-height: var(--bs-body-line-height);
}

/* Überschriften -> Nunito */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-headings);
}

.h1,
h1,
.h2,
h2,
.h3,
h3,
.h4,
h4,
.h5,
h5 {

	--bs-gutter-y: 1.6rem;
	word-wrap: normal;
	hyphens: none;
	margin-bottom: var(--bs-gutter-y);
}

p,
.p {
	--bs-gutter-y: 1rem;
	margin-bottom: var(--bs-gutter-y);
}

p:last-of-type,
.p:last-of-type {
	--bs-gutter-y: 1.6rem;
}

.text-right {
	text-align: right !important;
}

/* ==========================================================================
   Display 1 // Hero Captions
   ========================================================================== */

.header-center h1,
.display_1_hero_caption {
	font-family: var(--font-family-headings);
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.05;
	color: var(--brand-color-mirage);
	margin-bottom: 2rem;
}

/* sm >= 576px */
@media (min-width: 576px) {

	.header-center h1,
	.display_1_hero_caption {
		font-size: 4rem;
	}
}

/* md >= 768px */
@media (min-width: 768px) {

	.header-center h1,
	.display_1_hero_caption {
		font-size: 5rem;
	}
}

/* lg >= 992px */
@media (min-width: 992px) {

	.header-center h1,
	.display_1_hero_caption {
		font-size: 6rem;
	}
}

/* xl >= 1200px */
@media (min-width: 1200px) {

	.header-center h1,
	.display_1_hero_caption {
		font-size: 7rem;
	}
}

/* xxl >= 1400px */
@media (min-width: 1400px) {

	.header-center h1,
	.display_1_hero_caption {
		font-size: 8rem;
	}
}


/* ==========================================================================
   Display 2 // Hero Captions
   ========================================================================== */

.header-center h2,
.display_2_hero_caption {
	font-family: var(--font-family-standard);
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.1;
	color: var(--brand-color-mirage);
	margin-bottom: 2rem;
}

/* sm >= 576px */
@media (min-width: 576px) {

	.header-center h2,
	.display_2_hero_caption {
		font-size: 2.6rem;
	}
}

/* md >= 768px */
@media (min-width: 768px) {

	.header-center h2,
	.display_2_hero_caption {
		font-size: 3.3rem;
	}
}

/* lg >= 992px */
@media (min-width: 992px) {

	.header-center h2,
	.display_2_hero_caption {
		font-size: 4rem;
	}
}

/* xl >= 1200px */
@media (min-width: 1200px) {

	.header-center h2,
	.display_2_hero_caption {
		font-size: 4.8rem;
	}
}

/* xxl >= 1400px */
@media (min-width: 1400px) {

	.header-center h2,
	.display_2_hero_caption {
		font-size: 5.6rem;
	}
}

.h1 {
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.2;
	color: var(--brand-color-mirage);
	margin-bottom: 2rem;
}

.h2_large {
	font-size: 1.36rem;
	font-weight: bold;
	line-height: 1.2;
	color: var(--brand-color-mirage);
	margin-bottom: 2rem;
}


.h4_normal {

	font-family: var(--font-family-standard);
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.2;
	color: var(--brand-color-mirage);
}

.font-family-standard {
	font-family: var(--font-family-standard);
}

div:has(.has_h4_normal) h4 {
	font-family: var(--font-family-standard);
	break-inside: avoid;
	word-break: auto-phrase;
}

div:has(.h2_hash) h2::before {
	content: "# ";
	font-size: 5rem;
	font-weight: bold;
	line-height: 1.2;
	color: var(--brand-color-mirage);
}

.mv-text {
	font-family: var(--font-family-standard);
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.2;
	color: var(--brand-color-mirage);
}

/* ==========================================================================
   Layout
   ========================================================================== */
.w-1300 {
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
}

.h-75 {
	height: 75vh !important;
}

.frame-layout-1 {
	background-color: var(--bs-white);
	padding-top: 0;
	padding-bottom: 0;
}

.frame-layout-2 {

	position: relative;
	z-index: 1;
	isolation: isolate;

	background: var(--bs-gradient);
	border-radius: 0;
}

section>.container:has(.frame-layout-2) {
	max-width: 100% !important;
	padding-left: 0;
	padding-right: 0;
}

.frame-layout-3 {
	background-color: var(--brand-color-mirage);
	max-width: 100%;
}

.frame-layout-1 .section,
.frame-layout-2 .section,
.frame-layout-3 .section {
	padding-top: 5.2rem;
	padding-bottom: 5.2rem;
}


section:has(.frame-type-carouselimage.frame-layout-4) .container-fluid {
	padding-left: 0;
	padding-right: 0;
}

/* XS – unter 576px */
.frame-layout-1:has(.frame-type-parallax_gallery) .row,
.frame-layout-2:has(.frame-type-parallax_gallery) .row,
.frame-layout-3:has(.frame-type-parallax_gallery) .row {
	display: flex;
	flex-direction: column;
}

.frame-layout-1:has(.frame-type-parallax_gallery) .row>div:first-child,
.frame-layout-2:has(.frame-type-parallax_gallery) .row>div:last-child,
.frame-layout-3:has(.frame-type-parallax_gallery) .row>div:first-child {
	order: 2;
}

.frame-layout-1:has(.frame-type-parallax_gallery) .row>div:last-child,
.frame-layout-2:has(.frame-type-parallax_gallery) .row>div:first-child,
.frame-layout-3:has(.frame-type-parallax_gallery) .row>div:last-child {
	order: 1;
}

/* SM – ab 576px */
@media (min-width: 576px) {

	.frame-layout-1:has(.frame-type-parallax_gallery) .row,
	.frame-layout-2:has(.frame-type-parallax_gallery) .row,
	.frame-layout-3:has(.frame-type-parallax_gallery) .row {
		display: flex;
		flex-direction: column;
	}

	.frame-layout-1:has(.frame-type-parallax_gallery) .row>div:first-child,
	.frame-layout-2:has(.frame-type-parallax_gallery) .row>div:last-child,
	.frame-layout-3:has(.frame-type-parallax_gallery) .row>div:first-child {
		order: 2;
	}

	.frame-layout-1:has(.frame-type-parallax_gallery) .row>div:last-child,
	.frame-layout-2:has(.frame-type-parallax_gallery) .row>div:first-child,
	.frame-layout-3:has(.frame-type-parallax_gallery) .row>div:last-child {
		order: 1;
	}
}


/* MD – ab 768px */
@media (min-width: 768px) {

	.frame-layout-1:has(.frame-type-parallax_gallery) .row,
	.frame-layout-2:has(.frame-type-parallax_gallery) .row,
	.frame-layout-3:has(.frame-type-parallax_gallery) .row {
		display: flex;
		flex-direction: column;
	}

	.frame-layout-1:has(.frame-type-parallax_gallery) .row>div:first-child,
	.frame-layout-2:has(.frame-type-parallax_gallery) .row>div:last-child,
	.frame-layout-3:has(.frame-type-parallax_gallery) .row>div:first-child {
		order: 2;
	}

	.frame-layout-1:has(.frame-type-parallax_gallery) .row>div:last-child,
	.frame-layout-2:has(.frame-type-parallax_gallery) .row>div:first-child,
	.frame-layout-3:has(.frame-type-parallax_gallery) .row>div:last-child {
		order: 1;
	}
}


/* LG – ab 992px */
@media (min-width: 992px) {

	/* XS – unter 576px */
	.frame-layout-1:has(.frame-type-parallax_gallery) .row,
	.frame-layout-2:has(.frame-type-parallax_gallery) .row,
	.frame-layout-3:has(.frame-type-parallax_gallery) .row {
		display: flex;
		flex-direction: column;
	}

	.frame-layout-1:has(.frame-type-parallax_gallery) .row>div:first-child,
	.frame-layout-2:has(.frame-type-parallax_gallery) .row>div:last-child,
	.frame-layout-3:has(.frame-type-parallax_gallery) .row>div:first-child {
		order: 2;
	}

	.frame-layout-1:has(.frame-type-parallax_gallery) .row>div:last-child,
	.frame-layout-2:has(.frame-type-parallax_gallery) .row>div:first-child,
	.frame-layout-3:has(.frame-type-parallax_gallery) .row>div:last-child {
		order: 1;
	}
}


/* XL – ab 1200px */
@media (min-width: 1200px) {

	/* XS – unter 576px */
	.frame-layout-1:has(.frame-type-parallax_gallery) .row,
	.frame-layout-2:has(.frame-type-parallax_gallery) .row,
	.frame-layout-3:has(.frame-type-parallax_gallery) .row {
		display: flex;
		flex-direction: row;
	}

	.frame-layout-1:has(.frame-type-parallax_gallery) .row>div:first-child,
	.frame-layout-2:has(.frame-type-parallax_gallery) .row>div:last-child,
	.frame-layout-3:has(.frame-type-parallax_gallery) .row>div:first-child {
		order: inherit;
	}

	.frame-layout-1:has(.frame-type-parallax_gallery) .row>div:last-child,
	.frame-layout-2:has(.frame-type-parallax_gallery) .row>div:first-child,
	.frame-layout-3:has(.frame-type-parallax_gallery) .row>div:last-child {
		order: inherit;
	}
}


/* XXL – ab 1400px */
@media (min-width: 1400px) {

	/* XS – unter 576px */
	.frame-layout-1:has(.frame-type-parallax_gallery) .row,
	.frame-layout-2:has(.frame-type-parallax_gallery) .row,
	.frame-layout-3:has(.frame-type-parallax_gallery) .row {
		display: flex;
		flex-direction: row;
	}

	.frame-layout-1:has(.frame-type-parallax_gallery) .row>div:first-child,
	.frame-layout-2:has(.frame-type-parallax_gallery) .row>div:last-child,
	.frame-layout-3:has(.frame-type-parallax_gallery) .row>div:first-child {
		order: inherit;
	}

	.frame-layout-1:has(.frame-type-parallax_gallery) .row>div:last-child,
	.frame-layout-2:has(.frame-type-parallax_gallery) .row>div:first-child,
	.frame-layout-3:has(.frame-type-parallax_gallery) .row>div:last-child {
		order: inherit;
	}
}



/* ==========================================================================
   Header-Logo

   Unterseiten: statisch.
   Startseite (#page1): zunächst verborgen; JavaScript blendet es nach
   Abschluss der Hero-Szene ein.

   Kontrast:
   - helle Fläche        -> Originalfarbe
   - dunkle Fläche       -> weiß
   - Navigation offen    -> weiß
   - Kontakt offen       -> weiß
   ========================================================================== */

header.header .logo {
	--logo-height: 40px;
	--logo-left: 20px;

	position: absolute;
	top: calc((var(--site-header-height) - var(--logo-height)) / 2);
	left: var(--logo-left);
	z-index: 1001;

	display: block;
	line-height: 0;

	transform-origin: center center;
	filter: none;

	transition:
		filter .3s ease,
		opacity .3s ease;
}

header.header .logo img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: none;
	max-height: var(--logo-height);
}

/* Startseite: Steuerung zunächst durch Hero-JavaScript */
#page1 header.header .logo {
	visibility: hidden;
}

/* Dunkle Fläche unter den Header-Controls */
header.header:has(.head .contact.is-over-dark-surface) .logo,
header.header:has(.head .ham.is-over-dark-surface) .logo {
	filter: brightness(0) invert(1);
}

/* Hauptnavigation / Kontakt geöffnet */
header.header.clicked .logo,
header.header.contact-open .logo {
	filter: brightness(0) invert(1) !important;
}

/* Auf der Startseite muss das Logo in Overlays sichtbar sein */
#page1 header.header.clicked .logo,
#page1 header.header.contact-open .logo {
	visibility: visible !important;
	opacity: 1 !important;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

/* SM >= 576px */
@media (min-width: 576px) {
	header.header .logo {
		--logo-height: 40px;
		--logo-left: 24px;
	}
}

/* MD >= 768px */
@media (min-width: 768px) {
	header.header .logo {
		--logo-height: 50px;
		--logo-left: 32px;
	}
}

/* LG >= 992px */
@media (min-width: 992px) {
	header.header .logo {
		--logo-height: 60px;
		--logo-left: 40px;
	}
}

/* XL >= 1200px */
@media (min-width: 1200px) {
	header.header .logo {
		--logo-height: 60px;
		--logo-left: 40px;
	}
}

/* XXL >= 1400px */
@media (min-width: 1400px) {
	header.header .logo {
		--logo-height: 60px;
	}
}

/* ==========================================================
   Animierte Canvas-Bildsequenz
   ========================================================== */

.animated-image {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: #fff;
	isolation: isolate;
}

/*
 * Das vorhandene TYPO3-Bild bleibt sichtbar,
 * bis der erste Canvas-Frame tatsächlich gezeichnet wurde.
 */
.animated-image>.ce-image {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 1;
	transition: opacity 0.2s ease;
}

.animated-image>.ce-image figure,
.animated-image>.ce-image picture {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.animated-image>.ce-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * Der Canvas ist zunächst transparent.
 * Erst nach dem erfolgreichen Laden und Zeichnen von Frame 0
 * wird er eingeblendet.
 */
.animated-image__canvas {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* Wird durch JavaScript nach dem ersten erfolgreichen Zeichnen gesetzt. */
.animated-image.is-sequence-ready .animated-image__canvas {
	opacity: 1;
}

.animated-image.is-sequence-ready>.ce-image {
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   Zweite Hero-Szene – layoutschonende Ergänzungen
   ========================================================================== */

.animated-image #c16 {
	z-index: 4;
}

/*
 * Das Logo behält seine von TYPO3 erzeugte Struktur.
 * Keine Änderungen an .ce-row, .ce-column oder .ce-gallery.
 */
.animated-image #c12 figure {
	margin: 0;
}

.animated-image #c12 picture,
.animated-image #c12 img {
	display: block;
	max-width: 100%;
}

.animated-image #c12 img {
	width: 100%;
	height: auto;
}

.animated-image #c14,
.animated-image #c15 {
	white-space: nowrap;
}

@media (max-width: 767.98px) {

	.animated-image #c14,
	.animated-image #c15 {
		max-width: calc(60% - 2rem);
		white-space: normal;
	}

	.animated-image #c14 {
		text-align: left;
	}

	.animated-image #c15 {
		text-align: right;
	}
}

@media (prefers-reduced-motion: reduce) {

	.animated-image #c16,
	.animated-image #c12,
	.animated-image #c13,
	.animated-image #c14,
	.animated-image #c15,
	.animated-image .display_1_hero_caption,
	.animated-image .display_2_hero_caption {
		will-change: auto;
	}
}

/* ==========================================================================
   Benutzerdefinierter Scroll-Indikator
   ========================================================================== */

/* Nativen Browser-Scrollbar ausblenden */
html,
body {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
	display: none;
}


/* ==========================================================================
   Scroll-Indikator
   ========================================================================== */

.scroll-indicator {
	position: fixed;
	top: 50%;
	right: 24px;
	z-index: 9999;

	width: 16px;

	transform: translateY(-50%);

	pointer-events: none;
}

/* Bei geöffnetem Bootstrap-Modal ausblenden */
body.modal-open .scroll-indicator {
	display: none !important;
}


/* ==========================================================================
   Kurzer Track
   ========================================================================== */

.scroll-indicator__track {
	position: relative;

	width: 2px;
	height: 160px;

	margin: 0 auto;

	background: rgba(var(--bs-body-bg-rgb), 0.1);
	-webkit-backdrop-filter: invert(1);
	backdrop-filter: invert(1);
	border-radius: 999px;

	pointer-events: auto;

	transition:
		background-color 0.2s ease,
		width 0.2s ease;
}

.scroll-indicator__track:hover {
	width: 4px;
	background: rgba(var(--bs-body-bg-rgb), 0.5);
}


/* ==========================================================================
   Scroll-Griff
   ========================================================================== */

.scroll-indicator__drop {
	position: absolute;
	top: 0;
	left: 50%;

	width: 10px;
	height: 14px;

	margin-left: -5px;


	/* Hintergrund hinter dem Tropfen invertieren */

	background-color: #fff;
	mix-blend-mode: difference;
	-webkit-backdrop-filter: invert(1);
	backdrop-filter: invert(1);
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

	cursor: grab;
	pointer-events: auto;
	touch-action: none;

	transform-origin: center;
	will-change: transform;
}

.scroll-indicator__drop:active {
	cursor: grabbing;
}


/* ==========================================================================
   Mobile Darstellung
   ========================================================================== */

@media (max-width: 767.98px) {
	.scroll-indicator {
		right: 12px;
	}

	.scroll-indicator__track {
		height: 120px;
	}
}

/* ==========================================================================
   #c10 Darstellung
   ========================================================================== */
#c10 {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 40;
	flex-direction: column-reverse;
	flex-wrap: wrap;
	align-content: center;
}

#c10 h1.display_1_hero_caption,
#c10 h2.display_2_hero_caption {
	line-height: 1 !important;
	margin-bottom: 0 !important;
}

/* ==========================================================================
   Squash-Wortanimation
   ========================================================================== */

#c10 {
	cursor: default;
}

.display_center {
	display: flex;
	justify-content: center;
	align-items: center;
}

/*
 * Die vorhandene TYPO3-Überschrift bleibt bestehen.
 */
#c10 h1.display_1_hero_caption {
	position: relative;
	display: block;

	width: 100%;
	max-width: none;

	margin: 0;

	overflow: visible;

	user-select: none;
	-webkit-user-select: none;

	/*
	 * Vertikales Scrollen bleibt auf Mobilgeräten möglich.
	 * Horizontale Bewegungen verarbeitet das JavaScript.
	 */
	touch-action: pan-y;
}


/* Bühne der wechselnden Wörter */

#c10 .squash-caption__stage {
	position: relative;

	display: inline-block;

	overflow: hidden;
	vertical-align: bottom;

	isolation: isolate;
	contain: layout paint;
}


/* Aktuelles und hereinkommendes Wort */

#c10 .squash-caption__word {
	position: absolute;
	top: 0;
	left: 50%;

	display: block;

	width: max-content;

	white-space: nowrap;
	pointer-events: none;

	transform-origin: center center;
	will-change: transform, opacity, filter;
}


/* Während des horizontalen Ziehens */

#c10.squash-caption.is-dragging {
	cursor: default;
}


/* Mobile Geräte */

@media (hover: none),
(pointer: coarse) {
	#c10 {
		cursor: default;
	}
}


/* Reduzierte Bewegungen respektieren */

@media (prefers-reduced-motion: reduce) {

	#c10,
	#c10.squash-caption.is-dragging {
		cursor: default;
	}

	#c10 .squash-caption__word {
		will-change: auto;
	}
}

/* ==========================================================================
   frame-space-before-extra-large frame-space-after-extra-large
   ========================================================================== */
.frame-space-before-extra-large {
	margin-top: 8rem !important;
}

.frame-space-after-extra-large {
	margin-bottom: 8rem !important;
}

.brand-description {
	font-family: var(--font-family-standard);
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--brand-color-mirage);
}

.vh-full,
.h-full {
	min-height: 100vh;
}


/* ==========================================================================
   header-center
   ========================================================================== */

.header-center {
	display: flex;
	justify-content: center;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: center;
	align-items: flex-start;
	background-color: rgba(var(--bs-primary-rgb), 1);
	mix-blend-mode: hard-light;
}

.overlay:has(.header-center) {

	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: stretch;
	justify-content: center;
}


/* ==========================================================================
   Referenzen-Section
   ========================================================================== */

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 {
	--reference-card-width: 400px;
	--reference-card-height: 500px;

	--reference-teaser-width:
		var(--reference-card-width);

	--reference-card-gap: 0.8rem;

	position: relative;
	isolation: isolate;

	width: 100%;

	/*
	 * Verhindert, dass der horizontale Track die gesamte Seite verbreitert.
	 * Die Karten bleiben innerhalb dieser Section.
	 */
	overflow: clip;
}

.container:has(.frame-layout-3) {
	max-width: 100% !important;
	padding-left: 0;
	padding-right: 0;
}

.frame-indent-left {
	max-width: 1300px !important;
	margin: 0 auto;
	padding-left: 0;
	padding-right: 0;
}


/* ==========================================================================
   Innerer Section-Bereich
   ========================================================================== */

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3>.section {
	position: relative;

	width: 100%;
	min-width: 0;
}

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3>.section>.container-fluid {
	position: relative;

	width: 100%;
	min-width: 0;
}


/* ==========================================================================
   Überschrift
   ========================================================================== */

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .frame-type-header {
	position: relative;
	z-index: 5;
}


/* ==========================================================================
   News-Element
   ========================================================================== */

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .frame-type-news_newsliststicky,
.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .news,
.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .news-list-view {
	position: relative;

	width: 100%;
	min-width: 0;
}

/* ==========================================================================
   Horizontaler Scroll-Viewport
   ========================================================================== */

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .news-list-view {
	overflow-x: auto;
	overflow-y: hidden;

	overscroll-behavior-inline: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;

	-webkit-overflow-scrolling: touch;
}

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .news-list-view::-webkit-scrollbar {
	display: none;
}


/* ==========================================================================
   Horizontaler Track
   ========================================================================== */

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .list-group {
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;

	gap: var(--reference-card-gap);

	width: max-content;
	min-width: 100%;

	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 0;

	list-style: none;
}


/* ==========================================================================
   Einzelne Karte

   Das Listenelement selbst wächst beim Hover.
   Dadurch werden alle nachfolgenden Karten tatsächlich nach rechts geschoben.
   ========================================================================== */

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .list-group-item {
	position: relative;
	z-index: 1;
	isolation: isolate;

	display: block;

	width: var(--reference-card-width);
	height: var(--reference-card-height);

	flex:
		0 0 var(--reference-card-width);

	margin: 0;
	padding: 0;

	color: var(--bs-list-group-color);
	background-color: transparent !important;

	border: 0 !important;
	border-radius: 0 !important;

	overflow: hidden;

	scroll-snap-align: start;

	transition:
		width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		flex-basis 0.6s cubic-bezier(0.22, 1, 0.36, 1);

	will-change:
		width,
		flex-basis;
}


/*
 * Leere Teaser-Container öffnen die Karte nicht.
 */
.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .list-group-item:has(.teaser-text > *):hover,
.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .list-group-item:has(.teaser-text > *):focus-within {
	z-index: 3;

	width:
		calc(var(--reference-card-width) + var(--reference-teaser-width));

	flex-basis:
		calc(var(--reference-card-width) + var(--reference-teaser-width));
}


/* ==========================================================================
   Innere Kartenstruktur
   ========================================================================== */

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .news-list-item,
.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .news-list-item-content {
	position: relative;

	width: 100%;
	height: 100%;
	min-width: 0;
}

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .news-list-item-content {
	isolation: isolate;

	display: block;

	text-align: center;
	overflow: hidden;
}


.news-list-item-header {
	padding-bottom: 0.3rem;
	border-bottom: 1px solid rgba(var(--brand-color-mirage-dark-rgb), 1);
}

.news-single .tags {
	display: flex;
	gap: 0.5rem;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

/* ==========================================================================
   Bild
   ========================================================================== */

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .news-list-item-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;

	display: block;

	width: var(--reference-card-width);
	height: 100%;

	text-decoration: none;
	box-shadow: 5px 0px 10px rgba(var(--brand-color-mirage-dark-rgb), .75);
}

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .news-list-item-link picture {
	display: block;

	width: 100%;
	height: 100%;
}

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .news-list-item-link img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


/* ==========================================================================
   Teaser-Bereich

   Die Breite bleibt während der Animation immer unverändert.
   Der Text wird daher nicht zusammengedrückt oder neu umbrochen.
   ========================================================================== */

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .teaser-text {
	position: absolute;
	top: 0;
	left: var(--reference-card-width);
	z-index: 1;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	width: var(--reference-teaser-width);
	height: 100%;

	padding: 1rem 1.25rem;

	color: var(--bs-body-color);
	background-color: var(--bs-secondary);

	overflow-x: hidden;
	overflow-y: auto;

	visibility: hidden;
	opacity: 0;

	pointer-events: none;

	/*
	 * Der vollständige Textbereich liegt zunächst hinter dem Bild.
	 * Seine Breite ändert sich nicht.
	 */
	transform: translateX(-100%);

	transition:
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.2s ease,
		visibility 0s linear 0.6s;

	will-change:
		transform,
		opacity;
}


/* ==========================================================================
   Geöffneter Zustand
   ========================================================================== */

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .list-group-item:has(.teaser-text > *):hover .teaser-text,
.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .list-group-item:has(.teaser-text > *):focus-within .teaser-text {
	visibility: visible;
	opacity: 1;

	pointer-events: auto;

	transform: translateX(0);

	transition:
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.2s ease 0.12s,
		visibility 0s;
}


/* ==========================================================================
   Teaser-Inhalte
   ========================================================================== */

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .teaser-text .teaser {
	width: 100%;

	margin:
		0 0 1rem;

	word-break: auto-phrase;
	overflow-wrap: normal;
	break-inside: avoid;

	font-size: 1.2rem;
	line-height: 1.25;
	text-align: end;
}

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .teaser-text .description-short {
	width: 100%;
}

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .teaser-text .description-short p {
	margin-bottom: 0;

	font-size: 0.8rem;
	line-height: 1.5;
	text-align: left;
}

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .badge {
	margin-bottom: 0;

	font-size: 0.55rem;
}

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .tag-list {
	align-items: start;
	display: flex;
	gap: .3rem;
}

/* ==========================================================================
   Fokus
   ========================================================================== */

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .news-list-item-link:focus-visible {
	outline: 3px solid var(--bs-white);
	outline-offset: -3px;
}


/* ==========================================================================
   Vorbereitung für den späteren GSAP-Scroll

   JavaScript kann später diese Klasse auf die äußere Section setzen.
   ========================================================================== */

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3.is-gsap-horizontal .news-list-view {
	overflow: hidden;
	scroll-snap-type: none;
}

.frame-type-liepstypo3defaults_100-section-100.frame-layout-3.is-gsap-horizontal .list-group {
	will-change: transform;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 767.98px) {
	.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 {
		--reference-card-width:
			min(82vw, 22rem);

		--reference-teaser-width:
			min(82vw, 22rem);
	}

	.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .news-list-view {
		scroll-padding-inline: 1rem;
	}
}


/* ==========================================================================
   Touch-Geräte

   Ohne echten Hover bleibt die Karte zunächst geschlossen.
   Das spätere JavaScript kann sie per Klasse .is-open aktivieren.
   ========================================================================== */

@media (hover: none) {
	.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .list-group-item.is-open {
		width:
			calc(var(--reference-card-width) + var(--reference-teaser-width));

		flex-basis:
			calc(var(--reference-card-width) + var(--reference-teaser-width));
	}

	.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .list-group-item.is-open .teaser-text {
		visibility: visible;
		opacity: 1;

		pointer-events: auto;

		transform: translateX(0);
	}
}


/* ==========================================================================
   Reduzierte Bewegung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .list-group-item,
	.frame-type-liepstypo3defaults_100-section-100.frame-layout-3 .teaser-text {
		transition: none;
	}
}


/* ==========================================================================
   News-Detail: Gepacktes Masonry (CSS-Grid + JS-Höhenberechnung)
   ========================================================================== */

.news-detail-masonry {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 8px;
	grid-auto-flow: dense;
	align-items: start;
	column-gap: 1.5rem;
	row-gap: 0;
	margin-top: 2rem;
}

.news-detail-masonry__item {
	margin: 0;
	/* Zeilenspanne wird per JS gesetzt; hier nur ein sinnvoller Startwert */
	grid-row-end: span 20;
}

/* Querformat spannt über beide Spalten */
.news-detail-masonry__item--landscape {
	grid-column: 1 / -1;
}

/* Quadrat und Hochformat bleiben einspaltig */
.news-detail-masonry__item--square,
.news-detail-masonry__item--portrait {
	grid-column: auto;
}

.news-detail-masonry__item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.25rem;
}

.news-detail-masonry__caption {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	line-height: 1.35;
}

@media (max-width: 575.98px) {
	.news-detail-masonry {
		grid-template-columns: 1fr;
	}

	.news-detail-masonry__item--landscape {
		grid-column: auto;
	}
}

/* Ansprechpartnerbox */

.authorBox {
	border: none;
}

.authorBoxHead {
	background: var(--bs-primary);
	color: var(--bs-white);
	padding: 10px 20px;
}

.authorBoxImage {
	line-height: 28px;
}

.authorBoxContent {
	padding: 20px 20px 15px;
	line-height: 28px;
}

.authorName {
	color: var(--brand-color-mirage);
	margin-top: 0.4rem;
	font-size: 1rem;
	line-height: 1.52rem;
}

.authorBody i {
	color: var(--bs-primary);
	padding-right: 10px;
}

.authorBody a {
	--bs-btn-color: var(--bs-white);	
	color: var(--bs-white);
	padding-left: 3px;
	padding-right: 3px;
	text-decoration: none !important;
	transition: all 0.3s ease-out;
}

.authorBody a:hover {
	color: var(--brand-color-mirage);
	background-color: var(--bs-secondary);
	text-decoration: none !important;
}

p.authorBody {
	margin-bottom: 0;
}

.authorMore {
	color: var(--bs-primary);
	padding-left: 3px;
	padding-right: 3px;
	text-decoration: none !important;
	transition: all 0.3s ease-out;
}

.authorMore:hover {
	color: var(--bs-white);
	background-color: var(--bs-primary);
	text-decoration: none !important;
}


/* ==========================================================================
   Mobile / Tablet
   Bild oberhalb des Inhalts
   ========================================================================== */

@media (max-width: 767.98px) {

	.authorBox {
		display: flex;
		flex-direction: column;
	}

	.authorBoxImage {
		order: 1;
		width: 100% !important;
	}

	.authorBoxContent.w-50 {
		width: 100% !important;
	}

	.authorBoxImage.w-50 {
		width: 100% !important;
	}

	.authorBoxContent {
		order: 2;
		width: 100% !important;
	}

	.authorBoxImage img {
		display: block;
		width: 100%;
		height: auto;
	}
}

.timeline-image {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	align-content: space-between;
}

.timeline-image-item {}

.timeline-image-item img {
	display: block;
	width: 100%;
	max-width: 256px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.footer-right a,
.frame-type-text a,
.frame-type-textpic a,
.frame-type-textmedia a,
.frame-type-text a:hover,
.frame-type-textpic a:hover,
.frame-type-textmedia a:hover,
.frame-type-text a:focus,
.frame-type-textpic a:focus,
.frame-type-textmedia a:focus {
	color: var(--bs-primary) !important;
	background-color: transparent !important;
	text-decoration: none;

	transition: all 0.3s ease-in-out;

	position: relative;
	z-index: 0;
	isolation: isolate;

	overflow: hidden;
}

.footer-right a {
	color: var(--bs-white) !important;
	padding-bottom: .3rem;
}

.site-footer__navigation a {
	color: var(--bs-white) !important;

	padding-top: .1rem;
	padding-bottom: .1rem;
	padding-left: 0.3rem;
	padding-right: 0.3rem;

	transition: all 0.3s ease-in-out;
}

.site-footer .footer-right a:hover {
	color: var(--bs-white) !important;
}

.site-footer .site-footer__navigation a:hover {
	color: var(--brand-color-mirage) !important;
	transition: all 0.3s ease-in-out;
}

.frame-type-text a:hover,
.frame-type-textpic a:hover,
.frame-type-textmedia a:hover,
.frame-type-text a:focus,
.frame-type-textpic a:focus,
.frame-type-textmedia a:focus {

	text-decoration: none;
	color: rgba(var(--brand-color-mirage-dark-rgb), 1) !important;
}

.btn:focus,
.btn:focus-visible,
.frame-type-text a:focus,
.frame-type-textpic a:focus,
.frame-type-textmedia a:focus {
	outline: 3px solid rgba(var(--brand-color-mirage-dark-rgb), .75) !important;
	outline-offset: 3px;
}

.site-footer .footer-right a:focus {
	outline: 3px solid rgba(var(--bs-white-rgb), .75) !important;
	outline-offset: 3px;
}

.site-footer .footer-right a::before,
.frame-type-text a::before,
.frame-type-textpic a::before,
.frame-type-textmedia a::before {
	content: "";

	position: absolute;
	left: 0;
	bottom: 0;

	width: 100%;
	height: 3px;

	background-color: var(--bs-primary);

	transition: all 0.3s ease-in-out;

	/* hinter dem Text */
	z-index: -1;
}


.frame-type-text a:hover::before,
.frame-type-textpic a:hover::before,
.frame-type-textmedia a:hover::before,
.frame-type-text a:focus::before,
.frame-type-textpic a:focus::before,
.frame-type-textmedia a:focus::before {
	height: 15px;
	background-color: var(--bs-secondary);
}

.site-footer .footer-right a:hover::before,
.site-footer .footer-right a:focus::before {
	height: 50px;
}

.site-footer .footer-right .site-footer__brands a:hover::before,
.site-footer .footer-right .site-footer__brands a:focus::before {
	height: 25px;
	background-color: var(--bs-secondary);
}


.scroll-to-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 1000;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(1rem);
	transition:
		opacity .3s ease,
		transform .3s ease,
		visibility .3s ease;
	mix-blend-mode: difference;
}

.scroll-to-top.is-visible {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.scroll-to-top a {
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	text-decoration: none;
}

.scroll-to-top i {
	transition: transform .25s ease;
}

.scroll-to-top a:hover i {
	transform: translateY(-.2rem);
}

/* ==========================================================================
   Sticky Section Headings
   ========================================================================== */

:root {
	--sticky-heading-gap: 2px;
	--sticky-heading-top: 0px;
}

.sticky-heading {
	position: relative;
	margin-top: 2rem;
}

.sticky-heading>.container {
	height: auto;
}

.sticky-heading.vh-full>.container {
	min-height: 100vh;
}

.sticky-heading>.container>.frame-type-header {
	position: sticky;
	top: var(--sticky-heading-top);
	z-index: 10;
	background-color: rgba(var(--bs-body-bg-rgb), 1);
}

.sticky-heading>.container>.frame-type-header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background-color: rgba(var(--brand-color-aesthetic-lavender-rgb), .95);
	pointer-events: none;
}

/* Sobald Logo und Section-Headline horizontal nicht mehr nebeneinander passen */
@media (max-width: 1919.98px) {
	:root {
		--sticky-heading-top: calc(var(--site-header-height) + var(--sticky-heading-gap));
	}

	body:has(.sticky-heading) header.header:not(.clicked):not(.contact-open) {
		background-color: rgba(var(--bs-body-bg-rgb), 1) !important;
	}
}

/* XS: Sticky-Headline kompakter */
@media (max-width: 575.98px) {
	.sticky-heading {
		margin-top: 1rem;
	}

	.sticky-heading>.container>.frame-type-header h2 {
		display: flex;
		align-items: center;
		gap: .75rem;
		margin: 0;
		padding: .35rem 0;
		font-size: 1.35rem;
		line-height: 1;
	}

	.sticky-heading>.container.h2_hash>.frame-type-header h2::before {
		font-size: 2.5rem;
		line-height: 1;
	}
}

/* SM: Sticky-Headline kompakter */
@media (min-width: 576px) and (max-width: 767.98px) {
	.sticky-heading>.container>.frame-type-header h2 {
		margin: 0;
		padding: .4rem 0;
		font-size: 1.5rem;
		line-height: 1;
	}

	.sticky-heading>.container.h2_hash>.frame-type-header h2::before {
		font-size: 3rem;
		line-height: 1;
	}
}

/* MD: noch kompakt, ab LG wieder normale Typografie */
@media (min-width: 768px) and (max-width: 991.98px) {
	.sticky-heading>.container>.frame-type-header h2 {
		margin: 0;
		padding: .45rem 0;
		font-size: 1.65rem;
		line-height: 1;
	}

	.sticky-heading>.container.h2_hash>.frame-type-header h2::before {
		font-size: 3.5rem;
		line-height: 1;
	}
}


/* ==========================================================================
   frame-override-layout-1
   ========================================================================== */

.frame-override-layout-1 .frame-layout-1 {
	margin: 0 !important;
	padding: 0 !important;
}


/* ==========================================================================
   ROUND CENTER
   ========================================================================== */

.round-center {
	--round-size: clamp(10rem, 15vw, 15rem);
	--round-gap: 1.5rem;
}

.round-center .row {
	--bs-gutter-x: 0;
	--bs-gutter-y: 0;
}

.round-center .row>[class*="col-"] {
	display: flex;
}

.round-center .row .frame-type-text {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
	height: 100%;
	margin: 0;
	position: relative;
	z-index: 2;
}

.round-center .row .frame-type-text h3,
.round-center .row .frame-type-text h4,
.round-center .row .frame-type-text p {
	min-width: 0;
	margin: 0;
}


/* ==========================================================================
   H3

   Die vier Quadranten bleiben geometrisch wie bisher.
   Sie zeichnen aber NICHT mehr den Kreis.
   ========================================================================== */

.round-center .row .frame-type-text h3 {
	position: relative;
	z-index: 2;
	width: var(--round-size);
	height: var(--round-size);
	padding: 1.5rem;
	display: flex;
	line-height: 1.05;
	border: 0;
	border-radius: 0;
	background: transparent;
}


/* ==========================================================================
   EIN SEPARATER KREIS

   Durchmesser = 2 × round-size
   Mittelpunkt = Grenze zwischen oberer und unterer Row
   ========================================================================== */

.round-center .row.reverse-layout {
	position: relative;
	overflow: visible;
}

.round-center .row.reverse-layout::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: calc(var(--round-size) * 2);
	height: calc(var(--round-size) * 2);
	transform: translate(-50%, 50%);
	border: 1px solid currentColor;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
}


/* ==========================================================================
   OBEN

   P
   H4
   H3
   ========================================================================== */

.round-center .row.reverse-layout .frame-type-text {
	grid-template-rows:
		minmax(0, 1fr) auto auto var(--round-size);
}

.round-center .row.reverse-layout .frame-type-text p {
	grid-column: 1;
	grid-row: 2;
	width: 70%;
	margin-bottom: var(--round-gap);
}

.round-center .row.reverse-layout .frame-type-text h4 {
	grid-column: 1;
	grid-row: 3;
	width: 100%;
	margin-bottom: var(--round-gap);
}

.round-center .row.reverse-layout .frame-type-text h3 {
	grid-column: 1;
	grid-row: 4;
	align-self: stretch;
}


/* oben links */

.round-center .row.reverse-layout>div:first-child .frame-type-text p {
	justify-self: end;
	text-align: right;
	padding-right: 1rem;
}

.round-center .row.reverse-layout>div:first-child .frame-type-text h4 {
	text-align: right;
	padding-right: 1rem;
}

.round-center .row.reverse-layout>div:first-child .frame-type-text h3 {
	justify-self: end;
	justify-content: flex-end;
	align-items: flex-end;
	text-align: right;
}


/* oben rechts */

.round-center .row.reverse-layout>div:last-child .frame-type-text p {
	justify-self: start;
	text-align: left;
	padding-left: 1rem;
}

.round-center .row.reverse-layout>div:last-child .frame-type-text h4 {
	text-align: left;
	padding-left: 1rem;
}

.round-center .row.reverse-layout>div:last-child .frame-type-text h3 {
	justify-self: start;
	justify-content: flex-start;
	align-items: flex-end;
	text-align: left;
}


/* ==========================================================================
   UNTEN

   H3
   H4
   P
   ========================================================================== */

.round-center .row:not(.reverse-layout) .frame-type-text {
	grid-template-rows:
		var(--round-size) auto auto minmax(0, 1fr);
}

.round-center .row:not(.reverse-layout) .frame-type-text h3 {
	grid-column: 1;
	grid-row: 1;
	align-self: stretch;
}

.round-center .row:not(.reverse-layout) .frame-type-text h4 {
	grid-column: 1;
	grid-row: 2;
	width: 100%;
	margin-top: var(--round-gap);
}

.round-center .row:not(.reverse-layout) .frame-type-text p {
	grid-column: 1;
	grid-row: 3;
	width: 70%;
	margin-top: var(--round-gap);
}


/* unten links */

.round-center .row:not(.reverse-layout)>div:first-child .frame-type-text h3 {
	justify-self: end;
	justify-content: flex-end;
	align-items: flex-start;
	text-align: right;
}

.round-center .row:not(.reverse-layout)>div:first-child .frame-type-text h4 {
	text-align: right;
	padding-right: 1rem;
}

.round-center .row:not(.reverse-layout)>div:first-child .frame-type-text p {
	justify-self: end;
	text-align: right;
	padding-right: 1rem;
}


/* unten rechts */

.round-center .row:not(.reverse-layout)>div:last-child .frame-type-text h3 {
	justify-self: start;
	justify-content: flex-start;
	align-items: flex-start;
	text-align: left;
}

.round-center .row:not(.reverse-layout)>div:last-child .frame-type-text h4 {
	text-align: left;
	padding-left: 1rem;
}

.round-center .row:not(.reverse-layout)>div:last-child .frame-type-text p {
	justify-self: start;
	text-align: left;
	padding-left: 1rem;
}

/* ==========================================================================
   H3 / KREIS
   Text = volle Spaltenbreite
   Kreis = ausschließlich ::after
   ========================================================================== */

.round-center .row .frame-type-text h3 {
	position: relative;
	isolation: isolate;
	z-index: 2;
	width: 100%;
	height: var(--round-size);
	padding: 1.5rem;
	display: flex;
	line-height: 1.05;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* Kreisfläche komplett vom Text getrennt */
.round-center .row .frame-type-text h3::after {
	content: "";
	position: absolute;
	width: var(--round-size);
	height: var(--round-size);
	pointer-events: none;
	z-index: -1;
}

/* ==========================================================================
   TYPO3 ROWS
   ========================================================================== */

.round-center>.frame-type-liepstypo3defaults_102-columns-50-50 {
	margin-top: 0;
	margin-bottom: 0;
	overflow: visible;
}

.round-center>.frame-type-liepstypo3defaults_102-columns-50-50>.row {
	--bs-gutter-x: 0;
	--bs-gutter-y: 0;
}

/* Branding */
.round-center .row.reverse-layout>div:first-child h3 {
	font-size: 3rem;
	transform: translate(-2rem, 1rem);
}

/* UX */
.round-center .row.reverse-layout>div:last-child h3 {
	font-size: 4rem;
	transform: rotate(-5deg);
}

/* UI */
.round-center .row:not(.reverse-layout)>div:first-child h3 {
	font-size: 2.5rem;
	transform: translateY(2rem);
}

/* Content */
.round-center .row:not(.reverse-layout)>div:last-child h3 {
	font-size: 3.5rem;
	transform: translate(1rem, -1rem);
}

/* ==========================================================================
   OBEN LINKS
   Branding
   ========================================================================== */

.round-center .row.reverse-layout>div:first-child .frame-type-text h3 {
	justify-self: stretch;
	justify-content: flex-end;
	align-items: flex-end;
	text-align: right;
	padding-right: var(--round-gap);
}

.round-center .row.reverse-layout>div:first-child .frame-type-text h3::after {
	right: 0;
	bottom: 0;
	border-radius: 100% 0 0 0;
}


/* ==========================================================================
   OBEN RECHTS
   UX
   ========================================================================== */

.round-center .row.reverse-layout>div:last-child .frame-type-text h3 {
	justify-self: stretch;
	justify-content: flex-start;
	align-items: flex-end;
	text-align: left;
	padding-left: var(--round-gap);
}

.round-center .row.reverse-layout>div:last-child .frame-type-text h3::after {
	left: 0;
	bottom: 0;
	border-radius: 0 100% 0 0;
	background-color: var(--brand-color-aesthetic-lavender);
}


/* ==========================================================================
   UNTEN LINKS
   UI
   ========================================================================== */

.round-center .row:not(.reverse-layout)>div:first-child .frame-type-text h3 {
	justify-self: stretch;
	justify-content: flex-end;
	align-items: flex-start;
	text-align: right;
	padding-right: var(--round-gap);
}

.round-center .row:not(.reverse-layout)>div:first-child .frame-type-text h3::after {
	right: 0;
	top: 0;
	border-radius: 0 0 0 100%;
	background-color: var(--brand-color-scarlet-flame);
}


/* ==========================================================================
   UNTEN RECHTS
   Content
   ========================================================================== */

.round-center .row:not(.reverse-layout)>div:last-child .frame-type-text h3 {
	justify-self: stretch;
	justify-content: flex-start;
	align-items: flex-start;
	text-align: left;
	padding-left: var(--round-gap);
}

.round-center .row:not(.reverse-layout)>div:last-child .frame-type-text h3::after {
	left: 0;
	top: 0;
	border-radius: 0 0 100% 0;
}

/* ==========================================================================
   Carousel Image
   ========================================================================== */
.frame-type-carouselimage.frame-layout-0 {
	background-color: var(--brand-color-mirage);
}

.frame-type-carouselimage.frame-layout-1 {
	
	background-color: var(--brand-color-aesthetic-lavender);
	padding: 0;
	border-radius: 0;
}


/* ==========================================================================
   btn-primary
   ========================================================================== */
.btn-primary {
	--bs-btn-font-weight: 700;
	transition: all 0.3s ease-in-out;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	--bs-btn-hover-color: var(--brand-color-mirage) !important;
	--bs-btn-hover-bg: var(--brand-color-aesthetic-lavender) !important;
	--bs-btn-hover-border-color: var(--brand-color-mirage) !important;
}