/* ==========================================================
   VisionThinks Buttons
========================================================== */

/* 2026-08-04 | Codex | Drei durch vt-cta-firstrank ersetzte Domainsuche-CTA-Regeln entfernt. */


/*
|--------------------------------------------------------------------------
| 2026-10-25
| Author: Claude
| Ergänzung (Startseite R4), Entscheidung Klaus 2026-10-25:
| Zentrale Link-Button-Komponente .vt-btn mit Chevron rechts.
|
| Markup:
|   <a class="vt-btn" href="…">Text<span class="vt-btn__icon" aria-hidden="true">
|     <?php echo vt_FE_get_icon('chevron', 'xsmall', -90); ?></span></a>
| Das Icon kommt aus fe_icons.php (chevron.svg zeigt nach unten, daher
| -90 Grad); Größe über 03-components/vt-icons.css (xsmall = 18px).
|
| Ausprägungen:
|   .vt-btn                       gefüllt, #1764c4 (Weiß 5,74:1)
|   .vt-btn--secondary            Umriss auf dunklem Grund
|   .vt-btn--secondary-on-light   Umriss auf hellem Grund (#1764c4,
|                                 5,74:1 auf Weiß, 4,97:1 auf #e9eff7)
|   .vt-btn--disabled             nicht klickbar (span statt a)
|   .vt-btn--inverted             weiß gefüllt auf farbigem Band
|                                 (#0b1730 auf Weiß 17,8:1; R7)
| Hover: translateY(-2px) (docs/ui/03-components/buttons.md).
|
| Die doppelte Klasse hebt die Spezifität auf (0,2,0) und gewinnt damit
| ohne !important gegen Astra (a, a:hover, a:focus mit 0,1,1).
| Radius aus 01-foundation/vt-radius.css, Ausweichwert 20px.
|--------------------------------------------------------------------------
*/

.vt-btn.vt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: 52px;
    padding: 0 22px 0 28px;
    border: 1px solid #1764c4;
    border-radius: var(--vt-radius-button, 20px);
    background-color: #1764c4;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.vt-btn.vt-btn:hover,
.vt-btn.vt-btn:focus-visible {
    background-color: #1458ab;
    border-color: #1458ab;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
}

.vt-btn.vt-btn:focus {
    color: #ffffff;
    outline: none;
}

.vt-btn.vt-btn:focus-visible {
    outline: 2px solid rgb(120, 190, 255);
    outline-offset: 3px;
}

/* Umriss auf dunklem Grund */
.vt-btn.vt-btn--secondary {
    background-color: transparent;
    border-color: rgba(94, 169, 255, .55);
    color: #cfe6ff;
}

.vt-btn.vt-btn--secondary:hover,
.vt-btn.vt-btn--secondary:focus-visible {
    background-color: rgba(12, 35, 77, .55);
    border-color: rgb(34, 138, 232);
    color: #ffffff;
}

.vt-btn.vt-btn--secondary:focus {
    color: #cfe6ff;
}

/* Umriss auf hellem Grund */
.vt-btn.vt-btn--secondary-on-light {
    background-color: transparent;
    border-color: #1764c4;
    color: #1764c4;
}

.vt-btn.vt-btn--secondary-on-light:hover,
.vt-btn.vt-btn--secondary-on-light:focus-visible {
    background-color: #1764c4;
    border-color: #1764c4;
    color: #ffffff;
}

.vt-btn.vt-btn--secondary-on-light:focus {
    color: #1764c4;
}

.vt-btn.vt-btn--secondary-on-light:focus-visible {
    outline-color: #1764c4;
}

/* Weiß gefüllt auf farbigem Band (Startseite R7) */
.vt-btn.vt-btn--inverted {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #0b1730;
}

.vt-btn.vt-btn--inverted:hover,
.vt-btn.vt-btn--inverted:focus-visible {
    background-color: #eef3f9;
    border-color: #eef3f9;
    color: #0b1730;
}

.vt-btn.vt-btn--inverted:focus {
    color: #0b1730;
}

.vt-btn.vt-btn--inverted:focus-visible {
    outline-color: #ffffff;
}

/* Nicht klickbar */
.vt-btn.vt-btn--disabled,
.vt-btn.vt-btn--disabled:hover {
    background-color: transparent;
    border-color: rgba(94, 169, 255, .35);
    border-style: dashed;
    color: rgba(255, 255, 255, .65);
    cursor: default;
    transform: none;
}

/* Chevron */
.vt-btn__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: currentColor;
}

@media (max-width: 480px) {
    .vt-btn.vt-btn {
        width: 100%;
        white-space: normal;
        text-align: center;
    }
}

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

/*
|--------------------------------------------------------------------------
| 2026-11-04
| Author: Claude
| Änderung (PHP-Sicherheitscheck R2b-3a, Befund/Freigabe Klaus 04.11.2026
| 12:53–13:45; globale Richtlinie „Fokus = Hover, keine Fokuslinie“):
| - Nach Mausklick (:focus ohne :focus-visible, nicht unter der Maus)
|   bleibt der Normalzustand.
|   Bisher setzte eine stärkere Theme-/Elementor-Regel für button:focus
|   einen dunklen Hintergrund (Fachseite, „Weiter zur Bestellung“).
| - Tastaturfokus (:focus-visible) = Hover-Zustand, ohne Kontur.
| Dreifache Klasse (0,3,1 mit Pseudoklasse) gegen Theme-Regeln wie
| „.elementor-kit-… button:focus“. Bisherige Kontur-Regeln (Z. 74–77,
| 115–117, 137–139) bleiben stehen und werden hier überschrieben.
|--------------------------------------------------------------------------
*/

/* Gefüllt */
.vt-btn.vt-btn.vt-btn:focus:not(:focus-visible):not(:hover) {
    background-color: #1764c4;
    border-color: #1764c4;
    color: #ffffff;
    outline: none;
    box-shadow: none;
    transform: none;
}
.vt-btn.vt-btn.vt-btn:focus-visible {
    background-color: #1458ab;
    border-color: #1458ab;
    color: #ffffff;
    outline: none;
    box-shadow: none;
}

/* Umriss auf dunklem Grund */
.vt-btn.vt-btn.vt-btn--secondary:focus:not(:focus-visible):not(:hover) {
    background-color: transparent;
    border-color: rgba(94, 169, 255, .55);
    color: #cfe6ff;
}
.vt-btn.vt-btn.vt-btn--secondary:focus-visible {
    background-color: rgba(12, 35, 77, .55);
    border-color: rgb(34, 138, 232);
    color: #ffffff;
}

/* Umriss auf hellem Grund */
.vt-btn.vt-btn.vt-btn--secondary-on-light:focus:not(:focus-visible):not(:hover) {
    background-color: transparent;
    border-color: #1764c4;
    color: #1764c4;
}
.vt-btn.vt-btn.vt-btn--secondary-on-light:focus-visible {
    background-color: #1764c4;
    border-color: #1764c4;
    color: #ffffff;
}

/* Weiß gefüllt */
.vt-btn.vt-btn.vt-btn--inverted:focus:not(:focus-visible):not(:hover) {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #0b1730;
}
.vt-btn.vt-btn.vt-btn--inverted:focus-visible {
    background-color: #eef3f9;
    border-color: #eef3f9;
    color: #0b1730;
}