/*
|--------------------------------------------------------------------------
| 2026-08-04
| Author: Codex
| Änderung:
| Zentrale Erstimplementierung der Komponente Primary CTA First Rank
| ausschließlich aus menschlich freigegebenen Komponentenwerten.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-08-04
| Author: Codex
| Änderung:
| Optionale Loader-Ausprägung über vt-cta-load ergänzt. Die vorhandene
| kleine Spinner-Ausprägung wird ausschließlich bei aktivem is-loading
| innerhalb der CTA-Komponente dargestellt.
|--------------------------------------------------------------------------
*/

@keyframes vtSpin {
    to {
        transform: rotate(360deg);
    }
}

/*
|--------------------------------------------------------------------------
| 2026-08-04
| Author: Codex
| Änderung:
| Generische Kaskadenautorität gegenüber allgemeinen Buttonregeln ergänzt.
| Die doppelte Komponentenklasse erhöht ausschließlich die Spezifität und
| führt keine Feature-, Theme- oder Elementor-Abhängigkeit ein.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Basis
|--------------------------------------------------------------------------
*/
button.vt-cta-firstrank.vt-cta-firstrank {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    box-sizing: border-box;

    height: 74px;

    border: none;
    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #2563EB,
            #3DA3FF
        );

    color: #ffffff;

    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.03em;

    cursor: pointer;

    box-shadow:
        0 18px 50px rgba(47,140,255,0.24);

    transform: none;

    transition:
        transform .22s ease .03s,
        background-color .22s ease,
        border-color .22s ease,
        color .22s ease;
}

/*
|--------------------------------------------------------------------------
| Interaktionszustände
|--------------------------------------------------------------------------
*/
button.vt-cta-firstrank.vt-cta-firstrank:hover {
    background:
        linear-gradient(
            90deg,
            #2563EB,
            #3DA3FF
        );

    transform: translateY(-2px);
}

button.vt-cta-firstrank.vt-cta-firstrank:focus,
button.vt-cta-firstrank.vt-cta-firstrank:focus-visible {
    background:
        linear-gradient(
            90deg,
            #2563EB,
            #3DA3FF
        );

    color: #ffffff;
    border: none;
    border-radius: 20px;
    box-shadow:
        0 18px 50px rgba(47,140,255,0.24);
    transform: none;
}

button.vt-cta-firstrank.vt-cta-firstrank:focus:not(:focus-visible) {
    outline: none;
}

button.vt-cta-firstrank.vt-cta-firstrank:active {
    background:
        linear-gradient(
            90deg,
            #2563EB,
            #3DA3FF
        );

    transform: translateY(0);
}

/*
|--------------------------------------------------------------------------
| 2026-08-04
| Author: Codex
| Änderung:
| Vollständigen freigegebenen visuellen Disabled-Vertrag aus Version 2
| zentral ergänzt. Eine Opazitätsänderung ist ausdrücklich nicht enthalten.
|--------------------------------------------------------------------------
*/
button.vt-cta-firstrank.vt-cta-firstrank:disabled,
button.vt-cta-firstrank.vt-cta-firstrank:disabled:hover,
button.vt-cta-firstrank.vt-cta-firstrank:disabled:focus,
button.vt-cta-firstrank.vt-cta-firstrank:disabled:focus-visible,
button.vt-cta-firstrank.vt-cta-firstrank:disabled:active {
    background:
        linear-gradient(
            90deg,
            #2563EB,
            #3DA3FF
        );
    color: #ffffff;
    border: none;
    border-radius: 20px;
    box-shadow:
        0 18px 50px rgba(47,140,255,0.24);
    cursor: not-allowed;
    outline: none;
    transition: none;
    transform: none;
}

