/* Abschlussprüfungen — gemeinsames Aussehen
   ------------------------------------------------------------------
   Erzeugt aus dem Stylesheet der Grundlagenprüfung, die als Vorlage für
   alle Abschlussprüfungen gilt.

   Jede Regel trägt beide Klassenschreibweisen: beginner-final-* für die
   Grundlagenprüfung, asset-final-* für die Prüfungen zu Anlagen und
   Semester 2. Die Namen sind historisch gewachsen; sie hängen an IDs und
   an der Logik der klebenden Seitenleiste, weshalb hier das Aussehen
   vereinheitlicht wurde und nicht die Benennung.

   Wird auf allen drei Prüfungsseiten NACH exercise-hb-shell.css geladen.
   Die Reihenfolge ist wesentlich: Zuvor lag das Stylesheet der beiden
   späteren Prüfungen vor der Shell, weshalb deren 24 Regeln für
   asset-final-* gewannen und die Prüfungen anders aussahen als die
   Vorlage. */

/* ------------------------------------------------------------------
   Aus exercise-abschreibung-methoden.css übernommen.

   Dort lagen die Prüfungen zu Anlagen und Semester 2 unter fremdem Namen
   mit der Abschreibungsübung in gemeinsamen Selektoren. Übernommen wurde
   nur ihr Anteil; die Abschreibungsübung behält ihren.

   Die Regeln stehen VOR den aus der Vorlage abgeleiteten, damit die
   Vorlage bei gemeinsamen Klassen gewinnt. Was hier trägt, sind die
   Teile, die es nur in diesen beiden Prüfungen gibt: Rechner, Kontenbaum,
   Aufgabenkopf, Eingabefelder.
   ------------------------------------------------------------------ */

.asset-final-page {
  width: min(1380px, calc(100% - 42px));
  margin: 0 auto;
  padding: 34px 0 72px;
}

.asset-final-page {
  width: min(1780px, calc(100% - 42px));
}

.asset-final-hero {
  max-width: 900px;
  margin: 0 auto 26px;
  text-align: center;
}

.asset-final-kicker,
.asset-final-section-kicker,
.asset-final-summary-kicker {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5e7691;
}

.asset-final-hero h1 {
  margin: 10px 0 12px;
  font-size: clamp(2rem, 3.3vw, 3rem);
  line-height: 1.06;
  color: #173150;
}

.asset-final-lead {
  color: #46627f;
  line-height: 1.72;
}

.asset-final-stage {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(174,196,219,.75);
  border-radius: 30px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(37,73,122,.10);
}

.asset-final-layout {
  display: grid;
  grid-template-columns: minmax(220px, 310px) minmax(0, 1fr) minmax(220px, 300px);
  gap: 24px;
  align-items: start;
}

.asset-final-help,
.asset-final-main,
.asset-final-sidebar {
  min-width: 0;
}

.asset-final-help,
.asset-final-sidebar {
  position: sticky;
  top: 118px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.asset-final-help {
  display: grid;
  gap: 14px;
}

.asset-final-help .lesson-note-card {
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

.asset-final-workflow-card {
  padding: 18px;
  border: 1px solid rgba(174,196,219,.72);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,249,235,.96) 0%, rgba(255,255,255,.94) 100%);
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

.asset-final-workflow-card h3 {
  margin: 0 0 12px;
  color: #17304a;
}

.asset-final-workflow-card ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #526a80;
  counter-reset: workflow;
}

.asset-final-workflow-card li {
  counter-increment: workflow;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(174,196,219,.54);
  border-radius: 13px;
  background: rgba(255,255,255,.74);
  color: #405669;
  line-height: 1.35;
  font-size: .92rem;
  font-weight: 750;
}

.asset-final-workflow-card li::before {
  content: counter(workflow);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #173150;
  color: #fff;
  font-size: .78rem;
  font-weight: 850;
}

.asset-final-calculator {
  overflow: hidden;
  border-radius: 18px;
}

.asset-final-calculator .calc-frame {
  width: 100%;
  min-height: 820px;
  border: 1px solid #dbe4ee;
  border-radius: 18px;
}

.asset-final-main {
  display: grid;
  gap: 18px;
}

.asset-final-sidebar {
  padding: 0;
  border: 1px solid rgba(174,196,219,.72);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
  overflow-y: auto;
  overflow-x: hidden;
}

.asset-final-sidebar-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #17304a;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.asset-final-sidebar-copy {
  margin: 14px 0;
  color: #5e7181;
  line-height: 1.64;
  font-size: .95rem;
}

.asset-final-sidebar-icon {
  color: #6b7f92;
  transition: transform .18s ease;
}

.asset-final-sidebar.is-open .asset-final-sidebar-icon {
  transform: rotate(180deg);
}

.asset-final-account-tree {
  display: grid;
  gap: 6px;
}

.asset-final-sidebar .sidebar-class-header {
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 850;
  color: #fff;
  cursor: pointer;
  margin-bottom: 8px;
  line-height: 1.4;
}

.asset-final-sidebar .sidebar-class-header::after {
  content: "▼";
  float: right;
}

.asset-final-sidebar .sidebar-class-header.open::after {
  content: "▲";
}

.asset-final-sidebar .sidebar-subgroup {
  display: none;
  padding-left: 12px;
  margin: 0 0 14px;
}

.asset-final-sidebar .sidebar-subgroup.open {
  display: block;
}

.asset-final-sidebar .subaccount {
  background: #f8fbfd;
  border: 1px solid #d8e0e7;
  border-radius: 10px;
  padding: 9px 10px;
  margin-bottom: 7px;
  cursor: grab;
  color: #374151;
  font-size: .92rem;
  line-height: 1.35;
}

.asset-final-sidebar .subaccount strong {
  display: inline-block;
  min-width: 54px;
}

.asset-final-sidebar .subaccount:hover {
  background: #e0e7ff;
  border-color: #6366f1;
}

