/* ==========================================================================
   Seitenwechsel (Cross-Document View Transitions) – auf allen Seiten eingebunden.
   Teil A: Projektübersicht/Startseite ⇄ Detailseite (unverändert).
   Teil B (unten): globaler Seitenwechsel für alle übrigen Wechsel (html.sw-normal, assets/seitenwechsel.js).
   Das angeklickte Bild fliegt an die Stelle des Titelbilds; der Titel fliegt nicht, sondern rollt
   in seiner Zeile von unten herein (Slot). Der Rest der Seite blendet ruhig über.
   Browser ohne Unterstützung: normaler Seitenwechsel, Detailseite fährt mit eigener Animation ein.
   ========================================================================== */
@view-transition { navigation: auto; }

/* Detailseite: feste Namen (auf der Übersicht/Startseite setzt seitenwechsel.js projektbild nur auf die
   geklickte Karte). Kategorie, Titel, Ort und Jahr sind eigene Gruppen nur für den Slot-Effekt –
   sie fliegen nicht: Gruppe ohne Animation (steht sofort am Ziel), Zeile clippt. */
.pd-titelbild { view-transition-name: projektbild; }
.pd-kat { view-transition-name: sw-kat; }
.pd-titel { view-transition-name: sw-titel; }
.pd-eck:nth-child(1) dd { view-transition-name: sw-eck1; }
.pd-eck:nth-child(2) dd { view-transition-name: sw-eck2; }

/* Ruhige Überblendung der übrigen Seite */
::view-transition-old(root) { animation: sw-aus .45s cubic-bezier(0.23, 1, 0.32, 1) both; }
::view-transition-new(root) { animation: sw-ein .7s cubic-bezier(0.23, 1, 0.32, 1) .12s both; }
@keyframes sw-aus { to { opacity: 0; } }
@keyframes sw-ein { from { opacity: 0; transform: translate3d(0, 24px, 0); } }

