/**
 * Kierer Core: Seitenwechsel als View Transition (Chrome, Edge, Safari).
 *
 * Der Browser nimmt beim Seitenwechsel ein Bild der alten Seite auf und blendet zur neuen über.
 * Elemente mit demselben view-transition-name auf beiden Seiten wandern und wachsen von ihrer
 * alten an ihre neue Stelle: Logo, Knopf „Projekt starten", die angeklickte Kachel wird zum Banner
 * der Unterseite, ihr Titel zur großen Überschrift. Die dynamischen Namen (Kachel, Banner, Titel)
 * setzt assets/js/kierer-seitenwechsel.js, die Namen im Kopfbereich stehen hier.
 *
 * Typen (von assets/js/kierer-seitenwechsel.js gesetzt): von-start, zur-start, unterseite.
 */

@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}

/* ---------- Namen im Kopfbereich ---------- */

/* Startseite (Kopfzeile im Seiteninhalt) */
.elementor-22169 .elementor-element-a28d8c4 .hfe-site-logo-img { view-transition-name: kierer-logo; }
.elementor-22169 .elementor-element-09b407c .elementor-button { view-transition-name: kierer-cta; }
.elementor-22169 .elementor-element-1a9e3b5 { view-transition-name: kierer-kontakt; }

/* Unterseiten (Header-Vorlage 11246). Elementor Pro legt für den mitlaufenden Header eine unsichtbare
   Kopie als Platzhalter an (elementor-sticky__spacer); doppelte Namen brechen den Übergang ab. */
.elementor-11246 > :not(.elementor-sticky__spacer) .elementor-element-4b625b1 .hfe-site-logo-img { view-transition-name: kierer-logo; }
.elementor-11246 > :not(.elementor-sticky__spacer) .elementor-element-6da2a7f .elementor-button { view-transition-name: kierer-cta; }
.elementor-11246 > :not(.elementor-sticky__spacer) .elementor-element-703178e { view-transition-name: kierer-burger; }
.elementor-11246 > :not(.elementor-sticky__spacer) .elementor-element-b6ab559 { view-transition-name: kierer-menue-handy; }
.elementor-11246 > :not(.elementor-sticky__spacer) .elementor-element-964c9b1 .main-navigation ul:not(ul ul) > li:nth-child(1) { view-transition-name: kierer-nav-1; }
.elementor-11246 > :not(.elementor-sticky__spacer) .elementor-element-964c9b1 .main-navigation ul:not(ul ul) > li:nth-child(2) { view-transition-name: kierer-nav-2; }
.elementor-11246 > :not(.elementor-sticky__spacer) .elementor-element-964c9b1 .main-navigation ul:not(ul ul) > li:nth-child(3) { view-transition-name: kierer-nav-3; }
.elementor-11246 > :not(.elementor-sticky__spacer) .elementor-element-964c9b1 .main-navigation ul:not(ul ul) > li:nth-child(4) { view-transition-name: kierer-nav-4; }
.elementor-11246 > :not(.elementor-sticky__spacer) .elementor-element-964c9b1 .main-navigation ul:not(ul ul) > li:nth-child(5) { view-transition-name: kierer-nav-5; }
.elementor-11246 > :not(.elementor-sticky__spacer) .elementor-element-964c9b1 .main-navigation ul:not(ul ul) > li:nth-child(6) { view-transition-name: kierer-nav-6; }
.elementor-11246 > :not(.elementor-sticky__spacer) .elementor-element-964c9b1 .main-navigation ul:not(ul ul) > li:nth-child(7) { view-transition-name: kierer-nav-7; }

/* ---------- Ankunft: Banner nicht noch einmal einblenden ---------- */

/* Der Banner kommt über die Übergangsbewegung herein. Seine Elementor-Eingangsanimation
   (elementor-invisible, danach fadeInDown) würde ihn sonst im Übergang unsichtbar machen
   und danach ein zweites Mal einblenden. kvt-still bleibt bis zum nächsten Seitenwechsel. */
.kvt-still.elementor-invisible,
.kvt-still .elementor-invisible {
	visibility: visible !important;
}
.kvt-still.animated,
.kvt-still .animated {
	animation: none !important;
}

