{# Erst-Einrichtung „Wie soll Timbre aussehen?“ (24.10.2026, Variante B, Entscheidung Maintainer): kompakter Block – im Abschluss
   „Eingerichtet.“ des Sicherheitsassistenten (eingebettet, mit „Noch eins“ und h2) und allein auf /konto/aussehen.
   Vorauswahl Glut + Dunkel (= Standard), Modus als 3er-Block + „Oder: wie dein Gerät“ als ruhige vierte Wahl (dieselbe
   Radiogruppe). „Weiter“ speichert die Wahl, „Überspringen“ nur den Merker; die Folge steht sichtbar darunter. Vorschau:
   eine Library-Zeile je Modus (bei Tageszeit/Gerät Tag und Nacht nebeneinander), die Seite selbst bleibt ruhig.
   Ohne Skript: Radios + Absenden; die Infozeile füllt static/aussehen.js (Wechselzeit aus der Zeitzone, nur im Browser). #}
{% macro icon(name) -%}
{%- if name == "dunkel" -%}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/></svg>
{%- elif name == "hell" -%}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/></svg>
{%- elif name == "tageszeit" -%}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M2.5 18h19M6.5 18a5.5 5.5 0 0 1 11 0M12 4.5v3M4.6 9.6l2 2M19.4 9.6l-2 2M9 21.5h6"/></svg>
{%- else -%}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l3.5 2"/></svg>
{%- endif -%}
{%- endmacro %}
{% macro block(t, ziel, nur_code, eingebettet) -%}
{%- set a = t.aussehen -%}
<form method="post" action="/konto/aussehen" class="ae-block{{ ' ae-eingebettet' if eingebettet else '' }}"{% if eingebettet %} aria-labelledby="ae-h2"{% endif %} data-aussehen data-t='{{ dict(a, d={"glut": "Glut", "buehne": "Bühnenblau", "klar": "Klar"}, m={"dunkel": t.modus_dunkel, "hell": t.modus_hell, "tageszeit": t.modus_tageszeit, "auto": t.modus_auto}) | tojson }}'>
  <input type="hidden" name="ziel" value="{{ ziel }}">{% if nur_code %}<input type="hidden" name="sicherheit" value="nur-code">{% endif %}
  {% if eingebettet %}<p class="an-marke">{{ a.marke }}</p><h2 id="ae-h2">{{ a.b_titel }}</h2>{% endif %}
  <fieldset><legend>{{ a.design }}</legend><div class="ae-chips">
    {%- for d, name in (("glut", "Glut"), ("buehne", "Bühnenblau"), ("klar", "Klar")) %}
    <label class="ae-chip"><input type="radio" name="design" value="{{ d }}"{% if d == "glut" %} checked{% endif %}><span class="ae-punkte ae-{{ d }}-dunkel" aria-hidden="true"><i></i><i></i><i></i></span>{{ name }}</label>
    {%- endfor %}
  </div></fieldset>
  <fieldset><legend>{{ a.modus }}</legend><div class="ae-chips">
    {%- for m in ("dunkel", "hell", "tageszeit") %}
    <label class="ae-chip"><input type="radio" name="modus" value="{{ m }}"{% if m == "dunkel" %} checked{% endif %} aria-describedby="ae-info">{{ icon(m) }}{{ t["modus_" ~ m] }}</label>
    {%- endfor %}
  </div>
  <label class="ae-geraet"><input type="radio" name="modus" value="auto" aria-describedby="ae-info"><span>{{ a.geraet }}</span></label>
  </fieldset>
  <p class="ae-info" id="ae-info">{{ icon("info") }}<span><span data-a>{{ a.i_dunkel }}</span><span data-b></span></span></p>
  <div class="ae-vorschau" data-zeige="dunkel" aria-hidden="true">
    {%- for k, m in (("ae-h", "hell"), ("ae-d", "dunkel")) %}
    <div class="ae-teil {{ k }} ae-glut-{{ m }}" data-halbe="{{ m }}"><span class="ae-kopf">{{ icon(m) }}{{ a.tag if m == "hell" else a.nacht }}</span><div class="ae-zeile"><b>Heat Haze</b><span>Lauren Lo Sung · {{ a.beispiel_genre }} · 122 BPM</span><span class="ae-e">++</span></div></div>
    {%- endfor %}
  </div>
  <div class="ae-knoepfe"><button type="submit" class="knopf voll">{{ a.weiter_speicher if ziel == "speicher" else a.weiter }}</button><button type="submit" class="knopf" name="ueberspringen" value="1" aria-describedby="ae-folge">{{ a.ueberspringen }}</button></div>
  <p class="ae-klein" id="ae-folge">{{ a.folge }} {{ a.spaeter }} <a href="/konto#kontoformular">{{ a.spaeter_link }}</a>.</p>
  <p class="unsichtbar" aria-live="polite" data-ansage></p>
</form>
{%- endmacro %}