inwo_vgl/src/main/resources/templates/fragments/legend.html

<!-- Vergleichslegende Fragment -->
<section class="vergleich-legende" role="complementary" aria-labelledby="legende-title" xmlns:th="http://www.thymeleaf.org" th:fragment="legend">
    <div class="legende-title" id="legende-title">
      <strong>Legende:</strong>
    </div>
    <div class="legende-item">
      <span class="sym plus" aria-label="Hinzugefügt">+</span> 
      <span>hinzugefügt (<span id="addedColorName">grün</span>)</span>
    </div>
    <div class="legende-spacer" aria-hidden="true">|</div>
    <div class="legende-item">
      <span class="sym minus" aria-label="Gelöscht">−</span> 
      <span>gelöscht (<span id="removedColorName">rot</span>)</span>
    </div>
    <div class="legende-spacer" aria-hidden="true">|</div>
    <div class="legende-item">
      <span class="sym warn" aria-label="Geändert">!</span> 
      <span>geändert (<span id="changedColorName">gelb</span>)</span>
    </div>
    <div class="legende-spacer" aria-hidden="true">|</div>
    <div class="legende-item">
      <span class="selected-indicator-text">ausgewählte Person (blauer Rahmen)</span>
    </div>
    
    <!-- Farbwahl -->
    <div class="color-picker-container">
      <button class="color-picker-toggle" onclick="toggleColorPicker()" aria-label="Farbschema-Einstellungen öffnen" aria-expanded="false" aria-controls="colorPickerPopup">⚙️</button>
      <div class="color-picker-popup hidden" id="colorPickerPopup" role="dialog" aria-labelledby="color-picker-label">
        <label id="color-picker-label" for="colorSchemeSelect">Farbwahl:</label>
        <select id="colorSchemeSelect" class="color-scheme-select" onchange="changeColorScheme(this.value)" aria-describedby="color-scheme-hint">
          <option value="standard">Standard</option>
          <option value="alternative">Pastell</option>
        </select>
      </div>
    </div>
</section>