/* Startseite direkt bei den Kacheln (von einer Unterseite aus): Willkommensbereich bis zum Start
   seines Skripts ausblenden, das ihn dann versteckt über die Seite legt (assets/js/kierer-welcome.js) */
html.kw-direkt .elementor > .elementor-element:has(.kierer-welcome) {
	display: none !important;
}

/* ---------- Choreografie ---------- */

::view-transition-group(*) {
	animation-duration: 0.72s;
	animation-timing-function: cubic-bezier(0.7, 0, 0.25, 1);
}

/* Übriger Seiteninhalt: alte Seite geht zügig, neue kommt nach, wenn die Bewegung läuft */
::view-transition-old(root) {
	animation: 0.3s cubic-bezier(0.4, 0, 1, 1) both kvt-aus;
}
::view-transition-new(root) {
	animation: 0.5s 0.32s cubic-bezier(0, 0, 0.2, 1) both kvt-ein-hoch;
}

/* Kachel wird Banner (und Banner wird Banner). Das alte Bild bleibt deckend, solange die Fläche wächst,
   dann blendet das neue darüber; so wird die Fläche nie blass. */
::view-transition-group(kierer-held) {
	animation-duration: 0.8s;
}
::view-transition-image-pair(kierer-held) {
	overflow: hidden;
}
::view-transition-old(kierer-held),
::view-transition-new(kierer-held) {
	height: 100%;
	object-fit: cover;
}
::view-transition-old(kierer-held) {
	animation: 0.3s 0.5s cubic-bezier(0.4, 0, 0.2, 1) both kvt-aus;
}
::view-transition-new(kierer-held) {
	animation: 0.35s 0.42s cubic-bezier(0.4, 0, 0.2, 1) both kvt-ein;
}
html:active-view-transition-type(von-start)::view-transition-image-pair(kierer-held) {
	animation: 0.8s cubic-bezier(0.7, 0, 0.25, 1) both kvt-ecken-weg;
}

/* Kachel beim Aufnehmen ohne Untertitel und Pfeil, sonst würden sie mit aufgeblasen */
a.grid-tile.kvt-kachel .tile-desc,
a.grid-tile.kvt-kachel .tile-arrow {
	opacity: 0 !important;
	transition: none !important;
}

/* Logo und Knopf sehen auf beiden Seiten gleich aus: nur das neue Bild wandern lassen, kein Überblenden
   (sonst steht das Logo in der Mitte der Bewegung doppelt). Gibt es nur eines (:only-child), blendet es.
   Hinweis: :not(:only-child) hinter einem Pseudo-Element ist ungültig und verwirft die ganze Regel. */
::view-transition-old(kierer-logo),
::view-transition-old(kierer-cta) {
	animation: none;
	opacity: 0;
}
::view-transition-new(kierer-logo),
::view-transition-new(kierer-cta) {
	animation: none;
}
::view-transition-old(kierer-logo):only-child,
::view-transition-old(kierer-cta):only-child {
	opacity: 1;
	animation: 0.25s ease-in both kvt-aus;
}
::view-transition-new(kierer-logo):only-child,
::view-transition-new(kierer-cta):only-child {
	animation: 0.4s 0.3s ease-out both kvt-ein;
}

/* Titel der Kachel wird Überschrift: alter Titel geht schnell, der neue wächst mit (kein doppelter Text) */
::view-transition-group(kierer-titel) {
	animation-duration: 0.8s;
}
::view-transition-old(kierer-titel),
::view-transition-new(kierer-titel) {
	height: 100%;
	object-fit: contain;
}
::view-transition-old(kierer-titel) {
	animation: 0.28s ease-in both kvt-aus;
}
::view-transition-new(kierer-titel) {
	animation: 0.32s 0.08s ease-out both kvt-ein;
}

