/* ==========================================================================
   LIEPS COMPONENT – ROUND CENTER
   Aus der bisherigen custom.css unverändert ausgelagert.
   ========================================================================== */

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

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

.round-center .row {
	--bs-gutter-x: 0;
	--bs-gutter-y: 0;
}
.round-center .frame-layout-1 {
	background-color: rgb(229 230 233) !important;
}

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

/* ==========================================================================
   ROUND CENTER – INTERACTIVE TEXT
   ========================================================================== */

.round-center {
	position: relative;
}

.round-center .frame-type-text {
	position: relative;
}

/* H3 bleibt Überschrift; der echte Button übernimmt die Interaktion. */
.round-center .frame-type-text h3 {
	position: relative;
	z-index: 10;
}

.round-center .round-center__trigger {
	position: relative;
	z-index: 2;
	display: flex;
	width: 100%;
	height: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	font: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-align: inherit;
	white-space: normal;
	cursor: pointer;
	transition:
		color .25s ease,
		transform .25s ease,
		opacity .25s ease;
}

.round-center .round-center__trigger:hover,
.round-center .round-center__trigger:focus-visible,
.round-center .round-center__trigger.active {
	color: var(--bs-secondary);
}

/* Fokus und aktiver Zustand behalten den bisherigen Scale-Effekt. */
.round-center .round-center__trigger:focus-visible,
.round-center .round-center__trigger.active {
	transform: scale(1.15);
}

.round-center .round-center__trigger[aria-controls="round-center-1-panel"]:hover,
.round-center .round-center__trigger[aria-controls="round-center-1-panel"]:focus-visible,
.round-center .round-center__trigger[aria-controls="round-center-1-panel"].active,
.round-center .round-center__trigger[aria-controls="round-center-0-panel"]:hover,
.round-center .round-center__trigger[aria-controls="round-center-0-panel"]:focus-visible,
.round-center .round-center__trigger[aria-controls="round-center-0-panel"].active,
.round-center .round-center__trigger[aria-controls="round-center-5-panel"]:hover,
.round-center .round-center__trigger[aria-controls="round-center-5-panel"]:focus-visible,
.round-center .round-center__trigger[aria-controls="round-center-5-panel"].active,
.round-center .round-center__trigger[aria-controls="round-center-4-panel"]:hover,
.round-center .round-center__trigger[aria-controls="round-center-4-panel"]:focus-visible,
.round-center .round-center__trigger[aria-controls="round-center-4-panel"].active {
	color: var(--bs-primary);
}

.round-center .round-center__trigger:focus {
	outline: none;
}

.round-center .round-center__trigger:focus-visible {
	outline: 2px solid var(--bs-secondary);
	outline-offset: .3rem;
}

/*
 * Die Detail-Panels liegen nicht mehr innerhalb von .round-center.
 * Die vollständige Desktop-/Mobile-Darstellung befindet sich gesammelt
 * im UNIVERSAL-PORTAL-Block am Dateiende.
 */

/* Optional: nicht aktive Trigger bei Interaktion etwas zurücknehmen */
.round-center:has(.round-center__trigger.active)
	.round-center__trigger:not(.active) {
	opacity: .95;
}

.round-center:has(.round-center__trigger:hover)
	.round-center__trigger:not(:hover) {
	opacity: .95;
}

/* Round-Center-Overlay: siehe UNIVERSAL-PORTAL-Block am Dateiende. */

@media (prefers-reduced-motion: reduce) {
	.round-center .row .frame-type-text h3,
	.round-center .round-center__trigger,
	.round-center .round-center__panel {
		transition: none;
	}
}

/* ==========================================================================
   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;
}


/* ==========================================================================
   ROUND CENTER – Button-Ausrichtung
   ========================================================================== */

/* oben links */
.round-center .row.reverse-layout>div:first-child .round-center__trigger {
	justify-content: flex-end;
	align-items: flex-end;
	text-align: right;
}

