{% extends "basis.html" %}{% set seiten_module = ("dig",) %}{% block titel %}{{ t.genres }} – Timbre{% endblock %}{% block koerperklasse %} class="breit"{% endblock %}{% block hauptklasse %} class="breit"{% endblock %}{% block weich %} data-weich{% endblock %}{% block inhalt %}
{% set g = t.genres_seite %}
<div class="genres">
<header class="genkopf">
  {# Variante C (10.11.2026): Genres ist eine Ansicht der Library – Umschalter Liste · Regal · Genres #}
  {% if menue_c %}{% import "menue.html" as mk with context %}{{ mk.ansicht("genres") }}{% endif %}
  <div class="eyebrow">{{ g.dach }}</div>
  <div class="mitfrage"><h1>{{ g.ueberschrift }}</h1><a class="fragez" href="{{ t.hilfe.kontext.genres.href }}" title="{{ t.hilfe.kontext.genres.name }}" aria-label="{{ t.hilfe.kontext.genres.name }}"><span aria-hidden="true">?</span></a></div>
  <p class="leise">{{ g.einleitung }}</p>
  {# Aktualisieren: holt N13 neu und zeichnet Kennzahlen, Karte und Katalog an Ort und Stelle (genres.js). Erscheint mit den Daten. #}
  <div class="neuzeile" id="gen-neu-zeile" hidden>
    <button type="button" class="knopf klein neuknopf" id="gen-neu" aria-label="{{ t.neu.neu_knopf_hilfe }}" title="{{ t.neu.neu_knopf_hilfe }}"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path d="M13.5 8a5.5 5.5 0 1 1-1.6-3.9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M13.6 1.8v2.9h-2.9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span>{{ t.neu.neu_knopf }}</span></button>
    <span class="klein neustatus" id="gen-neu-status" role="status" aria-live="polite"></span>
    <span class="klein neuhinweis" id="gen-neu-hinweis" hidden>{{ t.neu.neu_waechst }}</span>
  </div>
</header>
{# Hülle: genres.js füllt sie aus N13 (dieselben Daten wie die Bibliothek) und blendet dafür den Rückfall darunter aus. #}
<div id="gen" class="genteile" hidden>
  <div class="kennzahlen" id="gen-zahlen"></div>
  <section class="diagrammkarte genkarte" aria-labelledby="gen-karte-h">
    <h2 id="gen-karte-h">{{ g.karte_titel }}</h2>
    <div class="genschwelle">
      <label for="gen-schwelle">{{ g.schwelle }}</label>
      <input type="range" id="gen-schwelle" min="0" max="100" step="5" value="20" aria-describedby="gen-schwelle-hilfe">
      <output id="gen-schwelle-wert" for="gen-schwelle"></output>
    </div>
    <p class="klein" id="gen-schwelle-hilfe">{{ g.schwelle_hilfe }}</p>
    <div id="gen-karte-ziel"></div>
    <p class="klein">{{ g.karte_hinweis }}</p>
    <details class="gentabelle"><summary>{{ g.als_tabelle }}</summary><div id="gen-tabelle"></div></details>
  </section>
  <section class="genkatalogteil" aria-labelledby="gen-katalog-h">
    <h2 id="gen-katalog-h" tabindex="-1">{{ g.katalog_titel }}</h2>
    <p class="klein">{{ g.katalog_hinweis }}</p>
    <ul class="genkatalog" id="gen-katalog"></ul>
    <p class="hinweis" id="gen-katalog-leer" hidden>{{ g.katalog_leer }}</p>
  </section>
  {# Platz für weitere Karten (kommen später). #}
</div>
<div class="bibstatus" id="gen-status" role="status"></div>
<div id="gen-rueckfall">
  <noscript><p class="hinweis klein">{{ g.ohne_js }}</p></noscript>
  {% if leitgenres %}
  <div class="tabelle"><table>
    <thead><tr><th scope="col">{{ g.rueckfall_kopf[0] }}</th><th scope="col" class="zahl">{{ g.rueckfall_kopf[1] }}</th></tr></thead>
    <tbody>{% for name, anzahl in leitgenres %}
    <tr><td>{{ name }}</td><td class="zahl">{{ anzahl }}</td></tr>{% endfor %}
    </tbody>
  </table></div>
  {% else %}
  <p class="hinweis">{{ g.rueckfall_leer | ohne_desktop if store_app else g.rueckfall_leer }}</p>
  {% endif %}
</div>
</div>
{# labels: Anzeigenamen der DJ-Labels (design/labels.json), dieselbe Tabelle wie in Bibliothek und Titelblatt.
   laedt, fehler, nochmal, leer: dieselben Texte wie in der Bibliothek. #}
<script type="application/json" id="t">{{ dict((dict(g, rueckfall_leer=(g.rueckfall_leer | ohne_desktop)) if store_app else g), labels=t.blatt.labels, laedt=t.bib.laedt, fehler=t.bib.fehler, nochmal=t.bib.nochmal, leer=t.bib.leer, tracks=t.tracks, **t.neu)|tojson }}</script>
<script src="/static/diagramme.js" defer data-seite></script>
<script src="/static/bibliothek.js" defer data-seite></script>
<script src="/static/genres.js" defer data-seite></script>
{% endblock %}