/* Bild: Rahmen wandert und skaliert, Inhalt bleibt randvoll (unterschiedliche Formate 4:3 → 16:9) */
::view-transition-group(projektbild) { animation-duration: .95s; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
::view-transition-old(projektbild),
::view-transition-new(projektbild) { height: 100%; width: 100%; object-fit: cover; overflow: hidden; }
::view-transition-old(projektbild) { animation: sw-bild-aus .5s ease both; }
::view-transition-new(projektbild) { animation: sw-bild-ein .5s ease both; }
@keyframes sw-bild-aus { to { opacity: 0; } }
@keyframes sw-bild-ein { from { opacity: 0; } }

/* Titel-Slot: neuer Text rollt live auf der Seite herein (style.css .pd-slot), die Gruppe zeigt ihn
   ohne Überblendung; beim Projektwechsel rollt der alte Text in seiner Zeile nach oben hinaus */
::view-transition-group(sw-kat), ::view-transition-group(sw-titel),
::view-transition-group(sw-eck1), ::view-transition-group(sw-eck2) { animation: none; }
::view-transition-image-pair(sw-kat), ::view-transition-image-pair(sw-titel),
::view-transition-image-pair(sw-eck1), ::view-transition-image-pair(sw-eck2) { overflow: clip; }
::view-transition-new(sw-kat), ::view-transition-new(sw-titel),
::view-transition-new(sw-eck1), ::view-transition-new(sw-eck2) { animation: none; }
::view-transition-old(sw-kat), ::view-transition-old(sw-titel),
::view-transition-old(sw-eck1), ::view-transition-old(sw-eck2) { animation: sw-slot-raus .55s cubic-bezier(0.5, 0, 0.75, 0) both; }
::view-transition-old(sw-kat) { animation-duration: .45s; }
@keyframes sw-slot-raus { to { transform: translate3d(0, -110%, 0); } }

/* Ankunft per Seitenwechsel: eigene Einblendungen der Detailseite aussetzen, sonst wäre der Schnappschuss leer */
html.sw-an body.lightbox main { animation: none; }
html.sw-an .pd-titelbild.maske { clip-path: none; transition: none; }
html.sw-an .pd-titelbild.maske img { transition: none; }
/* Ankunft auf der Detailseite: übrige Seite nur weich einblenden, ohne Versatz – sonst liefen
   die Beschriftungen (Ort/Jahr) gegen die stehenden Slot-Zeilen */
html.sw-an::view-transition-new(root) { animation-name: sw-auf; }
@keyframes sw-auf { from { opacity: 0; } }

/* Zurück von der Detailseite (html.sw-zurueck auf der Zielseite): kein Rückflug – die Detailseite
   schiebt sich als Ganzes zügig nach unten aus dem Bild (ohne Ausblenden), die Seite steht dahinter */
html.sw-zurueck::view-transition-old(root) { animation: sw-zu .5s cubic-bezier(0.65, 0, 0.35, 1) both; z-index: 2; }   /* Detailseite schiebt sich als Ganzes nach unten weg, ohne Ausblenden */
html.sw-zurueck::view-transition-new(root) { animation: none; }                                               /* Übersicht steht sofort ruhig dahinter */
@keyframes sw-zu { to { transform: translate3d(0, 100%, 0); } }

@media (prefers-reduced-motion: reduce) {
  html:not(.sw-normal)::view-transition-group(*), html:not(.sw-normal)::view-transition-old(*),
  html:not(.sw-normal)::view-transition-new(*) { animation: none !important; }
}

/* ==========================================================================
   Teil B: globaler Seitenwechsel (Menü, Startseite ⇄ Projekte ⇄ Leistungen ⇄ Büro, Impressum, …)
   Zeiten setzt seitenwechsel.js als Variablen auf <html> (gleiche Farbe: --sw-farbe-dauer 0 ms):
   0–250 ms alte Inhalte aus (minimal nach oben) · 250–600 ms Fläche färbt um, Header blendet in seinen
   neuen Zustand · ab 520 ms Titel-Slot (800 ms) · ab 660 ms übriger Inhalt (500 ms).
   ========================================================================== */
/* Titelzeile für den Slot: immer vorhanden (seitenwechsel.js), Layout unverändert; das Polster
   hält Umlaute und Unterlängen im sichtbaren Bereich */
.sw-h1-zeile { display: block; overflow: clip; padding: .18em 0; margin: -.18em 0; }
.sw-h1-text { display: block; }

/* Laden ohne Übergang (Firefox, Direktaufruf): bis seitenwechsel.js den Titel-Slot startet, nichts zeigen */
html.sw-laden main:has(.seiten-kopf h1, [data-seitentitel]) { opacity: 0; }

/* Farbfläche: liegt unter allen Schnappschüssen, steht erst in der alten, dann in der neuen Farbe */
html.sw-normal::view-transition {
  background-color: var(--sw-nach);
  animation: sw-farbe var(--sw-farbe-dauer, 0ms) cubic-bezier(0.65, 0, 0.35, 1) var(--sw-aus, 250ms) both;
}
@keyframes sw-farbe { from { background-color: var(--sw-von); } to { background-color: var(--sw-nach); } }

html.sw-normal::view-transition-group(root) { animation: none; }
html.sw-normal::view-transition-old(root) { animation: sw-normal-aus var(--sw-aus, 250ms) cubic-bezier(0.4, 0, 0.6, 1) both; }
html.sw-normal::view-transition-new(root) { animation: sw-normal-ein .5s cubic-bezier(0.23, 1, 0.32, 1) var(--sw-rest-start, 660ms) both; }
@keyframes sw-normal-aus { to { opacity: 0; transform: translate3d(0, -14px, 0); } }
@keyframes sw-normal-ein { from { opacity: 0; transform: translate3d(0, 12px, 0); } }

/* Header: eigene Gruppe, steht; alter und neuer Zustand überblenden gleichzeitig (gleiche Kurve,
   plus-lighter → Logo und gleiche Teile bleiben ruhig, nur Farbe/aktiver Punkt wechseln) */
html.sw-normal #main-nav { view-transition-name: sw-kopf; }
html.sw-normal::view-transition-group(sw-kopf) { animation: none; }
html.sw-normal::view-transition-old(sw-kopf) { animation: sw-blende-aus var(--sw-kopf-dauer, 350ms) linear var(--sw-kopf-start, 150ms) both; }
html.sw-normal::view-transition-new(sw-kopf) { animation: sw-blende-ein var(--sw-kopf-dauer, 350ms) linear var(--sw-kopf-start, 150ms) both; }
@keyframes sw-blende-aus { to { opacity: 0; } }
@keyframes sw-blende-ein { from { opacity: 0; } }

/* Seitentitel: eigene Gruppe ohne Animation – der Slot läuft live auf der Seite (seitenwechsel.js) */
html.sw-normal .sw-h1 { view-transition-name: sw-h1; }
html.sw-normal::view-transition-group(sw-h1),
html.sw-normal::view-transition-old(sw-h1),
html.sw-normal::view-transition-new(sw-h1) { animation: none; }

/* Reduzierte Bewegung: nur kurze Überblendung und Farbwechsel, keine Wege, kein Slot */
html.sw-ruhig::view-transition-old(root) { animation-name: sw-blende-aus; }
html.sw-ruhig::view-transition-new(root) { animation-name: sw-blende-ein; animation-duration: .26s; }