/* ================================================================
   CF7 Erfolgszustand — Anfrage-Karte auf den SEO-Unterseiten
   ----------------------------------------------------------------
   Ziel: Nach dem Absenden wird die Karte zur Danke-Karte, damit die
   Bestätigung nicht mehr übersehen wird.

   Scope: ausschliesslich .cc-card (die Karte der SEO-Unterseiten).
   Die Startseite nutzt .contact-section / #kontakt und bleibt
   unverändert (siehe assets/css/cf7-contact.css Z. 204-218).

   Spezifität: der post_content jeder Unterseite bringt ein eigenes
   <style> mit `.cc-card .wpcf7-response-output { ... !important }`
   (0,2,0). Diese Datei arbeitet mit `.cc-card.is-sent ...` (0,3,0)
   und gewinnt damit unabhängig von der Reihenfolge im DOM.
   ================================================================ */

.cc-card.is-sent {
    border-color: rgba(34, 197, 94, 0.45) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(34, 197, 94, 0.18),
        0 0 44px rgba(34, 197, 94, 0.16) !important;
}

/* Überschrift, Trust-Badges, Formular und die Inline-Skripte der
   Seite ausblenden. Übrig bleibt nur der Erfolgsblock. */
.cc-card.is-sent > div > *:not(.flo-success) {
    display: none !important;
}

/* Die CF7-Standardmeldung entfällt, die Aussage steht jetzt gross
   in der Karte. */
.cc-card.is-sent .wpcf7-response-output {
    display: none !important;
}

/* Wrapper behält seine vorherige Höhe (per JS als min-height gesetzt)
   und zentriert den Erfolgsblock, damit der Hero nicht springt. */
.cc-card.is-sent > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* ---------------------------------------------------------------- */

.cc-card .flo-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    outline: none;
    animation: floSuccessIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cc-card .flo-success__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 0 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.35);
    animation: floSuccessPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.08s;
}

.cc-card .flo-success__icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    animation: floSuccessCheck 0.45s ease-out forwards 0.32s;
}

.cc-card .flo-success__title {
    margin: 0 0 10px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

.cc-card .flo-success__text {
    max-width: 34ch;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

.cc-card .flo-success__alt {
    width: 100%;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
}

.cc-card .flo-success__alt a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #4ade80;
    font-weight: 600;
    text-decoration: none;
}

.cc-card .flo-success__alt a:hover,
.cc-card .flo-success__alt a:focus-visible {
    text-decoration: underline;
}

.cc-card .flo-success__alt svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ---------------------------------------------------------------- */

@keyframes floSuccessIn {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes floSuccessPop {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes floSuccessCheck {
    to { stroke-dashoffset: 0; }
}

@media (max-width: 640px) {
    .cc-card .flo-success__icon {
        width: 56px;
        height: 56px;
        margin-bottom: 14px;
    }
    .cc-card .flo-success__icon svg {
        width: 28px;
        height: 28px;
    }
    .cc-card .flo-success__title { font-size: 20px; }
    .cc-card .flo-success__text  { font-size: 14px; }
    .cc-card .flo-success__alt   { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-card .flo-success,
    .cc-card .flo-success__icon {
        animation: none !important;
    }
    .cc-card .flo-success__icon svg {
        stroke-dashoffset: 0;
        animation: none !important;
    }
}