{% extends "basis.html" %}
{# Fehler- und Wartungsseiten im DJ-Ton (23.10.2026, Variante A „CDJ-Display“; Prototypen und Entscheidung in
   .superpowers/sdd/2026-10-23-fehlerseiten/). art: "404" Emergency Loop, "500" Feedback mit Fehlerkennung, "503" Wartung
   „Line Check“ mit Restzeit aus Retry-After. Links der Text (Eyebrow mit echtem Code, Titel, Lead, Aktionen) – er ist die
   eigentliche Hilfe und geht ohne Bild, ohne Skript und mit Hilfstechnik; rechts das Gerät als Bild (aria-hidden).
   Nie der angefragte Pfad, nie Text aus der Ausnahme. Keine weiche Navigation (der Status ist nie 200).
   `ruhig` (24.10.2026): die übrigen Fehler (x.ruhig[art], `code` = echter Status) – derselbe Textteil, eine Spalte, statt des
   Geräts nur ein kleines, stilles Display mit dem Code; `lead` = eigener Text der Stelle, `knoepfe` = Aktionen (erste voll). #}
{% set f = x.ruhig[art] if ruhig else x[art] %}
{% block titel %}{{ f.titel[0] }} – Timbre{% endblock %}
{% block hauptklasse %} class="fs-haupt"{% endblock %}
{% block inhalt %}
{% if ruhig %}
<div class="fs fs-ruhig fs-s{{ code }}">
<section class="fs-buehne" aria-labelledby="fs-h1">
<div class="fs-text">
  <p class="fa-mini" aria-hidden="true"><span class="fa-mini-err">ERR</span><b>{{ code }}</b><span>{{ f.display }}</span></p>
  <p class="fs-eyebrow">{{ f.eyebrow | replace('{code}', code | string) }}</p>
  <h1 id="fs-h1" class="fs-titel" tabindex="-1">{{ f.titel[0] }} <em>{{ f.titel[1] }}</em></h1>
  <p class="fs-lead">{{ lead or f.lead }}</p>
  <p class="fs-knoepfe">{% for kn in knoepfe %}{% if kn.text == "zurueck" %}<button type="button" class="knopf" data-fs-zurueck="{{ kn.href }}" data-nur-js>{{ x.knopf.zurueck }}</button>{% else %}<a class="knopf{{ ' voll' if loop.first }}" href="{{ kn.href }}">{{ x.knopf[kn.text] }}</a>{% endif %}{% endfor %}</p>
