lineup.html

<!-- AUFSTELLUNG PAGE (FULLY ACCESSIBLE & OPTIMIZED v2.1) -->
<!-- ✅ FIX: Landscape-Hint mit Close-Button -->
<!-- ✅ FIX: Validation-Panel öffnet bei Fehlern automatisch -->

<!-- Skip-Links für Accessibility -->
<a class="skip-link" href="#fieldSlots">Direkt zum Spielfeld</a>
<a class="skip-link" href="#availablePlayersList">Direkt zur Spielerliste</a>

<!-- Landscape Hint for Portrait Mode - ✅ FIX: Mit Close-Button -->
<div aria-live="polite" class="landscape-hint" id="landscapeHint" role="status">
    <div class="landscape-hint-content">
        <span aria-hidden="true" class="landscape-hint-icon">🔄</span>
        <p class="landscape-hint-text">Tipp: Drehe dein Gerät für eine bessere Ansicht</p>
        <!-- Close-Button wird via JS hinzugefügt wenn nicht per localStorage dismissed -->
    </div>
</div>

<!-- Screen Reader Live Region -->
<div aria-atomic="true" aria-live="polite" class="sr-only" id="aria-live-region" role="status"></div>

<div class="lineup-header">
    <h1 class="lineup-title">AUFSTELLUNG</h1>
    <p class="lineup-subtitle">Stelle dein Team taktisch auf</p>
</div>

<!-- Formation & Controls -->
<div class="formation-controls glass">
    <div class="formation-selector">
        <label class="formation-label" for="formationSelect">Formation:</label>
        <select aria-describedby="formation-help"
                aria-label="Wähle Formation"
                class="formation-dropdown"
                id="formationSelect">
            <option value="4-4-2">4-4-2 (Klassisch)</option>
            <option value="4-3-3">4-3-3 (Offensiv)</option>
            <option value="4-2-3-1">4-2-3-1 (Ausgeglichen)</option>
            <option value="3-4-3">3-4-3 (Angriff)</option>
            <option value="4-5-1">4-5-1 (Defensiv)</option>
            <option value="3-5-2">3-5-2 (Kompakt)</option>
            <option value="5-3-2">5-3-2 (Ultra-Defensiv)</option>
            <option value="4-1-4-1">4-1-4-1 (Holding)</option>
            <option value="4-3-1-2">4-3-1-2 (Diamant)</option>
        </select>
        <span class="sr-only" id="formation-help">
            Ändern der Formation wird die aktuelle Aufstellung intelligent übernehmen oder auf die Bank verschieben
        </span>
    </div>

    <div class="team-strength-display">
        <span class="strength-label">Gesamtstärke:</span>
        <span aria-atomic="true"
              aria-live="polite"
              class="strength-value"
              id="teamStrength"
              role="status">0</span>
        <span class="strength-context" id="strengthContext"></span>
    </div>

    <div class="action-buttons">
        <button aria-label="Aufstellung zurücksetzen"
                class="btn btn-secondary"
                id="clearLineup">
            <span aria-hidden="true">🗑️</span> Zurücksetzen
        </button>
        <button aria-label="Aufstellung speichern"
                class="btn btn-primary"
                id="saveLineup">
            <span aria-hidden="true">💾</span> Speichern
        </button>
    </div>
</div>

<!-- Validation Messages - ✅ FIX: Öffnet automatisch bei Fehlern -->
<div aria-labelledby="validation-title" class="validation-panel collapsed" id="validationPanel" role="region">
    <div aria-expanded="false" class="validation-header" id="validationHeader" role="button" tabindex="0">
        <span aria-hidden="true" class="validation-icon">✓</span>
        <span class="validation-title" id="validation-title">Aufstellung gültig</span>
        <button aria-controls="validationContent"
                aria-label="Validierung ein-/ausklappen"
                class="validation-toggle"
                id="validationToggle">
            <span aria-hidden="true">▼</span>
        </button>
    </div>
    <div aria-hidden="true" class="validation-content" id="validationContent">
        <ul class="validation-list" id="validationList" role="list">
            <!-- Validation messages will be inserted here -->
        </ul>
    </div>
