/* ==========================================================================
   card-image.css - Kartenbild ohne Beschnitt
   --------------------------------------------------------------------------
   Regel (Beno, 05.08.2026): Ein Kartenbild wird nie mehr beschnitten.
   Querformat fuellt die volle Breite, Hochformat die volle Hoehe
   (background-size: contain). Die Flaeche, die dabei frei bleibt, wird mit
   demselben Bild unscharf gefuellt statt mit einem leeren dunklen Kasten.

   Aufbau - drei Ebenen im selben Element, ohne zusaetzliches Markup, weil das
   Bild an ueber 20 Render-Stellen als background-image gesetzt wird
   (app.js, index.html, bookmarks*.js, views/*):

     Element  traegt das background-image; LazyLoader (data-bg) und
              story-share.js lesen und schreiben es weiterhin. Optisch wird es
              von den beiden Ebenen verdeckt.
     ::before dasselbe Bild formatfuellend und weichgezeichnet = Fuellung.
     ::after  dasselbe Bild vollstaendig sichtbar = scharfe Ebene.

   Beide Ebenen holen sich das Bild ueber background-image: inherit, brauchen
   also keine eigene URL und greifen auch dann, wenn der LazyLoader das Bild
   erst spaeter nachtraegt.

   Einbindung: NACH main.css bzw. detail-shell.css, und die seitenlokalen
   <style>-Bloecke duerfen background-size fuer .card-image nicht mehr setzen -
   alle Regeln haben dieselbe Spezifitaet (0,1,0), es entscheidet die
   Quellreihenfolge.

   Overlays INNERHALB der Karte (Kategorie, Ticket-Badge, Play-Button,
   Freigabe-Chip) brauchen z-index >= 1, sonst liegen sie unter ::after.
   ========================================================================== */

.card-image {
    position: relative;
    /* Die unscharfe Ebene ist absichtlich vergroessert - ohne overflow
       liefe sie in den Textteil der Karte. */
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card-image::before,
.card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
    pointer-events: none;
}

.card-image::before {
    background-size: cover;
    filter: blur(22px) saturate(1.2) brightness(0.55);
    /* Weichzeichnen greift am Rand ins Leere und franst dort aus; leicht
       vergroessert bleibt die Flaeche bis in die Ecken gefuellt. */
    transform: scale(1.2);
}

.card-image::after {
    background-size: contain;
}

/* Kein echtes Foto -> keine Ebenen. Der gebrandete Verlauf-Fallback, die
   leere Karte und das animierte Lade-Skelett fuellen den Kasten wie bisher
   selbst; das Skelett wuerde von einer Ebene darueber sogar eingefroren. */
.card-image.no-image::before,
.card-image.no-image::after,
.card-image.fallback-visual::before,
.card-image.fallback-visual::after,
.medien-source-card.is-loading .card-image::before,
.medien-source-card.is-loading .card-image::after {
    content: none;
}

/* Kleine Listen-Vorschaubilder in der Mediathek (110px breit) bleiben
   formatfuellend beschnitten - dort ist eine unscharfe Fuellung nur Rechen-
   zeit, sichtbar waere davon fast nichts. */
.medien-modal-list-thumb {
    background-size: cover;
}

.medien-modal-list-thumb::before,
.medien-modal-list-thumb::after {
    content: none;
}