/* Kamera (G2, 30.10.2026): Gestaltung des Übergangs wie das Motion-Labor (B1 c). Das Opt-in
   @view-transition setzt kamera.js nur bei Unterstützung und erlaubter Bewegung. Alle Namen und
   Animationen gelten nur, solange kamera.js html[data-dm-kamera] setzt. */
:root { --dm-kamera-dauer: var(--dm-lang, 600ms); --dm-kamera-kurve: var(--dm-kurve, cubic-bezier(.2, .7, .2, 1)); --dm-kamera-blende: var(--dm-blende, cubic-bezier(.2, 0, 0, 1)); }

/* Kopf, Fuß und Adminleiste: je eine eigene Gruppe ohne Bewegung und ohne Überblendung. */
html[data-dm-kamera] [data-elementor-type="header"] { view-transition-name: dm-kopf; }
/* Der Fuß steht nur, wenn er auf beiden Seiten an derselben Stelle im Fenster steht (P2-A, 31.10.). Sonst gehört er zur
   Seite: der alte geht mit ihr sofort, der neue blendet mit dem Text ein. Vorher meldete die Wand ihren versteckten
   Einfahr-Fuß (fest, 92 px) als stehend; Chrome zeichnete ihn oben in die 260 px hohe Fußgruppe der Werkseite, deren
   eigener Fuß darunter lag: zwei Füße bis zum Ende des Flugs. kamera.js setzt dann html[data-dm-kamera-ohne-fuss]. */
html[data-dm-kamera]:not([data-dm-kamera-ohne-fuss]) [data-elementor-type="footer"] { view-transition-name: dm-fuss; }
html[data-dm-kamera-ohne-fuss]::view-transition-old(dm-fuss) { display: none; }
html[data-dm-kamera] #wpadminbar { view-transition-name: dm-adminleiste; }

