/* Weser Theme – Block: Service Tiles */
/* Abstand oberhalb/unterhalb der Sektion: assets/css/section-spacing.css */
.block-service-tiles {
    background-color: var(--color-white);
}

.service-tiles-headline {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: var(--space-lg);
}

.service-tile {
    background-color: var(--color-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}

.service-tile:hover,
.service-tile:focus-within {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

/* Ganze Kachel klickbar (Chris 2026-09-18), Muster wie .blog-card-link.
   ::before statt ::after – ::after trägt schon den Pfeil. Fokusring innen,
   weil overflow: hidden einen äußeren abschneiden würde. */
.service-tile--link {
    position: relative;
}

.service-tile--link .service-tile-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius-md);
}

.service-tile--link .service-tile-btn:focus-visible {
    outline: none;
}

.service-tile--link .service-tile-btn:focus-visible::before {
    outline: 2px solid var(--color-dark);
    outline-offset: -4px;
}

.service-tile-img-wrap {
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.service-tile-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.service-tile:hover .service-tile-img-wrap img {
    transform: scale(1.04);
}

.service-tile-body {
    padding: 24px;
}

.service-tile-title {
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    margin-bottom: 16px;
}

.service-tile-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: var(--fw-normal);
    color: var(--color-primary);
    transition: color var(--transition);
}

.service-tile-btn::after {
    content: '→';
    transition: transform var(--transition);
}

.service-tile:hover .service-tile-btn {
    color: var(--color-primary-hover);
}

.service-tile:hover .service-tile-btn::after {
    transform: translateX(4px);
}