/* Startseite Plus – Kategorie-Kacheln */
.sp-tiles {
    display: grid;
    grid-template-columns: repeat(var(--sp-cols-xs, 1), minmax(0, 1fr));
    gap: .5rem;
    margin: 1rem 0 1.5rem;
}
.sp-tiles--gap-none { gap: 0; }
.sp-tiles--gap-sm   { gap: .5rem; }
.sp-tiles--gap-md   { gap: 1rem; }
.sp-tiles--gap-lg   { gap: 1.5rem; }
@media (min-width: 576px) { .sp-tiles { grid-template-columns: repeat(var(--sp-cols-sm, 2), minmax(0, 1fr)); } }
@media (min-width: 992px) { .sp-tiles { grid-template-columns: repeat(var(--sp-cols, 2), minmax(0, 1fr)); } }

.sp-tile { position: relative; overflow: hidden; background: #222; isolation: isolate; }
.sp-tiles--r-sm .sp-tile { border-radius: .35rem; }
.sp-tiles--r-md .sp-tile { border-radius: .75rem; }
.sp-tiles--r-lg .sp-tile { border-radius: 1.25rem; }

/* Bild */
.sp-tile__media { display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
.sp-tiles--aspect-4-3     .sp-tile__media { aspect-ratio: 4 / 3; }
.sp-tiles--aspect-1-1     .sp-tile__media { aspect-ratio: 1 / 1; }
.sp-tiles--aspect-16-9    .sp-tile__media { aspect-ratio: 16 / 9; }
.sp-tiles--aspect-4-5     .sp-tile__media { aspect-ratio: 4 / 5; }
.sp-tiles--aspect-natural .sp-tile__media { aspect-ratio: auto; }
.sp-tile__media picture { display: block; width: 100%; height: 100%; }
.sp-tile__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.sp-tiles--aspect-natural .sp-tile__media img { height: auto; }
.sp-tiles--hover-zoom .sp-tile:hover .sp-tile__media img { transform: scale(1.06); }
.sp-tiles--hover-lift .sp-tile { transition: transform .3s, box-shadow .3s; }
.sp-tiles--hover-lift .sp-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }

/* Overlay */
.sp-tile__overlay { position: absolute; inset: 0; pointer-events: none; transition: opacity .3s; }
.sp-tiles--overlay-gradient-bottom .sp-tile__overlay { background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .05) 100%); }
.sp-tiles--overlay-dark  .sp-tile__overlay { background: rgba(0, 0, 0, .35); }
.sp-tiles--overlay-light .sp-tile__overlay { background: rgba(255, 255, 255, .12); }
.sp-tiles--overlay-none  .sp-tile__overlay { display: none; }

/* Inhalt */
.sp-tile__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    color: #fff;
    text-align: center;
    pointer-events: none;
}
.sp-tile__head { margin: 0; }
.sp-tile__title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.sp-tiles--size-sm .sp-tile__title { font-size: clamp(1rem, 1.6vw, 1.3rem); }
.sp-tiles--size-lg .sp-tile__title { font-size: clamp(1.5rem, 3vw, 2.3rem); }
.sp-tiles--size-xl .sp-tile__title { font-size: clamp(1.8rem, 3.8vw, 2.8rem); }
.sp-tile__title a { color: inherit; text-decoration: none; pointer-events: auto; }
.sp-tile__title a:hover,
.sp-tile__title a:focus { color: var(--sp-accent, var(--primary, #FFA54F)); text-decoration: none; }
.sp-tiles--tstyle-box .sp-tile__title {
    display: inline-block;
    padding: .45rem 1.3rem;
    border-radius: .4rem;
    background: rgba(255, 255, 255, .82);
    color: #222;
    text-shadow: none;
}
.sp-tiles--tstyle-box .sp-tile__title a { color: #222; }
.sp-tiles--tstyle-dark-box .sp-tile__title {
    display: inline-block;
    padding: .45rem 1.3rem;
    border-radius: .4rem;
    background: rgba(0, 0, 0, .55);
    text-shadow: none;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.sp-tile__desc { margin: .4rem 0 0; font-size: .95rem; opacity: .95; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }

/* Unterlinks */
.sp-tile__links {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem .5rem;
    pointer-events: none;
}
.sp-tile__link {
    display: inline-block;
    padding: .35rem .95rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, .92);
    color: #222;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    pointer-events: auto;
    transition: background-color .2s, color .2s, transform .2s;
}
.sp-tile__link:hover,
.sp-tile__link:focus {
    background: var(--sp-accent, var(--primary, #FFA54F));
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.sp-tile__sep { display: none; }
.sp-tiles--links-text .sp-tile__link {
    padding: .2rem .1rem;
    background: none;
    color: #fff;
    font-size: .95rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.sp-tiles--links-text .sp-tile__link:hover,
.sp-tiles--links-text .sp-tile__link:focus { background: none; color: var(--sp-accent, var(--primary, #FFA54F)); transform: none; text-decoration: underline; }
.sp-tiles--links-text .sp-tile__sep { display: inline; color: #fff; opacity: .8; }
.sp-tiles--links-buttons .sp-tile__link { border-radius: 3px; background: var(--sp-accent, var(--primary, #FFA54F)); color: #fff; }
.sp-tiles--links-buttons .sp-tile__link:hover,
.sp-tiles--links-buttons .sp-tile__link:focus { background: #fff; color: #222; }

/* Textpositionen */
.sp-tiles--title-bottom-left   .sp-tile__content { align-items: flex-start; justify-content: flex-end; text-align: left; }
.sp-tiles--title-bottom-center .sp-tile__content { justify-content: flex-end; }
.sp-tiles--title-top-left      .sp-tile__content { align-items: flex-start; justify-content: flex-start; text-align: left; }
.sp-tiles--title-bottom-left   .sp-tile__links,
.sp-tiles--title-bottom-center .sp-tile__links,
.sp-tiles--title-top-left      .sp-tile__links { position: static; margin-top: .75rem; }
.sp-tiles--title-bottom-left .sp-tile__links,
.sp-tiles--title-top-left    .sp-tile__links { justify-content: flex-start; }

@media (max-width: 575.98px) {
    .sp-tile__content { padding: 1rem; }
    .sp-tile__links { left: .75rem; right: .75rem; bottom: .75rem; }
    .sp-tile__link { padding: .3rem .8rem; font-size: .8rem; }
}