/* ============================================================================
 * Hover-, Fokus- und Aktiv-Zustaende als KLASSEN statt als Inline-Handler.
 *
 * Handtest-Fund 27.07.2026: Die CSP aus K-8 (`script-src 'self'`) blockiert
 * `script-src-attr` — also alle Inline-Event-Handler (`onmouseover="this.style…"`).
 * 33 Stueck steckten im Frontend, 19 davon waren reine Optik.
 *
 * Die naheliegende Antwort waere `'unsafe-hashes'` in der CSP gewesen, wie die Browser-Meldung
 * selbst vorschlaegt. Das waere aber der falsche Weg: Es haette die CSP wieder aufgeweicht, um
 * Code zu erlauben, der ohnehin nicht nach JavaScript gehoert. Ein Hover-Effekt ist Darstellung,
 * und Darstellung gehoert ins Stylesheet — dort ist er ausserdem schneller, ueberschreibbar und
 * greift auch per Tastatur (`:focus-visible`), was `onmouseover` nie konnte.
 *
 * Die Klassen sind bewusst klein und kombinierbar statt komponentenspezifisch.
 * ========================================================================== */

/* --- Anheben beim Ueberfahren (Karten, Kacheln) --- */
.ia-hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ia-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* Schwaechere Variante fuer Leisten und Banner */
.ia-hover-lift-sm {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ia-hover-lift-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* --- Rahmen hervorheben (Auswahlkacheln, Karten) --- */
.ia-hover-border {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.ia-hover-border:hover {
    border-color: var(--color-role-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Variante mit Hintergrundwechsel (Optionskacheln im Bild-Dialog) */
.ia-hover-option {
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ia-hover-option:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-light);
}

/* --- Eingabefelder: Fokusrahmen ---
 * `:focus-visible` statt `:focus`: Die Hervorhebung erscheint bei Tastaturbedienung, aber nicht
 * bei jedem Mausklick. Das war mit `onfocus` nicht unterscheidbar. */
.ia-focus-border {
    transition: border-color 0.15s ease;
}
.ia-focus-border:focus,
.ia-focus-border:focus-visible {
    border-color: var(--color-role-primary);
    outline: none;
}

/* --- Flaechen, die beim Ueberfahren aufhellen (Listenzeilen, sekundaere Knoepfe) --- */
.ia-hover-bg {
    transition: background-color 0.15s ease;
}
.ia-hover-bg:hover {
    background: var(--color-bg-light);
}

/* --- Primaerknopf: dunkler beim Ueberfahren, aber nicht im deaktivierten Zustand ---
 * Die Inline-Variante musste `if(!this.disabled)` selbst pruefen; in CSS erledigt das
 * `:not(:disabled)`. */
.ia-hover-primary {
    transition: background-color 0.15s ease;
}
.ia-hover-primary:hover:not(:disabled) {
    background: var(--color-primary-dark);
}

/* --- Info-Knopf (Login-Seite) --- */
.ia-hover-info {
    transition: background-color 0.15s ease;
}
.ia-hover-info:hover {
    background: var(--color-info-dark);
}

/* --- Klickbare Flaeche, die wie ein Knopf reagiert (Hero-Kachel) --- */
.ia-clickable {
    cursor: pointer;
}