/* Leistungskarten auf hellem Grund */

.service-card {
    border: 1px solid var(--hairline-ink);
    border-radius: 0;
    background: transparent;
    height: 100%;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.service-card:hover,
.service-card:focus-within {
    background: #fff;
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(10, 22, 30, .10);
}

.service-card .card-body {
    padding: 2.2rem 2rem;
}

.service-card .tag {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .16em;
    color: var(--signal-on-light);
    text-transform: uppercase;
}

.service-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    margin-block: .9rem .7rem;
}

.service-card p {
    color: var(--muted-on-light);
    font-size: .98rem;
    margin: 0;
}

/* Leiterbahn mit Lötpunkt, der beim Hovern erscheint */
.service-card .wire {
    height: 1px;
    background: var(--hairline-ink);
    margin-top: 1.6rem;
    position: relative;
}

.service-card .wire::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    background: var(--signal);
    border-radius: 50%;
    transform: scale(0);
    transition: transform .25s ease;
}

.service-card:hover .wire::after,
.service-card:focus-within .wire::after {
    transform: scale(1);
}