/* ── Verid Aufgabe mit aufdeckbarer Lösung ──────────────────────
   Struktur:
     .verid-task              — Wrapper
     .verid-task__body        — Aufgabentext
     .verid-task__toggle      — „Lösung anzeigen"-Button (div role=button)
     .verid-task__solution    — Lösung (initial versteckt)
────────────────────────────────────────────────────────────────── */

.verid-task {
  border: 1px solid #DDE1EA;
  border-radius: 10px;
  padding: 1.25rem;
  margin: 1.5rem 0;
  background: #F3F5FA;
}

/* Titel: h2/h3/h4 direkt in .verid-task */
.verid-task h2,
.verid-task h3,
.verid-task h4,
.verid-task .verid-task__title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 1.765rem !important;
  font-weight: 600 !important;
  color: var(--verid-color-text, #635F5A) !important;
  margin: 0 0 1rem !important;
  margin-block-start: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0.75rem !important;
  padding-block-start: 0 !important;
  border: none !important;
  border-bottom: 1.5px solid #DDE1EA !important;
}

.verid-task h2::after,
.verid-task h3::after,
.verid-task h4::after,
.verid-task .verid-task__title::after {
  content: 'Aufgabe';
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px 4px 26px;
  border-radius: 4px;
  background-color: #E8EBF4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3CA6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 13px 13px;
  color: #1F3CA6;
  flex-shrink: 0;
}

/* Aufgabentext */
.verid-task__body {
  color: var(--verid-color-text, #635F5A);
  margin: 0 0 1rem;
  overflow-x: auto;
}

.verid-task__body p:last-child {
  margin-bottom: 0;
}

/* ── Toggle-Button ─────────────────────────────────────────────── */

.verid-task__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  background: #fff;
  border: 1.5px solid #1F3CA6;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1F3CA6;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.verid-task__toggle:hover {
  background: #EEF2FF;
}

.verid-task__toggle::after {
  content: '▼';
  font-size: 0.8rem;
  transition: transform 0.2s;
  display: inline-block;
}

.verid-task--open .verid-task__toggle::after {
  transform: rotate(-180deg);
}

.verid-task--open .verid-task__toggle {
  background: #EEF2FF;
}

/* ── Lösung ────────────────────────────────────────────────────── */

.verid-task__solution {
  display: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--verid-color-border, #DDE1EA);
}

.verid-task--open .verid-task__solution {
  display: block;
}

/* Aufgabentext-Tabelle: horizontal scrollbar */
.verid-task__body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

@media (max-width: 900px) {
  .verid-task__body table td,
  .verid-task__body table th {
    font-size: 0.9375rem !important;
    padding: 0.25rem 0.35rem;
  }
}

/* ─── Lösung-Tabelle: kaskaden-resistente Darstellung ───────────────────────
   Selektoren mit table-Ebene (0,1,0,2) schlagen generische reset.css-Regeln
   th/td (0,0,0,1) und text-content.css .node__content th/td (0,1,0,1).
   display:table !important verhindert jeden display:block-Override.
   Explizite Zellrahmen machen Spalten sichtbar – unabhängig von Textbreite.  */
.verid-task__solution {
  overflow-x: auto;
}
.verid-task__solution table {
  display: table !important;
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
}
.verid-task__solution table th,
.verid-task__solution table td {
  padding: 0.45rem 0.875rem;
  border: 1px solid var(--verid-color-border, #DDE1EA);
  text-align: left;
  vertical-align: top;
  color: var(--verid-color-text, #635F5A);
  font-size: var(--verid-text-md, 1.125rem) !important;
  overflow-wrap: break-word;
}
.verid-task__solution table th {
  font-weight: 700;
  white-space: nowrap;
  background: rgba(221, 225, 234, 0.35);
  text-transform: none;
  letter-spacing: normal;
}
.verid-task__solution table th.verid-task__amount,
.verid-task__solution table td.verid-task__amount {
  text-align: right;
  white-space: nowrap;
}
.verid-task__solution tr.verid-task__row--space td {
  padding-top: 1rem;
}
/* .text-content table tr:last-child td { border-block-end:0 } (0,1,1,3) schlägt unsere
   alte Regel (0,1,1,2) — mit table im Selektor gleiche Spez., aber später im File → gewinnt */
.verid-task__solution table tr:last-child td {
  border-bottom: 1px solid var(--verid-color-border, #DDE1EA);
  border-block-end: 1px solid var(--verid-color-border, #DDE1EA);
}

@media (max-width: 600px) {
  .verid-task__solution table th,
  .verid-task__solution table td {
    hyphens: auto;
    padding: 0.35rem 0.5rem;
  }
}

/* Abstand zwischen Lösungs-Abschnitten */
.verid-task__solution p {
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}
.verid-task__solution table + p {
  margin-top: 1.25rem;
}


/* Tabelle im Aufgabentext: em-Kaskade aufbrechen (text-content.css setzt
   0.9em auf .node__content table.zahlen td → doppelte em-Kaskade = ~13px).
   !important nötig, da text-content.css nach task.css geladen wird. */
.verid-task__body table.zahlen,
.verid-task__body table.zahlen th,
.verid-task__body table.zahlen td {
  font-size: inherit !important;
}

/* Tabelle im Aufgabentext: kein Rahmen, linksbündig, Betragsspalte rechts */
.verid-task__body table {
  width: auto;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.verid-task__body table td,
.verid-task__body table th {
  border: none !important;
  padding: 0.3rem 0.5rem;
  text-align: left;
  vertical-align: top;
  font-size: var(--verid-text-md, 1.125rem) !important;
}
.verid-task__body table td:first-child,
.verid-task__body table th:first-child {
  white-space: nowrap;
}
.verid-task__body table td.verid-task__amount,
.verid-task__body table th.verid-task__amount {
  text-align: right !important;
  padding-left: 0.5rem;
}

/* Ergebnis-Hinweis-Box */
.verid-task__note {
  margin-top: 0.75rem;
  padding: 0.5rem 0.875rem;
  background: #EEF2FF;
  border-left: 3px solid #1F3CA6;
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--verid-color-text, #635F5A);
}