@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

/* Lottie-Container bleiben unverändert */
.lottie-container {
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

/* Bestehende Animation bleibt */
@keyframes flipIn {
    0% {
        transform: rotateY(180deg);
        opacity: 0;
    }
    50% {
        transform: rotateY(90deg);
        opacity: 1;
    }
    100% {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

/* Container für die Leistungen-Kacheln bleibt unverändert */
.leistungen-tiles {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 10px;
    flex-wrap: wrap;
}

/* Angepasste Kachel-Styles */
.tile.leistung-tile {
    width: 550px;
    height: 680px;
    background: linear-gradient(135deg, 
            #09cc94 0%, 
            #09cc94 50%, 
            #0fbf8c 50%, 
            #0fbf8c 75%, 
            #007e68 75%, 
            #007e68 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    transition: transform 0.5s, box-shadow 0.5s, background 0.5s;
    font-size: 1.3em;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    animation: flipIn 1s ease-out;
    animation-iteration-count: 1;
    padding-top: 20px;
}

/* Header der Kacheln bleibt weitgehend gleich */
.tile-header {
    text-align: center;
    height: 240px;
    box-sizing: border-box;
    padding-top: 20px;
}

.tile-header h3 {
    margin: 10px 0 0;
    font-size: 1.4em;
}

/* Angepasster Content-Bereich der Kachel */
.tile-content {
    text-align: left;
    padding: 0 20px;
    font-size: 1em;
    overflow-y: auto;
    margin-top: 20px;
}

/* Listen ohne Standard-Aufzählungszeichen */
.tile-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Verbesserte Listeneinträge: mehr Abstand, höhere Zeilenhöhe und Separator */
.tile-content li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    line-height: 1.6;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    font-weight: 300; /* Noch dünner für Eleganz */
    line-height: 1.6; /* Mehr Luft für bessere Lesbarkeit */
}
.tile-content li:last-child {
    border-bottom: none;
}

/* Angepasster Bullet-Punkt */
.tile-content .dot {
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
    border: 2px solid #007e68;
}

/* Hover-Effekte bleiben unverändert */
.leistungen-tiles:hover .tile.leistung-tile {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.leistungen-tiles .tile.leistung-tile:hover {
    opacity: 1;
    box-shadow: 0 0 25px 5px rgba(9, 204, 148, 0.8);
    transition: box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Media Queries für Responsive Design – Anpassungen bleiben weitgehend gleich */
@media (max-width: 768px) {
    .tile.leistung-tile {
        width: 320px;
        height: 520px;
        padding-top: 20px;
        font-size: 1em;
        margin: 0 auto;
    }
    .tile-header {
        height: auto;
        padding: 5px 15px;
    }
    .lottie-container {
        width: 130px;
        height: 130px;
        margin: 0 auto;
    }
    .tile-header h3 {
        font-size: 1.2em;
        margin-top: 1px;
    }
    .tile-content {
        padding: 0 15px;
        font-size: 1em;
    }
    .leistungen-tiles {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 20px;
    }
}

@media (max-width: 480px) {
    /* Container für die Leistungen-Kacheln bleibt unverändert */
    .leistungen-tiles {
        display: flex;
        justify-content: center;
        gap: 20px;
        padding: 1px;
        flex-wrap: wrap;
    }

    .tile.leistung-tile {
        width: 280px;
        height: 480px;
        padding-top: 1px;
        font-size: 0.95em;
        margin: 0 auto;
    }
    .tile-header {
        height: auto;
        padding: 5px 10px;
    }
    .lottie-container {
        width: 110px;
        height: 110px;
        margin: 0 auto;
    }
    .tile-header h3 {
        font-size: 1em;
        margin-top: 8px;
    }
    .tile-content {
        padding: 0 10px;
        font-size: 0.9em;
    }
}