/*
 * Knoepfe: drei Rollen statt fuenf Varianten.
 *
 * Der Bestand hatte fuenf Klassen. Gemessen am 26.08. sind Groesse,
 * Polsterung und Schriftgroesse bei allen fuenf schon gleich (47 bis
 * 48 Pixel hoch, 13/17 Polsterung, 12 px Schrift) - die Behauptung,
 * die Hoehen liefen auseinander, stimmte nicht.
 *
 * Was wirklich nicht stimmte:
 *
 *  1. `.btn-dark` hatte gar keinen Hover-Zustand. Es ist der
 *     meistbenutzte Knopf ueberhaupt - 19 Stellen in den Vorlagen, 16
 *     in den Seiteninhalten - und er gab beim Ueberfahren keinerlei
 *     Rueckmeldung. Das ist kein Geschmack, das ist eine fehlende
 *     Zustandsanzeige.
 *
 *  2. Zwei ausgefuellte Knoepfe in zwei verschiedenen Blautoenen
 *     (`.btn-dark` in Marineblau, `.btn-clubblue` in Clubblau) fuer
 *     dieselbe Rolle. Auf derselben Seite nebeneinander sieht das
 *     nach Zufall aus.
 *
 *  3. `.btn-yellow` war dreimal deklariert, `.btn-line` zweimal mit
 *     verschiedenen Rahmenfarben. Die spaeteren gewannen; die
 *     frueheren waren toter Text, der beim Suchen in die Irre fuehrt.
 *
 * Die drei Rollen:
 *
 *   Primaer     `.btn-yellow`   Der eine Weg weiter, den die Seite will.
 *   Sekundaer   `.btn-dark`     Ausgefuellt. `.btn-clubblue` ist dasselbe.
 *   Umriss      `.btn-line`     Auf hellem Grund. `.btn-light` auf dunklem.
 *
 * `.btn-clubblue` bleibt als Klasse bestehen und sieht aus wie
 * `.btn-dark`. Sie in 22 Stellen umzubenennen - davon zwei in
 * importierten Seiteninhalten, die dafuer neu eingelesen werden
 * muessten - waere Risiko ohne Gegenwert.
 *
 * Geladen nach site.css und custom.css, damit die Zusammenfuehrung
 * gegen die verstreuten Altfassungen gewinnt.
 */

.btn {
	min-height: 44px;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* --- Primaer ------------------------------------------------------ */

.btn-yellow {
	background: var(--clubyellow, #ffdc00);
	color: #07122f;
	border-color: var(--clubyellow, #ffdc00);
}

.btn-yellow:hover,
.btn-yellow:focus-visible {
	background: #ffe92c;
	border-color: #ffe92c;
}

/* --- Sekundaer, ausgefuellt --------------------------------------- */

.btn-dark,
.btn-clubblue {
	background: var(--clubblue, #003da5);
	color: #fff;
	border-color: var(--clubblue, #003da5);
}

.btn-dark:hover,
.btn-dark:focus-visible,
.btn-clubblue:hover,
.btn-clubblue:focus-visible {
	background: #002f80;
	border-color: #002f80;
}

/* --- Umriss ------------------------------------------------------- */

.btn-line {
	background: transparent;
	border-color: #9f9d95;
	color: var(--navy, #07122f);
}

.btn-line:hover,
.btn-line:focus-visible {
	background: var(--navy, #07122f);
	border-color: var(--navy, #07122f);
	color: #fff;
}

/* Derselbe Umriss, aber auf dunklem Grund. */
.btn-light {
	background: transparent;
	border-color: rgba(255, 255, 255, .65);
	color: #fff;
}

.btn-light:hover,
.btn-light:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--navy, #07122f);
}