{% extends "basis.html" %}{% block titel %}{{ ex.seitentitel }}{% endblock %}{% block koerperklasse %} class="breit"{% endblock %}{% block hauptklasse %} class="breit"{% endblock %}{% block inhalt %}
{# Export-Editor (28.10.2026, Prototyp B „Track im Fokus“ + „Als Text bearbeiten“/„Alle n“ aus A; Konzept und Prototypen in
   .superpowers/sdd/2026-10-27-export-editor/). Drei Spalten 23,6 · 52,8 · 23,6 (goldener Schnitt): links Bauen, Mitte JETZT
   (ein Track, vorher → nachher, links → rechts = Zeit), rechts Ausgeben. Unter 821 px drei Schritte als Reiter mit fester
   Weiter-Leiste. Ohne Skript steht der Rahmen mit Hinweis; export_editor.js zeichnet alles (nur textContent/DOM, keine
   Inline-Skripte). Die Konfiguration reist als JSON-Datenblock. #}
<div class="ee" id="ee" data-start="{{ start_ziel }}">
<header class="ee-kopf">
  <p class="eyebrow">{{ ex.eyebrow }}</p>
  <h1 id="ee-h1">{{ ex.titel }}</h1>
  <p class="leise ee-lead">{{ ex.lead }}</p>
  <noscript><p class="hinweis">{{ t.js_noetig if t.js_noetig is defined else ex.fehler }}</p></noscript>
</header>
<div class="ee-reiter" role="tablist" aria-label="{{ ex.tabs_name }}" hidden>
  {% for k in ["bau", "pruef", "aus"] %}<button role="tab" type="button" id="ee-tab-{{ k }}" aria-controls="ee-p-{{ k }}" aria-selected="{{ 'true' if loop.first else 'false' }}"{% if not loop.first %} tabindex="-1"{% endif %}>{{ ex.tabs[loop.index0] }}</button>{% endfor %}
