/*
 * Umsatzsteuer-Drill.
 *
 * Das T-Konto und der Kontenplan kommen aus css/tkonto-werkstatt.css — derselbe
 * Baustein wie auf der Wissensseite. Hier steht nur, was drumherum gehört: die
 * Standleiste, die Angabe, die Knopfreihe und der Sonderfall Vorsteuerüberhang.
 *
 * DIE FARBE IST DER UNTERSCHIED. Die Wissensseite ist öffentlich und trägt
 * Terra, die Farbe ihrer Verweise. Der Drill ist der angemeldete Bereich
 * dahinter und trägt Blau. Beide zeigen dieselbe Werkstatt; verschieden ist nur,
 * was hier an --tkw-Variablen gesetzt wird. Ein zweites Stylesheet für die
 * Werkstatt gibt es deshalb nicht.
 *
 * Das Blau ist #1d5f9f — derselbe Ton, den css/exercise-worksheet-level6.css
 * für die Kontenklasse 1 führt, also kein neuer Farbwert im Projekt.
 *
 * ECKIG: Kein border-radius, nirgends. Die Übungsschale setzt auf
 * hb-exercise-shell-page überall border-radius: 0 !important; runde Ecken wären
 * hier entweder wirkungslos oder der einzige runde Kasten auf eckiger Seite.
 *
 * KLASSENNAMEN mit dem Präfix ustd- und ohne die Wortbestandteile card, chip,
 * label, row, panel, list, btn, stat oder hero: styles.css und
 * exercise-hb-shell.css fangen solche Namen mit über 300 Substring-Selektoren
 * ungefragt ein.
 */