/* oben rechts */
.round-center .row.reverse-layout>div:last-child .round-center__trigger {
	justify-content: flex-start;
	align-items: flex-end;
	text-align: left;
}

/* unten links */
.round-center .row:not(.reverse-layout)>div:first-child .round-center__trigger {
	justify-content: flex-end;
	align-items: flex-start;
	text-align: right;
}

/* unten rechts */
.round-center .row:not(.reverse-layout)>div:last-child .round-center__trigger {
	justify-content: flex-start;
	align-items: flex-start;
	text-align: left;
}

/* ==========================================================================
   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;
}

.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);
	transition: all 0.3s ease-in-out;
}
.round-center .row.reverse-layout>div:first-child:hover h3 {
	font-size: 3.2rem;
	transform: translate(-2rem, -2rem);
}
/* UX */
.round-center .row.reverse-layout>div:last-child h3 {
	font-size: 4rem;
	transform: rotate(-5deg);
	transition: all 0.3s ease-in-out;
}
.round-center .row.reverse-layout>div:last-child:hover h3 {
    font-size: 5rem;
	transform: rotate(-5deg) translate(5rem, -1rem);
}
/* UI */
.round-center .row:not(.reverse-layout)>div:first-child h3 {
	font-size: 2.5rem;
	transform: translateY(2rem);
	transition: all 0.3s ease-in-out;
}

.round-center .row:not(.reverse-layout)>div:first-child:hover h3 {
	font-size: 5rem;
	transform: translateY(2rem) translateX(-2rem);
}

/* Content */
.round-center .row:not(.reverse-layout)>div:last-child h3 {
	font-size: 3.5rem;
	transform: translate(1rem, -.5rem);
	transition: all 0.3s ease-in-out;
}
.round-center .row:not(.reverse-layout)>div:last-child:hover h3 {
	font-size: 4rem;
	transform: translate(2rem, 4rem);
}

/* ==========================================================================
   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;
}


/* ==========================================================================
   ROUND CENTER – UNIVERSAL PORTAL
   --------------------------------------------------------------------------
   .round-center__details ist auf ALLEN Breakpoints direktes Kind von <body>.

   Desktop:
   - Kreisdesign bleibt unverändert.
   - Position orientiert sich weiterhin an der ursprünglichen .round-center.
   - z-index/overflow/stacking nachfolgender Sections können nicht eingreifen.

   Mobile:
   - bestehende Bottom-Sheet-Ansicht bleibt erhalten.
   ========================================================================== */


/* ==========================================================================
   Portal – Basis / Desktop
   ========================================================================== */

body > .round-center__details--portal {
	position: fixed !important;

	top: var(--round-center-owner-top, 0) !important;
	left: var(--round-center-owner-left, 0) !important;
	z-index: 100000 !important;

	display: flex !important;
	align-items: center;
	justify-content: center;

	width: var(--round-center-owner-width, 100vw) !important;
	height: var(--round-center-owner-height, 100vh) !important;

	margin: 0 !important;
	padding: 0 !important;

	/*
	 * Desktop besitzt absichtlich keinen Backdrop.
	 * Das bestehende Kreisdesign bleibt dadurch optisch identisch.
	 */
	background: transparent !important;

	/*
	 * Sehr wichtig:
	 * Überschrift-Kreis und Hauptkreis dürfen die ursprüngliche
	 * Round-Center-Fläche weiterhin überragen.
	 */
	overflow: visible !important;

	visibility: hidden;
	pointer-events: none;
}

body > .round-center__details--portal.is-open {
	visibility: visible;
}


/* ==========================================================================
   Portal-Panel – Desktop-Kreisdesign
   ========================================================================== */

