/* ==========================================================================
   SERVICES SECTION (DESKTOP FIRST)
   ========================================================================== */
/* Haupt-Wrapper */


.flow-leistungen-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Container für alle Karten */
.leistungen-container {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Abstand zwischen den einzelnen Boxen */
    width: 100%; 
}

/* Die einzelne Leistungs-Karte */
.leistung-card {
    position: relative;
    background-color: #0c0d0e; 
    border: 1px solid #66C5EE;
    border-radius: 12px;
    padding: 40px 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: border-color 0.3s ease;
}

.leistung-card:hover {
    border-color: #b07530;
}

/* Content-Bereich der Karte */
.card-content {
    position: relative;
    z-index: 2; 
}

.leistung-title {
    color: #E6F5FC;
    font-size: 28px; /* Prominent desktop font size matching header styles */
    font-weight: 700;
    font-style: italic; 
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.leistung-text {
    color: #E6F5FC; 
    font-size: 18px; /* Aligned with footer's 20px and slider's 1.5em body styles */
    line-height: 1.6;
    margin: 0 0 25px 0;



    overflow-wrap: break-word;
    word-break: break-word;
    /* Fügt bei Bedarf automatische Bindestriche ein (z. B. bei langen deutschen Wörtern) */
    hyphens: auto; 
    /* Verhindert, dass Text aus dem Container herausragt */
    max-width: 100%;
}

.leistung-card .header-request-btn {
    margin-right: 0; 
    text-align: center;
}

/* Das "Flow" Wasserzeichen im Hintergrund (Desktop Default) */
.leistungen-card-watermark {
    position: absolute;
    right: 1%;
    bottom: -10%;
    user-select: none;
    pointer-events: none;
    width: 29em;
    opacity:.2;
}


/* ==========================================================================
   MEDIA OVERRIDES (TABLET & MOBILE)
   ========================================================================== */

/* Tablet & Mobile Breakpoint */
@media (max-width: 991.98px) {
    /* .leistungen-container {
        width: 90vw;
    } */

    .leistung-card {
        padding: 30px;
    }

    .card-content {
        max-width: 100%;
    }

    .leistung-title {
        font-size: 18px; /* Smooth scale down for mobile viewports */
    }

    .leistung-text {
        font-size: 15px; /* Original mobile layout size */
    }

    .leistungen-card-watermark {
        bottom: -20%;
        width: 25em;
    }
}


/* @media (min-width:992px){
    .leistung-text{
        max-width: 70%;
    }
} */