/*
|--------------------------------------------------------------------------
| 2026-11-05
| Author: Claude
| Änderung (Funnel v2, F2-3; Wunsch Klaus 05.11.2026 06:24):
| Gesperrt = nur Rand. Bis hier sah der gesperrte Knopf genau wie der
| aktive aus (Vertrag oben, unverändert stehen gelassen). Ab hier
| überschreibt diese Regel ihn: durchsichtig, 1px hellblauer Rand,
| gedämpfte Schrift, kein Schatten. Aktiv bleibt der volle Verlauf.
| Loading (is-loading) hat höhere Spezifität und bleibt gefüllt.
| Wirkt überall, wo die Komponente gesperrt wird (Domainpreise,
| PHP-Check-Fachseite, checkout-3, Preisseite).
| Lastenheft/Komponentenbeschreibung: Änderung gemeldet, nicht geändert.
|--------------------------------------------------------------------------
*/
button.vt-cta-firstrank.vt-cta-firstrank:disabled,
button.vt-cta-firstrank.vt-cta-firstrank:disabled:hover,
button.vt-cta-firstrank.vt-cta-firstrank:disabled:focus,
button.vt-cta-firstrank.vt-cta-firstrank:disabled:focus-visible,
button.vt-cta-firstrank.vt-cta-firstrank:disabled:active {
    background: transparent;
    /* 2026-11-05 | F2-3b | deckend statt Transparenz (Projektregel Klaus);
       alt: color: rgba(255,255,255,0.55); border: 1px solid rgba(61,163,255,0.55); */
    color: #9aa9bf;
    border: 1px solid #2664a1;
    box-shadow: none;
}

/*
|--------------------------------------------------------------------------
| Statuszustände
| Loading besitzt die höchste Zustandspriorität. Die Komponente definiert
| ausschließlich dessen freigegebenes visuelles Verhalten.
|--------------------------------------------------------------------------
*/
button.vt-cta-firstrank.vt-cta-firstrank.is-loading,
button.vt-cta-firstrank.vt-cta-firstrank.is-loading:hover,
button.vt-cta-firstrank.vt-cta-firstrank.is-loading:focus,
button.vt-cta-firstrank.vt-cta-firstrank.is-loading:focus-visible,
button.vt-cta-firstrank.vt-cta-firstrank.is-loading:active,
button.vt-cta-firstrank.vt-cta-firstrank.is-loading:disabled {
    background:
        linear-gradient(
            90deg,
            #2563EB,
            #3DA3FF
        );

    color: #ffffff;

    border: none;
    border-radius: 20px;

    box-shadow:
        0 18px 50px rgba(47,140,255,0.24);

    cursor: not-allowed;
    transition: none;
    transform: none;
}

