<layout src="admin-main"/>

<a href="/admin/routes">Routes</a>

<br>

<a href="/admin/imageslots">Image Slots</a>


<div class="section">
    <h2>Basis-Cards (nur semantische Selektoren)</h2>
    <div class="demo-grid">
        <article class="card">
            <header>
                <div>
                    <h3>Projekt Alpha</h3>
                    <small>Erstellt am 10. Juli 2025</small>
                </div>
                <span role="status">Aktiv</span>
            </header>
            <main>
                <p>Diese Card nutzt nur semantische HTML-Elemente. Das Styling erfolgt über Selektoren wie <code>.card > header</code> und <code>.card h3</code>.</p>
                <p>Weniger Klassen, sauberer HTML-Code.</p>
            </main>
            <footer>
                <small>Letztes Update: heute</small>
                <div>
                    <button>Öffnen</button>
                    <button>Teilen</button>
                </div>
            </footer>
        </article>

        <article class="card">
            <header>
                <h3>Einfache Card</h3>
            </header>
            <main>
                <p>Minimaler HTML-Code, maximale Semantik.</p>
            </main>
            <footer>
                <div>
                    <button>Action</button>
                </div>
            </footer>
        </article>
    </div>
</div>

<div class="section">
    <h2>Status-Varianten (Klassen für Varianten)</h2>
    <div class="demo-grid">
        <article class="card card--success">
            <header>
                <h3>Erfolg</h3>
                <span role="status">Abgeschlossen</span>
            </header>
            <main>
                <p>Success-Variante durch eine einzige Modifier-Klasse.</p>
            </main>
            <footer>
                <div>
                    <button>Details</button>
                </div>
            </footer>
        </article>

        <article class="card card--error">
            <header>
                <h3>Fehler</h3>
                <span role="status">Problem</span>
            </header>
            <main>
                <p>Error-Variante mit systematischen Farben.</p>
            </main>
            <footer>
                <div>
                    <button>Beheben</button>
                    <button>Ignorieren</button>
                </div>
            </footer>
        </article>
    </div>
</div>

<div class="section">
    <h2>Größen-Varianten</h2>
    <div class="demo-grid">
        <article class="card card--compact">
            <header>
                <h3>Kompakt</h3>
            </header>
            <main>
                <p>Weniger Padding durch Modifier-Klasse.</p>
            </main>
        </article>

        <article class="card card--spacious">
            <header>
                <h3>Großzügig</h3>
            </header>
            <main>
                <p>Mehr Weißraum für wichtige Inhalte.</p>
            </main>
            <footer>
                <div>
                    <button>Hauptaktion</button>
                </div>
            </footer>
        </article>
    </div>
</div>

<div class="section">
    <h2>Layout-Varianten</h2>
    <div class="demo-grid demo-grid--wide">
        <article class="card card--horizontal">
            <header>
                <h3>Horizontal</h3>
            </header>
            <main>
                <p>Horizontales Layout durch Modifier.</p>
            </main>
            <footer>
                <div>
                    <button>Action</button>
                </div>
            </footer>
        </article>

        <article class="card card--media">
            <img src="https://picsum.photos/400/200?random=2" alt="Demo">
            <header>
                <h3>Mit Media</h3>
            </header>
            <main>
                <p>Bild wird durch Selector <code>.card--media img</code> gestylt.</p>
            </main>
            <footer>
                <div>
                    <button>Ansehen</button>
                </div>
            </footer>
        </article>
    </div>
</div>