body > .round-center__details--portal .round-center__panel {
	position: absolute;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: min(32rem, 80%);
	height: max(32rem, 80%);

	margin: 0;
	padding: 3rem;

	border-radius: 50rem;

	color: inherit;
	background-color: rgba(var(--bs-body-bg-rgb), 1);

	box-shadow:
		5px
		5px
		1rem
		rgba(var(--brand-color-mirage-dark-rgb), .5);

	text-align: center;

	isolation: isolate;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transform: translateY(.75rem);

	transition:
		opacity .25s ease,
		transform .25s ease,
		visibility 0s linear .25s;
}

body > .round-center__details--portal .round-center__panel.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transform: translateY(0);

	transition:
		opacity .25s ease,
		transform .25s ease,
		visibility 0s;
}


/* ==========================================================================
   Portal – Desktop Close
   ========================================================================== */

body > .round-center__details--portal .round-center__panel-close {
	position: absolute;

	top: -50px;
	right: 0;
	z-index: 11;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 45px;
	height: 45px;

	padding: 0;

	border-radius: 50%;

	box-shadow:
		2px
		2px
		.3rem
		rgba(var(--brand-color-mirage-dark-rgb), .5);

	font-family: "Font Awesome 6 Free";
	font-weight: 900;

	cursor: pointer;
}


/* ==========================================================================
   Portal – Desktop Heading-Kreis
   ========================================================================== */

body > .round-center__details--portal .round-center__panel-heading {
	position: absolute;

	top: -7rem;
	right: 67%;
	z-index: 10;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 12rem;
	height: 12rem;

	margin: 0;
	padding: 0;

	overflow: hidden;

	border-radius: 50rem;

	outline: 3px solid var(--bs-secondary);
	outline-offset: .5rem;

	background-color: rgba(var(--bs-body-bg-rgb), 1);

	box-shadow:
		5px
		5px
		1rem
		rgba(var(--brand-color-mirage-dark-rgb), .5);

	font-size: 1.5rem;
	text-align: center;
}

body > .round-center__details--portal .round-center__panel h4 {
	margin:
		0
		2rem
		.75rem;
}

body > .round-center__details--portal .round-center__panel p {
	margin: 0;
}

body > .round-center__details--portal .round-center__panel p + p {
	margin-top: .75rem;
}


/* ==========================================================================
   Mobile – echtes Viewport-Modal / Bottom Sheet
   ========================================================================== */

