{% extends "basis.html" %}{% set seiten_module = ("dig",) %}{% block titel %}{{ m.titel }} – Timbre{% endblock %}{% block inhalt %}
<p class="eyebrow">{{ m.eyebrow }}</p>
<h1>{{ m.titel }}</h1>
<p class="leise">{{ m.text }}</p>
<div class="zeile" id="muster-wahl">
  <label class="klein">{{ t.design }} <select id="muster-design">
    <option value="glut">Glut</option><option value="buehne">Bühnenblau</option><option value="klar">Klar</option></select></label>
  <label class="klein">{{ t.modus }} <select id="muster-modus">
    <option value="auto">{{ t.modus_auto }}</option><option value="hell">{{ t.modus_hell }}</option><option value="dunkel">{{ t.modus_dunkel }}</option></select></label>
  <span class="klein" id="muster-klick" role="status"></span>
</div>
<div class="muster">
  {% for k in m.karten %}
  <section class="diagrammkarte{% if k[0] in ('landkarte', 'wellenform', 'verlauf', 'klein', 'leer') %} ganz{% endif %}" id="m-{{ k[0] }}">
    <h3>{{ k[1] }}</h3>
    <div class="ziel"></div>
    {% if k[2] %}<p class="klein">{{ k[2] }}</p>{% endif %}
  </section>
  {% endfor %}
