fix: Navigation bricht auf schmalen Bildschirmen um, gewähltes Tortensegment oben, Legendenzusatz nicht fett (A14-T6)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

finance/app/static/style.css

@@ -12,6 +12,8 @@ body {
 nav {
   display: flex;
   gap: 1rem;
+  flex-wrap: wrap;
+  row-gap: 0.4rem;
   align-items: center;
   border-bottom: 1px solid #ccc;
   padding-bottom: 0.5rem;
@@ -278,4 +280,5 @@ label:has(input:disabled), label:has(select:disabled) {
 .torte-svg .seg.klickbar:hover { opacity: 0.85; }
 .torte-svg .seg.gewaehlt { stroke: #222; stroke-width: 0.05; }
 .legende li.gewaehlt { font-weight: bold; }
+.legende-zusatz { font-weight: normal; color: #666; }
 #aufteilung-kategorie h2 { font-size: 1.1rem; margin-top: 1.5rem; }

finance/app/templates/_torte_macros.html

@@ -13,7 +13,9 @@ class="seg {{ seg.s.color }}{% if seg.q %} klickbar{% endif %}{% if seg.gewaehlt
 <figure class="torte">
   <figcaption>{{ titel }}</figcaption>
   <svg class="torte-svg" viewBox="-1.05 -1.05 2.1 2.1" role="img" aria-label="{{ titel }}">
-    {% for seg in segmente %}{% set s = seg.s %}
+    {# Gewähltes Segment zuletzt zeichnen, damit sein Umriss nicht von
+       Nachbarsegmenten überdeckt wird (A14). #}
+    {% for seg in (segmente|rejectattr('gewaehlt')|list) + (segmente|selectattr('gewaehlt')|list) %}{% set s = seg.s %}
     {% if s.path %}<path d="{{ s.path }}" {{ seg_attrs(seg) }}><title>{{ s.label }}{% if s.merged %} ({{ s.members|join(', ') }}){% endif %}: {{ s.value|eur }} € ({{ s.share|pct }})</title></path>
     {% else %}<circle r="1" {{ seg_attrs(seg) }}><title>{{ s.label }}{% if s.merged %} ({{ s.members|join(', ') }}){% endif %}: {{ s.value|eur }} € ({{ s.share|pct }})</title></circle>{% endif %}
     {% endfor %}