/* =====================================================================
   Das Hilfefenster (modaler <dialog>)

   Es legt sich über die laufende Ansicht, statt sie zu ersetzen – deshalb
   braucht es einen eigenen Rahmen, einen eigenen Bildlauf und einen
   Hintergrund, der deutlich macht, dass dahinter etwas weitergeht.
   ===================================================================== */

.hilfe {
  /* Breite nach Inhalt, nicht nach Fenster: --textbreite-max ist die Breite,
     bei der ein Text noch lesbar zeilenumbricht. Der Zuschlag deckt Rahmen
     und Innenabstand ab, damit der Text selbst die Maßzahl behält. */
  inline-size: min(calc(var(--textbreite-max) + 8rem), 100% - 2 * var(--abstand-m));
  max-inline-size: 100%;

  /* Bei 200 Prozent Anzeigegröße bleibt so noch Rand sichtbar – der Dialog
     darf das Fenster nicht randlos füllen, sonst ist nicht mehr erkennbar,
     dass er über etwas liegt. */
  block-size: min(90vh, 60rem);

  padding: 0;
  border: var(--rahmenbreite-stark) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-l);
  background-color: var(--farbe-flaeche);
  color: var(--farbe-text);
  box-shadow: var(--schatten-flaeche);
  overflow: hidden;
}

.hilfe::backdrop {
  /* Deutlich genug, dass der Dialog als eigene Ebene erkennbar ist, aber
     nicht so dunkel, dass die Ansicht dahinter verschwindet: Wer die Hilfe
     mitten in einer Prüfung öffnet, soll sehen, dass sein Bogen noch da ist. */
  background-color: rgb(0 0 0 / 55%);
}

/* Der Bildlauf liegt innen, nicht am Dialog selbst: So bleibt der Rahmen
   stehen, während der Text wandert. */
.hilfe__rahmen {
  block-size: 100%;
  overflow-y: auto;
  padding: var(--abstand-l);

  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.hilfe__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-s);
}

.hilfe__kopf h2 {
  margin: 0;
}

.hilfe__einleitung {
  color: var(--farbe-text-leise);
  max-inline-size: var(--textbreite-max);
}

/* --- Inhaltsverzeichnis --------------------------------------------- */

.hilfe__verzeichnis {
  background-color: var(--farbe-grund-versetzt);
  border-radius: var(--radius-m);
  padding: var(--abstand-m) var(--abstand-m) var(--abstand-m) var(--abstand-l);
}

.hilfe__verzeichnis ol {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
}

.hilfe__verzeichniskurz {
  color: var(--farbe-text-leise);
}

/* --- Kapitel --------------------------------------------------------- */

.hilfe__kapitel {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  max-inline-size: var(--textbreite-max);
}

/*
  Der Sprung aus dem Verzeichnis setzt den Fokus auf die Überschrift. Ohne
  Abstand nach oben klebte sie danach am oberen Rand des Bildlaufs und der
  Fokusring wäre halb abgeschnitten – WCAG 2.4.11 (Fokus nicht verdeckt).
*/
.hilfe__kapitel h3 {
  margin: 0;
  scroll-margin-block-start: var(--abstand-m);
}

.hilfe__kapitel p,
.hilfe__kapitel li {
  margin: 0;
}

.hilfe__kapitel ul,
.hilfe__schritte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
  margin: 0;
  padding-inline-start: var(--abstand-l);
}

/* --- Tastenlisten ---------------------------------------------------- */

.hilfe__tasten {
  display: grid;
  /* Die Tastenspalte nimmt sich, was sie braucht; die Wirkung bekommt den
     Rest. Bei schmalem Fenster fällt sie unter die Tasten. */
  grid-template-columns: max-content 1fr;
  gap: var(--abstand-xs) var(--abstand-m);
  margin: 0;
}

.hilfe__tasten dt {
  font-weight: var(--schriftstaerke-mittel);
  white-space: nowrap;
}

.hilfe__tasten dd {
  margin: 0;
}

.hilfe__tasten kbd {
  display: inline-block;
  padding: 0.1em 0.45em;
  border: var(--rahmenbreite) solid var(--farbe-rahmen-kraeftig);
  border-radius: var(--radius-s);
  background-color: var(--farbe-grund-versetzt);
}

.hilfe__verbinder {
  color: var(--farbe-text-leise);
}

@media (width < 40rem) {
  .hilfe__tasten {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hilfe__tasten dd {
    margin-block-end: var(--abstand-s);
  }

  /*
    Die Tastenfolge darf jetzt umbrechen.

    `nowrap` hält oben eine Kombination in einer Zeile – richtig, solange sie
    hineinpasst. Bei 280 CSS-Pixeln passt `Strg` `und` `Umschalt` `V` nicht
    mehr: nachgemessen 12 Pixel Überstand, der Rest wäre abgeschnitten. Die
    einzelne Tastenkappe bleibt unteilbar (`kbd { white-space: nowrap }`),
    gebrochen wird nur zwischen den Kappen.
  */
  .hilfe__tasten dt {
    white-space: normal;
  }
}

/* --- Abschluss ------------------------------------------------------- */

.hilfe__abschluss {
  margin-block-start: var(--abstand-s);
}
