/* Anmeldung und Fehlerseite: eine schmale Tafel in der Seitenmitte.

   Diese Ansicht hat genau eine Hauptaktion, deshalb darf sie mehr Glanz
   tragen als die uebrigen: Verlaufsrand um die Tafel, Verlauf und
   Leuchten auf dem Knopf. Anderswo gibt es keine einzelne Handlung, die
   den Vorrang verdient.

   Einen Schimmer ueber dem Knopf gibt es NICHT, obwohl die Design-Sprache
   ihn hier erlauben wuerde. Der wandernde Streifen (--sheen, weiss mit
   80 % Deckkraft) liegt zwangslaeufig auch ueber der weissen Beschriftung
   und hellt den Grund darunter auf: Der Kontrast faellt dabei von 5,4:1
   auf 1,33:1, alle 3,6 Sekunden. Den Text darueberzulegen hilft nicht —
   gemessen wird gegen die Pixel hinter der Schrift. Und die hoechste
   Deckkraft, die 4,5:1 noch haelt, liegt bei 0,09; ein Schimmer, den
   niemand sieht. Also weggelassen. Der Effekt ist Zierde, die Lesbarkeit
   der Hauptaktion ist es nicht. (Befund 2 des Codex-Reviews zu
   TASK-0033.) */

.tafel {
    position: relative;
    width: min(460px, calc(100% - 32px));
    margin: var(--space-8) auto;
    padding: var(--space-7) var(--space-6);
    /* Verlauf im Rand statt in der Flaeche: die Fuellung liegt in der
       padding-box, der Verlauf in der border-box. */
    border: 1px solid transparent;
    border-radius: var(--rund-gross);
    background:
        linear-gradient(var(--flaeche), var(--flaeche)) padding-box,
        var(--gradient-deco) border-box;
    box-shadow: var(--schatten-stark);
}

.tafel h1 {
    margin: 0 0 var(--space-2);
    font-size: 32px;
}

.tafel p { color: var(--leise); }

.tafel form {
    display: grid;
    gap: 9px;
    margin-top: var(--space-6);
}

.tafel label {
    margin-top: var(--luft-halb);
    color: var(--text);
    font-weight: 650;
}

.tafel input:not([type="hidden"]) {
    width: 100%;
    height: 46px;
    padding: var(--luft-halb) var(--space-3);
    border: 1px solid var(--linie-bedienbar);
    border-radius: var(--rund-klein);
    background: var(--flaeche);
    color: var(--text);
    font: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

/* Eingabefelder bekommen keinen Effekt, nur einen deutlichen Fokus:
   Rand in der Akzentfarbe plus weicher Ring. */
.tafel input:not([type="hidden"]):focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Der eine Knopf der Seite. Der Verlauf traegt den Text, das Leuchten
   hebt ihn vom Grund ab. Die Anhebung beim Ueberfahren entfaellt bei
   'prefers-reduced-motion' — das regelt basis.css. */
.tafel form button {
    height: 48px;
    margin-top: var(--space-3);
    border: 0;
    border-radius: var(--rund-marke);
    background: var(--gradient);
    color: var(--auf-farbe);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    box-shadow: var(--glow);
    transition: transform var(--t-fast), box-shadow var(--t-base);
}

.tafel form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px -8px var(--accent);
}

.tafel-wege {
    display: flex;
    gap: var(--space-5);
    margin-top: var(--space-6);
    font-size: 13px;
}

/* Fehler sagen, was zu tun ist — nicht, dass etwas schiefging. Sie
   tragen Flaeche, Rand und Textfarbe zugleich, damit die Meldung nicht
   allein an der Farbe haengt. */
.formular-fehler,
.tafel-meldung {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--fehler-linie);
    border-left-width: 4px;
    border-radius: var(--rund-klein);
    background: var(--fehler-flaeche);
    color: var(--fehler-text);
}