/**
 * TONIFY Landing
 * Szene 1 – Zwischen zwei Gedanken
 */

/* Der äußere Abschnitt erzeugt den Scrollweg. */
.tonify-intro {
	position: relative !important;
	min-height: 100vh !important;
	overflow: visible !important;
	background: #000 !important;

	--tonify-halo-mid: 42px;
	--tonify-halo-far: 120px;
	--tonify-halo-opacity: 0.34;;
}

/* Imprezas innere Container dürfen Sticky nicht blockieren. */
.tonify-intro .l-section-h,
.tonify-intro .g-cols,
.tonify-intro .wpb_column,
.tonify-intro .vc_column-inner,
.tonify-intro .wpb_wrapper,
.tonify-intro .w-html,
.tonify-intro .w-html-h {
	width: 100% !important;
	max-width: none !important;
	min-height: 100vh !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	transform: none !important;
}

.tonify-intro .l-section-h {
	display: block !important;
}

/* Unsere eigene Vollbildbühne. */
.tonify-stage {
	position: sticky !important;
	top: 0;
	z-index: 10;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: #000;
	isolation: isolate;
}

body.admin-bar .tonify-stage {
	top: 32px;
	height: calc(100vh - 32px);
}

/* Lichtpunkt */
.tonify-lightpoint {
	position: absolute;
	top: 24%;
	left: 77%;
	z-index: 20;
	display: block !important;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	background: #f0d39a;

	box-shadow:
		0 0 8px rgba(240, 211, 154, 0.95),
		0 0 var(--tonify-halo-mid) rgba(199, 161, 90, 0.7),
		0 0 var(--tonify-halo-far)
			rgba(199, 161, 90, var(--tonify-halo-opacity));

	transform: translate(-50%, -50%) scale(0.2);
	animation: tonify-point-appears 2.8s 0.8s ease-out forwards;
}
.tonify-lightpoint {
	isolation: isolate;
	overflow: visible;
}

.tonify-lightpoint::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	pointer-events: none;

	background: radial-gradient(
		circle,
		rgba(240, 211, 154, 0.3) 0%,
		rgba(199, 161, 90, 0.16) 24%,
		rgba(199, 161, 90, 0.07) 48%,
		rgba(199, 161, 90, 0.02) 66%,
		transparent 76%
	);

	filter: blur(5px);
	transform: translate(-50%, -50%);
}

@keyframes tonify-point-appears {
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* Gemeinsame Grundlage aller Texte */
.tonify-interesting,
.tonify-story,
.tonify-question {
	position: absolute;
	top: 52%;
	left: 50%;
	display: block;
	margin: 0;
	opacity: 0;
	font-weight: 300;
	text-align: center;
	pointer-events: none;
	transform: translate(-50%, -50%) translateY(12px);
}

/* „Interessant …“ */
.tonify-interesting {
	z-index: 30;
	color: rgba(199, 161, 90, 0.82);
	font-size: clamp(0.95rem, 1.25vw, 1.3rem);
	letter-spacing: 0.06em;
	white-space: nowrap;
	animation: tonify-interesting-appears 3.8s 3.2s ease-in-out forwards;
}

@keyframes tonify-interesting-appears {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) translateY(10px);
	}

	25%,
	70% {
		opacity: 1;
		transform: translate(-50%, -50%) translateY(0);
	}

	100% {
		opacity: 0;
		transform: translate(-50%, -50%) translateY(-8px);
	}
}

/* Satz 2 */
.tonify-story {
	z-index: 31;
	width: min(88vw, 760px);
	color: rgba(210, 179, 122, 0.9);
	font-size: clamp(1.15rem, 1.7vw, 1.75rem);
	line-height: 1.55;
	letter-spacing: 0.035em;
	animation: tonify-story-appears 5s 7.1s ease-in-out forwards;
}

@keyframes tonify-story-appears {
	0%,
	8% {
		opacity: 0;
		transform: translate(-50%, -50%) translateY(12px);
	}

	25%,
	70% {
		opacity: 1;
		transform: translate(-50%, -50%) translateY(0);
	}

	100% {
		opacity: 0;
		transform: translate(-50%, -50%) translateY(-8px);
	}
}

/* Abschlussfrage */
.tonify-question {
	z-index: 32;
	width: min(88vw, 820px);
	color: rgba(199, 161, 90, 0.88);
	font-size: clamp(1.2rem, 1.8vw, 1.85rem);
	line-height: 1.5;
	letter-spacing: 0.035em;
	animation: tonify-question-appears 3.8s 12.8s ease-out forwards;
}

@keyframes tonify-question-appears {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) translateY(12px);
	}

	55%,
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) translateY(0);
	}
}
section.l-section.tonify-aurora {
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center center !important;
	background-attachment: scroll !important;
}
html.tonify-scroll-locked,
body.tonify-scroll-locked {
	overflow: hidden !important;
	overscroll-behavior: none;
}
/* ==================================================
   TONIFY – filmischer Übergang zur Aurora
   ================================================== */