</div>
<script type="application/json" id="musterdaten">{{ daten|tojson }}</script>
<script type="application/json" id="mustertexte">{{ m.js|tojson }}</script>
<script src="/static/diagramme.js" defer></script>
{# diagramme.js trägt defer (07.11.2026): das Inline-Skript startet darum erst bei DOMContentLoaded – das kommt nach allen deferierten Skripten #}
<script>
document.addEventListener("DOMContentLoaded", function () {
  "use strict";
  var T = window.TimbreDiagramme, wurzel = document.documentElement;
  var D = JSON.parse(document.getElementById("musterdaten").textContent);
  var X = JSON.parse(document.getElementById("mustertexte").textContent);
  var SPR = /^(de|en|es|fr|it)$/.test(wurzel.lang) ? wurzel.lang : "de";
  function ziel(name) { return document.querySelector("#m-" + name + " .ziel"); }
  function neu(tag, klasse, text) { var e = document.createElement(tag); if (klasse) e.className = klasse; if (text != null) e.textContent = text; return e; }
  function zeig(name) { var z = ziel(name); for (var i = 1; i < arguments.length; i++) z.appendChild(arguments[i]); return z; }
  function aufklapp(inhalt) { var d = neu("details", "aufklapp"); d.appendChild(neu("summary", "", X.als_tabelle)); d.appendChild(inhalt); return d; }
  function geklickt(was) { document.getElementById("muster-klick").textContent = X.geklickt + " " + was; }

  /* Umschalter: nur data-design/data-modus dieser Seite, nichts wird gespeichert. */
  var wd = document.getElementById("muster-design"), wm = document.getElementById("muster-modus");
  wd.value = wurzel.dataset.design; wm.value = wurzel.dataset.modus;
  wd.addEventListener("change", function () { wurzel.dataset.design = wd.value; });
  /* data-modus-wahl mit (24.10.2026): sonst stellt das Kopf-Skript bei der Rückkehr in den Tab die Wahl des Kontos zurück */
  wm.addEventListener("change", function () { wurzel.dataset.modus = wm.value; wurzel.dataset.modusWahl = wm.value; });

  zeig("netz", T.netz(D.netz, { werte: true, sprache: SPR }),
    aufklapp(T.tabelle(X.netz_kopf, T.netzZeilen(D.netz), { sprache: SPR })));
  zeig("netz_luecke", T.netz(D.netz_luecke, { werte: true, sprache: SPR }));
  zeig("netz_zwei", T.netzZwei(D.netz, D.netz_b, { nameA: D.name_a, nameB: D.name_b, sprache: SPR }));
  zeig("genres", T.genreBalken(D.genres, { legende: true, leitLabel: X.leitgenre, sprache: SPR }),
    neu("p", "klein", X.kompakt), T.genreBalken(D.genres_kurz, { sprache: SPR }),
    neu("p", "klein", X.wenige), T.genreBalken(D.genres_kurz, { legende: true, leitLabel: X.leitgenre, sprache: SPR }));
  zeig("rad", T.camelotRad(D.camelot, { aufKlick: geklickt, mitte: X.titel, sprache: SPR }));
  zeig("tempo", T.balken(D.tempo, { einheit: " BPM", jedes: Math.ceil(D.tempo.length / 7), titel: X.tempo, sprache: SPR }),
    aufklapp(T.tabelle(X.tempo_kopf, D.tempo.map(function (d) { return [d.label, d.n]; }), { sprache: SPR })));
  zeig("energie", T.balken(D.energie, { hoehe: 112, titel: X.energie, sprache: SPR }));
  zeig("lufs", T.balken(D.lufs, { hoehe: 112, jedes: 2, einheit: " LUFS", titel: X.lufs, sprache: SPR,
    dim: function (d) { return Number(d.label) > -9; } }));
  zeig("baender", T.balkenQuer(D.baender, { einheit: " %", sprache: SPR }));

  var mix = T.mixpunkte(D.kurven.lautheit, D.dauer), chips = neu("div", "zeile");
  if (mix) [["intro", mix.intro_s], ["hauptteil", mix.kern_s], ["outro", mix.outro_s]].forEach(function (x) {
    chips.appendChild(neu("span", "chip", X[x[0]] + " " + T.formatDauer(x[1])));
  });
  zeig("wellenform", T.wellenform(D.kurven, { dauer: D.dauer, mix: mix, hoehe: 116, sprache: SPR }), chips,
    neu("p", "klein", X.suchleiste), T.wellenform(D.kurven, { dauer: D.dauer, hoehe: 44, sprache: SPR }));

  var kurven = neu("div", "muster-kurven");
  [["lautheit", 0], ["einsatzstaerke", 1], ["helligkeit", 2], ["bass", 3]].forEach(function (x) {
    kurven.appendChild(T.verlauf(D.kurven[x[0]], { dauer: D.dauer, name: X.kurven[x[1]], sprache: SPR }));
  });
  zeig("verlauf", kurven);

  var klein = neu("div", "zeile");
  D.mini.forEach(function (x) { var l = neu("span", "klein", X.mini[x[0]] + " "); l.appendChild(T.mini(x[1], x[2], x[3], { sprache: SPR })); klein.appendChild(l); });
  var stufen = neu("div", "zeile"), plaketten = neu("div", "zeile"), i;
  [3, 5, 6, 8].forEach(function (e) { stufen.appendChild(T.energie(e, { sprache: SPR })); });   /* o · + · ++ · +++ */
  ["A", "B"].forEach(function (b) { for (i = 1; i <= 12; i++) plaketten.appendChild(T.tonartPlakette(i + b, { sprache: SPR })); });
  zeig("klein", klein, stufen, plaketten);

  /* Leerzustände: jede Funktion ohne Daten. */
  var leer = neu("div", "muster-kurven"), o = { sprache: SPR };
  [["netz", T.netz(null, o)], ["netzZwei", T.netzZwei(null, null, o)], ["genreBalken", T.genreBalken([], o)],
   ["landkarte", T.landkarte([], o)], ["camelotRad", T.camelotRad({}, o)], ["balken", T.balken([], o)],
   ["balkenQuer", T.balkenQuer(null, o)], ["wellenform", T.wellenform({}, o)], ["verlauf", T.verlauf(null, o)],
   ["mini", T.mini(null, 0, 9, o)], ["energie", T.energie(null, o)], ["tonartPlakette", T.tonartPlakette(null, o)],
   ["tabelle", T.tabelle([], [], o)]].forEach(function (x) {
    var feld = neu("div"); feld.appendChild(neu("div", "klein mono", x[0])); feld.appendChild(x[1]); leer.appendChild(feld);
  });
  zeig("leer", leer);

  /* Landkarte in echten Pixeln zeichnen, damit die Schrift auch schmal lesbar bleibt. */
  var kz = ziel("landkarte"), letzte = 0;
  function karte() {
    var b = Math.round(kz.clientWidth);
    if (!b || b === letzte) return;
    letzte = b;
    while (kz.firstChild) kz.removeChild(kz.firstChild);
    kz.appendChild(T.landkarte(D.landkarte, { aufKlick: geklickt, breite: b, hoehe: b < 600 ? 440 : Math.round(b * 0.5), sprache: SPR }));
  }
  karte();
  if (window.ResizeObserver) new ResizeObserver(karte).observe(kz); else window.addEventListener("resize", karte);
});
</script>
{% endblock %}