@charset "utf-8";
/* =====================================================================
   Logo-Intro der Startseite (nur Website, nicht in der App)
   Beim ersten Besuch der Startseite spielt das animierte Stammeslogo groß
   in der Mitte, danach fliegt es an seinen Platz in der Kopfzeile (.menu).
   Aufbau (wird von js/logo-intro.js erzeugt, steht als erstes Element im body):
     div.logo-intro
       > div.logo-intro__grund      (Hintergrund, blendet beim Flug aus)
       > div.logo-intro__buehne     (Glanz + goldene Kompass-Wellen)
           > img.logo-intro__logo   (images/logo_animiert.svg)
       > p.logo-intro__gruss        („Herzlich willkommen“ mit Goldlinien)
       > button.logo-intro__weiter  („Überspringen“, Nebenaktion)
   Farben, Schrift und Abstände kommen aus tags.css.
   ===================================================================== */

/* Während des Intros nicht scrollen. Eigene Klasse: Sie fällt schon vor dem Flug weg, damit die
   Bildlaufleiste zurück ist und die Kopfzeile ihre endgültige Breite hat, bevor das Ziel gemessen wird
   (sonst springt das Logo nach der Landung um die Breite der Bildlaufleiste). */
html.logo-intro-sperre,
html.logo-intro-sperre body {
	overflow: hidden;
}

/* Kopfzeilen-Logo wartet auf das fliegende Logo */

html.logo-intro-aktiv .menu > div:nth-child(2) img {
	opacity: 0;
}

/* Ankunft: Kopfzeilen-Logo übernimmt mit kleinem „Einrasten“ */
.menu > div:nth-child(2) img.logo-intro-gelandet {
	animation: logo-intro-einrasten 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

@keyframes logo-intro-einrasten {
	0%   { opacity: 0; transform: scale(0.94); }
	35%  { opacity: 1; }
	100% { opacity: 1; transform: none; }
}

/* ---------- Ebene über allem (auch über Menü und Cookie-Hinweis) ---------- */
.logo-intro {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap-big);
	font-family: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.logo-intro__grund {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 46%, var(--white) 0, transparent 55%),
		var(--background-1);
	transition: opacity 0.7s ease 0.15s;
}

/* feine Goldlinie oben und unten – wie die Trennlinien der Seite */
.logo-intro__grund::before,
.logo-intro__grund::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(to right, transparent, var(--hover-color), transparent);
	transform: scaleX(0);
	animation: logo-intro-linie 1.2s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.logo-intro__grund::before { top: var(--gap-big); }
.logo-intro__grund::after  { bottom: var(--gap-big); }

/* ---------- Bühne mit Logo ---------- */
.logo-intro__buehne {
	position: relative;
	/* Logo groß und gut sichtbar: PC ca. halbe Bildschirmhöhe, Handy fast die ganze Breite */
	height: min(56vh, calc(82vw * 765 / 707), 40rem);
	aspect-ratio: 707 / 765;
}

/* weicher Glanz hinter dem Kompass */
.logo-intro__buehne::before {
	content: "";
	position: absolute;
	inset: -18%;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--hover-color) 26%, transparent) 0, transparent 62%);
	opacity: 0;
	transform: scale(0.6);
	animation: logo-intro-glanz 1.6s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* goldene Kompass-Wellen (Mittelpunkt = Kompass) */
.logo-intro__welle {
	position: absolute;
	left: 50.7%;
	top: 50.9%;
	width: 62%;
	aspect-ratio: 1;
	border: 2px solid var(--hover-color);
	border-radius: 50%;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.5);
	animation: logo-intro-welle 2.4s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
	pointer-events: none;
}

.logo-intro__welle + .logo-intro__welle {
	animation-delay: 0.8s;
}

.logo-intro__logo {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: 0 0;
	will-change: transform;
}

/* ---------- Gruß ---------- */
.logo-intro__gruss {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--gap);
	margin: 0;
	color: var(--dpsg-blue);
	font-size: var(--text-font-size);
	font-weight: var(--text-font-weight-bold);
	letter-spacing: 0.35em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(0.6em);
	animation: logo-intro-gruss 0.7s 1.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.logo-intro__gruss::before,
.logo-intro__gruss::after {
	content: "";
	width: 3.5em;
	height: 2px;
	background: linear-gradient(to right, transparent, var(--hover-color));
}

.logo-intro__gruss::after {
	background: linear-gradient(to left, transparent, var(--hover-color));
}

/* ---------- Überspringen (Nebenaktion: weiß, goldener Rand) ---------- */
.logo-intro__weiter {
	position: absolute;
	right: var(--gap-big);
	bottom: calc(var(--gap-big) + var(--gap));
	min-height: 2.5rem;
	padding: 0 var(--gap);
	border: 1px solid var(--hover-color);
	border-radius: 0;
	background: var(--white);
	color: var(--text-font-color);
	font: inherit;
	font-size: var(--text-font-size-small);
	letter-spacing: 0.05em;
	cursor: pointer;
	opacity: 0;
	animation: logo-intro-gruss 0.4s 0.6s ease forwards;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.logo-intro__weiter:is(:hover, :focus-visible) {
	color: var(--dpsg-blue);
	border-color: var(--dpsg-blue);
	outline: none;
}

/* ---------- Flug in die Kopfzeile ---------- */
.logo-intro.is-fliegt {
	cursor: default;
	pointer-events: none;
}

.logo-intro.is-fliegt .logo-intro__grund {
	opacity: 0;
}

.logo-intro.is-fliegt :is(.logo-intro__gruss, .logo-intro__weiter, .logo-intro__welle),
.logo-intro.is-fliegt .logo-intro__buehne::before {
	animation: none;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.logo-intro.is-fliegt .logo-intro__logo {
	transition: transform 0.95s cubic-bezier(0.65, 0, 0.25, 1);
}

/* letzter Moment: fliegendes Logo blendet über ins echte Kopfzeilen-Logo */
.logo-intro.is-gelandet .logo-intro__logo {
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* ohne Flug (Überspringen, Ziel nicht sichtbar, Logo lädt zu langsam) */
.logo-intro.is-weg {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

/* ---------- Handy / Tablet ---------- */
/* Ohne viewport-Meta rechnet das Handy mit ca. 980 px Breite (Grundschrift 3vw aus tags.css):
   Logo fast über die ganze Breite */
@media (hover: none) and (pointer: coarse) {
	.logo-intro__buehne {
		height: min(52vh, calc(86vw * 765 / 707));
	}
}

/* ---------- Animationen ---------- */
@keyframes logo-intro-linie {
	to { transform: scaleX(1); }
}

@keyframes logo-intro-glanz {
	to { opacity: 1; transform: none; }
}

@keyframes logo-intro-welle {
	0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.5); }
	15%  { opacity: 0.7; }
	100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.75); }
}

@keyframes logo-intro-gruss {
	to { opacity: 1; transform: none; }
}

/* Weniger Bewegung gewünscht: Logo erscheint ruhig und blendet aus, kein Flug, keine Wellen */
@media (prefers-reduced-motion: reduce) {
	.logo-intro *,
	.logo-intro *::before,
	.logo-intro *::after,
	.logo-intro__grund::before,
	.logo-intro__grund::after {
		animation-duration: 0.01s !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
	}

	.logo-intro__welle {
		display: none;
	}

	.menu > div:nth-child(2) img.logo-intro-gelandet {
		animation: none;
	}
}