/* Die Frage löst sich zuerst aus der schwarzen Bühne */
html.tonify-transitioning .tonify-question {
	animation:
		tonify-question-release 1100ms
		cubic-bezier(0.4, 0, 0.2, 1)
		forwards !important;
}

/* Der Lichtpunkt flammt kurz auf und verliert sich im Licht */
html.tonify-transitioning .tonify-lightpoint {
	animation:
		tonify-lightpoint-release 3200ms
		cubic-bezier(0.22, 1, 0.36, 1)
		forwards !important;
}

/* Der Halo öffnet sich während des gesamten Gleitens */
html.tonify-transitioning .tonify-lightpoint::before {
	animation:
		tonify-halo-release 3200ms
		cubic-bezier(0.22, 1, 0.36, 1)
		forwards !important;
}


@keyframes tonify-question-release {
	0% {
		opacity: 1;
		transform:
			translateX(-50%)
			translateY(0);
		filter: blur(0);
	}

	100% {
		opacity: 0;
		transform:
			translateX(-50%)
			translateY(-16px);
		filter: blur(3px);
	}
}


@keyframes tonify-lightpoint-release {
	0% {
		opacity: 1;
		filter:
			brightness(1)
			drop-shadow(0 0 0 rgba(240, 211, 154, 0));
	}

	24% {
		opacity: 1;
		filter:
			brightness(2.2)
			drop-shadow(0 0 22px rgba(240, 211, 154, 0.9));
	}

	65% {
		opacity: 0.8;
		filter:
			brightness(1.7)
			drop-shadow(0 0 42px rgba(240, 211, 154, 0.65));
	}

	100% {
		opacity: 0;
		filter:
			brightness(1.2)
			blur(2px)
			drop-shadow(0 0 60px rgba(240, 211, 154, 0));
	}
}


@keyframes tonify-halo-release {
	0% {
		opacity: 0.85;
		transform:
			translate(-50%, -50%)
			scale(1);
	}

	38% {
		opacity: 1;
		transform:
			translate(-50%, -50%)
			scale(2.4);
	}

	72% {
		opacity: 0.72;
		transform:
			translate(-50%, -50%)
			scale(4.8);
	}

	100% {
		opacity: 0;
		transform:
			translate(-50%, -50%)
			scale(7);
	}
}
/* ==================================================
   TONIFY – Aurora-Bühne und Markenankunft
   ================================================== */

section.l-section.tonify-aurora {
	position: relative !important;
	min-height: 100vh !important;
	overflow: hidden !important;
}