</div>
<div class="ee-buehne">
  <section class="karte ee-panel ee-bau" id="ee-p-bau" aria-labelledby="ee-h-bau">
    <h2 id="ee-h-bau">{{ ex.h_bauen }}</h2>
    <h3>{{ ex.vorlagen_h }}</h3>
    <div class="ee-bausteine" id="ee-bausteine" role="group" aria-label="{{ ex.vorlagen_h }}"></div>
    <details class="ee-eigene" id="ee-eigene"><summary>{{ ex.eigene_h }}</summary>
      <div class="ee-eigene-innen"><ul id="ee-eigene-liste"></ul>
        <label class="ee-feld">{{ ex.eigene_name }}<input type="text" id="ee-eigene-name" maxlength="60" autocomplete="off"></label>
        <button type="button" class="knopf klein" id="ee-eigene-speichern">{{ ex.eigene_speichern }}</button>
        <p class="klein" id="ee-eigene-info" aria-live="polite">{{ ex.gemerkt }}</p></div></details>
    <h3>{{ ex.kommentar_h }}</h3>
    <p class="klein">{{ ex.bau_hinweis }}</p>
    <div class="ee-bau-feld" id="ee-steine" role="group" aria-label="{{ ex.bau_name }}"></div>
    <div class="ee-schieben" id="ee-schieben" hidden><button class="knopf klein" type="button" data-s="-1">{{ ex.nach_vorn }}</button><button class="knopf klein" type="button" data-s="1">{{ ex.nach_hinten }}</button></div>
    <div class="ee-vorrat" id="ee-vorrat" role="group" aria-label="{{ ex.vorrat_name }}"></div>
    <details class="ee-text" id="ee-text"><summary>{{ ex.text_h }}</summary>
      <div class="ee-text-innen" id="ee-text-innen"></div>
      <p class="klein">{{ ex.text_hilfe }}</p></details>
    <details class="ee-filter" id="ee-filter"><summary>{{ ex.filter_h }}</summary>
      <p class="klein">{{ ex.filter_text }}</p><div id="ee-filter-innen" class="ee-filter-innen"></div>
      <p class="klein">{{ ex.filter_beispiel }}</p><p class="ee-beispiel mono" id="ee-filter-beispiel"></p></details>
    <h3>{{ ex.felder_h }}</h3>
    <div id="ee-zeilen"></div>
    <h3>{{ ex.ordnung_h }}</h3>
    <label class="ee-feld" for="ee-ordnung"><span class="klein" id="ee-ordnung-hilfe"></span></label>
    <select id="ee-ordnung" class="ee-wahl"></select>
  </section>

  <section class="karte ee-panel ee-pruef" id="ee-p-pruef" aria-labelledby="ee-h-pruef">
    <h2 id="ee-h-pruef" class="unsichtbar">{{ ex.h_pruefen }}</h2>
    <div class="ee-nav"><button class="knopf ee-pfeil" type="button" id="ee-zurueck" aria-label="{{ ex.voriger }}">‹</button>
      <p class="ee-fallname" id="ee-fallname" aria-live="polite"></p>
      <button class="knopf ee-pfeil" type="button" id="ee-vor" aria-label="{{ ex.naechster }}">›</button></div>
    <div class="ee-punkte" id="ee-punkte" role="group" aria-label="{{ ex.faelle_name }}"></div>
    <div class="ee-track" id="ee-track"></div>
    <div class="ee-vn" id="ee-vn"></div>
    <details class="ee-alle" id="ee-alle"><summary id="ee-alle-summe"></summary><ol id="ee-alleliste"></ol>
      <button type="button" class="knopf klein" id="ee-alle-mehr" hidden>{{ ex.mehr }}</button></details>
  </section>

  <section class="karte ee-panel ee-aus" id="ee-p-aus" aria-labelledby="ee-h-aus">
    <h2 id="ee-h-aus">{{ ex.h_ausgeben }}</h2>
    <dl class="ee-zaehler" id="ee-zaehler" aria-live="polite"></dl>
    <fieldset class="ee-gruppe"><legend>{{ ex.umfang_h }}</legend><div id="ee-umfang"></div>
      <div id="ee-listen" class="ee-listen" role="group" aria-label="{{ ex.listen_name }}" hidden></div>
      <p class="klein" id="ee-neu-hinweis" hidden>{{ ex.neu_hinweis }}</p></fieldset>
    <fieldset class="ee-gruppe"><legend>{{ ex.ziele_name }}</legend><div class="ee-ziele" id="ee-ziele"></div></fieldset>
    {# Grid-Export (31.10.2026): Schalter „Beatgrid mitgeben“ nur für XML und Paket, Vorgabe aus – static/grid_export.js #}
    <div class="ee-grid" id="ee-grid" hidden></div>
    <div class="ee-zielordner" id="ee-zielordner">
      <label class="ee-feld" for="ee-ordner-feld"><b>{{ ex.zielordner_h }}</b></label>
      <input type="text" id="ee-ordner-feld" placeholder="/Users/…/Music" autocomplete="off" spellcheck="false" maxlength="500" aria-describedby="ee-ordner-hilfe ee-ordner-os">
      <p class="klein" id="ee-ordner-hilfe">{{ ex.zielordner_hilfe }}</p>
      <p class="klein mono" id="ee-ordner-os">{{ ex.zielordner_os.mac }}{% if not mac_store %} · {{ ex.zielordner_os.win }}{% endif %}</p>
      <p class="ee-warn" id="ee-ordner-fehlt" hidden>{{ ex.zielordner_fehlt }}</p>
    </div>
    <p class="klein">{{ ex.backup }}</p>
    <button class="knopf voll ee-los" type="button" id="ee-los"></button>
    <div class="ee-lade" id="ee-lade"></div>
    <p class="ee-warn" id="ee-fehler" role="alert" hidden></p>
    <p class="klein" id="ee-netz" role="status" aria-live="polite" hidden></p>
    {# Mac-App-Store-Fassung (11.11.2026): kein Gesamtpaket – der Rahmen bleibt leer stehen (export_editor.js greift darauf zu) #}<div class="ee-teile" id="ee-teile" hidden>{% if not mac_store %}<h3>{{ ex.teile_h }}</h3><p class="klein">{{ ex.teile_hilfe }}</p>{% endif %}
      <ol id="ee-teileliste"></ol><p class="klein" id="ee-ohne-datei" hidden></p>{% if not mac_store %}<p class="klein">{{ ex.nur_lesen }}</p>{% endif %}</div>
    <div class="ee-tags" id="ee-tags" hidden><p class="ee-warn" id="ee-tags-hinweis" hidden></p><div id="ee-tags-panel"></div><div id="ee-tags-journal"></div></div>
    {# Desktop v2 (Bitte 3): „Mit Pfaden“ und „In Dateien schreiben“ – nur im App-Fenster, static/desktop_extras.js füllt es #}
    {% if desktop_app %}<div class="dk-ee" id="dk-ee"{% if mac_store %} data-nl="1"{% endif %} hidden></div>{% endif %}
  </section>
</div>

<section class="karte ee-anleitung" id="ee-anleitung" aria-labelledby="ee-h-anl">
  <h2 id="ee-h-anl">{{ ex.anleitung_h }}</h2>
  <p class="leise">{{ ex.anleitung_lead }}</p>
  <div id="ee-anl-innen" aria-live="polite"><p class="klein">{{ ex.laedt }}</p></div>
</section>
<div class="ee-weiter" id="ee-weiter-leiste" hidden><span class="klein" id="ee-kurz"></span><button class="knopf voll" type="button" id="ee-weiter"></button></div>
<dialog class="ee-dialog" id="ee-dlg" aria-labelledby="ee-dlg-t"><h2 id="ee-dlg-t"></h2><div id="ee-dlg-inhalt"></div></dialog>
<form method="post" action="/api/v1/paket/teil" id="ee-teilform" hidden><input type="hidden" name="auftrag" id="ee-teilauftrag"></form>
</div>
<script type="application/json" id="ee-t">{{ ex | tojson }}</script>
<script type="application/json" id="ee-konfig">{{ konfig | tojson }}</script>
<script src="/static/musikordner.js" defer></script>
{% if not mac_store %}<script src="/static/tags_schreiben.js" defer></script>{% endif %}
<script src="/static/grid_export.js" defer></script>
<script src="/static/export_editor.js" defer></script>
{% endblock %}