/* =====================================================================
   Struktur-CSS des Portals — Maße, Abstände, Layout.
   Farben und Schriften kommen ausschließlich aus den CI-Tokens
   (css/ci-tokens.css). Hier bitte KEINE festen Farbwerte einsetzen,
   sonst überlebt der nächste Skin-Wechsel diese Datei nicht.
   ===================================================================== */

/* ---------- Anmeldung (statisches SSR, ohne MudBlazor) ---------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    font-family: var(--ci-text-font);
    color: var(--ci-text);
}

.login-card {
    padding: 2.5rem 3rem;
    width: 100%;
    max-width: 420px;
}

.login-card h1 {
    margin: 0 0 0.35rem;
    font-size: 1.7rem;
}

.login-card .subtitle {
    margin: 0 0 1.75rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.login-card label {
    display: block;
    margin: 0.9rem 0 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ci-text-leise);
}

.login-card input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--ci-karte-rahmen);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: rgba(255, 255, 255, .06);
    color: var(--ci-text);
    box-sizing: border-box;
}

.login-card input:focus {
    outline: none;
    border-color: var(--ci-lime);
    box-shadow: 0 0 0 3px rgba(168, 236, 0, .16);
}

.login-card button {
    margin-top: 1.75rem;
    width: 100%;
    padding: 0.75rem;
    background: var(--ci-lime);
    color: var(--ci-navy);
    border: none;
    border-radius: var(--ci-pill);
    font-family: var(--ci-display);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.login-card button:hover {
    background: var(--ci-lime-dunkel);
}

.login-error {
    background: rgba(229, 72, 77, .16);
    color: #ffc9cb;
    border: 1px solid rgba(229, 72, 77, .45);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* ---------- Dokument-Rendering (Markdown) ---------- */
.doc-content {
    max-width: 960px;
    line-height: 1.65;
    color: var(--ci-text-gedaempft);
}

.doc-content h1,
.doc-content h2,
.doc-content h3 {
    font-family: var(--ci-display);
    color: var(--ci-text);
}

.doc-content h1 { font-size: 1.8rem; margin: 1.2rem 0 0.8rem; letter-spacing: -.02em; }
.doc-content h2 { font-size: 1.4rem; margin: 1.6rem 0 0.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--ci-linie); }
.doc-content h3 { font-size: 1.15rem; margin: 1.2rem 0 0.5rem; }

.doc-content a { color: var(--ci-lime); }

.doc-content img {
    max-width: 100%;
    border: 1px solid var(--ci-karte-rahmen);
    border-radius: 8px;
}

.doc-content table {
    border-collapse: collapse;
    margin: 1rem 0;
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

.doc-content th,
.doc-content td {
    border: 1px solid var(--ci-karte-rahmen);
    padding: 0.45rem 0.8rem;
    text-align: left;
}

.doc-content th {
    background: rgba(255, 255, 255, .06);
    color: var(--ci-text);
    font-weight: 600;
}

.doc-content pre {
    background: rgba(0, 0, 0, .28);
    border: 1px solid var(--ci-karte-rahmen);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    overflow-x: auto;
}

.doc-content code {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.9em;
}

.doc-content :not(pre) > code {
    background: rgba(255, 255, 255, .08);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    color: var(--ci-text);
}

.doc-content blockquote {
    border-left: 3px solid var(--ci-lime);
    margin: 1rem 0;
    padding: 0.35rem 1rem;
    background: rgba(255, 255, 255, .05);
    border-radius: 0 8px 8px 0;
}

/* Mermaid-Diagramme bringen ihre eigenen Farben mit. */
.doc-content pre.mermaid {
    background: transparent;
    border: none;
    text-align: center;
}

/* ---------- Formatierungs-Editor (Anforderungen des Endkunden) ---------- */
/* Listen einrücken — die globale Vorgabe nimmt Listen den Einzug, die Zeichen standen sonst links außerhalb. */
.portal-rte ul, .portal-rte ol { padding-left: 1.6em; margin: 0.35em 0; }
.portal-rte ul { list-style: disc; }
.portal-rte ol { list-style: decimal; }
.portal-rte li { margin: 0.1em 0; }
.portal-rte p, .portal-rte div { margin: 0 0 0.35em 0; }
.portal-rte:focus { outline: 2px solid var(--mud-palette-primary); outline-offset: -1px; }