/* ==================================================================== *
 * Schaltflächen
 *
 * Eine Definition für die öffentliche Seite und die Verwaltung. Vorher
 * hatte jeder Bereich seine eigene: `.knopf` hier, `.btn` aus der
 * Bootstrap-Zeit dort, dazu vereinzelt eigene Stile in einzelnen
 * Vorlagen. Gleiche Schaltfläche, gleiches Aussehen – überall.
 *
 * Bevorzugt zu verwenden sind die deutschen Namen. Die `.btn`-Klassen
 * bleiben als Entsprechung erhalten, damit ältere Vorlagen weiter
 * stimmig aussehen.
 * ==================================================================== */

.knopf,
.btn,
button[type="submit"],
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1.25rem;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--text-invers);
    background: var(--purpurrot);
    border: 2px solid var(--purpurrot);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--uebergang), border-color var(--uebergang), color var(--uebergang);
}

.knopf:hover,
.knopf:focus-visible,
.btn:hover,
.btn:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible {
    color: var(--text-invers);
    background: var(--purpurrot-dunkel);
    border-color: var(--purpurrot-dunkel);
}

/* Zweitrangig: für Handlungen neben der Hauptsache auf einer Seite. */
.knopf--zweitrangig,
.btn-default,
.btn-secondary {
    color: var(--nachtblau);
    background: var(--grund);
    border-color: var(--linie-kraeftig);
}

.knopf--zweitrangig:hover,
.knopf--zweitrangig:focus-visible,
.btn-default:hover,
.btn-default:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible {
    color: var(--nachtblau);
    background: var(--grund-gedaempft);
    border-color: var(--nachtblau);
}

/* Hell: auf dunklem Grund, etwa in der Bühne der Startseite. */
.knopf--hell {
    color: var(--nachtblau);
    background: var(--grund);
    border-color: var(--grund);
}

.knopf--hell:hover,
.knopf--hell:focus-visible {
    color: var(--nachtblau);
    background: var(--grund-gedaempft);
    border-color: var(--grund-gedaempft);
}

.knopf--nachtblau,
.btn-primary {
    background: var(--nachtblau);
    border-color: var(--nachtblau);
}

.knopf--nachtblau:hover,
.knopf--nachtblau:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--nachtblau-dunkel);
    border-color: var(--nachtblau-dunkel);
}

.knopf--bestaetigen,
.btn-success {
    background: var(--grasgruen);
    border-color: var(--grasgruen);
}

.knopf--gefahr,
.btn-danger {
    background: var(--purpurrot);
    border-color: var(--purpurrot);
}

/* Größen */
.knopf--klein,
.btn-xs,
.btn-sm {
    padding: .38rem .8rem;
    font-size: .88rem;
}

.knopf--gross,
.btn-lg {
    padding: .75rem 1.5rem;
    font-size: 1.05rem;
}

.knopf--breit,
.btn-block {
    display: flex;
    width: 100%;
}

/* Mehrere Schaltflächen nebeneinander umbrechen sauber. */
.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
}

.knopf[disabled],
.btn[disabled],
button[type="submit"][disabled],
input[type="submit"][disabled] {
    opacity: .55;
    cursor: not-allowed;
}

/* Zusatz auf einer Schaltfläche, etwa das Ziel der Navigation */
.knopf__zusatz {
    padding: .05rem .35rem;
    font-size: .78em;
    font-weight: 600;
    border-radius: 3px;
    background: rgba(255, 255, 255, .22);
}

/* Ein Navigationsziel: Name, die beiden Apps, ein möglicher Hinweis */
.navigationsziel {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.navigationsziel__name {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-gedaempft);
}

.navigationsziel__hinweis {
    flex-basis: 100%;
    font-size: .85rem;
    color: var(--text-gedaempft);
}