/*
* Diese Datei wurde mit hilfe von GEMINI PRO erstellt, 
* da meinen eigegen CSS Skills nicht gereicht haben mein Konzept
* schon in HTML und CSS umzusetzen. 
* Weil mir aber einer wirklich darstellung der Daten wichtig war 
* habe ich mich deshalt trotzdem gegen Figma entschieden habe.
*/

@import url(style.css);

.facts-section {
    background-color: var(--color-lime); /* Muss zur Welle davor passen */
    padding: 6rem 2rem 10rem 2rem; /* Viel Padding unten für die nächste Welle */
    position: relative;
}

/* Grid für die Karten */
.facts-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
}

/* Das organische Blatt-Design */
.leaf-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    width: 260px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    /* Die organische Form: oben links & unten rechts stark abgerundet */
    border-radius: 20px 100px 20px 100px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(255,255,255,0.5);
    transition: transform 0.3s ease, background 0.3s ease;
    position: relative;
}

.leaf-card:hover {
    transform: translateY(-10px) rotate(2deg); /* Leichtes Schweben und Drehen */
    background: #fff;
    box-shadow: 0 15px 40px rgba(45, 106, 79, 0.15);
}

/* Typografie in der Karte */
.fact-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--color-forest);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.fact-label {
    font-size: 1.1rem;
    color: #555;
    font-weight: 600;
}