.asset-final-sidebar .class-0 { background: #6b7280; }

.asset-final-sidebar .class-1 { background: #0ea5e9; }

.asset-final-sidebar .class-2 { background: #16a34a; }

.asset-final-sidebar .class-3 { background: #f97316; }

.asset-final-sidebar .class-4 { background: #a855f7; }

.asset-final-sidebar .class-5 { background: #475569; }

.asset-final-sidebar .class-6 { background: #0f766e; }

.asset-final-sidebar .class-7 { background: #dc2626; }

.asset-final-sidebar .class-8 { background: #44403c; }

.asset-final-sidebar .class-9 { background: #7c3aed; }

.asset-final-topline,
.asset-final-part-head,
.asset-final-task-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.asset-final-topline {
  margin-bottom: 22px;
}

.asset-final-chip,
.asset-final-task-number,
.asset-final-task-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #eef6fd;
  color: #4f6985;
}

.asset-final-back-link {
  color: #173150;
  text-decoration: none;
  font-weight: 700;
  background: #eef6fd;
  padding: 10px 16px;
  border-radius: 999px;
}

.asset-final-part,
.asset-final-summary-card {
  border: 1px solid rgba(174,196,219,.72);
  border-radius: 24px;
  background: rgba(255,255,255,.86);
}

.asset-final-summary-card h2 {
  margin: 6px 0 0;
  font-size: 1.85rem;
  line-height: 1.08;
  color: #173150;
}

.asset-final-task-list {
  display: grid;
  gap: 16px;
}

.asset-final-task-card {
  padding: 18px 20px;
  border: 1px solid rgba(174,196,219,.72);
  border-radius: 22px;
  background: rgba(248,251,253,.88);
}

.asset-final-task-card h3 {
  margin: 0 0 8px;
  color: #173150;
}

.asset-final-task-card > p:first-of-type {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(45,139,203,.18);
  border-left: 5px solid rgba(45,139,203,.65);
  border-radius: 16px;
  background: rgba(239,247,253,.78);
}

.asset-final-task-card > p:first-of-type::before,
.asset-final-case-note::before,
.asset-final-sheet::before,
.asset-final-preview::before {
  display: block;
  margin-bottom: 7px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.asset-final-task-card > p:first-of-type::before {
  content: "Aufgabenstellung";
  color: #2f6f9f;
}

.asset-final-task-card p,
.asset-final-summary-card p {
  color: #46627f;
  line-height: 1.66;
}

.asset-final-input-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.asset-final-field {
  display: grid;
  gap: 7px;
}

.asset-final-field span {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5e7691;
}

.asset-final-field input {
  min-height: 44px;
  border: 1px solid rgba(174,196,219,.9);
  border-radius: 14px;
  padding: 0 12px;
  font: inherit;
}

.asset-final-check-btn,
.asset-final-summary-card button {
  border: 0;
  border-radius: 16px;
  padding: 12px 16px;
  background: #173150;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.asset-final-summary-card {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.asset-final-part {
  margin-bottom: 18px;
  overflow: hidden;
}

.asset-final-part-toggle {
  width: 100%;
  padding: 20px 22px;
  border: 0;
  background: #f8fbfd;
  cursor: pointer;
  text-align: left;
}

.asset-final-part-body {
  padding: 20px 22px 22px;
  border-top: 1px solid rgba(174,196,219,.72);
}

.asset-final-part[hidden] {
  display: none;
}

.asset-final-task-card.is-correct {
  border-color: rgba(36,138,77,.35);
  background: rgba(231,246,235,.75);
}

.asset-final-case-note {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #e0e8ef;
  border-radius: 14px;
  background: #f5f8fb;
  color: #5d6d7c;
  line-height: 1.6;
}

.asset-final-case-note::before {
  content: "Hinweis / Ausgangslage";
  color: #7b6a39;
}

.asset-final-inline-workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.asset-final-inline-workflow span {
  padding: 9px 10px;
  border: 1px solid rgba(174,196,219,.72);
  border-radius: 999px;
  background: rgba(237,244,251,.92);
  color: #4f6985;
  font-size: .78rem;
  font-weight: 850;
  text-align: center;
}

.asset-final-sheet {
  position: relative;
  margin-top: 16px;
  padding-top: 24px;
  border: 1px solid rgba(181,199,218,.9);
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(to bottom, rgba(234,242,248,.92), rgba(234,242,248,.92)) top/100% 48px no-repeat,
    linear-gradient(to right, transparent calc(50% - 1px), rgba(189,204,219,.9) calc(50% - 1px), rgba(189,204,219,.9) calc(50% + 1px), transparent calc(50% + 1px)),
    #fff;
}

.asset-final-sheet::before {
  content: "T-Konto / Buchungsraster";
  position: absolute;
  top: 9px;
  left: 14px;
  color: #5b728a;
}

.asset-final-sheet-head,
.asset-final-sheet-row,
.asset-final-sheet-sum {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) 126px minmax(0, 1.42fr) 126px;
}

.asset-final-sheet-head > div,
.asset-final-sheet-row > div,
.asset-final-sheet-sum > div {
  min-width: 0;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(210,221,232,.95);
}

.asset-final-sheet-head > div,
.asset-final-sheet-sum > div {
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5b728a;
}

.asset-final-sheet-sum > div {
  border-bottom: 0;
  background: rgba(245,249,252,.95);
}

.asset-final-dropzone {
  min-height: 52px;
  border: 2px dashed rgba(174,196,219,.95);
  border-radius: 14px;
  background: rgba(249,252,254,.95);
  display: flex;
  align-items: center;
  padding: 6px;
}

.asset-final-dropzone.is-over {
  border-color: #2d8bcb;
  background: #eef6fb;
}

.asset-final-dropzone.is-filled {
  border-style: solid;
  background: #fff;
}

.asset-final-drop-pill {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  color: #fff;
  font-weight: 750;
  cursor: grab;
}

.asset-final-amount,
.asset-final-amount-input {
  text-align: right;
  color: #17304a;
  font-variant-numeric: tabular-nums;
}

.asset-final-amount-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #cfd9e2;
  border-radius: 10px;
  background: #fff;
  font: inherit;
}

.asset-final-preview {
  position: relative;
  margin-top: 14px;
  padding: 34px 16px 16px;
  border: 1px solid #e0e8ef;
  border-radius: 16px;
  background: #f8fbfd;
}

.asset-final-preview::before {
  content: "Automatisch mitgeschriebener Buchungssatz";
  position: absolute;
  top: 13px;
  left: 16px;
  color: #5b728a;
}

.asset-final-preview h4 {
  margin: 0 0 10px;
  color: #17304a;
  display: none;
}

.asset-final-booking-line {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 44px minmax(180px, 1fr) 126px;
  gap: 10px;
  padding: 8px 0;
  color: #405669;
  font-weight: 750;
}

.asset-final-celebration {
  position: fixed;
  inset: 0;
  z-index: 22000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .46);
}

.asset-final-celebration[hidden] {
  display: none !important;
}

.asset-final-celebration-card {
  width: min(560px, 100%);
  padding: 34px;
  border-radius: 30px;
  background: #fff;
  text-align: center;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .24);
}

.asset-final-celebration-card h2 {
  margin: 0 0 12px;
  color: #173150;
  font-size: 2rem;
}

.asset-final-celebration-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

@media (max-width: 720px) {
.asset-final-layout {
    grid-template-columns: 1fr;
  }

.asset-final-help,
.asset-final-sidebar {
    position: static;
  }

.asset-final-help {
    max-height: none;
    overflow: visible;
  }

.asset-final-sidebar {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
  }

.asset-final-input-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
.asset-final-page {
    width: min(100% - 24px, 100%);
    padding-top: 24px;
  }

.asset-final-stage,
.asset-final-summary-card {
    padding: 18px;
  }

.asset-final-topline,
.asset-final-summary-card {
    flex-direction: column;
    align-items: flex-start;
  }

.asset-final-sheet-head,
.asset-final-sheet-row,
.asset-final-sheet-sum,
.asset-final-booking-line,
.asset-final-inline-workflow {
    grid-template-columns: 1fr;
  }
}


/* Die Antwort-Schaltflächen und der Rückmeldebereich der beiden späteren
   Prüfungen tragen noch die Klassennamen der Abschreibungsübung
   (asset-method-*). Ihre Regeln kommen deshalb mit, sonst stünden Optionen
   und Rückmeldung ohne Gestaltung da. */
.asset-method-feedback::before {
  display: block;
  margin-bottom: 7px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.asset-method-options {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.asset-method-option-btn {
  width: 100%;
  border: 1px solid rgba(174,196,219,.9);
  border-radius: 16px;
  background: #fff;
  color: #173150;
  padding: 13px 15px;
  text-align: left;
  cursor: pointer;
  font-size: .98rem;
}

.asset-method-option-btn.is-correct {
  border-color: rgba(36,138,77,.45);
  background: rgba(228,246,234,.95);
}

.asset-method-option-btn.is-wrong {
  border-color: rgba(181,80,80,.45);
  background: rgba(252,235,235,.95);
}

.asset-method-feedback {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(174,196,219,.72);
  background: #fff;
  color: #56728f;
  line-height: 1.55;
}

.asset-method-feedback.is-success {
  border-color: rgba(36,138,77,.35);
  background: rgba(231,246,235,.95);
  color: #17623d;
}

.asset-method-feedback.is-error {
  border-color: rgba(181,80,80,.35);
  background: rgba(252,239,239,.95);
  color: #8d3a3a;
}

/* ---- aus der Vorlage abgeleitet ---- */


:root {
    --final-paper: #fffdf7;
    --final-paper-soft: #f4efe3;
    --final-ink: #1f211d;
    --final-muted: #6e6757;
    --final-line: #d7cbb6;
    --final-dark: #23201b;
    --final-green: #2d704d;
    --final-terra: #b64b2d;
    --final-blue: #245d83;
    --final-purple: #76508c;
    --final-amber: #9b651f;
}

body.hb-exercise-shell-page {
    background:
        linear-gradient(rgba(35, 31, 24, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35, 31, 24, 0.045) 1px, transparent 1px),
        #f4efe3;
    background-size: 32px 32px;
}

.beginner-final-page,
.asset-final-page {
    width: min(1600px, calc(100vw - 48px));
    max-width: none;
    margin: 0 auto;
    padding: 28px 0 72px;
    color: var(--final-ink);
}

.beginner-final-hero,
.asset-final-hero,
.beginner-final-stage,
.asset-final-stage,
.beginner-final-help-card,
.asset-final-help-card,
.beginner-final-section,
.asset-final-section,
.beginner-final-question-card,
.asset-final-question-card,
.beginner-final-case-card,
.asset-final-case-card,
.beginner-final-summary-card,
.asset-final-summary-card,
.beginner-final-sidebar,
.asset-final-sidebar {
    border: 1px solid var(--final-line);
    border-radius: 0;
    background: rgba(255, 253, 247, 0.97);
    box-shadow: none;
}

.beginner-final-hero,
.asset-final-hero {
    width: 100%;
    max-width: none;
    margin: 0 0 16px;
    padding: 24px 28px 22px;
    text-align: left;
    border-left: 5px solid var(--final-terra);
    background:
        linear-gradient(rgba(35, 31, 24, 0.035) 1px, transparent 1px),
        rgba(255, 253, 247, 0.98);
    background-size: 100% 28px;
}

.beginner-final-kicker,
.asset-final-kicker,
.beginner-final-section-kicker,
.asset-final-section-kicker,
.beginner-final-summary-kicker,
.asset-final-summary-kicker,
.beginner-final-question-number,
.asset-final-question-number,
.beginner-final-question-state,
.asset-final-question-state,
.beginner-final-status-chip,
.asset-final-status-chip,
.beginner-final-section-chip,
.asset-final-section-chip,
.beginner-final-sheet-label,
.asset-final-sheet-label,
.beginner-final-bank-item small,
.asset-final-bank-item small,
.beginner-final-celebration-kicker,
.asset-final-celebration-kicker {
    margin: 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.beginner-final-kicker,
.asset-final-kicker,
.beginner-final-section-kicker,
.asset-final-section-kicker,
.beginner-final-summary-kicker,
.asset-final-summary-kicker,
.beginner-final-celebration-kicker,
.asset-final-celebration-kicker {
    color: var(--final-terra);
}

.beginner-final-hero h1,
.asset-final-hero h1 {
    max-width: 900px;
    margin: 5px 0 0;
    color: #171914;
    font-family: "Lora", serif;
    font-size: clamp(2.25rem, 4vw, 3.7rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
}

.beginner-final-lead,
.asset-final-lead {
    max-width: 88ch;
    margin: 12px 0 0;
    color: var(--final-muted);
    font-size: 0.98rem;
    line-height: 1.58;
}

.beginner-final-stage,
.asset-final-stage {
    padding: 18px;
}

.beginner-final-topline,
.asset-final-topline,
.beginner-final-question-topline,
.asset-final-question-topline,
.beginner-final-booking-line,
.asset-final-booking-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.beginner-final-topline,
.asset-final-topline {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--final-line);
}

.beginner-final-status-chip,
.asset-final-status-chip,
.beginner-final-section-chip,
.asset-final-section-chip,
.beginner-final-question-number,
.asset-final-question-number,
.beginner-final-question-state,
.asset-final-question-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--final-line);
    background: var(--final-paper-soft);
    color: #584f40;
}

.beginner-final-status-chip,
.asset-final-status-chip,
.beginner-final-question-number,
.asset-final-question-number {
    border-color: #9db6a6;
    background: #edf4e9;
    color: var(--final-green);
}

.beginner-final-back-link,
.asset-final-back-link,
.beginner-final-reset-btn,
.asset-final-reset-btn,
.beginner-final-secondary-btn,
.asset-final-secondary-btn,
.beginner-final-primary-btn,
.asset-final-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid var(--final-dark);
    border-radius: 0;
    background: var(--final-dark);
    color: #fff9eb;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.beginner-final-back-link:hover,
.asset-final-back-link:hover,
.beginner-final-primary-btn:hover,
.asset-final-primary-btn:hover {
    background: var(--final-terra);
    border-color: var(--final-terra);
}

.beginner-final-layout,
.asset-final-layout {
    display: grid;
    grid-template-columns: minmax(170px, 205px) minmax(720px, 1fr) minmax(245px, 285px);
    gap: 16px;
    align-items: start;
}

.beginner-final-help,
.asset-final-help,
.beginner-final-main,
.asset-final-main,
.beginner-final-sidebar,
.asset-final-sidebar {
    min-width: 0;
}

.beginner-final-help,
.asset-final-help {
    display: grid;
    gap: 10px;
    position: sticky;
    top: 122px;
}

.beginner-final-help-card,
.asset-final-help-card {
    padding: 13px;
}

.beginner-final-help-card:first-child,
.asset-final-help-card:first-child {
    border-top: 4px solid var(--final-blue);
}

.beginner-final-help-card:last-child,
.asset-final-help-card:last-child {
    border-top: 4px solid var(--final-green);
}

.beginner-final-help-card h3,
.asset-final-help-card h3 {
    margin: 0;
    font-family: "Lora", serif;
    font-size: 1rem;
    line-height: 1.2;
}

.beginner-final-help-card p,
.asset-final-help-card p,
.beginner-final-help-card ol,
.asset-final-help-card ol {
    margin: 7px 0 0;
    color: var(--final-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.beginner-final-help-card ol,
.asset-final-help-card ol {
    padding-left: 18px;
}

.beginner-final-main,
.asset-final-main {
    display: grid;
    gap: 12px;
}

.beginner-final-section,
.asset-final-section {
    overflow: hidden;
}

.beginner-final-accordion-head,
.asset-final-accordion-head {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 17px;
    border: 0;
    border-left: 6px solid var(--final-blue);
    background: #f2f6f7;
    color: var(--final-ink);
    text-align: left;
    cursor: pointer;
}

.beginner-final-accordion-head.is-part-b,
.asset-final-accordion-head.is-part-b {
    border-left-color: var(--final-purple);
    background: #f5f0f6;
}

.beginner-final-accordion-head.is-part-c,
.asset-final-accordion-head.is-part-c {
    border-left-color: var(--final-green);
    background: #eff5ed;
}

.beginner-final-accordion-head.is-part-d,
.asset-final-accordion-head.is-part-d {
    border-left-color: var(--final-amber);
    background: #f8f1e4;
}

.beginner-final-accordion-head.is-locked,
.asset-final-accordion-head.is-locked {
    opacity: 0.52;
    cursor: not-allowed;
}

.beginner-final-accordion-head h2,
.asset-final-accordion-head h2 {
    margin: 3px 0 0;
    color: #171914;
    font-family: "Lora", serif;
    font-size: 1.36rem;
    line-height: 1.12;
}

.beginner-final-section-lead,
.asset-final-section-lead {
    max-width: 76ch;
    margin: 5px 0 0;
    color: var(--final-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.beginner-final-accordion-meta,
.asset-final-accordion-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

.beginner-final-accordion-arrow,
.asset-final-accordion-arrow {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--final-line);
    background: var(--final-paper);
    color: var(--final-ink);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.8rem;
}

.beginner-final-accordion-panel,
.asset-final-accordion-panel {
    padding: 12px;
    border-top: 1px solid var(--final-line);
    background:
        linear-gradient(rgba(35, 31, 24, 0.03) 1px, transparent 1px),
        #fffdf8;
    background-size: 100% 26px;
}

.beginner-final-card-list,
.asset-final-card-list {
    display: grid;
    gap: 9px;
}

.beginner-final-question-card,
.asset-final-question-card,
.beginner-final-case-card,
.asset-final-case-card {
    padding: 12px 14px;
    background: rgba(255, 253, 247, 0.98);
}

.beginner-final-question-card h3,
.asset-final-question-card h3,
.beginner-final-case-card h3,
.asset-final-case-card h3 {
    margin: 7px 0 0;
    color: #171b18;
    font-family: "Lora", serif;
    font-size: 1.04rem;
    line-height: 1.25;
}

.beginner-final-question-text,
.asset-final-question-text {
    margin: 7px 0 0;
    color: #564d43;
    font-size: 0.9rem;
    line-height: 1.52;
}

.beginner-final-question-card > .beginner-final-question-text,
.asset-final-question-card > .asset-final-question-text,
.beginner-final-case-card > .beginner-final-question-text,
.asset-final-case-card > .asset-final-question-text {
    padding: 9px 11px;
    border: 1px solid #cfd8df;
    border-left: 4px solid var(--final-blue);
    background: #f2f6f7;
}

.beginner-final-question-card > .beginner-final-question-text::before,
.asset-final-question-card > .asset-final-question-text::before,
.beginner-final-case-card > .beginner-final-question-text::before,
.asset-final-case-card > .asset-final-question-text::before,
.beginner-final-case-note::before,
.asset-final-case-note::before,
.beginner-final-sheet::before,
.asset-final-sheet::before,
.beginner-final-preview::before,
.asset-final-preview::before,
.beginner-final-feedback::before,
.asset-final-feedback::before {
    display: block;
    margin-bottom: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.beginner-final-question-card > .beginner-final-question-text::before,
.asset-final-question-card > .asset-final-question-text::before,
.beginner-final-case-card > .beginner-final-question-text::before,
.asset-final-case-card > .asset-final-question-text::before {
    content: "Aufgabenstellung";
    color: var(--final-blue);
}

.beginner-final-options,
.asset-final-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 8px;
}

.beginner-final-option-btn,
.asset-final-option-btn {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #bdb5a5;
    border-radius: 0;
    background: #fffdf8;
    color: #2e2a22;
    font: inherit;
    font-size: 0.84rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.beginner-final-option-btn:hover,
.asset-final-option-btn:hover {
    border-color: var(--final-blue);
    background: #eef4f7;
}

.beginner-final-option-btn.is-correct,
.asset-final-option-btn.is-correct {
    border-color: var(--final-green);
    background: #eaf4e8;
    box-shadow: inset 4px 0 0 var(--final-green);
    color: #17623d;
    font-weight: 700;
}

.beginner-final-option-btn.is-wrong,
.asset-final-option-btn.is-wrong {
    border-color: #a9483c;
    background: #fbefea;
    box-shadow: inset 4px 0 0 #a9483c;
    color: #84372f;
    font-weight: 700;
}

.beginner-final-feedback,
.asset-final-feedback {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #d7cbb6;
    background: #f4efe3;
    color: var(--final-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.beginner-final-feedback::before,
.asset-final-feedback::before {
    content: "Feedback";
}

.beginner-final-feedback.is-success,
.asset-final-feedback.is-success {
    border-color: #9db6a6;
    background: #eaf4e8;
    color: #245f3f;
}

.beginner-final-feedback.is-error,
.asset-final-feedback.is-error {
    border-color: #d2a39a;
    background: #fbefea;
    color: #853b32;
}

.beginner-final-case-note,
.asset-final-case-note {
    margin-top: 7px;
    padding: 8px 10px;
    border: 1px solid #d5c6a8;
    background: #f8f1df;
    color: #564d43;
    font-size: 0.8rem;
    line-height: 1.45;
}

.beginner-final-case-note::before,
.asset-final-case-note::before {
    content: "Hinweis / Ausgangslage";
    color: var(--final-amber);
}

.beginner-final-sheet,
.asset-final-sheet {
    position: relative;
    margin-top: 9px;
    padding-top: 34px;
    border: 1px solid #aaa18f;
    background:
        linear-gradient(to right, transparent calc(50% - 1px), #8d8679 calc(50% - 1px), #8d8679 calc(50% + 1px), transparent calc(50% + 1px)),
        #fffefb;
}

.beginner-final-sheet::before,
.asset-final-sheet::before {
    content: "T-Konto / Buchungsraster";
    position: absolute;
    inset: 0 0 auto 0;
    height: 33px;
    box-sizing: border-box;
    padding: 9px 11px;
    border-bottom: 2px solid var(--final-dark);
    background: #ede8db;
    color: #4a453b;
}

.beginner-final-sheet-head,
.asset-final-sheet-head,
.beginner-final-sheet-row,
.asset-final-sheet-row,
.beginner-final-sheet-sum,
.asset-final-sheet-sum {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) 105px minmax(0, 1.35fr) 105px;
}

.beginner-final-sheet-head > div,
.asset-final-sheet-head > div,
.beginner-final-sheet-row > div,
.asset-final-sheet-row > div,
.beginner-final-sheet-sum > div,
.asset-final-sheet-sum > div {
    min-width: 0;
    padding: 8px 9px;
    border-bottom: 1px solid #dad3c2;
}

.beginner-final-sheet-head > div,
.asset-final-sheet-head > div,
.beginner-final-sheet-sum > div,
.asset-final-sheet-sum > div {
    background: rgba(239, 235, 225, 0.72);
    color: #4a453b;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.beginner-final-sheet-sum > div,
.asset-final-sheet-sum > div {
    border-bottom: 0;
}

.beginner-final-dropzone,
.asset-final-dropzone {
    display: flex;
    align-items: center;
    min-height: 43px;
    padding: 4px;
    border: 1px dashed #9a9385;
    background: rgba(255, 253, 247, 0.75);
}

.beginner-final-dropzone.is-over,
.asset-final-dropzone.is-over {
    border-color: var(--final-green);
    background: #eaf4e8;
}

.beginner-final-dropzone.is-filled,
.asset-final-dropzone.is-filled {
    border-style: solid;
    background: #fffefb;
}

.beginner-final-drop-pill,
.asset-final-drop-pill,
.beginner-final-bank-item,
.asset-final-bank-item {
    color: #fff;
    font-weight: 700;
}

.beginner-final-drop-pill,
.asset-final-drop-pill {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 0;
    font-size: 0.78rem;
    line-height: 1.3;
    cursor: grab;
}

.beginner-final-amount,
.asset-final-amount,
.beginner-final-amount-input,
.asset-final-amount-input {
    color: #23201b;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.beginner-final-amount-input,
.asset-final-amount-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #b9b09f;
    border-radius: 0;
    background: #fffefb;
    font: inherit;
    font-size: 0.84rem;
}

.beginner-final-preview,
.asset-final-preview {
    position: relative;
    margin-top: 8px;
    padding: 30px 11px 8px;
    border: 1px solid #c9c2b2;
    background: #f8f4ea;
}

.beginner-final-preview::before,
.asset-final-preview::before {
    content: "Automatisch mitgeschriebener Buchungssatz";
    position: absolute;
    top: 9px;
    left: 11px;
    color: #564d43;
}

.beginner-final-preview h4,
.asset-final-preview h4 {
    display: none;
}

.beginner-final-booking-line,
.asset-final-booking-line {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 36px minmax(180px, 1fr) 108px;
    gap: 7px;
    padding: 5px 0;
    color: #4a453b;
    font-size: 0.8rem;
    font-weight: 700;
}

.beginner-final-sidebar,
.asset-final-sidebar {
    position: sticky;
    top: 122px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding: 0;
    scrollbar-gutter: stable;
}

.beginner-final-sidebar-toggle,
.asset-final-sidebar-toggle {
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 13px;
    border: 0;
    border-bottom: 2px solid var(--final-dark);
    background: var(--final-dark);
    color: #fff9eb;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    cursor: pointer;
}

#beginnerFinalSidebarBody {
    padding: 11px;
}

.beginner-final-sidebar-copy,
.asset-final-sidebar-copy {
    margin: 0 0 9px;
    color: var(--final-muted);
    font-size: 0.75rem;
    line-height: 1.42;
}

.beginner-final-sidebar-icon,
.asset-final-sidebar-icon {
    transition: transform 0.18s ease;
}

.beginner-final-sidebar.is-open .beginner-final-sidebar-icon,
.asset-final-sidebar.is-open .asset-final-sidebar-icon {
    transform: rotate(180deg);
}

.beginner-final-account-tree,
.asset-final-account-tree {
    display: grid;
    gap: 4px;
}

.beginner-final-sidebar .sidebar-class-header,
.asset-final-sidebar .sidebar-class-header {
    margin: 0;
    padding: 8px 9px;
    color: #fff;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.25;
    cursor: pointer;
}

.beginner-final-sidebar .sidebar-class-header::after,
.asset-final-sidebar .sidebar-class-header::after {
    content: "+";
    float: right;
}

.beginner-final-sidebar .sidebar-class-header.open::after,
.asset-final-sidebar .sidebar-class-header.open::after {
    content: "−";
}

.beginner-final-sidebar .sidebar-subgroup,
.asset-final-sidebar .sidebar-subgroup {
    display: none;
    padding: 4px 0 1px 8px;
}

.beginner-final-sidebar .sidebar-subgroup.open,
.asset-final-sidebar .sidebar-subgroup.open {
    display: block;
}

.beginner-final-sidebar .class-0,
.asset-final-sidebar .class-0 { background: #34312b; }
.beginner-final-sidebar .class-1,
.asset-final-sidebar .class-1 { background: #1d5f9f; }
.beginner-final-sidebar .class-2,
.asset-final-sidebar .class-2 { background: #237d52; }
.beginner-final-sidebar .class-3,
.asset-final-sidebar .class-3 { background: #d98324; color: #201d17; }
.beginner-final-sidebar .class-4,
.asset-final-sidebar .class-4 { background: #7a4fb5; }
.beginner-final-sidebar .class-5,
.asset-final-sidebar .class-5 { background: #4a453b; }
.beginner-final-sidebar .class-6,
.asset-final-sidebar .class-6 { background: #237d52; }
.beginner-final-sidebar .class-7,
.asset-final-sidebar .class-7 { background: #bf3b2f; }
.beginner-final-sidebar .class-8,
.asset-final-sidebar .class-8 { background: #564d43; }
.beginner-final-sidebar .class-9,
.asset-final-sidebar .class-9 { background: #76508c; }

.beginner-final-sidebar .beginner-final-bank-item,
.asset-final-sidebar .asset-final-bank-item {
    display: block;
    margin-bottom: 3px;
    padding: 6px 7px;
    border: 1px solid #d4cbb9;
    border-left: 3px solid currentColor;
    border-radius: 0;
    background: #fffdf7;
    color: #34312b;
    font-size: 0.68rem;
    line-height: 1.3;
    cursor: grab;
}

.beginner-final-sidebar .beginner-final-bank-item:hover,
.asset-final-sidebar .asset-final-bank-item:hover {
    border-color: var(--final-green);
    background: #eaf4e8;
}

.beginner-final-sidebar .beginner-final-bank-item small,
.asset-final-sidebar .asset-final-bank-item small {
    display: none;
}

.beginner-final-sidebar .beginner-final-bank-item strong,
.asset-final-sidebar .asset-final-bank-item strong {
    display: inline-block;
    min-width: 39px;
}

.beginner-final-summary-card,
.asset-final-summary-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 17px;
    border-left: 5px solid var(--final-green);
    background: #f3f7ed;
}

.beginner-final-summary-copy h2,
.asset-final-summary-copy h2 {
    margin: 3px 0 0;
    font-family: "Lora", serif;
    font-size: 1.42rem;
}

.beginner-final-summary-copy p:not(.beginner-final-summary-kicker),
.asset-final-summary-copy p:not(.asset-final-summary-kicker) {
    max-width: 74ch;
    margin: 6px 0 0;
    color: var(--final-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.beginner-final-primary-btn,
.asset-final-primary-btn {
    margin-top: 10px;
    background: var(--final-green);
    border-color: var(--final-green);
}

.beginner-final-reset-btn,
.asset-final-reset-btn,
.beginner-final-secondary-btn,
.asset-final-secondary-btn {
    background: transparent;
    color: var(--final-dark);
}

.beginner-final-bottom-back,
.asset-final-bottom-back {
    justify-self: start;
}

.beginner-final-floating-calc,
.asset-final-floating-calc {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 950;
    width: min(330px, calc(100vw - 32px));
    border: 1px solid var(--final-dark);
    background: var(--final-paper);
    box-shadow: 7px 7px 0 rgba(34, 32, 27, 0.16);
}

.beginner-final-calc-handle,
.asset-final-calc-handle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 0;
    background: var(--final-dark);
    color: #fff9eb;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    cursor: grab;
}

.beginner-final-calc-handle:active,
.asset-final-calc-handle:active {
    cursor: grabbing;
}

.beginner-final-calc-body,
.asset-final-calc-body {
    height: 410px;
}

.beginner-final-calc-body .calc-frame,
.asset-final-calc-body .calc-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.beginner-final-celebration,
.asset-final-celebration {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(24, 23, 20, 0.58);
}

.beginner-final-celebration[hidden],
.asset-final-celebration[hidden] {
    display: none !important;
}

.beginner-final-celebration-card,
.asset-final-celebration-card {
    width: min(610px, 100%);
    padding: 26px;
    border: 1px solid var(--final-dark);
    border-top: 7px solid var(--final-green);
    background: var(--final-paper);
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.2);
    text-align: left;
}

.beginner-final-celebration-card h2,
.asset-final-celebration-card h2 {
    margin: 5px 0 0;
    font-family: "Lora", serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.08;
}

.beginner-final-celebration-card p,
.asset-final-celebration-card p {
    margin: 10px 0 0;
    color: var(--final-muted);
    line-height: 1.55;
}

.beginner-final-celebration-actions,
.asset-final-celebration-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px;
}

@media (max-width: 1380px) {
    .beginner-final-layout,
.asset-final-layout {
        grid-template-columns: minmax(0, 1fr) minmax(245px, 280px);
    }

    .beginner-final-help,
.asset-final-help {
        position: static;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1040px) {
    .beginner-final-layout,
.asset-final-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Implizite Spalte (auto) wuchs am Handy mit dem Inhalt über den Rand. */
    .beginner-final-main,
.asset-final-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .beginner-final-sidebar,
.asset-final-sidebar {
        position: static;
        max-height: none;
    }
}

@media (max-width: 760px) {
    .beginner-final-page,
.asset-final-page {
        width: min(100% - 24px, 1600px);
        padding-top: 14px;
    }

    .beginner-final-hero,
.asset-final-hero,
.beginner-final-stage,
.asset-final-stage {
        padding: 15px;
    }

    .beginner-final-topline,
.asset-final-topline,
.beginner-final-accordion-head,
.asset-final-accordion-head,
.beginner-final-summary-card,
.asset-final-summary-card {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    .beginner-final-help,
.asset-final-help,
.beginner-final-options,
.asset-final-options {
        grid-template-columns: 1fr;
    }

    .beginner-final-sheet-head,
.asset-final-sheet-head,
.beginner-final-sheet-row,
.asset-final-sheet-row,
.beginner-final-sheet-sum,
.asset-final-sheet-sum,
.beginner-final-booking-line,
.asset-final-booking-line {
        grid-template-columns: 1fr;
    }

    .beginner-final-sheet,
.asset-final-sheet {
        background: #fffefb;
    }

    .beginner-final-floating-calc,
.asset-final-floating-calc {
        right: 12px;
        bottom: 12px;
    }
}

/* Final geometry override: the shared worksheet migration below exercise-hb-shell.css
   uses highly specific 1120px rules. This page needs a wider exam sheet with an
   embedded account-plan column,
so keep all three columns in one centered strip. */
html:not(.exercise-category-1-page) body.hb-exercise-shell-page > main.beginner-final-page,
so keep all three columns in one centered strip. */
html:not(.exercise-category-1-page) body.hb-exercise-shell-page > main.asset-final-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 28px 24px 72px !important;
}

html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page > section.beginner-final-hero,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page > section.asset-final-hero,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page > section.beginner-final-stage,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page > section.asset-final-stage {
    width: min(1540px, calc(100vw - 48px)) !important;
    max-width: 1540px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page > section.beginner-final-hero,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page > section.asset-final-hero {
    display: block !important;
    grid-template-columns: none !important;
}

html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page > section.beginner-final-stage,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page > section.asset-final-stage {
    overflow: visible !important;
}

html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page .beginner-final-layout,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page .asset-final-layout {
    width: 100% !important;
    grid-template-columns: minmax(170px, 195px) minmax(0, 1fr) minmax(250px, 280px) !important;
    gap: 16px !important;
    align-items: start !important;
    position: relative !important;
    overflow: visible !important;
}

html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page .beginner-final-main,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page .asset-final-main {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
}

html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page aside.beginner-final-sidebar,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page aside.asset-final-sidebar {
    /* HIER STAND EIN ZWEITER, TOTER FOLGEMECHANISMUS.
       ------------------------------------------------------------------
       Die Zeilen `position: relative !important`, `top: 0 !important` und
       `transform: translate3d(0, var(--beginner-final-follow-y, 0px), 0)`
       stammen aus der Anfängerprüfung. Dort setzt
       js/exercise-grundlagen-abschlusstest.js die Variable beim Scrollen —
       auf DIESER Seite tut das niemand, die Variable blieb also auf 0.

       Schlimmer: js/sticky-account-sidebar.js, der allgemeine Helfer, setzt
       `position: fixed` als Inline-Stil. Ein `!important` im Stylesheet
       schlägt einen normalen Inline-Stil — der Helfer rechnete also richtig
       und wurde jedes Mal überstimmt. Der Kontenplan blieb oben stehen.

       Gemeldet am 24.08.2026: „bleiben der Kontoplan und der Rechner oben und
       wenn man scrollt sieht man sie nicht mehr". Ohne diese Zeilen greift
       wieder die Grundregel (position: sticky, top: 118px) und darüber der
       Helfer. Die Layoutangaben bleiben, sie waren nie das Problem. */
    /* NUR NOCH, WAS DEN PLATZ IM RASTER BESTIMMT.
       js/sticky-account-sidebar.js schaltet die Leiste beim Scrollen auf
       `position: fixed` und rechnet dafür left, width, max-height, margin-top
       und overflow-y selbst aus. Stünden diese vier hier mit `!important`,
       gewinnt das Stylesheet gegen den Inline-Stil — und `width: 100 %` bezieht
       sich bei `fixed` auf das FENSTER statt auf die Rasterspalte. Genau das
       ist am 25.08.2026 passiert: Der Kontenplan lief über die ganze
       Bildschirmbreite hinaus.

       Im Raster braucht es die Breite ohnehin nicht — ein Rasterelement füllt
       seine Spalte von selbst. */
    grid-column: 3 !important;
    grid-row: 1 !important;
    height: max-content !important;
    padding: 0 !important;
    align-self: start !important;
    overflow-x: hidden !important;
}

@media (max-width: 1380px) {
    html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page .beginner-final-layout,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page .asset-final-layout {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 280px) !important;
    }

    html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page .beginner-final-help,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page .asset-final-help {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page .beginner-final-main,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page .asset-final-main {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page aside.beginner-final-sidebar,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page aside.asset-final-sidebar {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
}

@media (max-width: 1040px) {
    html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page .beginner-final-layout,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page .asset-final-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page .beginner-final-main,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page .asset-final-main,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page aside.beginner-final-sidebar,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page aside.asset-final-sidebar {
        grid-column: 1 !important;
    }

    html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page aside.beginner-final-sidebar,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page aside.asset-final-sidebar {
        grid-row: 3 !important;
        position: static !important;
        max-height: none !important;
        transform: none !important;
    }
}

@media (max-width: 760px) {
    html:not(.exercise-category-1-page) body.hb-exercise-shell-page > main.beginner-final-page,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page > main.asset-final-page {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page > section.beginner-final-hero,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page > section.asset-final-hero,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page > section.beginner-final-stage,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.asset-final-page > section.asset-final-stage {
        width: 100% !important;
    }
}

/* The shared exercise shell still contains legacy Semester-1 rules with !important.
   Keep this final compatibility layer local to the rebuilt visual shell. */
body.hb-exercise-shell-page > main.beginner-final-page,
/* The shared exercise shell still contains legacy Semester-1 rules with !important.
   Keep this final compatibility layer local to the rebuilt visual shell. */
body.hb-exercise-shell-page > main.asset-final-page {
    width: min(1600px, calc(100vw - 48px)) !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 28px 0 72px !important;
}

body.hb-exercise-shell-page main.beginner-final-page > .beginner-final-hero,
body.hb-exercise-shell-page main.asset-final-page > .asset-final-hero {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px !important;
    padding: 24px 28px 22px !important;
    border: 1px solid var(--final-line) !important;
    border-left: 5px solid var(--final-terra) !important;
    background:
        linear-gradient(rgba(35, 31, 24, 0.035) 1px, transparent 1px),
        rgba(255, 253, 247, 0.98) !important;
    background-size: 100% 28px !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-hero h1,
body.hb-exercise-shell-page main.asset-final-page .asset-final-hero h1 {
    max-width: 900px !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: clamp(2.25rem, 4vw, 3.7rem) !important;
    line-height: 1 !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-lead,
body.hb-exercise-shell-page main.asset-final-page .asset-final-lead {
    max-width: 88ch !important;
    margin: 12px 0 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.58 !important;
}

body.hb-exercise-shell-page main.beginner-final-page > .beginner-final-stage,
body.hb-exercise-shell-page main.asset-final-page > .asset-final-stage {
    padding: 18px !important;
    border: 1px solid var(--final-line) !important;
    background: rgba(255, 253, 247, 0.97) !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-topline,
body.hb-exercise-shell-page main.asset-final-page .asset-final-topline {
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--final-line) !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-status-chip,
body.hb-exercise-shell-page main.asset-final-page .asset-final-status-chip,
body.hb-exercise-shell-page main.beginner-final-page .beginner-final-section-chip,
body.hb-exercise-shell-page main.asset-final-page .asset-final-section-chip,
body.hb-exercise-shell-page main.beginner-final-page .beginner-final-question-number,
body.hb-exercise-shell-page main.asset-final-page .asset-final-question-number,
body.hb-exercise-shell-page main.beginner-final-page .beginner-final-question-state,
body.hb-exercise-shell-page main.asset-final-page .asset-final-question-state {
    display: inline-flex !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 4px 9px !important;
    border: 1px solid var(--final-line) !important;
    background: var(--final-paper-soft) !important;
    color: #584f40 !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-status-chip,
body.hb-exercise-shell-page main.asset-final-page .asset-final-status-chip,
body.hb-exercise-shell-page main.beginner-final-page .beginner-final-question-number,
body.hb-exercise-shell-page main.asset-final-page .asset-final-question-number {
    border-color: #9db6a6 !important;
    background: #edf4e9 !important;
    color: var(--final-green) !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-back-link,
body.hb-exercise-shell-page main.asset-final-page .asset-final-back-link {
    min-height: 40px !important;
    padding: 0 15px !important;
    border: 1px solid var(--final-dark) !important;
    background: var(--final-dark) !important;
    color: #fff9eb !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-layout,
body.hb-exercise-shell-page main.asset-final-page .asset-final-layout {
    display: grid !important;
    grid-template-columns: minmax(170px, 205px) minmax(720px, 1fr) minmax(245px, 285px) !important;
    gap: 16px !important;
}

body.hb-exercise-shell-page main.beginner-final-page :is(
    .beginner-final-help-card,
body.hb-exercise-shell-page main.asset-final-page :is(
    .asset-final-help-card,
.beginner-final-section,
.asset-final-section,
.beginner-final-summary-card,
.asset-final-summary-card,
.beginner-final-sidebar,
.asset-final-sidebar,
.beginner-final-celebration-card
),
.asset-final-celebration-card
) {
    border: 1px solid var(--final-line) !important;
    background: rgba(255, 253, 247, 0.97) !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-section,
body.hb-exercise-shell-page main.asset-final-page .asset-final-section {
    margin-bottom: 0 !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-accordion-head,
body.hb-exercise-shell-page main.asset-final-page .asset-final-accordion-head {
    padding: 15px 17px !important;
    border: 0 !important;
    border-left: 6px solid var(--final-blue) !important;
    border-bottom: 0 !important;
    background: #f2f6f7 !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-accordion-head.is-part-b,
body.hb-exercise-shell-page main.asset-final-page .asset-final-accordion-head.is-part-b {
    border-left-color: var(--final-purple) !important;
    background: #f5f0f6 !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-accordion-head.is-part-c,
body.hb-exercise-shell-page main.asset-final-page .asset-final-accordion-head.is-part-c {
    border-left-color: var(--final-green) !important;
    background: #eff5ed !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-accordion-head.is-part-d,
body.hb-exercise-shell-page main.asset-final-page .asset-final-accordion-head.is-part-d {
    border-left-color: var(--final-amber) !important;
    background: #f8f1e4 !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-card-list,
body.hb-exercise-shell-page main.asset-final-page .asset-final-card-list {
    gap: 9px !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-help-card p,
body.hb-exercise-shell-page main.asset-final-page .asset-final-help-card p,
body.hb-exercise-shell-page main.beginner-final-page .beginner-final-section-lead,
body.hb-exercise-shell-page main.asset-final-page .asset-final-section-lead,
body.hb-exercise-shell-page main.beginner-final-page .beginner-final-summary-card p,
body.hb-exercise-shell-page main.asset-final-page .asset-final-summary-card p,
body.hb-exercise-shell-page main.beginner-final-page .beginner-final-sidebar-copy,
body.hb-exercise-shell-page main.asset-final-page .asset-final-sidebar-copy {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-summary-card,
body.hb-exercise-shell-page main.asset-final-page .asset-final-summary-card {
    border-left: 5px solid var(--final-green) !important;
    background: #f3f7ed !important;
}

body.hb-exercise-shell-page main.beginner-final-page :is(
    .beginner-final-primary-btn,
body.hb-exercise-shell-page main.asset-final-page :is(
    .asset-final-primary-btn,
.beginner-final-secondary-btn,
.asset-final-secondary-btn,
.beginner-final-reset-btn
),
.asset-final-reset-btn
) {
    min-height: 40px !important;
    padding: 0 15px !important;
    border: 1px solid var(--final-dark) !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-primary-btn,
body.hb-exercise-shell-page main.asset-final-page .asset-final-primary-btn {
    background: var(--final-green) !important;
    color: #fff9eb !important;
}

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-sidebar-toggle,
body.hb-exercise-shell-page main.asset-final-page .asset-final-sidebar-toggle {
    padding: 12px 13px !important;
    border: 0 !important;
    border-bottom: 2px solid var(--final-dark) !important;
    background: var(--final-dark) !important;
    color: #fff9eb !important;
}

@media (max-width: 1380px) {
    body.hb-exercise-shell-page main.beginner-final-page .beginner-final-layout,
body.hb-exercise-shell-page main.asset-final-page .asset-final-layout {
        grid-template-columns: minmax(0, 1fr) minmax(245px, 280px) !important;
    }
}

@media (max-width: 1040px) {
    body.hb-exercise-shell-page main.beginner-final-page .beginner-final-layout,
body.hb-exercise-shell-page main.asset-final-page .asset-final-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    body.hb-exercise-shell-page > main.beginner-final-page,
body.hb-exercise-shell-page > main.asset-final-page {
        width: min(100% - 24px, 1600px) !important;
        padding-top: 14px !important;
    }

    body.hb-exercise-shell-page main.beginner-final-page > :is(.beginner-final-hero,
body.hb-exercise-shell-page main.asset-final-page > :is(.asset-final-hero,
.beginner-final-stage),
.asset-final-stage) {
        padding: 15px !important;
    }
}

/* ==========================================================================
   Die Abschlussprüfungen von Semester 4 und 5
   ==========================================================================

   Diese beiden Seiten tragen dieselben Klassen wie die Abschlussprüfung von
   Semester 1 — Hero, Topline, Hilfespalte, Akkordeon, Aufgabenkarte,
   Antwortknopf, Rückmeldung, Ergebniskarte. Sie erben die Gestaltung damit
   wörtlich und kopieren sie nicht. Wer oben eine Farbe ändert, ändert sie in
   allen drei Prüfungen.

   Auch die Engine spielt mit: exercise-s4-engine.js vergibt im Prüfungsmodus
   die Namen beginner-final-question-card, -question-topline, -question-number,
   -question-state, -options, -option-btn und -feedback. Auf den einunddreissig
   Arbeitsblättern tut sie das nicht; dort bleibt alles, wie es war.

   Hier steht deshalb nur noch, was Semester 1 gar nicht kennt.

   NICHT ÜBERNOMMEN wurde die dritte Spalte der Semester-1-Prüfung, der
   Kontenplan zum Hineinziehen. Diese Prüfungen kennen keine T-Konten; das Feld
   wäre eine Bedienfläche, die nichts tut. Deshalb stehen sie zweispaltig. */

/* -------------------------------------------------------- Zweispaltigkeit
   Weiter oben schreiben drei Blöcke die Spaltenbreiten mit !important fest —
   sie hebeln das Grundgerüst des Shells aus, das die Prüfungsseite sonst in
   seine eigene Spaltenordnung zwingt. Wer zweispaltig sein will, muss auf
   derselben Höhe antworten. */

body.hb-exercise-shell-page main.beginner-final-page .beginner-final-layout.is-zweispaltig,
html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page .beginner-final-layout.is-zweispaltig {
    grid-template-columns: minmax(170px, 205px) minmax(0, 1fr) !important;
}

@media (max-width: 1380px) {
    body.hb-exercise-shell-page main.beginner-final-page .beginner-final-layout.is-zweispaltig,
    html:not(.exercise-category-1-page) body.hb-exercise-shell-page main.beginner-final-page .beginner-final-layout.is-zweispaltig {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ------------------------------------------------- Prüfknopf je Aufgabe
   Semester 1 prüft beim Klick auf die Antwort. Hier gibt es Rechenleitern und
   Eingabefelder, die einen eigenen Auslöser brauchen. */

.beginner-final-page .s4-item-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-top: 8px;
    padding: 0 15px;
    border: 1px solid var(--final-dark);
    border-radius: 0;
    background: var(--final-dark);
    color: #fff9eb;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.beginner-final-page .s4-item-check:hover {
    border-color: var(--final-terra);
    background: var(--final-terra);
}

/* ------------------------------- Leiter, Raster, Fehlersuche, Eingaben ---
   Diese Bauformen gibt es in der Semester-1-Prüfung nicht, sie kann also nichts
   vorgeben. Übernommen werden Papier, Linie und Schrift, damit sie in derselben
   Sprache sprechen wie der Rest der Karte. */

.beginner-final-page .s4-leiter-zeile,
.beginner-final-page .s4-raster-zeile,
.beginner-final-page .s4-error-line {
    border-color: var(--final-line);
}

.beginner-final-page .s4-error-line { background: #fffdf7; }

.beginner-final-page .s4-error-line.is-correct {
    border-color: var(--final-green);
    background: #eaf4e8;
    box-shadow: inset 4px 0 0 var(--final-green);
}

.beginner-final-page .s4-error-line.is-wrong {
    border-color: #a9483c;
    background: #fbefea;
    box-shadow: inset 4px 0 0 #a9483c;
}

.beginner-final-page .s4-input {
    border-radius: 0;
    background: #fffdf8;
}

/* Der Zonenhinweis über der Kartenliste — Semester 1 hat ihn nicht, hier führt
   er in den Prüfungsteil ein. */
.beginner-final-page .task-label {
    margin: 0 0 10px;
    color: var(--final-muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

/* ----------------------------------------- Auftrag, Rückblick, Ergebnis
   Drei Blöcke, die Semester 1 nicht hat: die Zielkarte über der Prüfung, der
   Rückblick auf die Level darunter und die Statusspalte in der Ergebniskarte. */

.beginner-final-brief-card {
    padding: 15px 17px;
    border: 1px solid var(--final-line);
    border-left: 5px solid var(--final-blue);
    background: rgba(255, 253, 247, 0.98);
}

.beginner-final-goal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.beginner-final-goal-grid article {
    padding: 11px 13px;
    border: 1px solid var(--final-line);
    background: var(--final-paper-soft);
}

.beginner-final-goal-grid span {
    display: block;
    color: var(--final-blue);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.beginner-final-goal-grid strong {
    display: block;
    margin-top: 4px;
    font-family: "Lora", serif;
    font-size: 1rem;
    font-weight: 600;
}

.beginner-final-goal-grid p {
    margin: 5px 0 0;
    color: var(--final-muted);
    font-size: 0.83rem;
    line-height: 1.5;
}

.beginner-final-recap-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 270px);
    gap: 18px;
    padding: 17px;
    border: 1px solid var(--final-line);
    border-left: 5px solid var(--final-amber);
    background: rgba(255, 253, 247, 0.98);
}

.beginner-final-recap-card h2 {
    margin: 3px 0 0;
    font-family: "Lora", serif;
    font-size: 1.24rem;
}

.beginner-final-recap-card p {
    margin: 6px 0 0;
    color: var(--final-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.beginner-final-recap-links {
    padding-left: 16px;
    border-left: 1px solid var(--final-line);
}

.beginner-final-recap-links > div {
    display: grid;
    gap: 5px;
    margin-top: 7px;
}

.beginner-final-recap-links a {
    color: var(--final-blue);
    font-size: 0.86rem;
    text-decoration: none;
}

.beginner-final-recap-links a:hover { text-decoration: underline; }

@media (max-width: 860px) {
    .beginner-final-recap-card { grid-template-columns: minmax(0, 1fr); }
    .beginner-final-recap-links { padding-left: 0; border-left: 0; }
}

.beginner-final-summary-copy ul {
    margin: 8px 0 0;
    padding-left: 1.1rem;
    color: var(--final-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.beginner-final-summary-copy #s4Progress {
    margin-top: 8px;
    color: var(--final-green);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.beginner-final-summary-side {
    display: grid;
    gap: 8px;
    align-content: start;
}

.beginner-final-status-btn {
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid var(--final-dark);
    border-radius: 0;
    background: transparent;
    color: var(--final-dark);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: default;
}

.beginner-final-status-btn.is-complete {
    border-color: var(--final-green);
    background: var(--final-green);
    color: #fff9eb;
}