/*
|--------------------------------------------------------------------------
| Loader-Ausprägung
| vt-cta-load kennzeichnet ausschließlich die Loader-Fähigkeit. Erst die
| zusätzliche Zustandsklasse is-loading aktiviert diese Darstellung.
|--------------------------------------------------------------------------
*/
button.vt-cta-firstrank.vt-cta-firstrank.vt-cta-load.is-loading > .vt-loading-spinner {
    display: inline-block;

    width: 18px;
    height: 18px;

    border-width: 2px;
    border-style: solid;
    border-color: rgba(255,255,255,0.3);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation:
        vtSpin 0.7s linear infinite;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/
@media (max-width: 881px) {
    button.vt-cta-firstrank.vt-cta-firstrank {
        height: 64px;
        font-size: 20px;
    }
}

@media (max-width: 640px) {
    button.vt-cta-firstrank.vt-cta-firstrank,
    button.vt-cta-firstrank.vt-cta-firstrank:focus,
    button.vt-cta-firstrank.vt-cta-firstrank:focus-visible,
    button.vt-cta-firstrank.vt-cta-firstrank:disabled,
    button.vt-cta-firstrank.vt-cta-firstrank:disabled:hover,
    button.vt-cta-firstrank.vt-cta-firstrank:disabled:focus,
    button.vt-cta-firstrank.vt-cta-firstrank:disabled:focus-visible,
    button.vt-cta-firstrank.vt-cta-firstrank:disabled:active,
    button.vt-cta-firstrank.vt-cta-firstrank.is-loading,
    button.vt-cta-firstrank.vt-cta-firstrank.is-loading:hover,
    button.vt-cta-firstrank.vt-cta-firstrank.is-loading:focus,
    button.vt-cta-firstrank.vt-cta-firstrank.is-loading:focus-visible,
    button.vt-cta-firstrank.vt-cta-firstrank.is-loading:active,
    button.vt-cta-firstrank.vt-cta-firstrank.is-loading:disabled {
        height: 60px;
        border-radius: 18px;
        font-size: 18px;
    }
}

/*
|--------------------------------------------------------------------------
| 2026-08-04
| Author: Codex
| Änderung:
| Freigegebenen Reduced-Motion-Vertrag zentral umgesetzt. Die noch offene
| Behandlung der funktionalen Spinneranimation bleibt bewusst unverändert.
|--------------------------------------------------------------------------
*/
@media (prefers-reduced-motion: reduce) {
    button.vt-cta-firstrank.vt-cta-firstrank,
    button.vt-cta-firstrank.vt-cta-firstrank:hover,
    button.vt-cta-firstrank.vt-cta-firstrank:active,
    button.vt-cta-firstrank.vt-cta-firstrank:focus,
    button.vt-cta-firstrank.vt-cta-firstrank:focus-visible,
    button.vt-cta-firstrank.vt-cta-firstrank:disabled,
    button.vt-cta-firstrank.vt-cta-firstrank.is-loading {
        transition: none;
        transform: none;
    }
}

/*
|--------------------------------------------------------------------------
| 2026-11-04
| Author: Claude
| Änderung (PHP-Sicherheitscheck R2b-3, Freigabe Klaus 04.11.2026 11:29):
| Modifikator „kompakt“ für schmale Spalten (z. B. Bestellübersicht
| 420 px). Gleiche Farben, Radien, Zustände und Loader wie die Basis;
| nur Höhe, Schriftgröße und einzeilige Beschriftung.
| Verwendung: <button class="vt-cta-firstrank kompakt …">
| Lastenheft/Komponentenbeschreibung: Ergänzung gemeldet, nicht geändert.
|--------------------------------------------------------------------------
*/
button.vt-cta-firstrank.vt-cta-firstrank.kompakt {
    height: 60px;
    gap: 12px;
    font-size: 18px;
    white-space: nowrap;
}

@media (max-width: 640px) {
    button.vt-cta-firstrank.vt-cta-firstrank.kompakt,
    button.vt-cta-firstrank.vt-cta-firstrank.kompakt:focus,
    button.vt-cta-firstrank.vt-cta-firstrank.kompakt:focus-visible,
    button.vt-cta-firstrank.vt-cta-firstrank.kompakt:disabled,
    button.vt-cta-firstrank.vt-cta-firstrank.kompakt.is-loading {
        height: 56px;
        font-size: 17px;
    }
}

/*
|--------------------------------------------------------------------------
| 2026-11-07
| Author: Claude
| Änderung (D7, Klaus 11:03): Link-Variante a.vt-cta-firstrank für CTAs,
| die auf eine andere Seite führen (z. B. „Wunschdomain prüfen“ auf der
| Domainpreisliste). Gleiche Werte wie der Knopf oben; Fokus = Hover;
| ohne Unterstreichung. Bestehende <button>-Regeln unverändert.
| Lastenheft/Komponentenbeschreibung: Ergänzung gemeldet, nicht geändert.
|--------------------------------------------------------------------------
*/
a.vt-cta-firstrank.vt-cta-firstrank,
a.vt-cta-firstrank.vt-cta-firstrank:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    box-sizing: border-box;
    height: 74px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(90deg, #2563EB, #3DA3FF);
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 18px 50px rgba(47,140,255,0.24);
    transform: none;
    transition: transform .22s ease .03s, background-color .22s ease, border-color .22s ease, color .22s ease;
}

a.vt-cta-firstrank.vt-cta-firstrank:hover,
a.vt-cta-firstrank.vt-cta-firstrank:focus-visible {
    background: linear-gradient(90deg, #2563EB, #3DA3FF);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
}

a.vt-cta-firstrank.vt-cta-firstrank:focus:not(:focus-visible) { outline: none; }

a.vt-cta-firstrank.vt-cta-firstrank:active { transform: translateY(0); }

a.vt-cta-firstrank.vt-cta-firstrank.kompakt {
    height: 60px;
    gap: 12px;
    font-size: 18px;
    white-space: nowrap;
}

@media (max-width: 881px) {
    a.vt-cta-firstrank.vt-cta-firstrank { height: 64px; font-size: 20px; }
}

@media (max-width: 640px) {
    a.vt-cta-firstrank.vt-cta-firstrank { height: 60px; border-radius: 18px; font-size: 18px; }
    a.vt-cta-firstrank.vt-cta-firstrank.kompakt { height: 56px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    a.vt-cta-firstrank.vt-cta-firstrank,
    a.vt-cta-firstrank.vt-cta-firstrank:hover,
    a.vt-cta-firstrank.vt-cta-firstrank:focus-visible,
    a.vt-cta-firstrank.vt-cta-firstrank:active { transition: none; transform: none; }
}