{# Startseiten-Szene „Und was ist mit Vinyl?!“ → „Das ist die Antwort.“ (09.11.2026, Zweig startvinyl). Daten, Geometrie und die zwei
   Schalter (VINYL_LIVE, MITHOEREN_LIVE): startseite_vinyl.py (`vy`), Texte: texte_vinyl.py (`t.vinyl`), CSS: werkzeuge/tokens_vinyl.py.
   Vier Takte als SVG (viewBox 240 × 264, oben ein Band mit „Beispiel“ und dem Kennzeichen), links → rechts = Zeit.
   Leistungsbudget (10.11.2026, Zweig sammel1011a): Die Seite trägt nur Frage, Antwort, Kennzeichen-Satz, aria-label und
   Bildunterschriften – die Bilder (große Platte und die vier Takte samt Band „Beispiel“/„Kommt bald“, rund 18 KB SVG) kommen über GET /start/vinyl (JSON, gzip, lange gecacht) erst, wenn der
   Abschnitt einen Bildschirm entfernt ist (static/start.js → static/vinyl.js). Kein Skript in der Vorlage. Platten drehen sich
   und der Scanstrahl läuft per CSS, nur solange der Abschnitt im Bild ist (.an); was mit .vy-r markiert ist, fliegt beim Scrollen
   ein (--i = Reihenfolge im Takt, --p = Takt). Das Endbild steht in den Teilen (bei reduzierter Bewegung: alles da, still). #}
{% from "start_szenen.html" import keychip, enchip with context %}
{# Platte von oben: schwarz in jedem Aussehen (Rillen und Glanz weiß, schwach), Etikett in einer Genre-Farbe; der Glanz zeigt das Drehen #}
{% macro platte(cx, cy, r, f) %}<g class="vy-dreh"><circle cx="{{ cx }}" cy="{{ cy }}" r="{{ r }}" fill="#151214"/>{% for q in (0.86, 0.72, 0.58) %}<circle cx="{{ cx }}" cy="{{ cy }}" r="{{ '%0.1f' | format(r * q) }}" fill="none" stroke="#fff" stroke-opacity=".1"/>{% endfor %}<ellipse cx="{{ '%0.1f' | format(cx + r * 0.42) }}" cy="{{ '%0.1f' | format(cy - r * 0.42) }}" rx="{{ '%0.1f' | format(r * 0.3) }}" ry="{{ '%0.1f' | format(r * 0.07) }}" transform="rotate(45 {{ '%0.1f' | format(cx + r * 0.42) }} {{ '%0.1f' | format(cy - r * 0.42) }})" fill="#fff" fill-opacity=".2"/><circle class="s-d{{ f }}" cx="{{ cx }}" cy="{{ cy }}" r="{{ '%0.1f' | format(r * 0.3) }}"/><circle cx="{{ '%0.1f' | format(cx + r * 0.14) }}" cy="{{ cy }}" r="{{ '%0.1f' | format(r * 0.04) }}" fill="#fff" fill-opacity=".6"/><circle class="s-coverloch" cx="{{ cx }}" cy="{{ cy }}" r="{{ '%0.1f' | format(r * 0.045 + 1) }}"/></g>{% endmacro %}
{% macro band(V, p) %}<text class="s-caps" x="0" y="17">{{ V.s.beispiel }}</text>{% if vy.bald[p] %}<g class="vy-bald"><rect class="s-chip warn" x="{{ 239 - vy.bald_w }}" y="3" width="{{ vy.bald_w }}" height="20" rx="10"/><text class="s-caps s-akzenttext" x="{{ 239 - vy.bald_w / 2 }}" y="17" text-anchor="middle">{{ V.bald }}</text></g>{% endif %}{% endmacro %}
{% macro papier(x, y, groesse=10, fett=false) %} x="{{ x }}" y="{{ y }}" font-family="JetBrains Mono, ui-monospace, monospace" font-size="{{ groesse }}"{% if fett %} font-weight="700"{% endif %} fill="#2a2320"{% endmacro %}

{# ---------- 1 · Scannen: Barcode der Hülle → Tracklist A1–B2 fällt heraus, bekannte Tracks haben sofort BPM · Open Key · Energie ---------- #}
{% macro takt_scannen(V) %}{% set s = V.s %}
{{ platte(104, 46, 42, 2) }}<rect class="s-cover s-d1" x="10" y="0" width="92" height="92" rx="3"/>
<rect x="18" y="56" width="56" height="30" rx="2" fill="#f4efe6"/>{% for b in vy.barcode %}<rect x="{{ b.x }}" y="60" width="{{ b.w }}" height="20" fill="#1d1b1a"/>{% endfor %}<rect class="s-akzent vy-scan" x="20" y="53" width="2.5" height="36" rx="1"/>
<text class="s-caps" x="150" y="30">GZR 014</text><text class="s-titel" x="150" y="48" style="font-size:12px">Sunny Side Up</text><text class="s-klein" x="150" y="64">Nachtstrom</text>
<text class="s-klein" x="240" y="110" text-anchor="end"><tspan class="s-gem">●</tspan> {{ s.kennt }}</text>
{% for z in vy.zeilen %}<g class="vy-r" style="--i:{{ z.i }}"><rect class="s-chip{{ ' s-rand' if z.kennt else ' warn' }}" x="0" y="{{ z.y }}" width="240" height="22" rx="6"/>{% if z.kennt %}<circle class="s-gem" cx="10" cy="{{ z.y + 11 }}" r="3.5"/>{% else %}<circle class="s-linie" cx="10" cy="{{ z.y + 11 }}" r="3"/>{% endif %}<text class="s-mono" x="20" y="{{ z.y + 15 }}">{{ z.seite }}</text><text class="s-titel" x="44" y="{{ z.y + 15 }}">{{ z.titel }}</text>
  {% if z.kennt %}{{ keychip(z.key, 170, z.y + 3, w=30, h=16) }}{{ enchip(z.en, 206, z.y + 3, w=30, h=16, fs=10) }}{% else %}<text class="s-mono" x="185" y="{{ z.y + 15 }}" text-anchor="middle">?</text><text class="s-mono" x="221" y="{{ z.y + 15 }}" text-anchor="middle">?</text>{% endif %}</g>
{% endfor %}{% endmacro %}

{# ---------- 2 · Anspielen: unbekannter Track → Nadel auflegen (Arm schwenkt ein), Platte dreht, B1 erkannt ---------- #}
{% macro takt_anspielen(V) %}{% set s = V.s %}{% set z = vy.b1 %}
<rect class="s-koffer" x="0" y="0" width="240" height="164" rx="12"/><circle class="s-feld" cx="82" cy="82" r="74"/>{{ platte(82, 82, 68, 4) }}
<g class="vy-r vy-arm" style="--i:2"><g transform="rotate(38 204 24)"><rect class="s-platte" x="201" y="24" width="6" height="96" rx="3"/><rect class="s-akzent" x="197" y="114" width="14" height="18" rx="3"/></g><circle class="s-chip" cx="204" cy="24" r="11"/><circle class="s-platte" cx="204" cy="24" r="4"/></g>
<circle class="s-akzent vy-puls" cx="{{ vy.punkt_x }}" cy="154" r="4"/><text class="s-klein" x="226" y="158" text-anchor="end">{{ s.hoert }}</text>
<g class="vy-r" style="--i:5"><rect class="s-chip s-rand" x="0" y="178" width="240" height="40" rx="8"/><circle class="s-gem" cx="14" cy="198" r="4"/><text class="s-mono" x="24" y="202">{{ z.seite }}</text><text class="s-titel" x="50" y="202">{{ z.titel }}</text>
  <text class="s-mono s-voll" x="132" y="202" text-anchor="end">{{ z.bpm }}</text>{{ keychip(vy.laeuft, 140, 189, w=30, h=18) }}{{ enchip(z.en, 176, 189, w=30, h=18) }}</g>
{% endmacro %}

{# ---------- 3 · Einräumen: Platte rutscht in Regal 2 · Fach C, ein Etikett vom A4-Bogen (BPM · Open Key · Energie je Track) ---------- #}
{% macro takt_einraeumen(V) %}{% set s = V.s %}
<rect class="s-koffer" x="0" y="0" width="160" height="112" rx="6"/><rect class="s-chip s-rand" x="109" y="6" width="45" height="100" rx="4"/>
<line class="s-linie" x1="57" x2="57" y1="8" y2="104"/><line class="s-linie" x1="107" x2="107" y1="8" y2="104"/>
{% for r in vy.regal_a + vy.regal_b + vy.regal_c %}<rect class="s-d{{ r.f }}" x="{{ r.x }}" y="{{ r.y }}" width="4" height="{{ r.h }}" rx="1"/>{% endfor %}
<g class="vy-r" style="--i:2"><rect class="s-akzent" x="{{ vy.neu_x }}" y="12" width="7" height="78" rx="1.5"/></g>
<text class="s-caps" x="33" y="102" text-anchor="middle">A</text><text class="s-caps" x="82" y="102" text-anchor="middle">B</text><text class="s-caps s-akzenttext" x="131" y="102" text-anchor="middle">C</text>
<text class="s-titel s-akzenttext" x="0" y="130">{{ s.fach }}</text>
<rect x="172" y="0" width="68" height="96" rx="2" fill="#f4efe6"/>{% for r in range(4) %}{% for c in range(2) %}<rect x="{{ 176 + c * 31 }}" y="{{ 5 + r * 23 }}" width="28" height="19" rx="2" fill="{{ 'none' if r + c == 0 else '#ebe3d4' }}" stroke="#c9bfae" stroke-dasharray="{{ '2 2' if r + c == 0 else 'none' }}"/>{% endfor %}{% endfor %}
<g class="vy-r" style="--i:4"><g transform="rotate(-3 138 184)"><rect x="40" y="136" width="196" height="96" rx="5" fill="#f4efe6" stroke="#d8cfbf"/><text class="s-krepptext" x="52" y="157">Sunny Side Up EP</text><text{{ papier(52, 171, 9) }}>Nachtstrom · GZR 014</text>
  {% for z in vy.zeilen %}{% set y = 186 + loop.index0 * 12 %}<text{{ papier(52, y, 10, true) }}>{{ z.seite }}</text><text{{ papier(74, y) }}>{{ z.bpm }}</text><rect x="100" y="{{ y - 9 }}" width="24" height="11" rx="2" fill="{{ z.key.bg }}"/><text x="112" y="{{ y - 0.5 }}" text-anchor="middle" font-family="JetBrains Mono, ui-monospace, monospace" font-size="8.5" fill="{{ z.key.tx }}">{{ z.key.ok }}</text><text{{ papier(130, y, 10, true) }}>{{ vy.ez[z.en] }}</text>{% endfor %}
  <g transform="translate(196 180)">{% for q in vy.qr %}<rect x="{{ q.x }}" y="{{ q.y }}" width="4" height="4" fill="#2a2320"/>{% endfor %}</g></g></g>
{% endmacro %}

{# ---------- 4 · Live Vinyl: Platte läuft, Phrasen nach Energie (oben = mehr), „Breakdown in 0:42“, nächste Platte aus dem Regal ---------- #}
{% macro takt_live(V) %}{% set s = V.s %}{% set z = vy.b1 %}{% set n = vy.naechste %}
{{ platte(40, 40, 36, 4) }}<text class="s-caps" x="88" y="14">{{ s.laeuft }} · {{ z.seite }}</text><text class="s-titel" x="88" y="34">{{ z.titel }}</text>
<text class="s-mono s-voll" x="88" y="58">{{ z.bpm }}</text>{{ keychip(vy.laeuft, 118, 45, w=30, h=17) }}{{ enchip(z.en, 154, 45, w=30, h=17) }}
<text class="s-serif s-akzenttext" x="0" y="100">{{ s.breakdown }}</text>
<g class="vy-r" style="--i:2">{% for p in vy.phrasen %}<rect class="s-e{{ p.e }}{{ ' s-rand' if p['break'] }}" x="{{ p.x }}" y="{{ p.y }}" width="{{ p.w }}" height="{{ p.h }}" rx="2"/>{% endfor %}</g>
<line class="s-linie" x1="0" x2="240" y1="171" y2="171"/><g class="vy-lauf"><rect class="s-akzent" x="{{ vy.kopf_x }}" y="108" width="2" height="63"/><circle class="s-akzent" cx="{{ vy.kopf_x + 1 }}" cy="108" r="4"/></g>
<g class="vy-r" style="--i:4"><rect class="s-chip" x="0" y="184" width="240" height="50" rx="8"/><text class="s-caps s-akzenttext" x="12" y="202">↑ {{ s.naechste }}</text>{{ keychip(n.key, 166, 191, w=30, h=17) }}{{ enchip(n.en, 202, 191, w=30, h=17) }}
  <text class="s-titel" x="12" y="224">Pendel</text><text class="s-mono" x="228" y="224" text-anchor="end">{{ s.fach_naechste }}</text></g>
{% endmacro %}

{# ---------- Die nachgeladenen Teile (GET /start/vinyl): große Platte, die aus der Hülle rutscht, und die vier Takte ---------- #}
{% macro held() %}<g class="vy-r vy-raus" style="--i:8">{{ platte(200, 100, 92, 4) }}</g><rect class="s-cover s-d1" x="6" y="6" width="188" height="188" rx="4"/>{% for r in (22, 40, 58, 76) %}<circle cx="100" cy="76" r="{{ r }}" fill="none" stroke="#fff" stroke-opacity="{{ 0.42 - r / 250 }}"/>{% endfor %}
<g transform="rotate(-4 84 156)"><rect class="s-krepp" x="8" y="141" width="152" height="30" rx="2"/><text class="s-krepptext" x="84" y="161" text-anchor="middle">Sunny Side Up EP</text></g>{% endmacro %}
{% macro takt(V, p) %}{% set takte = [takt_scannen, takt_anspielen, takt_einraeumen, takt_live] %}{{ band(V, p) }}<svg y="{{ vy.band }}" width="{{ vy.w }}" height="{{ vy.h - vy.band }}" overflow="visible">{{ takte[p](V) }}</svg>{% endmacro %}

{# ---------- Der Abschnitt: Frage als Einwurf, Antwort, Kennzeichen, große Platte, vier Takte (Bilder samt Band leer, data-vy-teil) ---------- #}
{% macro abschnitt(V) %}
<section class="la-abschnitt spalte vy" id="vinyl" aria-labelledby="h-vinyl" data-vinyl="{{ vy.teile_url }}">
  <div class="vy-kopf"><div class="vy-text">
    <h2 class="vy-frage" id="h-vinyl">{{ V.frage }}</h2><p class="vy-antwort">{{ V.antwort if vy.bald_text else V.antwort_live }}</p><p class="lead">{{ V.lead }}</p>
    {% if vy.bald_text or vy.mithoeren_text %}<p class="la-kommt etikett vy-kommt"><span class="la-tag">{{ V.bald }}</span> {% if vy.bald_text %}{{ V.bald_text }} {% endif %}{% if vy.mithoeren_text %}{{ V.mithoeren_text }}{% endif %}</p>{% endif %}</div>
    <svg class="vy-held" viewBox="0 0 300 200" aria-hidden="true" focusable="false" data-vy-teil="held"></svg></div>
  <ol class="vy-schritte" aria-label="{{ V.bereich }}">{% for k in V.schritte %}{% set p = loop.index0 %}
    <li style="--p:{{ p }}"><figure class="sz-bild vy-bild"><svg viewBox="0 0 {{ vy.w }} {{ vy.h }}" role="img" aria-label="{{ k[3] }}{% if vy.bald[p] %} ({{ V.bald }}){% endif %}" focusable="false"><g data-vy-teil="{{ p }}"></g></svg>
      <figcaption><p class="kap-nr"><span class="zahl">0{{ loop.index }}</span> · {{ k[0] }}</p><h3>{{ k[1] }}</h3><p>{{ k[2] }}</p></figcaption></figure></li>
  {% endfor %}</ol>
</section>{% endmacro %}