/* Schwarz/Weiss wie die App (public/css/app.css): Zinc-Graustufen,
   dunkel als Standard, hell als Alternative. Kein Farbakzent - Links
   unterscheiden sich durch Unterstreichung statt durch Blau. */

/* ---------- Dunkel (Standard) ---------- */
[data-md-color-scheme="slate"] {
    --md-hue: 240;
    --md-default-bg-color:        #09090b;   /* gray-950 */
    --md-default-fg-color:        #f4f4f5;   /* gray-100 */
    --md-default-fg-color--light: #a1a1aa;   /* gray-400 */
    --md-default-fg-color--lighter: #71717a;
    --md-default-fg-color--lightest: #27272a;

    --md-primary-fg-color:        #18181b;   /* Kopfzeile gray-900 */
    --md-primary-bg-color:        #f4f4f5;
    --md-primary-bg-color--light: #a1a1aa;
    --md-accent-fg-color:         #ffffff;
    --md-accent-fg-color--transparent: rgba(255, 255, 255, 0.08);

    --md-typeset-color:           #e4e4e7;
    --md-typeset-a-color:         #ffffff;
    --md-code-bg-color:           #18181b;
    --md-code-fg-color:           #e4e4e7;
    --md-footer-bg-color:         #18181b;
    --md-footer-bg-color--dark:   #09090b;
    --md-typeset-table-color:     #27272a;
    --md-admonition-bg-color:     #18181b;

    --doku-rand:                  #27272a;   /* gray-800 */
    --doku-tabellenkopf:          #27272a;
    --doku-tabellenkopf-text:     #f4f4f5;
}

/* ---------- Hell ---------- */
[data-md-color-scheme="default"] {
    --md-default-bg-color:        #ffffff;
    --md-default-fg-color:        #18181b;
    --md-default-fg-color--light: #52525b;   /* gray-600 */
    --md-default-fg-color--lighter: #71717a;
    --md-default-fg-color--lightest: #e4e4e7;

    --md-primary-fg-color:        #09090b;   /* Kopfzeile schwarz */
    --md-primary-bg-color:        #fafafa;
    --md-primary-bg-color--light: #a1a1aa;
    --md-accent-fg-color:         #09090b;
    --md-accent-fg-color--transparent: rgba(0, 0, 0, 0.06);

    --md-typeset-color:           #27272a;
    --md-typeset-a-color:         #09090b;
    --md-code-bg-color:           #f4f4f5;
    --md-code-fg-color:           #27272a;
    --md-footer-bg-color:         #09090b;
    --md-footer-bg-color--dark:   #000000;
    --md-typeset-table-color:     #e4e4e7;

    --doku-rand:                  #e4e4e7;   /* gray-200 */
    --doku-tabellenkopf:          #18181b;
    --doku-tabellenkopf-text:     #fafafa;
}

/* Kopfzeile und Reiter: eine ruhige Fläche mit feiner Linie darunter */
.md-header, .md-tabs {
    background-color: var(--md-primary-fg-color);
}
.md-tabs {
    border-bottom: 1px solid var(--doku-rand);
}
.md-header {
    box-shadow: none;
}
.md-tabs__link--active, .md-tabs__item--active .md-tabs__link {
    font-weight: 600;
}

/* Links: ohne Farbe, darum unterstrichen - dezent, beim Zeigen kräftig */
.md-typeset a {
    text-decoration: underline;
    text-decoration-color: var(--md-default-fg-color--lighter);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}
.md-typeset a:hover {
    text-decoration-color: currentColor;
}
.md-typeset a.headerlink, .md-typeset .md-button, .md-typeset .grid.cards a {
    text-decoration: none;
}

/* Aktive Seite in der Seitenleiste */
.md-nav__link--active, .md-nav__item--active > .md-nav__link {
    color: var(--md-default-fg-color);
    font-weight: 600;
}

/* Überschriften etwas kräftiger, wie die Seitentitel der App */
.md-typeset h1 {
    font-weight: 700;
    color: var(--md-default-fg-color);
    letter-spacing: -0.01em;
}
.md-typeset h2 { font-weight: 600; }

/* Knöpfe (Mehr zu …): Umriss, beim Zeigen gefüllt */
.md-typeset .md-button {
    border-radius: 8px;
    border-color: var(--md-default-fg-color--lighter);
    color: var(--md-default-fg-color);
}
.md-typeset .md-button:hover, .md-typeset .md-button--primary {
    background-color: var(--md-default-fg-color);
    border-color: var(--md-default-fg-color);
    color: var(--md-default-bg-color);
}

/* Codeblöcke: viele Bildschirm-Skizzen - etwas enger, mit Rand */
.md-typeset pre > code {
    font-size: 0.72rem;
    line-height: 1.45;
}
.md-typeset pre {
    border: 1px solid var(--doku-rand);
    border-radius: 8px;
}

/* Tabellen: Kopf abgesetzt, Linien wie in der App */
.md-typeset table:not([class]) {
    border: 1px solid var(--doku-rand);
    border-radius: 8px;
    box-shadow: none;
}
.md-typeset table:not([class]) th {
    background-color: var(--doku-tabellenkopf);
    color: var(--doku-tabellenkopf-text);
}
.md-typeset table:not([class]) td {
    border-top: 1px solid var(--doku-rand);
}

/* Karten auf der Startseite */
.md-typeset .grid.cards > ul > li {
    border-radius: 12px;
    border: 1px solid var(--doku-rand);
}
.md-typeset .grid.cards > ul > li:hover {
    border-color: var(--md-default-fg-color--lighter);
    box-shadow: none;
}

/* Hinweise ohne Farbfläche - nur die Leiste links behält ihre Farbe */
.md-typeset .admonition, .md-typeset details {
    border-radius: 8px;
    box-shadow: none;
    font-size: 0.72rem;
}

/* Suche */
.md-search__input {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}
[data-md-color-scheme="default"] .md-search__input {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fafafa;
}

/* Mermaid: Linien und Kästen in Grautönen */
[data-md-color-scheme="slate"] {
    --md-mermaid-node-bg-color: #18181b;
    --md-mermaid-node-fg-color: #f4f4f5;
    --md-mermaid-edge-color:    #a1a1aa;
    --md-mermaid-label-bg-color: #09090b;
    --md-mermaid-label-fg-color: #e4e4e7;
}
[data-md-color-scheme="default"] {
    --md-mermaid-node-bg-color: #fafafa;
    --md-mermaid-node-fg-color: #18181b;
    --md-mermaid-edge-color:    #52525b;
    --md-mermaid-label-bg-color: #ffffff;
    --md-mermaid-label-fg-color: #27272a;
}