/* Von der Startseite: Telefon und E-Mail gehen, Menüpunkte und Menüknopf kommen nacheinander */
html:active-view-transition-type(von-start)::view-transition-old(kierer-kontakt) {
	animation: 0.22s ease-in both kvt-aus;
}
html:active-view-transition-type(von-start)::view-transition-new(kierer-nav-1) { animation: 0.45s 0.34s cubic-bezier(0, 0, 0.2, 1) both kvt-ein-runter; }
html:active-view-transition-type(von-start)::view-transition-new(kierer-nav-2) { animation: 0.45s 0.39s cubic-bezier(0, 0, 0.2, 1) both kvt-ein-runter; }
html:active-view-transition-type(von-start)::view-transition-new(kierer-nav-3) { animation: 0.45s 0.44s cubic-bezier(0, 0, 0.2, 1) both kvt-ein-runter; }
html:active-view-transition-type(von-start)::view-transition-new(kierer-nav-4) { animation: 0.45s 0.49s cubic-bezier(0, 0, 0.2, 1) both kvt-ein-runter; }
html:active-view-transition-type(von-start)::view-transition-new(kierer-nav-5) { animation: 0.45s 0.54s cubic-bezier(0, 0, 0.2, 1) both kvt-ein-runter; }
html:active-view-transition-type(von-start)::view-transition-new(kierer-nav-6) { animation: 0.45s 0.59s cubic-bezier(0, 0, 0.2, 1) both kvt-ein-runter; }
html:active-view-transition-type(von-start)::view-transition-new(kierer-nav-7) { animation: 0.45s 0.64s cubic-bezier(0, 0, 0.2, 1) both kvt-ein-runter; }
html:active-view-transition-type(von-start)::view-transition-new(kierer-burger),
html:active-view-transition-type(von-start)::view-transition-new(kierer-menue-handy) {
	animation: 0.5s 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both kvt-ein-pop;
}

/* Unterseite zu Unterseite: Kopf bleibt stehen, Banner und Überschrift wechseln zügig */
html:active-view-transition-type(unterseite)::view-transition-group(kierer-held),
html:active-view-transition-type(unterseite)::view-transition-group(kierer-titel) {
	animation-duration: 0.5s;
}
html:active-view-transition-type(unterseite)::view-transition-old(kierer-held) {
	animation: 0.3s 0.05s ease-in both kvt-aus;
}
html:active-view-transition-type(unterseite)::view-transition-new(kierer-held) {
	animation: 0.3s ease-out both kvt-ein;
}

/* Zur Startseite: alte Seite geht, die Startseite kommt direkt bei den Kacheln an, deren Kaskade läuft */
html:active-view-transition-type(zur-start)::view-transition-old(root) {
	animation: 0.4s ease-in both kvt-aus;
}
html:active-view-transition-type(zur-start)::view-transition-new(root) {
	animation: 0.45s 0.2s ease-out both kvt-ein;
}
html:active-view-transition-type(zur-start)::view-transition-old(kierer-nav-1),
html:active-view-transition-type(zur-start)::view-transition-old(kierer-nav-2),
html:active-view-transition-type(zur-start)::view-transition-old(kierer-nav-3),
html:active-view-transition-type(zur-start)::view-transition-old(kierer-nav-4),
html:active-view-transition-type(zur-start)::view-transition-old(kierer-nav-5),
html:active-view-transition-type(zur-start)::view-transition-old(kierer-nav-6),
html:active-view-transition-type(zur-start)::view-transition-old(kierer-nav-7),
html:active-view-transition-type(zur-start)::view-transition-old(kierer-burger),
html:active-view-transition-type(zur-start)::view-transition-old(kierer-menue-handy),
html:active-view-transition-type(zur-start)::view-transition-old(kierer-held),
html:active-view-transition-type(zur-start)::view-transition-old(kierer-titel) {
	animation: 0.25s ease-in both kvt-aus;
}
html:active-view-transition-type(zur-start)::view-transition-new(kierer-kontakt) {
	animation: 0.45s 0.35s cubic-bezier(0, 0, 0.2, 1) both kvt-ein-runter;
}

@keyframes kvt-aus {
	to { opacity: 0; }
}
@keyframes kvt-ein {
	from { opacity: 0; }
}
@keyframes kvt-ein-hoch {
	from { opacity: 0; transform: translateY(28px); }
}
@keyframes kvt-ein-runter {
	from { opacity: 0; transform: translateY(-12px); }
}
@keyframes kvt-ein-pop {
	from { opacity: 0; transform: scale(0.6); }
}
@keyframes kvt-ecken-weg {
	from { border-radius: 16px; }
	to { border-radius: 0; }
}