/*
 * heiringhoff.info
 * Project-specific CSS for Bootstrap Package 16
 */


/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
    background-color: #fff;
    border: 0;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}


/* ==========================================================================
   CARDS OF SUBPAGES
   komplette Karte klickbar
   ========================================================================== */

.card-menu-item .card {
    position: relative;
    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/*
 * Der vorhandene Link im Card-Footer wird über die komplette Karte gelegt.
 * Dadurch bleibt das HTML semantisch sauber und die ganze Karte ist klickbar.
 */

.card-menu-item .card-footer {
    position: absolute;
    inset: 0;

    padding: 0;
    border: 0;
    background: transparent;

    z-index: 2;
}


.card-menu-item .card-link {
    position: absolute;
    inset: 0;

    display: block;

    font-size: 0;
    text-indent: -9999px;

    z-index: 2;
}


/*
 * Eventuell vorhandenen Pfeil hinter dem Link entfernen
 */

.card-menu-item .card-link::after {
    content: none;
}


/*
 * Hover-Effekt nur auf Geräten mit echter Maus
 */

@media (hover: hover) and (pointer: fine) {

    .card-menu-item .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .18);
    }

}


/*
 * Tastatur-Fokus sichtbar halten
 */

.card-menu-item .card:has(.card-link:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* ==========================================================================
   SCROLL ANIMATIONS
   ========================================================================== */

/*
 * Verfügbare Klassen:
 *
 * .hh-animate
 * .hh-animate-up
 * .hh-animate-left
 * .hh-animate-right
 * .hh-animate-zoom
 */

.hh-animate,
.hh-animate-left,
.hh-animate-right,
.hh-animate-up,
.hh-animate-zoom {

    opacity: 0;

    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.2, .7, .2, 1);

    will-change: opacity, transform;
}


/*
 * Standard / von unten
 */

.hh-animate,
.hh-animate-up {
    transform: translateY(36px);
}


/*
 * Von links
 */

.hh-animate-left {
    transform: translateX(-48px);
}


/*
 * Von rechts
 */

.hh-animate-right {
    transform: translateX(48px);
}


/*
 * Leichter Zoom
 */

.hh-animate-zoom {
    transform: scale(.96);
}


/*
 * Wird durch animations.js gesetzt,
 * sobald das Element in den sichtbaren Bereich kommt.
 */

.hh-is-visible {
    opacity: 1;
    transform: none;
}


/* ==========================================================================
   ACCESSIBILITY
   Animationen deaktivieren, wenn der Besucher reduzierte Bewegung bevorzugt
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .hh-animate,
    .hh-animate-left,
    .hh-animate-right,
    .hh-animate-up,
    .hh-animate-zoom {

        opacity: 1;
        transform: none;
        transition: none;
    }

}