/* Die EINE Kachel im Haus (22.08.2026).
 *
 * WARUM ES DIESE DATEI GIBT
 * -------------------------
 * Es gab zwei Familien von Navigationskacheln — `admin-action-card` (16 Verwendungen in drei
 * Admin-Seiten) und `wegwahl-karte` (3 in der Wegwahl „Neue Aufgabe"). Sie sahen fast gleich
 * aus und waren an fünf Stellen verschieden: Hover-Farbe, Hub, Symbolgröße, Gitter — und beim
 * Tastatur-Fokus, den nur eine von beiden hatte.
 *
 * Im Kopf von `neue-aufgabe.css` stand die Schuld schon notiert: *„Eine gemeinsame Basisklasse
 * für beide wäre richtig und kostet einen Durchgang durch alle Admin-Seiten — eigener Punkt."*
 * Das ist dieser Punkt.
 *
 * ⚠️ **Was dabei zutage kam:** Im Markup standen SECHS Farbklassen (`admin-action-card-purple`
 * bis `-blue`), die **nirgends definiert** waren. Sie taten nichts — geschrieben vermutlich in
 * Anlehnung an `admin-stat-card-purple`, die es wirklich gibt. Deshalb hat diese Datei
 * **keinen Farb-Modifikator**: Wenn Farbe je gebraucht wird, kommt sie mit einer Definition
 * und einem Grund, nicht als Klasse, die aussieht wie Absicht.
 *
 * WAS EINE KACHEL IST — UND WAS NICHT
 * -----------------------------------
 * Eine Kachel ist **klickbar**. Führt sie woandershin, ist sie ein `<a href>`: Tastatur,
 * Mittelklick und „in neuem Tab öffnen" gibt es damit umsonst; ein `<div>` mit Klick-Handler
 * müsste all das nachbauen.
 *
 * Öffnet sie **an Ort und Stelle** etwas — im Lernpfad-Hub führen vier Kacheln zu Dialogen,
 * nicht zu Seiten —, ist sie ein `<button>`. Das ist kein Sonderfall, sondern der richtige
 * Baustein: Ein Verweis auf `#` mit abgefangenem Klick wäre ein vorgetäuschter Ort. Deshalb
 * trägt `.kachel` unten die Knopf-Rücksetzung; sonst brächte der Browser seine eigene Schrift,
 * seinen Rahmen und seine Mittelausrichtung mit.
 *
 * NICHT gemeint sind Inhaltsbehälter — `.card`, `.document-card`, `.task-card` und die 26
 * anderen. Das sind Listenelemente. Sie hier hineinzuziehen wäre eine andere Runde mit einem
 * anderen Nutzen.
 */

.kachel-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-lg);
}

/* Einspaltig, wenn die Kacheln erklärenden Text tragen und nebeneinander gedrängt wirkten. */
.kachel-gitter--liste {
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.kachel {
    /* Knopf-Rücksetzung: Eine Kachel ist mal `<a>`, mal `<button>` (s. Kopf). Ohne diese vier
       Zeilen sähe die Knopf-Fassung anders aus als ihre Nachbarn — und zwar je nach Browser. */
    appearance: none;
    font: inherit;
    cursor: pointer;
    text-align: center;

    display: grid;
    gap: var(--space-sm);
    padding: var(--space-xl);
    background: var(--color-card-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-fast);
}

/* ⚠️ `:focus-visible` steht hier NICHT zufällig neben `:hover`.
 *
 * `admin-action-card` hatte nur `:hover` — wer mit Tab navigierte, sah nicht, wo er war. Das
 * betraf 16 von 19 Kacheln im Haus. Ein Zustand, den nur die Maus auslöst, ist kein Zustand,
 * sondern die halbe Bedienung. `test_kacheln.js` verlangt beide. */
.kachel:hover,
.kachel:focus-visible {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.kachel-symbol {
    font-size: 3rem;
    line-height: 1;
}

.kachel-titel {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-strongest);
}

.kachel-text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* ===== Breite Kachel: Symbol links, Text rechts =====
 *
 * Für Wahlseiten mit wenigen Einträgen und erklärendem Text (die drei Wege zu einer neuen
 * Aufgabe). Zentriert wirkt dort verloren, weil die Zeilen unterschiedlich lang sind. */
.kachel--breit {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-md);
    align-items: center;
    padding: var(--space-lg);
    text-align: left;
}

.kachel--breit .kachel-symbol {
    grid-row: 1 / 3;
    font-size: 2rem;
}

@media (max-width: 480px) {
    .kachel {
        padding: var(--space-lg);
    }
    .kachel-symbol {
        font-size: 2.25rem;
    }
}