:root{
    --tile-radius: 1.25rem;
}

.hero-gradient{
    background: linear-gradient(135deg, #3b82f6, #22c55e 60%, #14b8a6);
}

.hover-lift{ transition: transform .15s ease, box-shadow .15s ease; }
.hover-lift:hover{ transform: translateY(-3px); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.12); }

.service-tile .card-body{ color: #fff; }
.service-tile h3{ color: #fff; }

/* Fancy gradient color classes for tiles */
.tile-blue{ background: linear-gradient(135deg, #4f46e5, #3b82f6); }
.tile-purple{ background: linear-gradient(135deg, #7c3aed, #a855f7); }
.tile-green{ background: linear-gradient(135deg, #16a34a, #22c55e); }
.tile-orange{ background: linear-gradient(135deg, #f97316, #fb923c); }
.tile-red{ background: linear-gradient(135deg, #ef4444, #f87171); }
.tile-teal{ background: linear-gradient(135deg, #0f766e, #14b8a6); }
.tile-cyan{ background: linear-gradient(135deg, #06b6d4, #22d3ee); }
.tile-pink{ background: linear-gradient(135deg, #db2777, #f472b6); }
.tile-lime{ background: linear-gradient(135deg, #84cc16, #a3e635); }

.hero-card ul li i { color: #fff; }

/* Absätze & Lesebreite */
.service-desc {
    max-width: 68ch;
}

/* Detail-Section auf „eine Bildschirmseite“ bringen */
.detail-onepage {
    min-height: 85svh; /* füllt den Screen (ohne zu knapp für Header/Footer zu werden) */
    display: grid;
    align-items: start; /* Text startet oben, kein komisches Zentrieren */
    padding-block: 2.5rem; /* oben/unten Luft */
}

/* etwas dichteres Typo-Setup für lange Texte */
.service-desc p {
    margin-bottom: .9rem;
    line-height: 1.55;
}

@media (max-width: 992px) {
    .detail-onepage {
        min-height: auto;
    }
    /* auf Handy ruhig scrollen dürfen */
}