/*
 * Eingebettete Umsatzsteuer-Übung: T-Konto in der Mitte, Kontenplan rechts.
 *
 * Eigene Klassen mit dem Präfix ustu-. Das Übungs-Stylesheet css/exercise.css
 * wäre die naheliegende Wiederverwendung, bringt aber Hunderte Regeln mit, die
 * auf die Übungsschale gemünzt sind — diese Seite ist eine öffentliche
 * Wissensseite mit seo-landing.css. Übernommen ist die Gestaltungssprache
 * (Klassenfarbe am Kontenkopf, Marke mit Klassenfarbe, aufklappbarer Baum),
 * nicht die Datei.
 *
 * Vermieden werden im Namen card, hero, kicker, label, lead, row, panel,
 * section, list, chip, btn, stat und cta: styles.css und exercise-hb-shell.css
 * fangen solche Namen mit über 300 Substring-Selektoren ungefragt ein.
 */

.ustu {
    margin: 0;
    /* „Richtig" ist grün — das ist Konvention und trägt Bedeutung, anders als
       eine Zierfarbe. Der Ton ist aber nicht --kh-oliv (#5e7a4f): Der schafft
       als Textfarbe auf hellgrünem Grund nur 4,18:1, nötig sind 4,5. Dieser
       hier trägt in beiden Rollen (Text 5,31:1, Fläche unter Papierschrift
       5,93:1) und ist derselbe, den die Übungsschale als --hb-forest führt. */
    --ustu-richtig: #4F6842;

    /* Die Werkstatt (css/tkonto-werkstatt.css) holt sich ihre Farben von hier.
       Auf der Wissensseite ist die Signalfarbe Terra — dieselbe, die die Seite
       für Handlungen im Text nutzt. Der Drill setzt dieselben Variablen auf
       Blau und sieht dadurch anders aus, ohne dass es zwei Stylesheets gäbe. */
    --tkw-akzent: var(--kh-terra, #b0492c);
    --tkw-akzent-hell: rgba(176, 73, 44, 0.10);
    --tkw-tinte: var(--kh-ink, #23201b);
    --tkw-text-mid: var(--kh-ink-mid, #6e6757);
    --tkw-text-leise: var(--kh-ink-muted, #746d5f);
    --tkw-linie: var(--kh-border, #dad3c2);
    --tkw-karte: #fcfaf4;
    --tkw-papier: var(--kh-paper-light, #fbf8ef);
    --tkw-tafel: #ffffff;
    --tkw-mono: var(--kh-mono, ui-monospace, monospace);
    --tkw-serif: var(--kh-serif, Georgia, serif);
}

.ustu-notiz {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--kh-border, #dad3c2);
    background: #FCFAF4;
    color: var(--kh-ink-mid, #6e6757);
}

/* ------------------------------------------------------------ Kopfleiste */

.ustu-leiste {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.ustu-schritte {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ustu-schritt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid var(--kh-border, #dad3c2);
    background: #FCFAF4;
    color: var(--kh-ink-mid, #6e6757);
    font: inherit;
    font-size: 0.86rem;
    text-align: left;
    cursor: pointer;
}

.ustu-schritt span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border: 1px solid currentColor;
    font-family: var(--kh-mono, 'JetBrains Mono', monospace);
    font-size: 0.72rem;
    font-weight: 700;
}

.ustu-schritt.is-aktiv {
    border-color: var(--kh-ink, #23201b);
    background: var(--kh-ink, #23201b);
    color: #FCFAF4;
}

.ustu-schritt.is-fertig {
    border-color: var(--ustu-richtig, #4F6842);
    color: var(--ustu-richtig, #4F6842);
}

.ustu-schritt.is-fertig.is-aktiv {
    background: var(--ustu-richtig, #4F6842);
    border-color: var(--ustu-richtig, #4F6842);
    color: #FCFAF4;
}

.ustu-schritt.is-fertig span::after { content: "✓"; }
.ustu-schritt.is-fertig span { font-size: 0.8rem; }
.ustu-schritt.is-fertig > span:first-child { color: inherit; }

.ustu-zaehler {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.ustu-zaehler > div { display: grid; gap: 1px; }

.ustu-zaehler span {
    font-family: var(--kh-mono, 'JetBrains Mono', monospace);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kh-ink-muted, #746d5f);
}

.ustu-zaehler strong {
    font-family: var(--kh-serif, 'Lora', Georgia, serif);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--kh-ink, #23201b);
}

.ustu-balken {
    height: 6px;
    background: var(--kh-border, #dad3c2);
}

.ustu-balken span {
    display: block;
    height: 100%;
    background: var(--ustu-richtig, #4F6842);
    transition: width 0.3s ease;
}

.ustu-fortschritt {
    margin: 0;
    font-size: 0.8rem;
    color: var(--kh-ink-muted, #746d5f);
}

/* --------------------------------------------------- Fläche und Angabe */

.ustu-flaeche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 18px;
    align-items: start;
}

.ustu-angabe {
    padding: 15px 18px;
    border: 1px solid #e2d6c4;
    border-left: 6px solid var(--kh-terra, #b0492c);
    background: #fbf4ea;
}

.ustu-marke-klein {
    margin: 0 0 5px;
    font-family: var(--kh-mono, 'JetBrains Mono', monospace);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kh-terra, #b0492c);
}

.ustu-angabe h3 {
    margin: 0 0 7px;
    font-family: var(--kh-serif, 'Lora', Georgia, serif);
    font-size: 1.16rem;
    color: var(--kh-ink, #23201b);
}

.ustu-angabe p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--kh-ink-mid, #6e6757);
}

.ustu-frage {
    margin-top: 8px !important;
    font-weight: 600;
    color: var(--kh-ink, #23201b) !important;
}

/* ------------------------------------------------------------- Bedienen */

.ustu-gewaehlt:empty { display: none; }

.ustu-gewaehlt {
    margin: 10px 0 0;
    padding: 8px 11px;
    border-left: 3px solid var(--kh-terra, #b0492c);
    background: #FCFAF4;
    font-size: 0.84rem;
    color: var(--kh-ink-mid, #6e6757);
}

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

.ustu-pruefen,
.ustu-weiter,
.ustu-neu {
    padding: 10px 16px;
    border: 1px solid var(--kh-ink, #23201b);
    background: transparent;
    color: var(--kh-ink, #23201b);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.ustu-pruefen {
    border-color: var(--kh-terra, #b0492c);
    background: var(--kh-terra, #b0492c);
    color: #FCFAF4;
}

.ustu-pruefen:hover:not(:disabled) { background: var(--kh-ocker, #a8744d); border-color: var(--kh-ocker, #a8744d); }
.ustu-pruefen:disabled { opacity: 0.45; cursor: default; }
.ustu-weiter:hover, .ustu-neu:hover { border-color: var(--kh-terra, #b0492c); color: var(--kh-terra, #b0492c); }

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

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

.ustu-echo {
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid var(--kh-border, #dad3c2);
    background: #FCFAF4;
    font-size: 0.9rem;
    line-height: 1.55;
}

.ustu-echo strong { display: block; margin-bottom: 5px; }
.ustu-echo p { margin: 0 0 7px; color: var(--kh-ink-mid, #6e6757); }
.ustu-echo ul { margin: 4px 0 0; padding-left: 1.1rem; color: var(--kh-ink-mid, #6e6757); }
.ustu-echo li { margin-bottom: 3px; }

.ustu-echo.is-richtig { border-left: 4px solid var(--ustu-richtig, #4F6842); }
.ustu-echo.is-richtig > strong { color: var(--ustu-richtig, #4F6842); }
.ustu-echo.is-falsch { border-left: 4px solid var(--kh-terra, #b0492c); }
.ustu-echo.is-falsch > strong { color: var(--kh-terra, #b0492c); }

.ustu-merke {
    padding: 7px 10px;
    border-left: 3px solid var(--kh-ocker, #a8744d);
    background: var(--kh-paper-light, #fbf8ef);
    font-weight: 600;
    color: var(--kh-ink, #23201b) !important;
}

.ustu-abschluss {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--ustu-richtig, #4F6842);
    background: rgba(63, 107, 74, 0.08);
}

.ustu-abschluss strong { color: var(--ustu-richtig, #4F6842); }

.ustu-weiterknopf {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 16px;
    background: var(--ustu-richtig, #4F6842);
    color: #FCFAF4;
    font-weight: 600;
    text-decoration: none;
}

.ustu-weiterknopf:hover { background: #345B3E; color: #FCFAF4; }

@media (max-width: 560px) {
    .ustu-zaehler { gap: 14px; }
    .ustu-zaehler strong { font-size: 1.2rem; }
}