/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 16 2026 | 08:28:48 */
/* Kachel */
[id="kachelhover"] {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        filter 0.35s ease;
    will-change: transform, filter;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Inhalt über dem Effekt halten */
[id="kachelhover"] > * {
    position: relative;
    z-index: 2;
}

/* Lichtfläche */
[id="kachelhover"]::after {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
        circle at center,
        rgba(255,255,255,0.24) 0%,
        rgba(255,255,255,0.12) 18%,
        rgba(255,255,255,0.04) 38%,
        rgba(255,255,255,0) 65%
    );
    transition:
        transform 0.45s cubic-bezier(.2,.8,.2,1),
        opacity 0.35s ease;
}

/* Professioneller Hover-Fix: drop-shadow statt box-shadow */
@media screen and (min-width: 1024px) {
[id="kachelhover"]:hover {
    transform: translateY(-8px) scale(1.02);
    filter:
        brightness(1)
		drop-shadow(0 10px 20px rgba(0,0,0,0.12))
		drop-shadow(0 3px 8px rgba(0,0,0,0.05));
}}

/* Richtungen: Startposition des Lichtes */
[id="kachelhover"].enter-top::after {
    transform: translateY(-120%);
    opacity: 1;
}
[id="kachelhover"].enter-right::after {
    transform: translateX(120%);
    opacity: 1;
}
[id="kachelhover"].enter-bottom::after {
    transform: translateY(120%);
    opacity: 1;
}
[id="kachelhover"].enter-left::after {
    transform: translateX(-120%);
    opacity: 1;
}

/* Sobald Hover aktiv ist, fährt das Licht in die Mitte */
[id="kachelhover"].hover-in::after {
    transform: translateX(0) translateY(0);
    opacity: 1;
}

/* Beim Verlassen wieder in Austrittsrichtung raus */
[id="kachelhover"].leave-top::after {
    transform: translateY(-120%);
    opacity: 0;
}
[id="kachelhover"].leave-right::after {
    transform: translateX(120%);
    opacity: 0;
}
[id="kachelhover"].leave-bottom::after {
    transform: translateY(120%);
    opacity: 0;
}
[id="kachelhover"].leave-left::after {
    transform: translateX(-120%);
    opacity: 0;
}