/* Neues Modul anlegen — der Dialog aus `templates/geteilt/modul-anlegen.html` (21.08.2026).
   Eigene Datei statt Inline-Styles: Der Dialog wird an zwei Orten geöffnet, und ein `style="…"`
   im Markup wäre an beiden dasselbe — nur zweimal gepflegt. */

.modul-anlegen {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.modul-anlegen-feld {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.modul-anlegen-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text);
}

.modul-anlegen-eingabe {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    background: var(--color-input-bg);
    color: var(--color-text);
    font-size: 1rem;
}

.modul-anlegen-eingabe:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.modul-anlegen-hinweis {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* Der Fehler steht am Feld, nicht in einer Meldung, die nach drei Sekunden weg ist —
   „diesen Namen gibt es schon" ist eine Auskunft, mit der man weiterarbeitet. */
.modul-anlegen-hinweis.ist-fehler {
    color: var(--color-danger);
    font-weight: 600;
}

/* Die Knopfleiste auf „Meine Module".
   Steht hier und nicht als `style="…"` im Markup: `check-inline-styles-nehmen-ab.sh` hält die
   Zahl der Inline-Styles je Datei fest, und sie darf nur SCHRUMPFEN. Beim Einbau des Knopfes
   ist sie auf 14 gestiegen (erlaubt: 13) — der Wächter hat es sofort gemeldet. */
.modul-seite-aktionen {
    display: flex;
    gap: var(--space-sm);
}

/* ===== Die Seite „Meine Module" =====
 *
 * Hierher gezogen am 22.08.2026 aus fuenf `style="..."` im Markup. Sie standen um den Knopf
 * herum, der bei dieser Gelegenheit richtiggestellt wurde — und Inline-Styles sind der Teil,
 * den die Sperrklinke (`check-inline-styles-nehmen-ab.sh`) nur nach unten laesst.
 *
 * ⚠️ NUR der Seitenrahmen. Die Modul-Karten weiter unten tragen weiter ihre eigenen Styles:
 * Sie sind Inhaltsbehaelter, keine Navigationskacheln — ein anderer Begriff, eine andere Runde
 * (Topf H). Wer sie mit hineinzieht, macht aus zwei Dingen eines.
 *
 * Sobald eine ZWEITE Seite denselben Rahmen braucht, lohnt eine gemeinsame Klasse. Bei einem
 * Vorkommen waere das vorgezogene Verallgemeinerung. (Hier stand ein Verweis auf
 * `mein-bereich.css` — die Datei ist am 22.08. gefallen, als die Kacheln auf die Startseite
 * zogen.) */

.modul-seite {
    min-height: 100vh;
    background: var(--color-bg-light);
    padding: var(--space-xl);
}

.modul-seite-inhalt {
    max-width: 56rem;
    margin: 0 auto;
}

.modul-seite-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.modul-seite-kopf h1 {
    margin: 0;
}

.modul-seite-einleitung {
    color: var(--color-text-light);
    margin-bottom: var(--space-xl);
}

.modul-seite-leer {
    text-align: center;
    padding: var(--space-xxl);
    color: var(--color-text-light);
}