/* --- Keyframes für den roten Schimmer-Effekt --- */
@keyframes red-shimmer {
    0% {
        box-shadow: var(--shadow-base); /* Startet mit dem normalen Schatten */
    }
    50% {
        box-shadow: var(--shadow-red-shimmer-medium); /* Glüht in der Mitte des Zyklus auf */
    }
    100% {
        box-shadow: var(--shadow-base); /* Kehrt zum normalen Schatten zurück */
    }
}

/* --- Keyframes für den Lichtreflex-Schimmer --- */
@keyframes shimmer-effect {
    0% {
        transform: translateX(-100%) skewX(-20deg); /* Startet links außerhalb, gekippt */
    }
    100% {
        transform: translateX(300%) skewX(-20deg); /* Bewegt sich diagonal nach rechts außerhalb */
    }
}

.uk-grid[uk-grid] {
    align-items: stretch; /* Sorgt dafür, dass alle Flex-Items (deine Spalten-Divs) die Höhe des höchsten annehmen */
}

.product-overview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--shimmer-width);
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        var(--shimmer-color) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer-effect 4s infinite linear;
    /* --- HIER DIE KORREKTUR: Nutze die CSS-Variable für animation-delay --- */
    animation-delay: var(--shimmer-delay); 
    z-index: 2;
}
/* --- Grundlegende Card-Styles --- */
.product-overview-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%; /* Ganz wichtig: Der Link soll die volle Höhe seines Elternelements einnehmen */
}

.product-overview-card-link:hover {
    text-decoration: none;
}

/* --- Grundlegende Card-Styles --- */
.product-overview-card {
    background-color: var(--color-white);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    box-shadow: var(--shadow-base);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative; /* Wichtig für die Positionierung des Pseudo-Elements */
    overflow: hidden; /* Verbirgt den Schimmer außerhalb der Card-Grenzen */
    z-index: 1; /* Stellt sicher, dass der Schimmer über dem Card-Inhalt ist, aber unter den Logos*/
     animation: red-shimmer 4s ease-in-out infinite;
}

/* --- Hover-Effekt für die Card --- */
.product-overview-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-red-strong); /* Dein roter Schatten beim Hover */
    animation: none; /* Deaktiviert den Schimmer-Effekt beim Hover */
}

/* --- Logo-Container-Styles --- */
.software-logo-container {
    height: 200px; /* Feste Höhe für den SVG-Container */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px; /* Abstand unter dem Logo */
    /* Optional: Hintergrundfarbe oder dezenter Rahmen für den Logo-Bereich */
    /* background-color: var(--color-gray-light); */
    /* border-radius: 8px; */
}

.software-logo-container svg {
    max-height: 100%; /* SVG passt sich der Höhe des Containers an */
    max-width: 100%; /* SVG passt sich der Breite des Containers an */
    display: block; /* Entfernt zusätzlichen Platz unter dem SVG */
}

/* --- Text-Styles --- */
.product-overview-card h3 {
    font-size: 1.8em; /* Größe des Titels */
    color: var(--color-gray-dark); /* Dunklere Farbe für Titel */
    margin-bottom: 10px; /* Abstand unter dem Titel */
    line-height: 1.2;
    z-index: 3;
}

.product-overview-card p {
    font-size: 1.1em; /* Größe des Beschreibungstextes */
    color: #666666; /* Etwas hellere Farbe für den Text */
    line-height: 1.5;
    margin-bottom: auto; /* Sorgt dafür, dass der Text am unteren Rand bleibt bei flex-direction: column */
    z-index: 3;
    display: -webkit-box; /* Für Webkit-Browser */
    line-clamp: 5;
    -webkit-line-clamp: 5; /* Anzahl der Zeilen, nach denen abgeschnitten wird (z.B. 3 Zeilen) */
    -webkit-box-orient: vertical; /* Textausrichtung */
    overflow: hidden; /* Verbirgt den Rest des Textes */
    text-overflow: ellipsis; /* Zeigt Auslassungspunkte am Ende */
    max-height: calc(1.1em * 1.5 * 5); 
}

/* --- UIkit Anpassungen (Optional, falls du UIkit spezifisches Verhalten ändern willst) --- */
/* Dies ist nur, falls die UIkit-Standardstile deine Anpassungen überschreiben sollten.
   Normalerweise sollten die oben genannten spezifischeren Selektoren ausreichen. */
.uk-grid-small > .uk-first-column,
.uk-grid-small > div {
    padding-left: 15px; /* Passt den Abstand zwischen den Grid-Elementen an, wenn nötig */
}



/* --- Keyframes für die Pfad-Animationen --- */
@keyframes drawPath {
    0% {
        stroke-dashoffset: var(--path-length);
        opacity: 0;
    }
    1% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes fillPath {
    0% {
        fill: none;
    }
    10% {
        fill: black; /* Oder deine Zielfarbe */
        fill-opacity: 0.1;
    }
    20% {
        fill: black; /* Oder deine Zielfarbe */
        fill-opacity: 0.2;
    }
    30% {
        fill: black; /* Oder deine Zielfarbe */
        fill-opacity: 0.3;
    }
    40% {
        fill: black; /* Oder deine Zielfarbe */
        fill-opacity: 0.4;
    }
    50% {
        fill: black; /* Oder deine Zielfarbe */
        fill-opacity: 0.5;
    }
    60% {
        fill: black; /* Oder deine Zielfarbe */
        fill-opacity: 0.6;
    }
    70% {
        fill: black; /* Oder deine Zielfarbe */
        fill-opacity: 0.7;
    }
    80% {
        fill: black; /* Oder deine Zielfarbe */
        fill-opacity: 0.8;
    }
    90% {
        fill: black; /* Oder deine Zielfarbe */
        fill-opacity: 0.9;
    }
    100% {
        fill: black; /* Oder deine Zielfarbe */
        fill-opacity: 1;
    }
}

/* --- Styles für die Pfade (keine Änderung hier notwendig) --- */
.draw-path {
    fill: none;
    stroke: #000; /* Oder deine gewünschte Strichfarbe */
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0; /* Standardmäßig unsichtbar, bis die Animation startet */
}

/* --- Styles und Keyframes für Kreise und Bilder (unverändert) --- */
.redCircle {
    opacity: 0;
}

circle.redCircle {
    fill: #da261c;
}

.fill-white {
    fill: white;
}