/* ==========================================================================
   Bildausschnitt („Fokuspunkt")

   Eine Regel für alle zugeschnittenen Bilder des Themes. Gesetzt wird sie über
   die Klasse `weser-focus`, die weser_focus_image() ans <img> hängt; die Werte
   kommen als Custom Properties im style-Attribut daneben.

   ⚠️ Die Rückfallkette ist die halbe Miete:

       Mobil   →  --focus-m  →  --focus-t  →  --focus  →  50% 50%
       Tablet  →              --focus-t    →  --focus  →  50% 50%
       Desktop →                              --focus  →  50% 50%

   Deshalb schreibt weser_focus_style() nur das ins Markup, was WIRKLICH
   abweicht. Steht für Tablet nichts, erbt Tablet vom Grundpunkt; steht für
   Mobil nichts, erbt Mobil von Tablet. Ein Bild ohne jede Einstellung trägt gar
   kein style-Attribut und bleibt bei `50% 50%` – genau wie vorher, es
   verschiebt sich also kein Bestandsbild.

   Dieselbe Kette steckt in assets/js/acf-focal-point.js (Funktion `wirksam`).
   Wer hier etwas ändert, zieht sie dort mit, sonst zeigt die Vorschau im
   Backend etwas anderes als das Frontend.

   ⚠️ `.weser-focus` ist nur EINE Klasse. Eine Block-Regel wie
   `.block-x .y img { object-position: … }` hätte höhere Spezifität und würde
   gewinnen. Zurzeit setzt KEINE Block-Datei `object-position` – wer eine
   einführt, macht den Fokuspunkt an dieser Stelle wirkungslos.

   Die Breakpoints entsprechen denen des Themes: Mobil < 768, Tablet 768–1199,
   Desktop ab 1200.
   ========================================================================== */

.weser-focus {
    object-position: var(--focus, 50% 50%);
}

/* Flächen, die ihr Bild als Hintergrund tragen statt als <img> – der Hero
   macht das für sein Einzelbild. Gleiche Kette, andere Eigenschaft. */
.weser-focus-bg {
    background-position: var(--focus, 50% 50%);
}

@media (max-width: 1199.98px) {
    .weser-focus {
        object-position: var(--focus-t, var(--focus, 50% 50%));
    }

    .weser-focus-bg {
        background-position: var(--focus-t, var(--focus, 50% 50%));
    }
}

@media (max-width: 767.98px) {
    .weser-focus {
        object-position: var(--focus-m, var(--focus-t, var(--focus, 50% 50%)));
    }

    .weser-focus-bg {
        background-position: var(--focus-m, var(--focus-t, var(--focus, 50% 50%)));
    }
}