/* FH Wedel - Button (design-system/components/forms/Button.jsx).
   Farben stehen auf .fhw-button.fhw-button--x (zwei Klassen), damit sie
   gegen a:hover aus base.css gewinnen. Primaer, Outline und Ghost lesen wie
   Button.jsx die Variablen --btn-* mit Fallback; .flaeche-dunkel (base.css)
   schaltet sie auf Dunkelblau um, Karten setzen sie zurueck (karte.css).
   Mindesthoehe 44 px fuer alle Groessen (Klickflaechen ab 44 px laut
   header-ohne-karussell.html, Spec Abschnitt 13); Abweichung 6. */

.fhw-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--fh-blau);
    border-radius: var(--radius-m);
    background: var(--fh-blau);
    color: var(--text-invers);
    font-family: var(--font-body);
    font-size: var(--text-body-m);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

.fhw-button:hover {
    text-decoration: none;
}

.fhw-button:active {
    transform: translateY(1px);
}

/* ---------- Groessen ---------- */
.fhw-button.fhw-button--s {
    padding: 0.375rem 0.875rem;
    font-size: var(--text-body-s);
}

.fhw-button.fhw-button--l {
    min-height: 3rem;
    padding: 0.8125rem 1.625rem;
    font-size: var(--text-body-l);
}

/* ---------- Varianten ---------- */
.fhw-button.fhw-button--primaer,
.fhw-button.fhw-button--primaer:hover {
    color: var(--btn-primaer-fg, var(--text-invers));
}

.fhw-button.fhw-button--primaer {
    border-color: var(--btn-primaer-bg, var(--fh-blau));
    background: var(--btn-primaer-bg, var(--fh-blau));
}

.fhw-button.fhw-button--primaer:hover {
    border-color: var(--btn-primaer-hover, var(--fh-blau-mittel));
    background: var(--btn-primaer-hover, var(--fh-blau-mittel));
}

.fhw-button.fhw-button--sekundaer,
.fhw-button.fhw-button--sekundaer:hover {
    color: var(--text-invers);
}

.fhw-button.fhw-button--sekundaer {
    border-color: var(--fh-rot);
    background: var(--fh-rot);
}

.fhw-button.fhw-button--sekundaer:hover {
    border-color: var(--fh-rot-dunkel);
    background: var(--fh-rot-dunkel);
}

.fhw-button.fhw-button--outline,
.fhw-button.fhw-button--outline:hover,
.fhw-button.fhw-button--ghost,
.fhw-button.fhw-button--ghost:hover {
    color: var(--btn-outline-fg, var(--fh-blau));
}

.fhw-button.fhw-button--outline {
    border-color: var(--btn-outline-fg, var(--fh-blau));
    background: transparent;
}

.fhw-button.fhw-button--ghost {
    border-color: transparent;
    background: transparent;
}

.fhw-button.fhw-button--outline:hover,
.fhw-button.fhw-button--ghost:hover {
    background: var(--btn-outline-hover, var(--fh-blau-tint));
}

/* Gold und Weiss umrandet: zweiter Button auf Blau oder Bild
   (header-basis.css). Gold-Hover aus dem Token --fh-gelb-dunkel. */
.fhw-button.fhw-button--gold,
.fhw-button.fhw-button--gold:hover {
    color: var(--fh-blau);
}

.fhw-button.fhw-button--gold {
    border-color: var(--fh-gelb);
    background: var(--fh-gelb);
}

.fhw-button.fhw-button--gold:hover {
    border-color: var(--fh-gelb-dunkel);
    background: var(--fh-gelb-dunkel);
}

.fhw-button.fhw-button--weiss,
.fhw-button.fhw-button--weiss:hover {
    border-color: var(--fh-weiss);
    color: var(--text-invers);
}

.fhw-button.fhw-button--weiss {
    background: transparent;
}

.fhw-button.fhw-button--weiss:hover {
    background: color-mix(in srgb, var(--fh-weiss) 14%, transparent);
}

/* Auf Dunkelblau (Abweichung 7): Primaer weiss mit blauer Schrift, Outline
   und Ghost weiss, Rot bleibt -- ueber die Variablen --btn-* von
   .flaeche-dunkel (base.css), oben in den Varianten gelesen. */