</div>

<!-- Main Layout -->
<div class="lineup-main-layout">
    <!-- Football Field -->
    <div class="field-container glass">
        <div aria-label="Fußballfeld mit Spielerpositionen" class="field-background" role="application">
            <div aria-hidden="true" class="field-lines">
                <div class="field-line center-line"></div>
                <div class="field-line center-circle"></div>
                <div class="field-line penalty-area penalty-area-top"></div>
                <div class="field-line penalty-area penalty-area-bottom"></div>
            </div>
            <div aria-label="Spielfeld-Positionen"
                 class="field-slots"
                 id="fieldSlots"
                 role="group">
                <!-- Formation slots will be rendered here -->
            </div>
        </div>
    </div>

    <!-- Squad Panel -->
    <div class="squad-panel">
        <!-- Bench Section -->
        <div class="bench-section glass">
            <h3 class="section-title">
                <span aria-hidden="true">📋</span>
                <span>Bank</span>
                <span aria-live="polite" class="bench-count" id="benchCount">(0/9)</span>
            </h3>
            <div aria-label="Bank-Positionen"
                 class="bench-slots"
                 id="benchSlots"
                 role="group">
                <!-- Bench slots will be rendered here -->
            </div>
        </div>

        <!-- Available Players Section -->
        <div class="available-players-section glass">
            <div class="players-header">
                <h3 class="section-title">
                    <span aria-hidden="true">👥</span>
                    <span>Kader</span>
                </h3>
                <div class="players-controls">
                    <input aria-label="Spieler durchsuchen"
                           autocomplete="off"
                           class="player-search"
                           id="playerSearch"
                           placeholder="🔍 Spieler suchen..."
                           type="search">
                    <select aria-label="Nach Position filtern"
                            class="position-filter"
                            id="positionFilter">
                        <option value="">Alle Positionen</option>
                        <option value="TW">🥅 Torwart (TW)</option>
                        <option value="DEF">🛡️ Abwehr</option>
                        <option value="MID">⚙️ Mittelfeld</option>
                        <option value="ATT">⚡ Angriff</option>
                        <optgroup label="Einzelne Positionen">
                            <option value="LI">Linker Innenvert. (LI)</option>
                            <option value="LV">Linker Vert. (LV)</option>
                            <option value="IV">Innenvert. (IV)</option>
                            <option value="RV">Rechter Vert. (RV)</option>
                            <option value="LM">Linkes MF (LM)</option>
                            <option value="RM">Rechtes MF (RM)</option>
                            <option value="ZOM">Zentr. Off. MF (ZOM)</option>
                            <option value="ZDM">Zentr. Def. MF (ZDM)</option>
                            <option value="MS">Mittelstürmer (MS)</option>
                            <option value="LS">Linksstürmer (LS)</option>
                            <option value="RS">Rechtsstürmer (RS)</option>
                        </optgroup>
                    </select>
                    <select aria-label="Spieler sortieren"
                            class="sort-select"
                            id="sortSelect">
                        <option value="strength">⭐ Nach Stärke</option>
                        <option value="name">🔤 Nach Name</option>
                        <option value="position">📍 Nach Position</option>
                        <option value="age">📅 Nach Alter</option>
                    </select>
                </div>
            </div>
            <div aria-label="Verfügbare Spieler"
                 class="available-players-list"
                 id="availablePlayersList"
                 role="list">
                <!-- Available players will be rendered here -->
            </div>
        </div>
    </div>
</div>

<!-- Touch Mode Instructions (Mobile) -->
<div class="touch-instructions" id="touchInstructions" role="status">
    <div class="touch-instructions-content">
        <span aria-hidden="true" class="touch-icon">👆</span>
        <p>Spieler gedrückt halten und auf Position ziehen</p>
    </div>
</div>

<!-- Undo Toast (Template) -->
<template id="undoToastTemplate">
    <div aria-live="assertive" class="toast-undo" role="alert">
        <span class="toast-message"></span>
        <button aria-label="Aktion rückgängig machen" class="undo-btn">
            <span aria-hidden="true">↶</span> Rückgängig
        </button>
    </div>
</template>