</div>
</section>
</div>
{% else %}
<div class="fs fs-va fs-s{{ art }}">
<section class="fs-buehne fs-zwei" aria-labelledby="fs-h1">
<div class="fs-text">
  <p class="fs-eyebrow">{{ f.eyebrow }}</p>
  <h1 id="fs-h1" class="fs-titel" tabindex="-1">{{ f.titel[0] }} <em>{{ f.titel[1] }}</em></h1>
  <p class="fs-lead">{{ f.lead }}</p>
  {% set k = x.knopf %}
  {% if art == "404" %}
    {% if nutzer and not gesperrt %}
    <form class="fs-suche" action="/bibliothek" method="get" role="search"><label for="fs-suche">{{ x.suche_label }}</label>
      <span class="fs-suchzeile"><input id="fs-suche" name="suche" type="search" maxlength="100" placeholder="{{ x.suche_platzhalter }}"><button type="submit" class="knopf">{{ k.suche }}</button></span></form>
    <p class="fs-knoepfe"><a class="knopf voll" href="/bibliothek">{{ k.library }}</a><button type="button" class="knopf" data-fs-zurueck="/bibliothek" data-nur-js>{{ k.zurueck }}</button></p>
    {% else %}
    <p class="fs-knoepfe"><a class="knopf voll" href="/">{{ k.start }}</a><button type="button" class="knopf" data-fs-zurueck="/" data-nur-js>{{ k.zurueck }}</button></p>
    {% endif %}
  {% elif art == "500" %}
    <p class="fs-knoepfe"><a class="knopf voll" href="">{{ k.nochmal }}</a>{% if nutzer and not gesperrt %}<a class="knopf" href="/bibliothek">{{ k.library }}</a>{% else %}<a class="knopf" href="/">{{ k.start }}</a>{% endif %}<a class="knopf" href="mailto:hello@timbremusic.app?subject={{ x.melden_betreff | replace('{k}', kennung) | urlencode }}">{{ k.melden }}</a></p>
    <p class="fs-kennung"><span>{{ x.kennung }}: <b class="fs-code">{{ kennung }}</b></span> <span>{{ x.kennung_hilfe }}</span></p>
  {% else %}
    {% set w = f %}{% set mn = ((retry + 59) // 60) %}
    <div class="fs-rueck" data-retry="{{ retry }}">
      <p class="fs-rueck-zeit"><b data-f="rueck">{% if retry < 45 %}{{ w.rueck_gleich }}{% else %}{{ w.rueck | replace('{zeit}', w.minute if mn == 1 else w.minuten | replace('{n}', mn | string)) }}{% endif %}</b> <span class="fs-uhr" data-f="uhr" data-nur-js></span></p>
      <p class="fs-auto" data-nur-js><span data-f="auto">{{ w.auto | replace('{n}', '60') }}</span> <button type="button" class="knopf klein" data-fs-auto>{{ w.anhalten }}</button></p>
      <noscript><p class="fs-auto">{{ w.ohne_js }}</p></noscript>
    </div>
    <ul class="fs-fakten">{% for z in w.fakten %}<li>{{ z }}</li>{% endfor %}</ul>
    <p class="fs-knoepfe"><a class="knopf voll" href="">{{ k.nochmal }}</a></p>
    <p class="unsichtbar" role="status" aria-live="polite" id="fs-ansage"></p>
  {% endif %}
</div>
<div class="fs-bildfeld">
  <figure class="fs-bild" aria-hidden="true"><div class="fa-cdj">
    <div class="fa-lcd">
    {% set d = f.display %}
    {% if art == "404" %}
      <div class="fa-kopfzeile"><span class="fa-deck">{{ d.deck }}</span><span class="fa-badge fa-blink">{{ d.badge }}</span><span class="fa-rest">{{ d.rest }}</span></div>
      <p class="fa-titelzeile">{{ d.zeile }}</p>
      <div class="fa-welle"><svg viewBox="0 0 384 64" preserveAspectRatio="none"><path d="M1 8v47 M5 22v19 M9 22v21 M13 18v27 M17 22v21 M21 22v20 M25 10v43 M29 22v21 M33 23v18 M37 17v30 M41 23v18 M45 23v18 M49 8v48 M53 20v23 M57 23v18 M61 18v28 M65 22v21 M69 20v23 M73 7v50 M77 22v20 M81 20v23 M85 19v26 M89 20v23 M93 22v19 M97 10v44 M101 23v18 M105 22v19 M109 16v33 M113 22v19 M117 22v21 M121 6v51 M125 22v20 M129 22v21 M133 18v27 M137 23v18 M141 22v19 M145 6v52 M149 22v20 M153 22v19 M157 16v31 M161 22v20 M165 22v19 M169 6v53 M173 21v22 M177 22v19 M181 16v31 M185 22v21 M189 20v23 M193 6v52 M197 22v19 M201 20v23 M205 18v27 M209 22v20 M213 21v22 M217 10v44 M221 22v21 M225 23v18 M229 16v32 M233 21v22 M237 22v21 M241 5v54 M245 22v19 M249 21v22 M253 16v31 M257 22v21 M261 22v20 M265 5v54 M269 20v23 M273 22v20 M277 16v32 M281 23v18 M285 21v22 M289 6v51 M293 20v23 M297 21v22 M301 18v29 M305 22v20 M309 21v22 M313 11v42 M317 22v20 M321 22v19 M325 18v27 M329 23v18 M333 21v22 M337 10v44 M341 22v19 M345 22v20 M349 15v34 M353 23v18 M357 22v20 M361 7v50 M365 20v23 M369 21v22 M373 15v34 M377 22v19 M381 22v20"/></svg><div class="fa-loop"><i class="fa-zeiger"></i></div></div>
      <div class="fa-fusszeile"><ol class="fa-beats"><li>1</li><li>2</li><li>3</li><li>4</li></ol><span>{{ d.beats }}</span><span class="fa-bpm">BPM <b>128.0</b></span></div>
    {% elif art == "500" %}
      <div class="fa-kopfzeile"><span class="fa-deck">{{ d.deck }}</span><span class="fa-badge fa-rot fa-blink">{{ d.badge }}</span><span class="fa-rest">+6 dB</span></div>
      <p class="fa-titelzeile">{{ d.zeile }}</p>
      <div class="fa-pegel">{% for kanal in "LR" %}<div class="fa-kanal"><span>{{ kanal }}</span><div class="fa-meter"><i class="fa-deckel" style="--d:{{ loop.index0 }}"></i></div></div>{% endfor %}<div class="fa-clip"><b class="fa-clipled"></b>{{ d.clip }}</div></div>
    {% else %}
      <div class="fa-kopfzeile"><span class="fa-deck">{{ d.deck }}</span><span class="fa-badge">{{ d.badge }}</span><span class="fa-rest" data-f="lcd-rest">-{{ '%02d:%02d' | format(retry // 60, retry % 60) }}</span></div>
      <p class="fa-titelzeile">{{ d.zeile }}</p>
      <div class="fa-pegel vier">{% for kanal in "1234" %}<div class="fa-kanal"><span>{{ kanal }}</span><div class="fa-meter"><i class="fa-deckel ruhig" style="--d:{{ loop.index0 }}"></i></div></div>{% endfor %}</div>
    {% endif %}
    </div>
    <div class="fa-tasten"><span class="fa-taste">CUE</span><span class="fa-taste play">&#9654;&#10074;&#10074;</span><span class="fa-taste loop">{{ "RELOOP" if art == "404" else "IN" }}</span></div>
  </div></figure>
  <button type="button" class="fs-halt" data-fs-halt data-nur-js aria-label="{{ x.bewegung_aus }}"><span class="fs-halt-i" aria-hidden="true"></span><span class="fs-halt-t">{{ x.bewegung_aus }}</span></button>
</div>
</section>
</div>
{% endif %}
<script type="application/json" id="fs-daten">{{ fehler_daten | tojson }}</script>
<script src="/static/fehler.js" defer></script>
{% endblock %}