{# Die Bereiche der Anwendung, links auf `primaer_dunkel` (Spec §5).

   Am Schreibtisch kein Aufklappen: Die Liste ist höchstens acht Einträge
   lang und passt immer. Der aktive Eintrag trägt `jetzt` UND
   `aria-current`, weil die Farbe allein nichts sagt
   (`docs/gestaltung.md` §1).

   Am Telefon wird dieselbe Liste zur waagrechten Reiterzeile; das
   entscheidet der Stil. Eine zweite Vorlage für dasselbe wäre die
   Doppelung, an der die alte Reiterleiste gestorben ist: Sie stand neben
   der Zulassung in `main.py`, und die beiden liefen auseinander. (Die
   Vorlage hiess `bewohner/reiter.html` und ist mit Etappe 3 weggefallen.)
   Seit U28 entscheidet diese Vorlage eines selbst: welche Bereiche am
   Telefon unter «Mehr» stehen (unten). Auch das kommt aus derselben
   Liste, nicht aus einer zweiten.

   Welche Eintraege es sind, entscheidet `_bereiche_fuer` — dieselbe
   Funktion, die den Zugriff zulaesst. #}
{#- **Am Telefon höchstens fünf Reiter, ab sechs Bereichen «Mehr»**
   (Produktentscheid 20.10.2026, U28: «Unten sichtbar: Start, Meldungen,
   Mitteilungen, Dokumente. Unter ‹Mehr›: Zahlungen, Jahresrechnung,
   Kontrollbuch, Baumängel»). Acht Wörter teilten sich 390 px, und sechs
   davon standen gekürzt da («Meldu…», «Kontrol…»). Wer höchstens fünf
   Bereiche hat, sieht alle unten und kein «Mehr».

   **Die Bereiche ab dem fünften stehen zweimal im Markup**: in der Liste
   (`ueberzaehlig`, am Telefon ausgeblendet) und im `<details>` «Mehr»
   (am Schreibtisch ausgeblendet). Am Schreibtisch darf nichts zuklappen,
   und ein geschlossenes `<details>` lässt sich per Stil nicht verlässlich
   öffnen. Beide Fassungen kommen aus derselben Schleife über dieselbe
   Liste; ausgeblendet heisst `display: none`, also auch für den
   Bildschirmleser nur einmal da.

   **Steht die aktive Seite unter «Mehr», trägt «Mehr» die Marke**, sonst
   wäre keiner der fünf Reiter hervorgehoben. Die Klasse heisst
   `jetzt-darunter` und nicht `jetzt`: `.eintrag.jetzt` ist genau ein
   Verweis, der mit `aria-current`, und Browsertests suchen ihn so. -#}
{% set unten = 4 if bereiche|length > 5 else bereiche|length %}
{% set mehr_bereiche = bereiche[unten:] %}
{% import "bausteine/symbol.html" as s %}
<nav class="bereiche" aria-label="Bereiche">
  <p class="gruppe">Bereiche</p>
  <ul>
  {%- for schluessel, wort, pfad, icon in bereiche %}
    <li{% if loop.index > unten %} class="ueberzaehlig"{% endif %}><a href="{{ pfad|ziel }}" class="eintrag{% if schluessel == bereich %} jetzt{% endif %}"{% if schluessel == bereich %} aria-current="page"{% endif %}>{{ s.symbol(icon, 16) }}<span>{{ wort }}</span></a></li>
  {%- endfor %}
  {%- if mehr_bereiche %}
    {%- set mehr_aktiv = bereich in mehr_bereiche|map(attribute=0)|list %}
    <li class="mehr-platz"><details class="mehr">
      <summary class="eintrag{% if mehr_aktiv %} jetzt-darunter{% endif %}">{{ s.symbol("mehr", 16) }}<span>Mehr</span></summary>
      <ul class="mehr-liste">
      {%- for schluessel, wort, pfad, icon in mehr_bereiche %}
        <li><a href="{{ pfad|ziel }}" class="mehr-eintrag{% if schluessel == bereich %} jetzt{% endif %}"{% if schluessel == bereich %} aria-current="page"{% endif %}>{{ s.symbol(icon, 16) }}<span>{{ wort }}</span></a></li>
      {%- endfor %}
      </ul>
    </details></li>
  {%- endif %}
  </ul>
</nav>