html[data-dm-kamera]::view-transition { background: var(--grund, #F5F4F0); }
html[data-dm-kamera]::view-transition-group(*) { animation-duration: var(--dm-kamera-dauer); animation-timing-function: var(--dm-kamera-kurve); }
/* Text: alte Seite sofort weg, neue blendet ab 70 % des Flugs in 200 ms weich ein (UX-05, 01.11.; vorher ab 64 % in 192 ms
   ease-out, das wirkte auf der Werkseite wie ein Aufspringen). Gilt für Werk- und Ausstellungsseite gleich. Kurve `blende`
   (B2, 03.11.: vorher cubic-bezier(.4,0,.2,1)). */
html[data-dm-kamera]::view-transition-group(root) { animation: none; }
html[data-dm-kamera]::view-transition-old(root) { display: none; }
html[data-dm-kamera]::view-transition-new(root) {
  animation: dm-kamera-text var(--dm-kurz, 200ms) var(--dm-kamera-blende) calc(var(--dm-kamera-dauer) * .7) both;
}
/* Rückweg (R5-06, 04.11.): Die Liste empfängt das Bild, statt dass es über leerem Grund fliegt. Sie blendet schon ab 15 % des Flugs
   in `mittel` ein; der Hinweg bleibt: dort erscheint der Text erst, wenn das Bild angekommen ist. */
html[data-dm-kamera="zurueck"]::view-transition-new(root) {
  animation: dm-kamera-text var(--dm-mittel, 400ms) var(--dm-kamera-blende) calc(var(--dm-kamera-dauer) * .15) both;
}
@keyframes dm-kamera-text { from { opacity: 0; } to { opacity: 1; } }

/* Bild: ein Schnappschuss trägt die Bewegung (Führungsregel in kamera.js), im wechselnden Rahmen beschnitten, nie gestreckt. */
html[data-dm-kamera]::view-transition-group(dm-kamera) { z-index: 2; }
html[data-dm-kamera]::view-transition-image-pair(dm-kamera) { isolation: auto; overflow: clip; }
html[data-dm-kamera]::view-transition-old(dm-kamera),
html[data-dm-kamera]::view-transition-new(dm-kamera) {
  width: 100%; height: 100%; object-fit: cover; object-position: center; animation: none; mix-blend-mode: normal;
}
html[data-dm-kamera-fuehrung="neu"]::view-transition-old(dm-kamera),
html[data-dm-kamera-fuehrung="alt"]::view-transition-new(dm-kamera) { display: none; }
html[data-dm-kamera-blende="aus"]::view-transition-old(dm-kamera) {
  display: block; z-index: 1; animation: dm-kamera-aus calc(var(--dm-kamera-dauer) * .2) var(--dm-kamera-blende) both;
}
html[data-dm-kamera-blende="ein"]::view-transition-new(dm-kamera) {
  display: block; animation: dm-kamera-ein calc(var(--dm-kamera-dauer) * .3) var(--dm-kamera-blende) calc(var(--dm-kamera-dauer) * .7) both;
}
@keyframes dm-kamera-aus { to { opacity: 0; } }
@keyframes dm-kamera-ein { from { opacity: 0; } }

html[data-dm-kamera]::view-transition-group(dm-kopf),
html[data-dm-kamera]::view-transition-group(dm-fuss),
html[data-dm-kamera]::view-transition-group(dm-adminleiste) { animation: none; z-index: 3; }
html[data-dm-kamera]::view-transition-old(dm-kopf), html[data-dm-kamera]::view-transition-new(dm-kopf),
html[data-dm-kamera]::view-transition-old(dm-fuss), html[data-dm-kamera]::view-transition-new(dm-fuss),
html[data-dm-kamera]::view-transition-old(dm-adminleiste), html[data-dm-kamera]::view-transition-new(dm-adminleiste) { animation: none; mix-blend-mode: normal; }
/* Kopf und Fuß: nur der neue Schnappschuss (UX-01, 01.11.). Vorher lagen alter und neuer 600 ms deckend übereinander; die
   Kantenglättung zweier Textschichten wirkte „kurz fett“ (Ausstellung → Detail). Der Fuß ist hier nur benannt, wenn er auf
   beiden Seiten gleich steht (siehe oben), der alte ist also entbehrlich. So macht es auch der globale Seitenwechsel. */
html[data-dm-kamera]::view-transition-old(dm-kopf), html[data-dm-kamera]::view-transition-old(dm-fuss) { display: none; }
/* R2-03 (B2, 03.11.): Kopfgruppe mit Grundfarbe; der neue Kopf ist vor dem Frontend-JS noch nicht klebend und ohne Hintergrund. */
html[data-dm-kamera]::view-transition-group(dm-kopf) { background: var(--grund, #F5F4F0); }

/* Werkseite: Kameraziel vor dem Laden in seiner späteren Größe, damit es beim ersten Bildaufbau eine Fläche hat
   (sonst 0 × 0 bei width:auto). Nachgerechnet aus der Elementor-Klasse des Bildes (Vorlage 1999, e-441a12a: max-height,
   max-width begrenzt weiter) und der Querformatregel der Frontend-CSS (srcset ohne sizes: natürliche Breite 100vw). Gilt nur bis zum
   Laden (kamera.js setzt data-dm-geladen); Browser ohne typisiertes attr() behalten width:auto. Mobil: width 100 %. */
@media (min-width: 768px) {
  #dm-hauptbild img[data-dm-kamera-ziel]:not([data-dm-geladen]) {
    --dm-kamera-h: min(var(--dm-bild-max-h), calc(100svh - 13.75rem - 110 * var(--dm-wf)));
    width: calc(var(--dm-kamera-h) * attr(width type(<number>), 0) / attr(height type(<number>), 1));
  }
  body.dm-werk-querformat #dm-hauptbild img[data-dm-kamera-ziel]:not([data-dm-geladen]) { --dm-kamera-h: min(var(--dm-bild-max-h), calc(100svh - 17.5rem - 140 * var(--dm-wf))); }
}
/* R5-08 Teil 2: Querformate neben dem Schild haben ab 2200 px die Bildhöhe der Hochformate (Frontend-CSS); die Breitengrenze dort gilt auch vor dem Laden. */
@media (min-width: 2200px) {
  body.dm-werk-quer-neben #dm-hauptbild img[data-dm-kamera-ziel]:not([data-dm-geladen]) { --dm-kamera-h: min(var(--dm-bild-max-h), calc(100svh - 13.75rem - 110 * var(--dm-wf))); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  body:not(.dm-werk-querformat) #dm-hauptbild img[data-dm-kamera-ziel]:not([data-dm-geladen]) { --dm-kamera-h: min(37.5rem, calc(100svh - 96px)); }
}
/* NR-03, NR-07 (04.11.): dieselben Grenzen wie die Frontend-CSS, sonst springt das Bild am Ende des Flugs */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  body:not(.dm-werk-querformat) #dm-hauptbild img[data-dm-kamera-ziel]:not([data-dm-geladen]) { --dm-kamera-h: calc(100svh - 17.5rem); }   /* B3 */
}
@media (min-width: 768px) and (max-width: 1024px) and (max-height: 500px) {
  body.dm-werk-querformat #dm-hauptbild img[data-dm-kamera-ziel]:not([data-dm-geladen]) { --dm-kamera-h: calc(100svh - 96px); }
}

/* Werkbild bei direktem Aufruf (UX-04, 01.11.): bis das Bild da ist, steht an seiner Stelle eine leise Fläche in Wandton, darüber
   die kleinste Bildstufe (kamera.js setzt --dm-bild-mini); das Bild blendet danach in 200 ms (`kurz`/`blende`) ein (kamera.js). Nicht im Kameraflug
   (dort trägt der Schnappschuss das Bild) und ohne JavaScript nicht (html[data-dm-bild-blende] setzt erst kamera.js). Deckkraft
   0,01 statt 0, damit Chrome das Bild als LCP zählt. Die Fläche liegt auf der Hülle #dm-hauptbild, im Inhaltsfeld: Das Polster links ist die
   Spur der Maßleiste und gehört nicht zum Bild (N-3, 04.11.). */
html[data-dm-bild-blende]:not([data-dm-kamera]) #dm-hauptbild:has(> img[data-dm-kamera-ziel]:not([data-dm-geladen])) {
  background: var(--dm-bild-mini, none) center / 100% 100% no-repeat content-box, color-mix(in srgb, var(--text, #1A1A18) 7%, var(--grund, #F5F4F0)) content-box;
}
/* N-3: Die Querformatregel der Frontend-CSS macht die Hülle 100 % breit, das Bild ist schmaler. Bis zum Laden so breit wie das Bild, sonst
   stünde die Fläche zu breit und das Mini-Bild gestreckt. Erst ab 768 px: Darunter ist das Bild selbst 100 % breit und gäbe der Hülle keine Breite. */
@media (min-width: 768px) {
  html[data-dm-bild-blende]:not([data-dm-kamera]) body.dm-werk-querformat #dm-hauptbild:has(> img[data-dm-kamera-ziel]:not([data-dm-geladen])) { width: fit-content; }
}
html[data-dm-bild-blende]:not([data-dm-kamera]) #dm-hauptbild > img[data-dm-kamera-ziel]:not([data-dm-geladen]) { opacity: .01; }

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