/* Impreza-Hüllen über die volle Aurora-Row aufspannen. */
.tonify-aurora .l-section-h,
.tonify-aurora .g-cols,
.tonify-aurora .wpb_column,
.tonify-aurora .vc_column-inner,
.tonify-aurora .wpb_wrapper,
.tonify-aurora .w-html,
.tonify-aurora .w-html-h {
	width: 100% !important;
	max-width: none !important;
	min-height: 100vh !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tonify-aurora .l-section-h {
	position: relative !important;
}

.tonify-aurora .w-html,
.tonify-aurora .w-html-h {
	position: absolute !important;
	inset: 0 !important;
	z-index: 20 !important;
}

.tonify-aurora-stage {
	position: absolute !important;
	inset: 0 !important;
	z-index: 21;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	font-family: Georgia, "Times New Roman", serif;
	color: #ddb76f;
	text-align: center;
}

.tonify-aurora-brand,
.tonify-aurora-claim,
.tonify-aurora-how,
.tonify-aurora-paths {
	position: absolute;
	left: 50%;
	width: min(92vw, 1200px);
	transform: translateX(-50%);
}

.tonify-aurora-brand {
	top: 28%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tonify-aurora-symbol {
	display: block;
	width: clamp(72px, 6vw, 108px);
	height: auto;
	opacity: 0;
}

.tonify-aurora-wordmark {
	margin-top: 18px;
	padding-left: 0.55em;
	font-size: clamp(25px, 2.5vw, 42px);
	font-weight: 400;
	letter-spacing: 0.55em;
	line-height: 1;
	opacity: 0;
}

.tonify-aurora-claim {
	top: 53%;
	display: flex;
	justify-content: space-between;
	gap: 30px;
	font-size: clamp(17px, 1.55vw, 28px);
	letter-spacing: 0.11em;
	opacity: 0;
}

.tonify-aurora-how {
	top: 50%;
	font-size: clamp(48px, 6vw, 92px);
	font-weight: 400;
	letter-spacing: 0.18em;
	opacity: 0;
}

.tonify-aurora-paths {
	top: 65%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 22px 42px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(12px, 1vw, 16px);
	letter-spacing: 0.18em;
	opacity: 1;
}

.tonify-aurora-paths span {
	opacity: 0;
}

/* Symbol – 0,8 Sekunden */
html.tonify-aurora-active .tonify-aurora .tonify-aurora-symbol,
.tonify-aurora.tonify-door-active .tonify-aurora-symbol {
	animation:
		tonify-aurora-reveal 1100ms
		cubic-bezier(0.22, 1, 0.36, 1)
		800ms
		both;
}

/* TONIFY – 1,2 Sekunden */
html.tonify-aurora-active .tonify-aurora .tonify-aurora-wordmark,
.tonify-aurora.tonify-door-active .tonify-aurora-wordmark {
	animation:
		tonify-aurora-reveal 1200ms
		cubic-bezier(0.22, 1, 0.36, 1)
		1200ms
		both;
}

/* Claim – erscheint bei 2,4 Sekunden und bleibt lange genug zum Einprägen. */
html.tonify-aurora-active .tonify-aurora .tonify-aurora-claim,
.tonify-aurora.tonify-door-active .tonify-aurora-claim {
	animation:
		tonify-aurora-claim-sequence 5600ms
		cubic-bezier(0.4, 0, 0.2, 1)
		2400ms
		both;
}

/* WIE? – nach dem längeren Claim-Auftritt bei 8,0 Sekunden */
html.tonify-aurora-active .tonify-aurora .tonify-aurora-how,
.tonify-aurora.tonify-door-active .tonify-aurora-how {
	animation:
		tonify-aurora-how-reveal 1300ms
		cubic-bezier(0.22, 1, 0.36, 1)
		8000ms
		both;
}

/* Wege – nacheinander nach dem WIE? */
html.tonify-aurora-active .tonify-aurora .tonify-aurora-paths span,
.tonify-aurora.tonify-door-active .tonify-aurora-paths span {
	animation:
		tonify-aurora-path-reveal 900ms
		cubic-bezier(0.22, 1, 0.36, 1)
		both;
}

html.tonify-aurora-active .tonify-aurora .tonify-aurora-paths span:nth-child(1),
.tonify-aurora.tonify-door-active .tonify-aurora-paths span:nth-child(1) {
	animation-delay: 8900ms;
}

html.tonify-aurora-active .tonify-aurora .tonify-aurora-paths span:nth-child(2),
.tonify-aurora.tonify-door-active .tonify-aurora-paths span:nth-child(2) {
	animation-delay: 9100ms;
}

html.tonify-aurora-active .tonify-aurora .tonify-aurora-paths span:nth-child(3),
.tonify-aurora.tonify-door-active .tonify-aurora-paths span:nth-child(3) {
	animation-delay: 9300ms;
}

html.tonify-aurora-active .tonify-aurora .tonify-aurora-paths span:nth-child(4),
.tonify-aurora.tonify-door-active .tonify-aurora-paths span:nth-child(4) {
	animation-delay: 9500ms;
}

html.tonify-aurora-active .tonify-aurora .tonify-aurora-paths span:nth-child(5),
.tonify-aurora.tonify-door-active .tonify-aurora-paths span:nth-child(5) {
	animation-delay: 9700ms;
}

@keyframes tonify-aurora-reveal {
	0% {
		opacity: 0;
		transform: translateY(12px);
		filter: blur(5px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

@keyframes tonify-aurora-claim-sequence {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(12px);
		filter: blur(4px);
	}

	16%,
	80% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
		filter: blur(0);
	}

	100% {
		opacity: 0;
		transform: translateX(-50%) translateY(-10px);
		filter: blur(3px);
	}
}

@keyframes tonify-aurora-how-reveal {
	0% {
		opacity: 0;
		transform: translateX(-50%) scale(0.94);
		filter: blur(6px);
	}

	100% {
		opacity: 1;
		transform: translateX(-50%) scale(1);
		filter: blur(0);
	}
}

@keyframes tonify-aurora-path-reveal {
	0% {
		opacity: 0;
		transform: translateY(12px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 767px) {
	.tonify-aurora-brand {
		top: 22%;
	}

	.tonify-aurora-claim {
		top: 48%;
		flex-direction: column;
		gap: 8px;
	}

	.tonify-aurora-how {
		top: 47%;
	}

	.tonify-aurora-paths {
		top: 61%;
		flex-direction: column;
		gap: 14px;
	}
}
/* ==================================================
   TONIFY – Möglichkeiten reagieren auf Berührung
   ================================================== */

.tonify-aurora-paths {
	position: absolute;
	pointer-events: auto;
}

/*
 * Die bisherigen span-Animationen dürfen unsere
 * Bedeutungszeilen nicht automatisch sichtbar machen.
 */
.tonify-path-message {
	animation: none !important;
}

/* Jede Möglichkeit */
.tonify-path {
	position: static;
	opacity: 0;
}

/* Die eigentliche Tür */
.tonify-path-trigger {
	appearance: none;
	-webkit-appearance: none;

	position: relative;
	display: inline-block;
	padding: 8px 4px 11px;

	border: 0;
	background: transparent;
	color: rgba(221, 183, 111, 0.82);

	font: inherit;
	font-size: inherit;
	font-weight: 400;
	letter-spacing: inherit;
	line-height: 1.2;

	cursor: pointer;
	transition:
		opacity 550ms ease,
		color 550ms ease,
		text-shadow 700ms ease,
		transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Feine goldene Lichtlinie */
.tonify-path-trigger::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;

	width: 0;
	height: 1px;

	background: rgba(240, 211, 154, 0.9);
	box-shadow:
		0 0 8px rgba(240, 211, 154, 0.7),
		0 0 18px rgba(199, 161, 90, 0.4);

	transform: translateX(-50%);
	transition:
		width 700ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 500ms ease;
}

/* Alle Wege treten zurück, sobald einer berührt wird */
.tonify-aurora-paths:hover
.tonify-path-trigger,
.tonify-aurora-paths:focus-within
.tonify-path-trigger {
	opacity: 0.3;
}

/* Der gewählte Weg bleibt und beginnt zu leuchten */
.tonify-path:hover
.tonify-path-trigger,
.tonify-path:focus-within
.tonify-path-trigger {
	opacity: 1;
	color: #f0d39a;
	text-shadow:
		0 0 10px rgba(240, 211, 154, 0.6),
		0 0 25px rgba(199, 161, 90, 0.38);
	transform: translateY(-3px);
}

.tonify-path:hover
.tonify-path-trigger::after,
.tonify-path:focus-within
.tonify-path-trigger::after {
	width: 100%;
}

/* Tastaturfokus bleibt sichtbar und elegant */
.tonify-path-trigger:focus-visible {
	outline: 1px solid rgba(240, 211, 154, 0.65);
	outline-offset: 7px;
}

/* Alle Bedeutungszeilen erscheinen am selben ruhigen Ort */
.tonify-path-message {
	position: absolute;
	top: calc(100% + 25px);
	left: 50%;

	display: block;
	width: min(88vw, 720px);

	color: rgba(240, 211, 154, 0.92);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(15px, 1.25vw, 21px);
	font-weight: 400;
	letter-spacing: 0.045em;
	line-height: 1.5;
	text-align: center;

	opacity: 0;
	pointer-events: none;
	filter: blur(4px);
	transform:
		translateX(-50%)
		translateY(10px);

	transition:
		opacity 750ms ease,
		filter 900ms ease,
		transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Die Bedeutung der berührten Möglichkeit öffnet sich */
.tonify-path:hover
.tonify-path-message,
.tonify-path:focus-within
.tonify-path-message {
	opacity: 1;
	filter: blur(0);
	transform:
		translateX(-50%)
		translateY(0);
}


/* Die neuen Tür-Elemente erscheinen nach dem WIE? */

html.tonify-aurora-active
.tonify-aurora
.tonify-path,
.tonify-aurora.tonify-door-active
.tonify-path {
	animation:
		tonify-aurora-path-reveal 900ms
		cubic-bezier(0.22, 1, 0.36, 1)
		both;
}

html.tonify-aurora-active
.tonify-aurora
.tonify-path:nth-child(1),
.tonify-aurora.tonify-door-active
.tonify-path:nth-child(1) {
	animation-delay: 8900ms;
}

html.tonify-aurora-active
.tonify-aurora
.tonify-path:nth-child(2),
.tonify-aurora.tonify-door-active
.tonify-path:nth-child(2) {
	animation-delay: 9100ms;
}

html.tonify-aurora-active
.tonify-aurora
.tonify-path:nth-child(3),
.tonify-aurora.tonify-door-active
.tonify-path:nth-child(3) {
	animation-delay: 9300ms;
}

html.tonify-aurora-active
.tonify-aurora
.tonify-path:nth-child(4),
.tonify-aurora.tonify-door-active
.tonify-path:nth-child(4) {
	animation-delay: 9500ms;
}

html.tonify-aurora-active
.tonify-aurora
.tonify-path:nth-child(5),
.tonify-aurora.tonify-door-active
.tonify-path:nth-child(5) {
	animation-delay: 9700ms;
}


@media (max-width: 767px) {
	.tonify-path-trigger {
		padding: 5px 4px 7px;
	}

	.tonify-path-message {
		top: calc(100% + 16px);
		font-size: 15px;
	}
}
/* ==================================================
   TONIFY – CALM öffnet sich
   ================================================== */

.tonify-aurora-how,
.tonify-path {
	transition:
		opacity 800ms ease,
		filter 900ms ease,
		transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Das WIE? hat seine Antwort erhalten */
html.tonify-calm-opening
.tonify-aurora-how {
	opacity: 0 !important;
	filter: blur(5px);
	transform:
		translateX(-50%)
		translateY(-18px)
		scale(0.97);
}

/* Alle anderen Möglichkeiten treten aus dem Raum */
html.tonify-calm-opening
.tonify-path:not(:first-child) {
	opacity: 0 !important;
	filter: blur(3px);
	transform: translateY(10px);
	pointer-events: none;
}

/* CALM bleibt als gewählte Möglichkeit zurück */
html.tonify-calm-opening
.tonify-path:first-child {
	opacity: 1 !important;
	transform:
		translateY(-8px)
		scale(1.08);
}

/* CALM beginnt intensiver zu leuchten */
html.tonify-calm-opening
.tonify-path:first-child
.tonify-path-trigger {
	opacity: 1;
	color: #f0d39a;
	text-shadow:
		0 0 12px rgba(240, 211, 154, 0.78),
		0 0 32px rgba(199, 161, 90, 0.5);
}

/* Die goldene Linie wird zur Öffnung */
html.tonify-calm-opening
.tonify-path:first-child
.tonify-path-trigger::after {
	width: min(52vw, 560px);
}

/* Die Vision von CALM bleibt während der Öffnung sichtbar */
html.tonify-calm-opening
.tonify-path:first-child
.tonify-path-message {
	opacity: 1;
	filter: blur(0);
	transform:
		translateX(-50%)
		translateY(0);
}
/* ==================================================
   TONIFY – CALM entsteht aus dem weißen Raum
   ================================================== */

.tonify-calm {
	position: relative;
	overflow: hidden;
}

/* Impreza-Hüllen über die gesamte CALM-Row aufspannen */
.tonify-calm .l-section-h,
.tonify-calm .g-cols,
.tonify-calm .wpb_column,
.tonify-calm .vc_column-inner,
.tonify-calm .wpb_wrapper,
.tonify-calm .w-html,
.tonify-calm .w-html-h {
	width: 100% !important;
	height: 100% !important;
	min-height: 100vh !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tonify-calm .w-html,
.tonify-calm .w-html-h {
	position: absolute;
	inset: 0;
	z-index: 5;
}

.tonify-calm-stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Das zunächst vollkommen weiße Blatt */
.tonify-calm-veil {
	position: absolute;
	inset: 0;
	z-index: 1;

	background: #fafaf7;
	opacity: 1;
	pointer-events: none;
}

/* CALM und sein Satz */
.tonify-calm-copy {
	position: absolute;
	inset: 0;
	z-index: 2;

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

	padding: 24px;
	color: #263541;
	text-align: center;
	pointer-events: none;
}

.tonify-calm-title {
	padding-left: 0.32em;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(38px, 5vw, 78px);
	font-weight: 400;
	letter-spacing: 0.32em;
	line-height: 1;

	opacity: 0;
}

.tonify-calm-line {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(18px, 1.8vw, 29px);
	font-weight: 400;
	letter-spacing: 0.035em;
	line-height: 1.5;

	opacity: 0;
}


/* Erst nach vollständiger Landung beginnt die Szene */

.tonify-calm.tonify-door-active
.tonify-calm-title {
	animation:
		tonify-calm-text-in 1200ms
		cubic-bezier(0.22, 1, 0.36, 1)
		800ms
		both,
		tonify-calm-text-out 2100ms
		ease
		5000ms
		forwards;
}

.tonify-calm.tonify-door-active
.tonify-calm-line {
	animation:
		tonify-calm-text-in 1400ms
		cubic-bezier(0.22, 1, 0.36, 1)
		1600ms
		both,
		tonify-calm-text-out 2100ms
		ease
		5000ms
		forwards;
}

/*
 * Das Weiß wird langsam durchsichtig.
 * Der CALM-Raum offenbart sich darunter.
 */
.tonify-calm.tonify-door-active
.tonify-calm-veil {
	animation:
		tonify-calm-veil-opens 4200ms
		cubic-bezier(0.4, 0, 0.2, 1)
		3400ms
		forwards;
}


@keyframes tonify-calm-text-in {
	0% {
		opacity: 0;
		filter: blur(5px);
		transform: translateY(12px);
	}

	100% {
		opacity: 1;
		filter: blur(0);
		transform: translateY(0);
	}
}


@keyframes tonify-calm-text-out {
	0% {
		opacity: 1;
		filter: blur(0);
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		filter: blur(3px);
		transform: translateY(-10px);
	}
}


@keyframes tonify-calm-veil-opens {
	0% {
		opacity: 1;
	}

	25% {
		opacity: 0.92;
	}

	100% {
		opacity: 0;
	}
}


@media (max-width: 767px) {
	.tonify-calm-copy {
		gap: 18px;
	}

	.tonify-calm-title {
		font-size: clamp(34px, 11vw, 58px);
	}

	.tonify-calm-line {
		width: min(86vw, 430px);
		font-size: 18px;
	}
}
/* ==================================================
   TONIFY – CALM Feintiming
   ================================================== */

.tonify-calm.tonify-door-active
.tonify-calm-line {
	animation:
		tonify-calm-text-in 1400ms
		cubic-bezier(0.22, 1, 0.36, 1)
		2300ms
		both,

		tonify-calm-text-out 2100ms
		ease
		5700ms
		forwards;
}
/* ==================================================
   TONIFY – CALM Orientierung am See
   ================================================== */

.tonify-calm-guidance {
	position: absolute;
	inset: 0;
	z-index: 3;

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

	padding: 24px;
	text-align: center;
	pointer-events: none;
}

/* Die Frage */
.tonify-calm-question {
	width: min(90vw, 850px);
	margin-bottom: clamp(36px, 5vh, 68px);

	color: rgba(245, 248, 248, 0.96);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(23px, 2.7vw, 42px);
	font-weight: 400;
	letter-spacing: 0.035em;
	line-height: 1.35;

	opacity: 0;
	visibility: hidden;
	filter: blur(5px);
	transform: translateY(15px);

	text-shadow:
		0 1px 12px rgba(20, 42, 51, 0.55),
		0 0 32px rgba(20, 42, 51, 0.32);
}

/* Die drei Möglichkeiten */
.tonify-calm-paths {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: clamp(18px, 3vw, 48px);

	width: min(94vw, 1250px);
	pointer-events: auto;
}

.tonify-calm-path {
	appearance: none;
	-webkit-appearance: none;

	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 13px;

	min-width: 0;
	padding: 22px 18px 25px;

	border: 1px solid rgba(242, 247, 247, 0.25);
	border-radius: 2px;
	background: rgba(239, 246, 246, 0.07);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);

	color: #f5f8f8;
	text-align: center;
	cursor: pointer;

	opacity: 0;
	visibility: hidden;
	filter: blur(4px);
	transform: translateY(18px);

	box-shadow:
		inset 0 0 30px rgba(255, 255, 255, 0.025),
		0 12px 40px rgba(16, 38, 47, 0.08);

	transition:
		opacity 600ms ease,
		border-color 700ms ease,
		background 700ms ease,
		box-shadow 800ms ease,
		filter 700ms ease,
		transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tonify-calm-path-title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(13px, 1.15vw, 17px);
	font-weight: 400;
	letter-spacing: 0.19em;
	line-height: 1.3;
}

.tonify-calm-path-line {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(15px, 1.2vw, 19px);
	font-weight: 400;
	letter-spacing: 0.025em;
	line-height: 1.45;

	opacity: 0.72;
	transition:
		opacity 650ms ease,
		transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Feine Lichtlinie */
.tonify-calm-path::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -1px;

	width: 0;
	height: 1px;

	background: rgba(232, 246, 247, 0.95);
	box-shadow:
		0 0 10px rgba(214, 242, 245, 0.7),
		0 0 25px rgba(178, 224, 230, 0.42);

	transform: translateX(-50%);
	transition:
		width 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sobald eine Möglichkeit berührt wird, treten die anderen zurück */
.tonify-calm-paths:hover
.tonify-calm-path,
.tonify-calm-paths:focus-within
.tonify-calm-path {
	opacity: 0.38;
}

.tonify-calm-path:hover,
.tonify-calm-path:focus-visible {
	opacity: 1 !important;
	border-color: rgba(235, 248, 249, 0.72);
	background: rgba(239, 248, 249, 0.14);

	filter: blur(0);
	transform:
		translateY(-6px)
		scale(1.015);

	box-shadow:
		inset 0 0 35px rgba(255, 255, 255, 0.055),
		0 15px 55px rgba(16, 44, 54, 0.18),
		0 0 32px rgba(198, 233, 237, 0.12);
}

.tonify-calm-path:hover::after,
.tonify-calm-path:focus-visible::after {
	width: 72%;
}

.tonify-calm-path:hover
.tonify-calm-path-line,
.tonify-calm-path:focus-visible
.tonify-calm-path-line {
	opacity: 1;
	transform: translateY(2px);
}

.tonify-calm-path:focus-visible {
	outline: 1px solid rgba(235, 248, 249, 0.75);
	outline-offset: 7px;
}


/* ==================================================
   Zeitfolge nach Öffnung der Landschaft
   ================================================== */

/*
 * Das Bild ist ungefähr bei 7,6 Sekunden vollständig geöffnet.
 * Danach darf die Landschaft rund zwei Sekunden wirken.
 */

.tonify-calm.tonify-door-active
.tonify-calm-question {
	animation:
		tonify-calm-guidance-in 1400ms
		cubic-bezier(0.22, 1, 0.36, 1)
		9600ms
		both;
}

.tonify-calm.tonify-door-active
.tonify-calm-path:nth-child(1) {
	animation:
		tonify-calm-path-in 1100ms
		cubic-bezier(0.22, 1, 0.36, 1)
		10800ms
		both;
}

.tonify-calm.tonify-door-active
.tonify-calm-path:nth-child(2) {
	animation:
		tonify-calm-path-in 1100ms
		cubic-bezier(0.22, 1, 0.36, 1)
		11100ms
		both;
}

.tonify-calm.tonify-door-active
.tonify-calm-path:nth-child(3) {
	animation:
		tonify-calm-path-in 1100ms
		cubic-bezier(0.22, 1, 0.36, 1)
		11400ms
		both;
}


@keyframes tonify-calm-guidance-in {
	0% {
		opacity: 0;
		visibility: hidden;
		filter: blur(5px);
		transform: translateY(15px);
	}

	1% {
		visibility: visible;
	}

	100% {
		opacity: 1;
		visibility: visible;
		filter: blur(0);
		transform: translateY(0);
	}
}


@keyframes tonify-calm-path-in {
	0% {
		opacity: 0;
		visibility: hidden;
		filter: blur(4px);
		transform: translateY(18px);
	}

	1% {
		visibility: visible;
	}

	100% {
		opacity: 1;
		visibility: visible;
		filter: blur(0);
		transform: translateY(0);
	}
}


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

@media (max-width: 767px) {
	.tonify-calm-guidance {
		justify-content: flex-start;
		padding:
			clamp(90px, 15vh, 135px)
			18px
			25px;
	}

	.tonify-calm-question {
		margin-bottom: 25px;
		font-size: clamp(22px, 7vw, 31px);
	}

	.tonify-calm-paths {
		flex-direction: column;
		gap: 12px;
		width: min(90vw, 470px);
	}

	.tonify-calm-path {
		flex: none;
		width: 100%;
		padding: 15px 14px 17px;
		gap: 7px;
	}

	.tonify-calm-path-title {
		font-size: 12px;
	}

	.tonify-calm-path-line {
		font-size: 15px;
	}
}
/* ==================================================
   TONIFY – CALM Satz gleitet Wort für Wort herein
   ================================================== */

.tonify-calm.tonify-door-active
.tonify-calm-line {
	opacity: 1;
	animation:
		tonify-calm-text-out 2100ms
		ease
		6500ms
		forwards;
}

.tonify-calm-line span {
	display: inline-block;
	margin-right: 0.22em;

	opacity: 0;
	filter: blur(4px);
	transform: translateY(18px);
}

.tonify-calm-line span:last-child {
	margin-right: 0;
}

.tonify-calm.tonify-door-active
.tonify-calm-line span {
	animation:
		tonify-calm-word-in 850ms
		cubic-bezier(0.22, 1, 0.36, 1)
		both;
}

.tonify-calm.tonify-door-active
.tonify-calm-line span:nth-child(1) {
	animation-delay: 2300ms;
}

.tonify-calm.tonify-door-active
.tonify-calm-line span:nth-child(2) {
	animation-delay: 2520ms;
}

.tonify-calm.tonify-door-active
.tonify-calm-line span:nth-child(3) {
	animation-delay: 2740ms;
}

.tonify-calm.tonify-door-active
.tonify-calm-line span:nth-child(4) {
	animation-delay: 2960ms;
}

.tonify-calm.tonify-door-active
.tonify-calm-line span:nth-child(5) {
	animation-delay: 3180ms;
}

.tonify-calm.tonify-door-active
.tonify-calm-line span:nth-child(6) {
	animation-delay: 3400ms;
}

@keyframes tonify-calm-word-in {
	0% {
		opacity: 0;
		filter: blur(4px);
		transform: translateY(18px);
	}

	100% {
		opacity: 1;
		filter: blur(0);
		transform: translateY(0);
	}
}
/* ==================================================
   TONIFY – CALM Worte schmiegen sich seitlich ein
   ================================================== */

.tonify-calm-line {
	white-space: nowrap;
}

.tonify-calm-line span {
	opacity: 0;
	filter: blur(7px);
	transform: translateX(-24px);
	will-change: opacity, filter, transform;
}

.tonify-calm.tonify-door-active
.tonify-calm-line {
	opacity: 1;

	animation:
		tonify-calm-text-out 2200ms
		ease
		8500ms
		forwards;
}

.tonify-calm.tonify-door-active
.tonify-calm-line span {
	animation:
		tonify-calm-word-in 1500ms
		cubic-bezier(0.16, 1, 0.3, 1)
		both;
}

.tonify-calm.tonify-door-active
.tonify-calm-line span:nth-child(1) {
	animation-delay: 2400ms;
}

.tonify-calm.tonify-door-active
.tonify-calm-line span:nth-child(2) {
	animation-delay: 2850ms;
}

.tonify-calm.tonify-door-active
.tonify-calm-line span:nth-child(3) {
	animation-delay: 3300ms;
}

.tonify-calm.tonify-door-active
.tonify-calm-line span:nth-child(4) {
	animation-delay: 3750ms;
}

.tonify-calm.tonify-door-active
.tonify-calm-line span:nth-child(5) {
	animation-delay: 4200ms;
}

.tonify-calm.tonify-door-active
.tonify-calm-line span:nth-child(6) {
	animation-delay: 4650ms;
}

@keyframes tonify-calm-word-in {
	0% {
		opacity: 0;
		filter: blur(7px);
		transform: translateX(-24px);
	}

	45% {
		opacity: 0.72;
		filter: blur(2px);
	}

	100% {
		opacity: 1;
		filter: blur(0);
		transform: translateX(0);
	}
}

@media (max-width: 767px) {
	.tonify-calm-line {
		white-space: normal;
	}
}
/* ==================================================
   TONIFY – Heimkompass
   ================================================== */

.tonify-home-compass {
	position: fixed;
	top: 24px;
	left: 28px;
	z-index: 9999;

	display: inline-flex;
	align-items: center;
	gap: 10px;

	color: rgba(240, 211, 154, 0.9);
	text-decoration: none;

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

	transform: translateY(-8px);

	transition:
		opacity 900ms ease,
		visibility 900ms ease,
		transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
		color 600ms ease;
}

/* Erst nach der Ankunft in der Aurora sichtbar */
html.tonify-aurora-active
.tonify-home-compass {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.tonify-home-compass-symbol {
	display: block;
	flex: 0 0 auto;

	width: clamp(30px, 2.4vw, 40px);
	height: auto;
}

.tonify-home-compass-name {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(12px, 1vw, 15px);
	font-weight: 400;
	letter-spacing: 0.3em;
	line-height: 1;
}

.tonify-home-compass:hover {
	color: #f0d39a;
	text-shadow:
		0 0 10px rgba(240, 211, 154, 0.5);
}

/* Platz für die WordPress-Leiste im eingeloggten Zustand */
body.admin-bar
.tonify-home-compass {
	top: 56px;
}

@media (max-width: 767px) {
	.tonify-home-compass {
		top: 15px;
		left: 15px;
		gap: 8px;
	}

	body.admin-bar
	.tonify-home-compass {
		top: 61px;
	}

	.tonify-home-compass-symbol {
		width: 29px;
	}

	.tonify-home-compass-name {
		font-size: 11px;
		letter-spacing: 0.24em;
	}
}
/* ==================================================
   TONIFY – Mehr Möglichkeiten?
   ================================================== */

.tonify-calm-head {
	position: relative;
}

.tonify-more-possibilities {
	position: absolute;
	left: 50%;
	bottom: clamp(30px, 6vh, 68px);
	z-index: 20;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;

	color: rgba(240, 211, 154, 0.94);
	text-align: center;
	text-decoration: none;
	pointer-events: auto;

	opacity: 0;
	visibility: hidden;
	filter: blur(4px);

	transform:
		translateX(-50%)
		translateY(14px);

	transition:
		color 600ms ease,
		text-shadow 700ms ease;
}

.tonify-more-question {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(18px, 1.6vw, 25px);
	font-weight: 400;
	letter-spacing: 0.045em;
	line-height: 1.3;
}

.tonify-more-action {
	position: relative;
	padding: 2px 7px 8px;

	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(11px, 0.9vw, 14px);
	font-weight: 400;
	letter-spacing: 0.24em;
	line-height: 1;
}

.tonify-more-action::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;

	width: 18px;
	height: 1px;

	background: currentColor;
	box-shadow:
		0 0 8px rgba(240, 211, 154, 0.6);

	transform: translateX(-50%);

	transition:
		width 750ms
		cubic-bezier(0.22, 1, 0.36, 1);
}

/* Erscheint erst nach dem vollständigen Öffnen des Raums */
.tonify-door-active
.tonify-more-possibilities {
	animation:
		tonify-more-possibilities-in 1200ms
		cubic-bezier(0.22, 1, 0.36, 1)
		1800ms
		both;
}

.tonify-more-possibilities:hover,
.tonify-more-possibilities:focus-visible {
	color: #f0d39a;

	text-shadow:
		0 0 12px rgba(240, 211, 154, 0.55);
}

.tonify-more-possibilities:hover
.tonify-more-action::after,
.tonify-more-possibilities:focus-visible
.tonify-more-action::after {
	width: 100%;
}

.tonify-more-possibilities:focus-visible {
	outline: 1px solid rgba(240, 211, 154, 0.65);
	outline-offset: 9px;
}

@keyframes tonify-more-possibilities-in {
	0% {
		opacity: 0;
		visibility: hidden;
		filter: blur(4px);

		transform:
			translateX(-50%)
			translateY(14px);
	}

	1% {
		visibility: visible;
	}

	100% {
		opacity: 1;
		visibility: visible;
		filter: blur(0);

		transform:
			translateX(-50%)
			translateY(0);
	}
}

@media (max-width: 767px) {
	.tonify-more-possibilities {
		bottom: 24px;
	}

	.tonify-more-question {
		font-size: 18px;
	}

	.tonify-more-action {
		font-size: 11px;
	}
}
/* ==================================================
   TONIFY – IM KOPF Raum vollständig aufspannen
   ================================================== */

.tonify-calm-head {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
}

.tonify-calm-head .l-section-h,
.tonify-calm-head .g-cols,
.tonify-calm-head .wpb_column,
.tonify-calm-head .vc_column-inner,
.tonify-calm-head .wpb_wrapper,
.tonify-calm-head .w-html,
.tonify-calm-head .w-html-h {
	width: 100% !important;
	height: 100% !important;
	min-height: 100vh !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tonify-calm-head .w-html,
.tonify-calm-head .w-html-h {
	position: absolute;
	inset: 0;
}
/* CALM – Abschlusstür erst nach der Raumchoreografie */
.tonify-calm.tonify-door-active
.tonify-more-possibilities {
	animation-delay: 13000ms;
}
.tonify-calm.tonify-door-active
.tonify-calm-line span:nth-child(7) {
	animation-delay: 5100ms;
}