{% extends "messung_basis.html" %}{% block titel %}{{ k.seite.titel }}{% endblock %}
{% block kopf %}<meta name="description" content="{{ k.seite.beschreibung_store if ios_app else k.seite.beschreibung }}">{% endblock %}
{% block css %}<link rel="stylesheet" href="/static/kniffe.css">
{% endblock %}{% block koerperklasse %} kniffe-seite{% endblock %}
{# Seite „Kniffe“ (Tutorial, 29.10.2026; Konzept .superpowers/sdd/2026-10-28-tutorial/, Ebene c): Weg Rein → Raus als Navigation
   (links → rechts = Zeit), fünf Gruppen mit je drei Karten (die erste groß, Demo : Text = 1,618 : 1), Plattform-Umschalter
   (radiogroup mit Pfeiltasten) für „So geht’s“, Tastenkarte 3 × 5, „Noch mehr Kniffe“ je Plattform, offene Frage nach fehlenden
   Kniffen. Ohne Skript lesbar (Rechner-Fassung, keine Demos). Keine Haken, Zähler oder Abzeichen. Texte: texte_kniffe.py. #}
{% block inhalt %}{% set ks = k.seite %}
<div class="ks" id="ks" data-pf="w">
<section class="ks-held" aria-labelledby="ks-t">
  <div><p class="kn-eb">{{ ks.eb }}</p><h1 id="ks-t">{{ ks.h1 }}</h1><p class="lead">{{ ks.lead }}</p></div>
  <div class="kn-pf"><span class="kl" id="kn-pf-l">{{ ks.plattform }}</span><div role="radiogroup" aria-labelledby="kn-pf-l">{% for p in (("w", "h") if store_app else ("w", "h", "d")) %}<button type="button" role="radio" data-pf="{{ p }}" aria-checked="{{ 'true' if p == 'w' else 'false' }}" tabindex="{{ 0 if p == 'w' else -1 }}">{{ ks.pf[p] }}</button>{% endfor %}</div></div>
</section>
<nav class="ks-weg" aria-label="{{ ks.weg }}"><ol>{% for g in gruppen %}<li><a href="#g-{{ g.id }}"><span class="pkt" aria-hidden="true">{{ loop.index }}</span><b>{{ g.name }}</b><span class="u">{{ g.unter }}</span></a></li>{% endfor %}</ol></nav>
{% for g in gruppen %}
<section class="ks-gruppe" id="g-{{ g.id }}" aria-labelledby="gt-{{ g.id }}">
  <header><h2 id="gt-{{ g.id }}">{{ g.name }}</h2><p>{{ g.unter }}</p></header>
  <div class="ks-karten">{% for kn in g.kniffe %}
    <article class="ks-k" id="k-{{ kn.id }}" aria-labelledby="t-{{ kn.id }}">
      <div class="kn-demo" data-demo="{{ kn.demo }}" aria-hidden="true"></div>
      <h3 id="t-{{ kn.id }}">{{ kn.t }}</h3>
      <p>{{ kn.x }}</p>
      <p class="ks-so"><span class="kl">{{ ks.so }}</span><span>{% for p in (("w", "h") if store_app else ("w", "h", "d")) %}<span class="pfz{% if p == 'h' and kn.hn %} aus{% endif %}" data-pfz="{{ p }}"{% if p != 'w' %} hidden{% endif %}>{{ kn[p] }}{% if p == 'd' and kn.dk %}<span class="kommt">{{ ks.kommt }}</span>{% endif %}</span>{% endfor %}</span></p>
      <div class="ks-fz"><button class="kn-nochmal" type="button" data-nochmal aria-label="{{ k.ui.nochmal }}: {{ kn.t }}">↻ {{ k.ui.nochmal }}</button><a href="{{ kn.hilfe }}">{{ k.ui.hilfe }} →</a></div>
    </article>{% endfor %}
  </div>
</section>
{% endfor %}
<section class="ks-gruppe" id="tasten" aria-labelledby="tt">
  <header><h2 id="tt">{{ ks.tasten_t }}</h2><p>{{ ks.tasten_x }}</p></header>
  <div class="kn-tk">{% for spalte in k.tasten %}<section aria-labelledby="tg{{ loop.index }}"><h3 id="tg{{ loop.index }}">{{ ks.tg[loop.index0] }}</h3><dl>{% for taste, was in spalte %}<dt>{% for x in taste.split(" ") %}<kbd>{{ x }}</kbd>{% endfor %}</dt><dd>{{ was }}</dd>{% endfor %}</dl></section>{% endfor %}</div>
</section>
<section class="ks-gruppe" id="mehr-kniffe" aria-labelledby="mt">
  <header><h2 id="mt">{{ ks.weitere_t }}</h2><p>{{ ks.weitere_x }}</p></header>
  <ul class="ks-mehr">{% for w in weitere %}<li data-pf="{{ w.pf }}"{% if 'w' not in w.pf %} hidden{% endif %}><b>{{ w.t }}</b><span>{{ w.x }}</span></li>{% endfor %}</ul>
</section>
<section class="ks-fuss" aria-labelledby="ft">
  {% set teile = ks.fuss_x.split("{mail}") %}
  <div><h2 id="ft">{{ ks.fuss_t }}</h2><p>{{ teile[0] }}<a href="mailto:{{ support }}">{{ support }}</a>{{ teile[1] }}</p></div>
  <div class="kn-reihe"><a class="kn-k voll" href="/hilfe" data-einstieg-start>{{ k.einstieg.nochmal }}</a><a class="kn-k" href="/hilfe">{{ ks.hilfe }}</a></div>
</section>
</div>
<script type="application/json" id="kniffe-demo-t">{{ k.demo | 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 %}
{% endblock %}
{% block skripte %}<script src="/static/kniffe_demos.js" defer></script>
{% if not einstieg_kopf %}<script src="/static/einstieg.js" defer></script>{% endif %}
<script src="/static/kniffe.js" defer></script>{% endblock %}