/*
|--------------------------------------------------------------------------
| 2026-11-03
| Author: Claude
| Neuanlage (PHP-Sicherheitscheck R1). Baustein „Hover-Karte mit Link“
| aus dem Bausteinkatalog (claude/gestaltung-inhaltsseiten.md).
|
| VisionThinks UI / Komponente / Hover-Karte
|
|   <article class="vt-hoverkarte">
|       … Inhalt …
|       <a class="vt-textlink vt-hoverkarte__link" href="…">…</a>
|   </article>
|
| Leitlinie Hover-Karten (Start R6b, Klaus 25.10.2026):
|   - die ganze Karte ist der Link (::after des Links über die Karte),
|     Mauszeiger überall Pointer;
|   - Hover nur auf Geräten mit Maus (hover: hover);
|   - Fokus über :has(:focus-visible) an der Karte.
| Werte wie Start „Wofür VisionThinks steht“ (#1d8ff0 / #f5f8fc), aber mit
| Fläche und Rahmen im Ruhezustand (Karte, Radius 20).
| Start nutzt noch die eigenen Klassen vt-start-schwerpunkt* (Umstellung
| nur mit Freigabe).
|
| 2026-11-03 | Claude | R2b-2: Fokus ohne Kontur, zeigt den Hover-Zustand
| (globale Richtlinie 5).
|--------------------------------------------------------------------------
*/

:root .vt-hoverkarte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    min-width: 0;
    padding: 32px;
    border: 1px solid #d4e2f2;
    border-radius: var(--vt-radius-card, 20px);
    background-color: #ffffff;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

:root .vt-hoverkarte__link {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 8px;
}

/* Link über die ganze Karte ziehen */
:root .vt-hoverkarte__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

:root .vt-hoverkarte__link:focus,
:root .vt-hoverkarte__link:focus-visible {
    outline: none;
}

/* Tastaturfokus an der ganzen Karte = Hover-Zustand
   (R2b-2, globale Richtlinie 5: keine Kontur, Fokus = Hover) */
:root .vt-hoverkarte:has(.vt-hoverkarte__link:focus-visible) {
    border-color: #1d8ff0;
    background-color: #f5f8fc;
}

:root .vt-hoverkarte .vt-hoverkarte__link:focus-visible {
    color: #0b1730;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (hover: hover) {
    :root .vt-hoverkarte:hover {
        border-color: #1d8ff0;
        background-color: #f5f8fc;
    }

    :root .vt-hoverkarte:hover .vt-hoverkarte__link {
        color: #0b1730;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

@media (max-width: 767px) {
    :root .vt-hoverkarte { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    :root .vt-hoverkarte { transition: none; }
}