/* Knopf — eine Form, drei Auspraegungen.
 *
 * Die Masse entsprechen dem Button des Design Systems (12/24, Radius klein,
 * 1.5px Rand, Zeilenhoehe 24). Bewusst als CSS statt als dessen React-
 * Komponente: die setzt ihre Farben bei jedem Mouse-Ereignis als Inline-
 * Style: dann laesst sie sich nur noch mit !important umfaerben, und auf
 * hellem Grund braucht der Report genau das. Als Klasse ist der Knopf
 * themenfaehig, tastaturfreundlich und kommt ohne Sonderregel aus.
 */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Polster in em, damit der Knopf mit seiner Schrift waechst. */
  padding: 0.75em 1.5em;
  font: inherit;
  font-size: var(--text-s);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-klein);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Groesse fuer den Einstieg: dort steht der Knopf neben einem Eingabefeld
   und muss dessen Hoehe treffen. */
.knopf--gross {
  padding: 1em 1.53em;
  font-size: var(--text-eingabe);
  border-radius: var(--radius);
}

.knopf--breit { width: 100%; }

/* Heller Knopf auf dunklem Grund. */
.knopf--hell {
  color: var(--dunkel);
  background-color: var(--hell);
  border-color: var(--hell);
}
.knopf--hell:hover:not(:disabled) {
  background-color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
}

/* Dunkler Knopf auf hellem Grund. */
.knopf--dunkel {
  color: var(--hell);
  background-color: var(--dunkel);
  border-color: var(--dunkel);
}
.knopf--dunkel:hover:not(:disabled) {
  background-color: var(--dunkel-tief);
  border-color: var(--dunkel-tief);
}

/* Nebenweg — traegt keine Flaeche. */
.knopf--leise {
  color: var(--gedaempft);
  background-color: transparent;
}
.knopf--leise:hover:not(:disabled) { color: var(--hell); }

.knopf:disabled {
  opacity: 0.55;
  cursor: default;
}