@media (max-width: 767.98px) {

	html.round-center-modal-open,
	body.round-center-modal-open {
		overflow: hidden !important;
		overscroll-behavior: none !important;
	}

	body > .round-center__details--portal {
		position: fixed !important;

		inset: 0 !important;

		display: block !important;

		width: 100vw !important;
		height: 100vh !important;
		height: 100dvh !important;
		min-height: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		background:
			rgba(
				var(--brand-color-mirage-rgb),
				.28
			) !important;

		-webkit-backdrop-filter:
			blur(6px);

		backdrop-filter:
			blur(6px);

		overflow: hidden !important;

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transition:
			opacity .22s ease,
			visibility 0s linear .22s;
	}

	body > .round-center__details--portal.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transition:
			opacity .22s ease,
			visibility 0s;
	}


	body > .round-center__details--portal .round-center__panel,
	body > .round-center__details--portal .round-center__panel.is-visible {
		position: absolute !important;

		top: auto !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;

		display: block !important;

		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: calc(100svh - .5rem) !important;
		max-height: calc(100dvh - .5rem) !important;

		margin: 0 !important;

		padding:
			4.5rem
			1.25rem
			calc(
				2rem +
				env(safe-area-inset-bottom)
			)
			1.25rem !important;

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

		background:
			rgba(
				var(--bs-body-bg-rgb),
				1
			) !important;

		box-shadow:
			0
			-.75rem
			2.5rem
			rgba(
				var(--brand-color-mirage-rgb),
				.24
			) !important;

		text-align: left !important;

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

		overscroll-behavior-y:
			contain !important;

		-webkit-overflow-scrolling:
			touch;

		touch-action:
			pan-y !important;

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transform:
			translate3d(
				0,
				100%,
				0
			) !important;

		transition:
			transform
				.32s
				cubic-bezier(.22, 1, .36, 1),
			opacity .2s ease,
			visibility 0s linear .32s;
	}

	body > .round-center__details--portal .round-center__panel.is-visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform:
			translate3d(
				0,
				0,
				0
			) !important;

		transition:
			transform
				.32s
				cubic-bezier(.22, 1, .36, 1),
			opacity .2s ease,
			visibility 0s;
	}


	/* Griffkante */
	body > .round-center__details--portal .round-center__panel::before {
		content: "";

		position: absolute;

		top: .7rem;
		left: 50%;

		width: 3rem;
		height: .22rem;

		border-radius: 999px;

		background:
			rgba(
				var(--brand-color-mirage-rgb),
				.22
			);

		transform:
			translateX(-50%);

		pointer-events: none;
	}


	/* Close bleibt innerhalb des scrollbaren Sheets erreichbar. */
	body > .round-center__details--portal .round-center__panel-close {
		position: sticky !important;

		top: -50px !important;
		right: auto !important;
		left: auto !important;
		z-index: 10 !important;

		float: right;

		width: 2.75rem !important;
		height: 2.75rem !important;

		margin:
			-3.5rem
			0
			.75rem
			auto !important;

		padding: 0 !important;

		border-radius: 50% !important;
	}


	/* Desktop-Kreisüberschrift mobil vollständig neutralisieren. */
	body > .round-center__details--portal .round-center__panel-heading {
		position: static !important;

		inset: auto !important;

		display: block !important;

		width: auto !important;
		height: auto !important;

		margin:
			0
			3.5rem
			1.25rem
			0 !important;

		padding: 0 !important;

		overflow: visible !important;

		border-radius: 0 !important;

		outline: 0 !important;
		outline-offset: 0 !important;

		background:
			transparent !important;

		box-shadow:
			none !important;

		font-size:
			clamp(
				1.65rem,
				7vw,
				2.2rem
			) !important;

		line-height: 1.08 !important;
		text-align: left !important;
	}


	body > .round-center__details--portal .round-center__panel h4 {
		margin:
			0
			0
			1rem !important;

		padding: 0 !important;

		font-size: 1.1rem;
		line-height: 1.3;
		text-align: left !important;
	}


	body > .round-center__details--portal .round-center__panel p {
		margin: 0 !important;
		padding: 0 !important;

		font-size: 1rem;
		line-height: 1.55;
		text-align: left !important;
	}


	body > .round-center__details--portal .round-center__panel p + p {
		margin-top: 1rem !important;
	}
}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	body > .round-center__details--portal,
	body > .round-center__details--portal .round-center__panel {
		transition: none !important;
	}
}

/* ==========================================================================
   ROUND CENTER – 6/6 AUF ALLEN BREAKPOINTS + RESPONSIVE TYPOGRAFIE
   ========================================================================== */

.round-center > .frame-type-liepstypo3defaults_102-columns-50-50 > .row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
}

.round-center > .frame-type-liepstypo3defaults_102-columns-50-50 > .row > [class*="col-"] {
	flex: 0 0 50% !important;
	width: 50% !important;
	max-width: 50% !important;
	min-width: 0 !important;
}

.round-center {
	--round-size: 6rem;
	--round-gap: .55rem;
	--round-font-branding: 1rem;
	--round-font-ux: 1.35rem;
	--round-font-ui: 1.1rem;
	--round-font-content: 1.05rem;
}

.round-center .row .frame-type-text h3 {
	padding: .55rem;
	line-height: .98;
}

.round-center .row.reverse-layout > div:first-child h3,
.round-center .row.reverse-layout > div:first-child:hover h3 {
	font-size: var(--round-font-branding);
	transform: translate(-.35rem, .3rem);
}

