/* ------------------------------------------------------------------
   TERMINE MIT BILD
   Das Bild ist freiwillig (Beitrag -> Bilder und Links ->
   Einleitungsbild). Termine ohne Bild sehen aus wie bisher.

   Diese Datei laedt das Kalendermodul selbst (mod_termin_kalender,
   tmpl/default.php). Sie liegt bewusst nicht im custom_less des
   Template-Stils: so kommt sie per Datei-Upload auf den Server, ohne
   dass der Live-Stil in der Datenbank angefasst und neu kompiliert
   werden muss. Die Karten auf der Startseite brauchen nichts davon -
   .vh-news__bild steht schon im Design (Abschnitt 12).
   ------------------------------------------------------------------ */

/* Breite Ansicht: Kalenderblatt | Text | Bild rechts */
.vh-kalender .vh-kalender__eintrag--bild {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 11rem;
    grid-template-areas: "blatt text bild";
    align-items: start;
    column-gap: 1rem;
}

.vh-kalender .vh-kalender__eintrag--bild > .vh-kalender__blatt       { grid-area: blatt; }
.vh-kalender .vh-kalender__eintrag--bild > .vh-kalender__eintrag-text { grid-area: text; }

.vh-kalender .vh-kalender__bild {
    grid-area: bild;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: var(--vh-green-soft, #eaf2ea);
    box-shadow: var(--vh-shadow, 0 10px 30px rgba(33, 20, 1, .08));
}

.vh-kalender .vh-kalender__bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--vh-ease, ease);
}

.vh-kalender .vh-kalender__eintrag--bild:hover .vh-kalender__bild img { transform: scale(1.04); }

/* Schmal: Bild oben ueber die volle Breite, darunter Blatt und Text */
@media (max-width: 639px) {
    .vh-kalender .vh-kalender__eintrag--bild {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "bild  bild"
            "blatt text";
        row-gap: .8rem;
    }

    .vh-kalender .vh-kalender__bild { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
    .vh-kalender .vh-kalender__bild img { transition: none; }
    .vh-kalender .vh-kalender__eintrag--bild:hover .vh-kalender__bild img { transform: none; }
}

/* Kontrastmodus: klare Kante statt weichem Schatten */
.vh-kontrast .vh-kalender .vh-kalender__bild {
    box-shadow: none;
    border: 2px solid #000;
}

/* ------------------------------------------------------------------
   Startseite: steht eine Karte mit Bild allein (oft gibt es nur einen
   anstehenden Termin), wuerde sie ueber die volle Breite laufen und
   das 16:9-Bild riesig. Ab Tablet-Breite geht sie deshalb quer:
   Bild links, Text rechts.
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .vh-news .vh-news__karte--bild:only-child {
        flex-direction: row;
        max-width: 60rem;
    }

    .vh-news .vh-news__karte--bild:only-child .vh-news__bild {
        flex: 0 0 44%;
        aspect-ratio: auto;
        min-height: 16rem;
    }

    .vh-news .vh-news__karte--bild:only-child .vh-news__inhalt {
        justify-content: center;
        padding: 1.8rem 2rem;
    }
}

/* ------------------------------------------------------------------
   Einzelner Termin: das Bild als ruhiges Titelbild im Querformat,
   egal ob jemand ein Hochformat-Handyfoto hochlaedt. Wer das Bild
   ganz sehen will, hat es in der Mediathek - hier zaehlt der Termin.
   ------------------------------------------------------------------ */
.vh-termine .uk-article [property="image"] {
    margin-top: 0 !important;
    margin-bottom: 1.5rem;
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--vh-green-soft, #eaf2ea);
}

@media (min-width: 960px) {
    .vh-termine .uk-article [property="image"] { aspect-ratio: 2 / 1; }
}

.vh-termine .uk-article [property="image"] img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------------------
   Steht kein Termin an, bleibt der Platz nicht leer. Ein abgelaufener
   Termin ganz oben auf der Startseite waere schlimmer als gar keiner -
   deshalb zeigt die Vorschau in diesem Fall einen ruhigen Satz statt
   der letzten Karte.
   ------------------------------------------------------------------ */
.vh-news .vh-news__leer {
    margin: 0;
    padding: 1.6rem 1.8rem;
    border: 1px dashed var(--vh-line, #e3dcd4);
    border-radius: 16px;
    background: rgba(255, 255, 255, .55);
    color: var(--vh-ink-soft, #5c5146);
    font-size: 1rem;
    line-height: 1.6;
}

.vh-kontrast .vh-news .vh-news__leer {
    background: #fff;
    color: #000;
    border: 2px dashed #000;
}