/* Seitenwechsel mit der View Transitions API (12.11.2026, Versuch).
   Die Regel muss auf BEIDEN Seiten stehen, dann blendet der Browser beim
   internen Link die alte Seite in die neue. Browser ohne Unterstuetzung
   (zuletzt Firefox) wechseln ganz normal.

   Dazu das Kopfbild der Krankheitsbild-Seite: Es bekommt beim Erscheinen
   den Namen "kopfbild" (js/seitenwechsel.js) und atmet sich ein, siehe unten. */

@view-transition { navigation: auto; }

/* Weich: laenger als die Kacheln und eine Kurve, die sanft anlaeuft und
   sanft auslaeuft. Die Kachelkurve (expo-out) setzt sofort mit voller
   Geschwindigkeit ein - fuer einen ganzen Seitenwechsel zu ruckartig. */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
    animation-duration: 0.9s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
}

/* Das Kopfbild atmet: es blendet an seinem Platz ein und zoomt dabei von
   104 % auf 100 %. Etwas laenger als der Rest, damit es zuletzt zur Ruhe kommt. */
::view-transition-new(kopfbild) {
    animation: kopfbild-atmen 1.2s cubic-bezier(0.45, 0, 0.2, 1) both;
}

@keyframes kopfbild-atmen {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
}

/* Der Zoom soll nicht ueber den Bildrand hinausragen. */
::view-transition-group(kopfbild) { overflow: clip; }

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