/* ===== Anleitungs-Layout (gleicht sich dem Spiel-Design an) ===== */
  .anleitung { max-width: 820px; margin: 0 auto; padding: var(--sp-4); }
  .anleitung h1.page-title { font-size: 1.8rem; margin: var(--sp-3) 0 var(--sp-1); }
  .anleitung h2 { font-size: 1.3rem; margin-top: var(--sp-5); border-bottom: 2px solid var(--grid-line); padding-bottom: var(--sp-1); }
  .anleitung h3 { font-size: 1.1rem; margin-top: var(--sp-4); }
  .anleitung p, .anleitung li { font-size: var(--fs-md); line-height: var(--lh); }
  .anleitung .lead { font-size: var(--fs-lg); }
  .anleitung section { margin-bottom: var(--sp-4); }
  .anleitung .section-back {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin: var(--sp-3) 0 var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    border: var(--border-w) solid var(--grid-line, #888);
    border-radius: var(--radius-sm);
    background: var(--btn-bg, #fff);
    color: var(--ink, #000);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
  }
  .anleitung .section-back:hover { text-decoration: underline; }
  .anleitung .section-back::before { content: "\2190"; }
  .anleitung .section-back-wrap { margin: 0; }
  .anleitung .level-start-wrap { margin: var(--sp-3) 0 var(--sp-2); }
  .anleitung .level-start-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    border: var(--border-w) solid var(--accent, #1565c0);
    border-radius: var(--radius-sm);
    background: var(--accent, #1565c0);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
  }
  .anleitung .level-start-btn:hover { text-decoration: underline; }

  /* Code-Beispiele wie im Spiel */
  .anleitung pre.code-block { margin: var(--sp-3) 0; }

  /* Symbole-Galerie */
  .sym-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-4);
    margin: var(--sp-4) 0;
  }
  .sym-card { text-align: center; }
  .sym-card .cell {
    width: 88px; height: 88px;
    margin: 0 auto;
    font-size: 2.6rem;
    border: var(--border-w) solid var(--grid-line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
  }
  .sym-name { font-weight: 700; margin: var(--sp-2) 0 var(--sp-1); }
  .sym-desc { font-size: var(--fs-sm); margin: 0; }

  .app-footer a { color: var(--accent); }
  [data-theme="contrast"] .app-footer a,
  [data-theme="contrast-dark"] .app-footer a { color: var(--accent); }