.ustd-arbeitsflaeche {
    /* Die Werkstatt holt sich ihre Farben von hier. */
    --tkw-akzent: #1d5f9f;
    --tkw-akzent-hell: rgba(29, 95, 159, 0.10);
    --tkw-tinte: var(--hb-ink, #23201B);
    --tkw-text-mid: var(--hb-muted, #756D5C);
    --tkw-text-leise: #8A8273;
    --tkw-linie: var(--hb-border, #DAD3C2);
    --tkw-karte: var(--hb-card, #FCFAF4);
    --tkw-papier: var(--hb-paper, #F4F1E8);
    --tkw-tafel: #ffffff;
    --tkw-mono: var(--hb-mono, ui-monospace, monospace);
    --tkw-serif: var(--hb-serif, Georgia, serif);

    margin-bottom: 18px;
    padding: 20px;
    border: 2px solid #1d5f9f;
    /* Papierton statt fast weiss: Auf der cremefarbenen Seite verschwand die
       Fläche sonst, obwohl sie der Arbeitsplatz ist. */
    background: #f6f8fc;
}

/* ------------------------------------------------------------ Standleiste */

.ustd-stand {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--hb-border, #DAD3C2);
    border-left: 5px solid #1d5f9f;
    background: #f2f6fb;
}

.ustd-stand > div { display: grid; gap: 2px; min-width: 74px; }

.ustd-stand span {
    font-family: var(--hb-mono, ui-monospace, monospace);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5b6b7d;
}

.ustd-stand strong {
    font-family: var(--hb-serif, Georgia, serif);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--hb-ink, #23201B);
}

.ustd-marke-fortschritt {
    flex: 1 1 200px;
    margin: 0;
    font-size: 0.84rem;
    color: #5b6b7d;
}

.ustd-stand .vatb-reset,
.ustd-zuruecksetzen {
    flex: none;
    padding: 8px 14px;
    border: 1px solid var(--hb-ink, #23201B);
    background: transparent;
    color: var(--hb-ink, #23201B);
    font: inherit;
    font-size: 0.84rem;
    cursor: pointer;
}

.ustd-zuruecksetzen:hover { border-color: #1d5f9f; color: #1d5f9f; }

/* ----------------------------------------------------------- Die Aufgabe */

.ustd-buehne { display: block; }

.ustd-laden { margin: 0; color: #5b6b7d; font-size: 0.9rem; }

/* Die Angabe war ein blassblauer Kasten auf blassblauem Grund und ging darin
   unter. Jetzt trägt sie eine kräftige Kante und hebt sich klar ab. */
.ustd-angabe {
    padding: 15px 18px;
    border: 1px solid #b9cfe6;
    border-left: 6px solid #1d5f9f;
    background: #eaf1f9;
}

.ustd-marke {
    margin: 0 0 5px;
    font-family: var(--hb-mono, ui-monospace, monospace);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1d5f9f;
}

.ustd-satz {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--hb-ink, #23201B);
}

.ustd-hinweis {
    margin: 6px 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--hb-muted, #756D5C);
}

/* --------------------------------------------------- Sonderfall Überhang */

.ustd-rechenzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: flex-end;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--hb-border, #DAD3C2);
    background: #ffffff;
}

.ustd-rechenzeile label {
    display: grid;
    gap: 4px;
    font-family: var(--hb-mono, ui-monospace, monospace);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5b6b7d;
}

.ustd-betrag {
    width: 150px;
    padding: 9px 10px;
    border: 1px solid var(--hb-border, #DAD3C2);
    background: #ffffff;
    font: inherit;
    font-family: var(--hb-mono, ui-monospace, monospace);
    font-size: 0.94rem;
    text-align: right;
}

.ustd-betrag:focus-visible {
    outline: 2px solid #1d5f9f;
    outline-offset: 1px;
}

.ustd-wahlfeld { display: flex; flex-wrap: wrap; gap: 8px; }

.ustd-wahl {
    padding: 9px 14px;
    border: 1px solid var(--hb-border, #DAD3C2);
    background: #ffffff;
    color: var(--hb-ink, #23201B);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.ustd-wahl.is-selected {
    border-color: #1d5f9f;
    background: #1d5f9f;
    color: #ffffff;
}

.ustd-wahl.is-correct {
    border-color: var(--hb-forest, #4F6842);
    background: rgba(79, 104, 66, 0.14);
    color: #3b5231;
    font-weight: 600;
}

/* Nicht --hb-terra: Auf dem hellen Terra-Schleier kommt der Ton auf 4,45:1 und
   liegt damit unter der Schwelle. Dieser hier trägt. */
.ustd-wahl.is-wrong {
    border-color: var(--hb-terra, #B0492C);
    background: rgba(176, 73, 44, 0.12);
    color: #9c3e24;
    font-weight: 600;
}

/* ------------------------------------------------------------- Knöpfe */

.ustd-knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.ustd-pruefen,
.ustd-weiter {
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid #1d5f9f;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
}

.ustd-pruefen {
    padding: 0 28px;
    background: #1d5f9f;
    color: #ffffff;
    font-size: 1rem;
}

.ustd-pruefen:hover:not(:disabled) { background: #164a7c; border-color: #164a7c; }
.ustd-pruefen:disabled { opacity: 0.45; cursor: default; }

.ustd-weiter {
    background: transparent;
    color: #1d5f9f;
}

.ustd-weiter:hover { background: #e7eff8; }

/* --------------------------------------------------------- Rückmeldung */

.ustd-echo:empty { display: none; }

.ustd-echo {
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--hb-border, #DAD3C2);
    background: var(--hb-card, #FCFAF4);
    font-size: 0.9rem;
    line-height: 1.55;
}

.ustd-echo.is-richtig {
    border-left: 4px solid var(--hb-forest, #4F6842);
    color: var(--hb-ink, #23201B);
}

.ustd-echo.is-falsch {
    border-left: 4px solid var(--hb-terra, #B0492C);
    color: var(--hb-ink, #23201B);
}

@media (max-width: 560px) {
    .ustd-arbeitsflaeche { padding: 14px; }
    .ustd-stand strong { font-size: 1.25rem; }
    .ustd-betrag { width: 100%; }
}