/* Hilfe (/help, board App-6-05). Only what this page has; the shell and the
   shared pieces (st-qa, st-group) are static/app.css. */
.hl-wide { display: grid; gap: 18px; }
.hl-two { gap: 14px; }

/* The two buttons, as a picture of the real ones. */
.ob-grades { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ob-grades .tk-button { flex-direction: column; gap: 2px; min-height: 78px; padding: 0 10px; font-size: 22px; line-height: 1.05; pointer-events: none; }
.ob-grades .tk-button small { font-family: var(--font-body); font-size: 16px; font-weight: 700; }

/* The ladder: each step a chip, the arrow part of its chip, so a line
   break falls between chips, never inside one. */
.ob-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 6px; margin: 0; padding: 0; list-style: none; }
.ob-steps li { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; }
.ob-steps li span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 11px; border-radius: var(--radius-pill);
  border: var(--stroke-2) solid var(--outline); background: var(--surface); }
.ob-steps li:not(:last-child)::after { content: "→"; font-weight: 800; }

.st-qa details p .ob-back { display: inline-flex; min-height: 44px; vertical-align: middle; }

/* A tile that leads on: "Noch eine Frage?". */
.ap-tile { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 12px 16px;
  background: var(--surface); border: var(--stroke-2) solid var(--outline); border-radius: var(--radius-tile);
  box-shadow: var(--shadow-sticker); color: var(--ink); text-decoration: none; }
.kuma a.ap-tile:hover { color: var(--ink); background: var(--paper); }
.ap-tile > span:first-child { display: grid; gap: 3px; min-width: 0; }
.ap-tile b { display: block; font-size: 18px; font-weight: 800; }
.ap-tile span span { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; }
.ap-tile .go { flex: none; font-family: var(--font-display); font-size: 30px; font-weight: 800; }

.hl-out { max-width: 640px; padding-top: 24px; padding-bottom: 56px; }