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

/* ==========================================================================
   ROTATE SWITCH
   ========================================================================== */

.rotate-switch {
	--rotate-switch-duration: .75s;
	--rotate-switch-perspective: 1600px;
	--rotate-switch-button-size: 3rem;

	position: relative;
	isolation: isolate;
	perspective: var(--rotate-switch-perspective);
}

.rotate-switch > .container-fluid {
	position: relative;
	padding-left: 0;
	padding-right: 0;
}

/*
 * Dieser Container wird als EINHEIT gedreht.
 * Beide Faces liegen in derselben Grid-Zelle.
 */
.rotate-switch__stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	position: relative;
	width: 100%;

	transform: rotateY(0deg);
	transform-origin: 50% 50%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;

	transition:
		transform var(--rotate-switch-duration) cubic-bezier(.22, 1, .36, 1);

	will-change: transform;
}

/*
 * Beide Ebenen tragen weiterhin zur Höhe des Grid bei.
 * Deshalb fällt die Section nicht auf 0px zusammen.
 */
.rotate-switch__face {
	grid-column: 1;
	grid-row: 1;

	position: relative;
	width: 100%;
	min-width: 0;

	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	/*
	 * Ganz wichtig:
	 * Nur die Stage ist 3D.
	 * Der komplette Inhalt einer Face wird zu EINER flachen Fläche.
	 *
	 * Dadurch können H3-Transforms der Rückseite nicht mehr durch
	 * die sichtbare Vorderseite hindurchragen.
	 */
	transform-style: flat;
	-webkit-transform-style: flat;

	isolation: isolate;
}
.rotate-switch__face[aria-hidden="true"] {
	visibility: hidden;
}

/*
 * Während der eigentlichen Drehung müssen beide Seiten sichtbar sein,
 * sonst hätten wir wieder das vorherige Flackern in der Mitte.
 */
.rotate-switch.is-animating .rotate-switch__face {
	visibility: visible !important;
}
/* Vorderseite */
.rotate-switch__face--front {
	transform: rotateY(0deg);
	pointer-events: auto;
}

/* Rückseite */
.rotate-switch__face--back {
	transform: rotateY(180deg);
	pointer-events: none;
}

/*
 * Nicht die Faces einzeln drehen.
 * Nur die komplette Bühne wird gedreht.
 */
.rotate-switch.is-rotated .rotate-switch__stage {
	transform: rotateY(-180deg);
}

/*
 * Nur die tatsächlich sichtbare Seite darf Klicks empfangen.
 */
.rotate-switch.is-rotated .rotate-switch__face--front {
	pointer-events: none;
}

.rotate-switch.is-rotated .rotate-switch__face--back {
	pointer-events: auto;
}

/*
 * Während der Drehung keine Klicks auf Inhalte zulassen.
 * Der Rotate-Button liegt außerhalb der Stage und bleibt davon unberührt.
 */
.rotate-switch.is-animating .rotate-switch__face {
	pointer-events: none;
}

/* ==========================================================================
   Rotate-Button
   ========================================================================== */

.rotate-switch__trigger {
	position: absolute;
    bottom: calc(10px - var(--rotate-switch-button-size)/2);
    right: calc(50% - var(--rotate-switch-button-size)/2);
	z-index: 100;

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

	width: var(--rotate-switch-button-size);
	height: var(--rotate-switch-button-size);
	padding: 0;

	border: 0;
	border-radius: 50%;

	color: var(--brand-color-mirage);
	background: var(--bs-white);

	box-shadow:
		0 .25rem .1258rem
		rgba(var(--brand-color-mirage-dark-rgb), .3);

	cursor: pointer;

	transform: translateY(-50%);

	transition:
		background-color .25s ease,
		color .25s ease,
		box-shadow .25s ease;
}

/*
 * Das Icon selbst empfängt keinerlei Klicks.
 * event.target bleibt damit immer der Button.
 */
.rotate-switch__trigger > * {
	pointer-events: none;
}

.rotate-switch__trigger i {
	transition:
		transform .45s cubic-bezier(.22, 1, .36, 1);
}

.rotate-switch__trigger:hover {
	color: var(--bs-body-color);
	background: var(--bs-secondary);
}

.rotate-switch__trigger:hover i {
	transform: rotate(-90deg);
}

.rotate-switch.is-rotated .rotate-switch__trigger i {
	transform: rotate(-180deg);
}

.rotate-switch.is-rotated .rotate-switch__trigger:hover i {
	transform: rotate(-270deg);
}

.rotate-switch__trigger:focus {
	outline: none;
}

.rotate-switch__trigger:focus-visible {
	outline: 3px solid var(--brand-color-mirage);
	outline-offset: 4px;
}

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

@media (max-width: 767.98px) {
	.rotate-switch {
		--rotate-switch-duration: .6s;
		--rotate-switch-button-size: 2.75rem;
	}

	.rotate-switch__trigger {
		top: auto;
		right: 1rem;
		bottom: 1rem;
		transform: none;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.rotate-switch__stage,
	.rotate-switch__trigger,
	.rotate-switch__trigger i {
		transition: none;
	}
}