.round-center .row.reverse-layout > div:last-child h3,
.round-center .row.reverse-layout > div:last-child:hover h3 {
	font-size: var(--round-font-ux);
	transform: rotate(-5deg);
}

.round-center .row:not(.reverse-layout) > div:first-child h3,
.round-center .row:not(.reverse-layout) > div:first-child:hover h3 {
	font-size: var(--round-font-ui);
	transform: translateY(.45rem);
}

.round-center .row:not(.reverse-layout) > div:last-child h3,
.round-center .row:not(.reverse-layout) > div:last-child:hover h3 {
	font-size: var(--round-font-content);
	transform: translate(.25rem, -.15rem);
}

@media (max-width: 991.98px) {
	.round-center .round-center__trigger:focus-visible,
	.round-center .round-center__trigger.active {
		transform: scale(1.05);
	}
}

@media (min-width: 576px) {
	.round-center {
		--round-size: 7.5rem;
		--round-gap: .75rem;
		--round-font-branding: 1.3rem;
		--round-font-ux: 1.7rem;
		--round-font-ui: 1.4rem;
		--round-font-content: 1.45rem;
	}

	.round-center .row .frame-type-text h3 {
		padding: .75rem;
	}
}

@media (min-width: 768px) {
	.round-center {
		--round-size: 9rem;
		--round-gap: .9rem;
		--round-font-branding: 1.65rem;
		--round-font-ux: 2.15rem;
		--round-font-ui: 1.75rem;
		--round-font-content: 1.9rem;
	}

	.round-center .row .frame-type-text h3 {
		padding: .9rem;
		line-height: 1;
	}
}

@media (min-width: 992px) {
	.round-center {
		--round-size: 11rem;
		--round-gap: 1rem;
		--round-font-branding: 2rem;
		--round-font-ux: 2.7rem;
		--round-font-ui: 2rem;
		--round-font-content: 2.4rem;
		--round-font-branding-hover: 2.2rem;
		--round-font-ux-hover: 3.15rem;
		--round-font-ui-hover: 2.5rem;
		--round-font-content-hover: 2.75rem;
	}

	.round-center .row .frame-type-text h3 {
		padding: 1rem;
		line-height: 1.02;
	}
}

@media (min-width: 1200px) {
	.round-center {
		--round-size: 13rem;
		--round-gap: 1.25rem;
		--round-font-branding: 2.45rem;
		--round-font-ux: 3.35rem;
		--round-font-ui: 2.25rem;
		--round-font-content: 2.9rem;
		--round-font-branding-hover: 2.7rem;
		--round-font-ux-hover: 4rem;
		--round-font-ui-hover: 3.25rem;
		--round-font-content-hover: 3.35rem;
	}
}

@media (min-width: 1400px) {
	.round-center {
		--round-size: 15rem;
		--round-gap: 1.5rem;
		--round-font-branding: 3rem;
		--round-font-ux: 4rem;
		--round-font-ui: 2.5rem;
		--round-font-content: 3.5rem;
		--round-font-branding-hover: 3.2rem;
		--round-font-ux-hover: 5rem;
		--round-font-ui-hover: 5rem;
		--round-font-content-hover: 4rem;
	}
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
	.round-center .row.reverse-layout > div:first-child:hover h3 {
		font-size: var(--round-font-branding-hover);
		transform: translate(-1rem, -1rem);
	}

	.round-center .row.reverse-layout > div:last-child:hover h3 {
		font-size: var(--round-font-ux-hover);
		transform: rotate(-5deg) translate(2rem, -.5rem);
	}

	.round-center .row:not(.reverse-layout) > div:first-child:hover h3 {
		font-size: var(--round-font-ui-hover);
		transform: translateY(1rem) translateX(-1rem);
	}

	.round-center .row:not(.reverse-layout) > div:last-child:hover h3 {
		font-size: var(--round-font-content-hover);
		transform: translate(1rem, 2rem);
	}
}