/* =========================
   JSD Elli: Button-Kachelgruppe
   Scope: .elli-button-tiles
========================= */

.elli-button-tiles {
    padding-block:
        var(--elli-button-tiles-padding-block-start, 1.125rem)
        var(--elli-button-tiles-padding-block-end, 5rem);
}

.elli-button-tiles__title {
    margin: 0 0 var(--elli-button-tiles-title-margin-bottom, 3.5rem) 0;
    font-weight: var(--fw-bold, 700);
    color: var(--elli-button-tiles-title-color, var(--text, #282828));
}

.elli-button-tiles__link {
    min-height: var(--elli-button-tiles-min-height, 8rem);
    height: 100%;
    border-radius: var(--elli-button-tiles-radius, var(--radius, 0.625rem));
    box-shadow: var(--elli-button-tiles-shadow, 0 0.875rem 1.375rem rgba(32, 32, 32, 0.18));
    text-decoration: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--elli-button-tiles-gap, 0.625rem);

    padding:
        var(--elli-button-tiles-padding-y, 1.125rem)
        var(--elli-button-tiles-padding-x, 1rem);

    color: var(--elli-button-tiles-text-color, #ffffff);
    text-align: center;

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background-color 0.12s ease;
}

.elli-button-tiles__link:hover {
    transform: translateY(-0.125rem);
    color: var(--elli-button-tiles-text-color, #ffffff);
    box-shadow: var(--elli-button-tiles-shadow-hover, 0 1.125rem 1.625rem rgba(32, 32, 32, 0.2));
    text-decoration: none;
}

.elli-button-tiles__link:focus-visible {
    outline: 0.1875rem solid var(--elli-button-tiles-focus-outline, #000000);
    outline-offset: 0.1875rem;
    box-shadow:
        0 0 0 0.1875rem var(--elli-button-tiles-focus-spacer, #ffffff),
        0 0 0 0.375rem var(--elli-button-tiles-focus-outline, #000000);
}

.elli-button-tiles__link--dark {
    background: var(--elli-button-tiles-bg-dark, #525252);
}

.elli-button-tiles__link--dark:hover {
    background: var(--elli-button-tiles-bg-dark-hover, #4a4a4a);
}

.elli-button-tiles__link--action {
    background: var(--elli-button-tiles-bg-action, var(--action, #7c7c7c));
}

.elli-button-tiles__link--action:hover {
    background: var(--elli-button-tiles-bg-action-hover, var(--action-hover, #707070));
}

.elli-button-tiles__link--muted {
    background: var(--elli-button-tiles-bg-muted, #676767);
}

.elli-button-tiles__link--muted:hover {
    background: var(--elli-button-tiles-bg-muted-hover, #5c5c5c);
}

.elli-button-tiles__iconwrap {
    display: grid;
    place-items: center;
    line-height: 0;
}

.elli-button-tiles__icon {
    inline-size: var(--elli-button-tiles-icon-size, 2.125rem);
    block-size: var(--elli-button-tiles-icon-size, 2.125rem);
    display: block;
    object-fit: contain;
}

.elli-button-tiles__label {
    font-weight: var(--fw-bold, 700);
    font-size: var(--elli-button-tiles-label-size, var(--fs-lg, 1.1875rem));
    line-height: var(--lh-tight, 1.08);
}

.elli-button-tiles__sub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--elli-button-tiles-sub-gap, 0.375rem);
    font-weight: var(--fw-bold, 700);
    font-size: var(--elli-button-tiles-sub-size, var(--fs-md, 1.0625rem));
    line-height: var(--lh-tight, 1.08);
    opacity: 0.95;
}

.elli-button-tiles__subicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.elli-button-tiles__subicon img {
    inline-size: var(--elli-button-tiles-subicon-size, 1rem);
    block-size: var(--elli-button-tiles-subicon-size, 1rem);
    display: block;
}

/* Bootstrap Breakpoints */

@media (min-width: 768px) {
    .elli-button-tiles__link {
        min-height: var(--elli-button-tiles-min-height-md, 8.75rem);
    }
}

@media (min-width: 1200px) {
    .elli-button-tiles__link {
        min-height: var(--elli-button-tiles-min-height-xl, 9.375rem);
    }
}

@media (max-width: 575.98px) {
    .elli-button-tiles {
        padding-block:
            var(--elli-button-tiles-padding-block-start-sm, 1rem)
            var(--elli-button-tiles-padding-block-end-sm, 3rem);
    }

    .elli-button-tiles__link {
        padding:
            var(--elli-button-tiles-padding-y-sm, 1rem)
            var(--elli-button-tiles-padding-x-sm, 0.75rem);
    }
}

/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {
    .elli-button-tiles__link {
        transition: none;
    }

    .elli-button-tiles__link:hover {
        transform: none;
    }
}