{% extends "messung_basis.html" %}{% block titel %}{{ h.titel }}{% endblock %}
{% block kopf %}<meta name="description" content="{{ h.beschreibung }}">{% set ih = ios_hinweis() %}{% if ih and ih.app_id %}<meta name="apple-itunes-app" content="app-id={{ ih.app_id }}">{% endif %}{% endblock %}
{% block css %}<link rel="stylesheet" href="/static/info.css">
{% endblock %}{% block koerperklasse %} info-hilfe{% endblock %}
{% set lampe_sinn = t.leit.lampe_sinn_info %}
{# Hilfe als Variante A „Lesepult“ (Maintainer 22.10.2026, Mockup .superpowers/sdd/2026-10-21-stufe2-infoseiten/): goldene Teilung
   416 | 672, links das Verzeichnis (klebt, mit der Zahl der Fragen und dem Abschnitt im Bild), rechts die Lesespalte auf einer
   Platte; unter 1184 px eine klebende Inhaltsleiste mit dem Namen des Abschnitts. Dazu „Alle aufklappen“ aus C für die FAQ.
   Inhalte: timbre_api/hilfe_inhalt.py (alle Anker bleiben, App und „?“-Links zeigen darauf). Alles steht fertig im HTML und ist
   ohne JavaScript lesbar – auch die drei Schema-Bilder (früher hidden + diagramme.js). Die Suche steht sichtbar im HTML
   (ohne Skript blendet data-nur-js sie aus), die Trefferzeile hat immer ihre Höhe: beim Laden verschiebt sich nichts. #}
{% block lampe %}{% if lampe_an %}<canvas class="lava" data-anteile="{{ lava_anteile }}"{% if eb.lavafarben %} data-farben="{{ eb.lavafarben | join(',') }}"{% endif %} aria-hidden="true"></canvas>{% endif %}{% endblock %}
{% block weich %} data-weich{% endblock %}{% block inhalt %}
{% macro verzeichnis(zahlen=false) %}<ol><li><a href="#so-gehts">{{ h.howto }}</a><ol>{% for s in h.strecken %}<li><a href="#{{ s.anker }}">{{ s.titel }}</a></li>{% endfor %}{% if h.arbeit %}<li><a href="#{{ h.arbeit.anker }}">{{ h.arbeit.titel }}</a></li>{% endif %}</ol></li><li><a href="#faq">{{ h.faq }}</a><ol>{% for g in h.faq_gruppen %}<li><a href="#{{ g.anker }}">{{ g.titel }}{% if zahlen %} <span class="n">{{ g.fragen | length }}</span>{% endif %}</a></li>{% endfor %}</ol></li></ol>{% endmacro %}
{# Tutorial „Kniffe“ (29.10.2026): oben im Verzeichnis „Einstieg nochmal ansehen“ (static/einstieg.js; ohne Skript zur Seite Kniffe) und „Alle Kniffe“ #}
{% macro kniffe_start() %}<p class="kn-hilfe-start"><a class="kn-k voll" href="/kniffe" data-einstieg-start>{{ kniffe_k.hilfe.einstieg }}</a><a class="kn-k" href="/kniffe">{{ kniffe_k.hilfe.alle }}</a></p>{% endmacro %}
{% macro paare(zeilen, klasse="paare") %}<dl class="{{ klasse }}">{% for a, b in zeilen %}<div><dt>{{ a }}</dt><dd>{{ b }}</dd></div>{% endfor %}</dl>{% endmacro %}
{% macro tabelle(tb, anker) %}<div class="kasten"><h4 id="{{ anker }}-tab">{{ tb.titel }}</h4><table class="umrechnung" aria-labelledby="{{ anker }}-tab"><tbody>{% for a, b in tb.zeilen %}<tr><th scope="row">{{ a }}</th><td>{{ b }}</td></tr>{% endfor %}</tbody></table><p class="etikett">{{ tb.text }}</p></div>{% endmacro %}
<div class="spalte seitenkopf"><div class="heldtext"><h1 class="titel" id="oben">{{ h.h1 }}</h1><p class="lead">{{ h.einleitung }}</p>
  {# Suche (UX-Paket 1, H19): sichtbar im HTML, nur mit Skript (data-nur-js); hilfesuche.js sucht in Strecken und Fragen #}
  <div class="suche" id="hilfe-suchkasten" role="search" data-nur-js><label class="unsichtbar" for="hilfe-suche">{{ h.suche.label }}</label><input type="search" id="hilfe-suche" data-suche aria-keyshortcuts="/" placeholder="{{ h.suche.platzhalter }}" autocomplete="off" maxlength="80" enterkeyhint="search"><p class="etikett suchzahl" id="hilfe-suchzahl" aria-live="polite"></p></div>
</div></div>
<div class="spalte pult">
  <details class="inhaltsleiste" id="inhaltsleiste"><summary><span class="il-name">{{ h.inhalt }}</span><span class="il-jetzt" id="il-jetzt" aria-hidden="true"></span></summary><nav aria-label="{{ h.inhalt_kurz }}">{{ kniffe_start() }}{{ verzeichnis() }}</nav></details>
  <nav class="randnav" id="randnav" aria-label="{{ h.inhalt }}"><p class="etikett">{{ h.inhalt }}</p>{{ kniffe_start() }}{{ verzeichnis(true) }}</nav>
  <div class="lesespalte">
    <section id="so-gehts" aria-labelledby="so-gehts-h"><h2 class="titel" id="so-gehts-h">{{ h.howto }}</h2>
      {% for s in h.strecken %}
      <article class="strecke" id="{{ s.anker }}" aria-labelledby="{{ s.anker }}-h"><h3 class="titel2" id="{{ s.anker }}-h"><span class="nr etikett zahl" aria-hidden="true">{{ "%02d" % loop.index }}</span> {{ s.titel }}</h3>
        {% if s.bald %}<p><span class="bald">{{ h.bald }}</span></p>{% endif %}
        <p class="vorspann">{{ s.text }}</p>
        {% if s.block %}<div class="kasten"><h4>{{ s.block.titel }}</h4>{{ paare(s.block.zeilen, "paare code") }}<p class="etikett">{{ s.block.text }}</p></div>{% endif %}
        <ol class="schrittliste">{% for kopf, text in s.schritte %}<li><b>{{ kopf }}</b> <span>{{ text }}</span></li>{% endfor %}</ol>
        {% if s.bild == "filtern" %}<figure class="schemabild"><figcaption class="etikett"><span class="herkunft schema">{{ h.beispiel }}</span></figcaption><ul class="chipzeile">{% for c in s.chips %}<li class="chip"><small>{{ c[0] }}</small> <b>{{ c[1] }}</b></li>{% endfor %}</ul></figure>
        {% elif s.bild == "export" %}<figure class="schemabild"><ul class="exportkarten">{% for e in s.karten %}<li><b>{{ e[0] }}</b><span>{{ e[1] }}</span></li>{% endfor %}</ul></figure>
        {% elif s.bild == "track" %}<figure class="schemabild"><figcaption class="etikett"><span class="herkunft schema">{{ h.schema }}</span></figcaption><div class="band" role="img" aria-label="{{ bild.band_label }}">{% for n, p in bild.genres %}<i style="flex:{{ p }}"></i>{% endfor %}</div><ul class="bandlegende" aria-hidden="true">{% for n, p in bild.genres %}<li>{{ n }} <b>{{ p }} %</b></li>{% endfor %}</ul><p class="werte">{{ bild.energie }} {{ bild.key }}</p></figure>
        {% elif s.bild == "passend" %}<figure class="schemabild"><figcaption class="etikett"><span class="herkunft schema">{{ h.schema }}</span></figcaption><p class="werte">{{ bild.key_gross }} <span aria-hidden="true">→</span> {% for k in bild.nachbarn %}{{ k }} {% endfor %}</p></figure>{% endif %}
        <p class="ergebnis"><b>{{ h.ergebnis }}</b> {{ s.ergebnis }}</p>
        {% if s.zusatz %}<p class="zusatz">{{ s.zusatz }}</p>{% endif %}
        {% if s.merk %}<div class="kasten"><h4>{{ s.merk.titel }}</h4>{{ paare(s.merk.punkte) }}</div>{% endif %}
        {% if s.listen %}<div class="kasten"><h4>{{ s.listen_titel }}</h4><p class="etikett">{{ s.listen_text }}</p><ul class="regelliste">{% for l in s.listen %}<li class="regel"><p class="regelkopf"><span class="etikett">{{ l.art }}</span> <b>{{ l.name }}</b></p><ul class="regeln" aria-label="{{ l.name }}">{% for r in l.regeln %}<li>{% if not loop.first %}<i>{{ s.regel_und }}</i> {% endif %}<code>{{ r }}</code></li>{% endfor %}</ul><p>{{ l.text }}</p><p class="etikett">{{ s.braucht }}: {{ l.braucht }}</p></li>{% endfor %}</ul></div>
        <div class="kasten"><h4>{{ s.fallen_titel }}</h4>{{ paare(s.fallen) }}</div>{% endif %}
        {# Kasten „Kniffe dazu“: 1–3 Kniffe der Seite /kniffe zu dieser Strecke, sonst nur „Alle Kniffe“ #}
        <aside class="kn-dazu" aria-labelledby="{{ s.anker }}-kn"><h4 id="{{ s.anker }}-kn">{{ kniffe_k.hilfe.kasten }}</h4><ul>{% for kn in kniffe_dazu.get(s.anker, []) %}<li><a href="/kniffe#k-{{ kn.id }}">{{ kn.t }}</a></li>{% endfor %}<li><a href="/kniffe">{{ kniffe_k.hilfe.alle }} →</a></li></ul></aside>
      </article>
      {% endfor %}
      {% if h.arbeit %}<section class="arbeit" id="{{ h.arbeit.anker }}" aria-labelledby="{{ h.arbeit.anker }}-h"><h3 class="titel2" id="{{ h.arbeit.anker }}-h">{{ h.arbeit.titel }}</h3><p class="vorspann">{{ h.arbeit.text }}</p>{{ paare(h.arbeit.punkte) }}</section>{% endif %}
    </section>
    <section id="faq" aria-labelledby="faq-h"><h2 class="titel" id="faq-h">{{ h.faq }}</h2>
      <p class="vorspann">{{ h.faq_text }}</p>
      {# „Alle aufklappen“ aus Variante C: links auf der Satzkante unter dem Vorspann (8-px-Raster), nur mit Skript #}
      <div class="knopfreihe"><button type="button" class="knopf klein" data-alle="faq" data-auf="{{ h.alle_auf }}" data-zu="{{ h.alle_zu }}" aria-controls="faq" data-nur-js>{{ h.alle_auf }}</button></div>
      {% for g in h.faq_gruppen %}
      <section class="gruppe" id="{{ g.anker }}" aria-labelledby="{{ g.anker }}-h"><h3 class="titel2" id="{{ g.anker }}-h">{{ g.titel }}</h3>
        {% for f in g.fragen %}<details class="aufklapp frage" id="{{ f.anker }}"><summary><span>{{ f.frage }}</span></summary><div class="antwort">{% if f.bald %}<p><span class="bald">{{ h.bald }}</span></p>{% endif %}<p>{{ f.antwort }}{% if f.link %} <a href="{{ f.link[0] }}">{{ f.link[1] }} →</a>{% endif %}</p>{% if f.tabelle %}{{ tabelle(f.tabelle, f.anker) }}{% endif %}<p class="etikett"><a class="anker" href="#{{ f.anker }}">{{ h.anker }}</a></p></div></details>
        {% endfor %}
      </section>
      {% endfor %}
      {# Kniffe für die Suche (hilfesuche.js sucht in details.frage): kurz hier, ausführlich auf /kniffe #}
      <section class="gruppe" id="kniffe-kurz" aria-labelledby="kniffe-kurz-h"><h3 class="titel2" id="kniffe-kurz-h">{{ kniffe_k.hilfe.gruppe }}</h3><p class="vorspann">{{ kniffe_k.hilfe.gruppe_text }}</p>
        {% for kn in kniffe_liste %}<details class="aufklapp frage kniff-frage" id="kniff-{{ kn.id }}"><summary><span>{{ kn.t }}</span></summary><div class="antwort"><p>{{ kn.x }} <a href="/kniffe#k-{{ kn.id }}">{{ kniffe_k.nav }} →</a></p></div></details>
        {% endfor %}
      </section>
      {# Hinweis „Timbre fürs iPhone und iPad“ (13.11.2026): nur mit TIMBRE_IOS_STORE_URL (app._ios_hinweis) – ist sie leer, steht hier nichts #}{% set ih = ios_hinweis() %}{% if ih %}<p class="kontakt" id="ios-laden">{{ t.ios_hinweis.text }} <a href="{{ ih.url }}" rel="noopener">{{ t.ios_hinweis.knopf }}</a></p>
      {% endif %}<p class="kontakt">{{ h.kontakt }} <a href="mailto:{{ support }}">{{ support }}</a>.</p>
    </section>
    <p class="nachoben etikett"><a href="#oben">{{ h.nach_oben }}</a></p>
  </div>
</div>
<script type="application/ld+json">{{ faq_ld | tojson }}</script>
<script type="application/json" id="hilfe-such-t">{{ h.suche | tojson }}</script>
{% set einstieg_kopf = nutzer and not gesperrt and einstieg_faellig(eb) %}{% if not einstieg_kopf %}<script type="application/json" id="einstieg-t"{% if nutzer and not gesperrt %} data-konto="{{ nutzer | konto_merker }}"{% endif %}>{{ einstieg_t | tojson }}</script>{% endif %}
{# „Einstieg nochmal ansehen“ (31.10.2026): einstieg.js und kniffe_demos.js lädt hilfe.js erst beim Klick über den Lader (static/lader.js) #}
<script type="application/json" id="lader-t">{{ {"kniffe_demos.js": statisch_url("kniffe_demos.js"), "einstieg.js": statisch_url("einstieg.js")} | tojson }}</script>
{% endblock %}
{% block skripte %}<script src="/static/lader.js" defer data-seite></script>
<script src="/static/hilfe.js" defer data-seite></script>
<script src="/static/hilfesuche.js" defer data-seite></script>{% endblock %}