/*
 * Gestaltungslinie ruhrcoder — Belegung für den Lizenzserver.
 *
 * Ein Satz Namen, zwei Belegungen. Die Werte stammen aus
 * `_ai/rules/global/design-system.md` und nicht aus diesem Projekt; wer sie ändert,
 * ändert sie zuerst dort. Referenzumsetzung ist der Desktop-LicenseManager.
 *
 * Zwei Rollen gehen bewusst über die Tabelle der Linie hinaus, weil deren Werte sonst
 * die eigene Kontrastvorgabe verfehlen:
 *
 *   --accent-text     Der Akzent als *Schrift*. `primary-light` (#2D7FA8) erreicht auf
 *                     dem hellen Grund nur 4,09:1 — gefordert sind 4,5:1. Als Fläche und
 *                     als Fokusring bleibt #2D7FA8, dort genügen 3:1.
 *   --control-border  Der Umriss eines Bedienelements. Die Haarlinie trennt, sie bedient
 *                     nicht: `border` mit 10 % Schwarz erreicht 1,26:1 und macht ein
 *                     Eingabefeld auf weißem Grund unsichtbar.
 *
 * Beide Belegungen führen denselben Satz Namen. Fehlt einer, bricht die Seite genau in
 * einer Belegung — und das fällt erst beim Nutzer auf. Ein Test hält das.
 */

:root {
    color-scheme: light;

    /* ── Marke ────────────────────────────────────────────────────────── */
    --primary: #2f4858;
    --primary-dark: #0d2b38;
    --primary-light: #2d7fa8;
    --on-primary: #ffffff;
    --accent-text: #276b8d;

    /* ── Flächen ──────────────────────────────────────────────────────── */
    --bg: #f5f5f5;
    --surface: #ffffff;
    --surface-raised: #ebebeb;
    --surface-hover: #e4e4e4;

    /* ── Schrift ──────────────────────────────────────────────────────── */
    --text: #1a1a1a;
    --text-muted: #5a5a5a;

    /* ── Linien ───────────────────────────────────────────────────────── */
    --border: rgba(0, 0, 0, 0.1);
    --control-border: #8e8e8e;
    --focus: #2d7fa8;

    /* ── Zustände ─────────────────────────────────────────────────────── */
    /* Gedeckt gehalten; die Aussage tragen Wort und Zeichen, nie die Farbe allein. */
    --state-ok-text: #2c6b3f;
    --state-ok-bg: #e1efe4;
    --state-ok-border: #a9cdb4;

    --state-warn-text: #8a5a17;
    --state-warn-bg: #f6eddd;
    --state-warn-border: #e0c48d;

    --state-error-text: #96332f;
    --state-error-bg: #f5e3e3;
    --state-error-border: #dfafad;

    --state-neutral-text: #5a5a5a;
    --state-neutral-bg: #ebebeb;
    --state-neutral-border: #dcdcdc;

    /* ── Maße ─────────────────────────────────────────────────────────── */
    /* Grundraster 8 px, Ecken klein: Die Marke ist Industrie, nicht Spielzeug. */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --radius: 0.375rem;
    --radius-pill: 999px;
    --hairline: 1px;

    --font: "Roboto Flex", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "Roboto Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --line-height: 1.65;
}

[data-theme="dark"] {
    color-scheme: dark;

    --primary: #c5d0d6;
    --primary-dark: #94a3ab;
    --primary-light: #dde5e9;
    --on-primary: #0f1923;
    --accent-text: #dde5e9;

    --bg: #0f1923;
    --surface: #152030;
    --surface-raised: #1a2535;
    --surface-hover: #213048;

    --text: #e4edf2;
    --text-muted: #8aa3b0;

    --border: rgba(255, 255, 255, 0.08);
    --control-border: #5a7288;
    --focus: #dde5e9;

    --state-ok-text: #8fd3a3;
    --state-ok-bg: #16301f;
    --state-ok-border: #2c6b3f;

    --state-warn-text: #e0bc7c;
    --state-warn-bg: #332612;
    --state-warn-border: #8a6a28;

    --state-error-text: #e8a29e;
    --state-error-bg: #341b1b;
    --state-error-border: #8a3a36;

    --state-neutral-text: #8aa3b0;
    --state-neutral-bg: #1a2535;
    --state-neutral-border: #2e3e50;
}

/*
 * Ohne ausdrückliche Wahl folgt die Seite dem Betriebssystem. Der Rumpf ist derselbe
 * wie oben — ein Test hält beide Belegungen auf demselben Satz, damit sie nicht
 * auseinanderlaufen.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --primary: #c5d0d6;
        --primary-dark: #94a3ab;
        --primary-light: #dde5e9;
        --on-primary: #0f1923;
        --accent-text: #dde5e9;

        --bg: #0f1923;
        --surface: #152030;
        --surface-raised: #1a2535;
        --surface-hover: #213048;

        --text: #e4edf2;
        --text-muted: #8aa3b0;

        --border: rgba(255, 255, 255, 0.08);
        --control-border: #5a7288;
        --focus: #dde5e9;

        --state-ok-text: #8fd3a3;
        --state-ok-bg: #16301f;
        --state-ok-border: #2c6b3f;

        --state-warn-text: #e0bc7c;
        --state-warn-bg: #332612;
        --state-warn-border: #8a6a28;

        --state-error-text: #e8a29e;
        --state-error-bg: #341b1b;
        --state-error-border: #8a3a36;

        --state-neutral-text: #8aa3b0;
        --state-neutral-bg: #1a2535;
        --state-neutral-border: #2e3e50;
    }
}

/* ── Grundlagen ───────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: var(--line-height);
}

/*
 * Der Fokus wird gezeichnet, nicht angedeutet. Wer einem Baustein den Rahmen abnimmt,
 * nimmt ihm auch die Fokusanzeige — deshalb steht sie hier einmal für alles.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius);
}

a {
    color: var(--accent-text);
}

code,
.key {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* ── Gerüst ───────────────────────────────────────────────────────────── */

.page {
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--space-4) var(--space-3);
}

.page--narrow {
    max-width: 44rem;
}

/* ── Seitenkopf ───────────────────────────────────────────────────────── */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.page-head__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.page-head__lead {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
}

/*
 * Abschnittsüberschrift: klein, gesperrt, in Großbuchstaben. Das auffälligste Merkmal
 * der Linie — es ersetzt große Zwischenüberschriften und hält die Seite ruhig.
 */
.section-label {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Suchfeld ─────────────────────────────────────────────────────────── */

.searchbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.searchbox {
    position: relative;
    flex: 1 1 18rem;
    min-width: 12rem;
}

.searchbox__icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.searchbox__input {
    width: 100%;
    padding: 0.55rem 2.25rem;
    border: var(--hairline) solid var(--control-border);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text);
    font: inherit;
}

.searchbox__input::placeholder {
    color: var(--text-muted);
}

/* Der Löschen-Knopf über einem leeren Feld hätte nichts zu tun. */
.searchbox__clear {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    padding: 0.15rem 0.4rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
}

.searchbox__clear:hover {
    background-color: var(--surface-hover);
    color: var(--text);
}

/* ── Filterleiste ─────────────────────────────────────────────────────── */

.filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/*
 * Filter als Chips zum Umschalten: Was gewählt ist, sieht man ohne zu klicken. Der
 * aktive Zustand hängt nicht an der Farbe allein — er ist zusätzlich gefüllt und fett.
 */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border: var(--hairline) solid var(--control-border);
    border-radius: var(--radius-pill);
    background-color: var(--surface);
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: none;
}

.chip:hover {
    background-color: var(--surface-hover);
    color: var(--text);
}

.chip--active {
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
}

/* Ein Filter, der wirkt, aber nicht zu sehen ist, sieht aus wie fehlende Daten. */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.chip--removable .chip__remove {
    font-weight: 700;
    line-height: 1;
}

/* ── Alphabetleiste ───────────────────────────────────────────────────── */

/*
 * Sie springt, sie filtert nicht. Buchstaben ohne Einträge sind blass und nicht
 * anwählbar — sie verschwinden aber nicht, sonst wanderten die übrigen bei jedem
 * Filterwechsel.
 */
.alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin-bottom: var(--space-3);
}

.alphabet__letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: var(--hairline) solid transparent;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.alphabet__letter:hover {
    background-color: var(--primary);
    color: var(--on-primary);
}

.alphabet__letter--empty {
    color: var(--border);
    pointer-events: none;
}

.group-head {
    margin: var(--space-3) 0 var(--space-1);
    color: var(--accent-text);
    font-size: 1.05rem;
    font-weight: 700;
    scroll-margin-top: var(--space-3);
}

/* ── Kachel ───────────────────────────────────────────────────────────── */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-2);
}

/*
 * Kopf farbig, Körper hell — nie umgekehrt. Beim Überfahren wechselt der Rand die
 * Farbe; die Kachel hebt sich nicht an, denn Tiefe vorzutäuschen passt nicht zu einer
 * Marke, die direkt sein will.
 */
.tile {
    display: block;
    overflow: hidden;
    border: var(--hairline) solid var(--control-border);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: inherit;
    text-decoration: none;
}

a.tile:hover {
    border-color: var(--primary-light);
    background-color: var(--surface-hover);
}

.tile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    padding: 0.6rem 0.9rem;
    background-color: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
}

.tile__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Das Zeichen schmückt; die Aussage trägt die Beschriftung daneben. */
.tile__glyph {
    flex: none;
    font-size: 1.5rem;
    opacity: 0.28;
}

.tile__body {
    padding: 0.75rem 0.9rem;
}

.tile__badge {
    margin-top: var(--space-1);
    color: var(--accent-text);
    font-size: 0.85rem;
    font-weight: 600;
}

.metric {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

/* ── Beschriftete Angabe ──────────────────────────────────────────────── */

.detail-rows {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: 0.3rem var(--space-2);
    margin: 0;
}

.detail-rows dt {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.detail-rows dd {
    margin: 0;
}

/* ── Karte ────────────────────────────────────────────────────────────── */

.card {
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    padding: var(--space-2) var(--space-3);
}

.card + .card {
    margin-top: var(--space-2);
}

.card p:last-child {
    margin-bottom: 0;
}

/* ── Leerzustand ──────────────────────────────────────────────────────── */

/*
 * Eine leere Fläche ohne Erklärung sieht aus wie ein Fehler. „Nichts vorhanden" und
 * „nichts gefunden" sind zwei Lagen und brauchen zwei Sätze.
 */
.empty-state {
    padding: var(--space-4) var(--space-3);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    text-align: center;
}

.empty-state__title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.empty-state__text {
    margin: 0 0 var(--space-2);
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ── Zustandsabzeichen ────────────────────────────────────────────────── */

/*
 * Zeichen und Wort tragen die Aussage, die Farbe unterstützt sie nur. So bleibt der
 * Zustand auch bei einer Rot-Grün-Schwäche ablesbar.
 */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.6rem;
    border: var(--hairline) solid var(--state-neutral-border);
    border-radius: var(--radius-pill);
    background-color: var(--state-neutral-bg);
    color: var(--state-neutral-text);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge--ok {
    border-color: var(--state-ok-border);
    background-color: var(--state-ok-bg);
    color: var(--state-ok-text);
}

.badge--warn {
    border-color: var(--state-warn-border);
    background-color: var(--state-warn-bg);
    color: var(--state-warn-text);
}

.badge--error {
    border-color: var(--state-error-border);
    background-color: var(--state-error-bg);
    color: var(--state-error-text);
}

/* ── Schaltflächen ────────────────────────────────────────────────────── */

.button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: var(--hairline) solid transparent;
    border-radius: var(--radius);
    background-color: var(--primary);
    color: var(--on-primary);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background-color: var(--primary-dark);
}

.button--secondary {
    border-color: var(--control-border);
    background-color: var(--surface);
    color: var(--text);
}

.button--secondary:hover {
    background-color: var(--surface-hover);
}

/* ── Formulare ────────────────────────────────────────────────────────── */

form label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

form input,
form textarea,
form select {
    display: block;
    width: 100%;
    margin-bottom: var(--space-2);
    padding: 0.55rem 0.75rem;
    border: var(--hairline) solid var(--control-border);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text);
    font: inherit;
}

form button {
    padding: 0.55rem 1.1rem;
    border: 0;
    border-radius: var(--radius);
    background-color: var(--primary);
    color: var(--on-primary);
    font: inherit;
    cursor: pointer;
}

/* ── Hinweise ─────────────────────────────────────────────────────────── */

.notice {
    margin-bottom: var(--space-3);
    padding: 0.6rem 0.9rem;
    border: var(--hairline) solid var(--state-neutral-border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background-color: var(--state-neutral-bg);
    color: var(--state-neutral-text);
}

.notice-error {
    border-color: var(--state-error-border);
    background-color: var(--state-error-bg);
    color: var(--state-error-text);
}

.notice-success {
    border-color: var(--state-ok-border);
    background-color: var(--state-ok-bg);
    color: var(--state-ok-text);
}

/* ── Tabellen ─────────────────────────────────────────────────────────── */

.table-scroll {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 0.5rem 0.75rem;
    border-bottom: var(--hairline) solid var(--border);
    text-align: left;
}

th {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

tbody tr:hover {
    background-color: var(--surface-hover);
}

/* ── Seitenleiste und Kopfzeile ───────────────────────────────────────── */

.appbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: var(--hairline) solid var(--border);
}

.appbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.appbar__logo {
    width: 28px;
    height: 28px;
}

.appbar__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: auto;
}

/* Der aktive Punkt ist gefüllt, nicht nur farbig beschriftet. */
.appbar__link {
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: 0.9rem;
    text-decoration: none;
}

.appbar__link:hover {
    background-color: var(--surface-hover);
    color: var(--text);
}

.appbar__link--active {
    background-color: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
}

/* ── Fußzeile ─────────────────────────────────────────────────────────── */

footer {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: var(--hairline) solid var(--border);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.muted,
.hint {
    color: var(--text-muted);
}

.hint {
    font-size: 0.9rem;
}

.list {
    display: grid;
    gap: var(--space-2);
    padding: 0;
    list-style: none;
}

.pagination {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    margin-top: var(--space-3);
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ── Für die Sprachausgabe, nicht fürs Auge ───────────────────────────── */

/*
 * Sichtbar für die Sprachausgabe, unsichtbar auf dem Bildschirm. Nicht
 * `display: none` — das nähme das Element auch aus dem Automation-Baum.
 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Erscheinungsbild umschalten ──────────────────────────────────────── */

.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border: var(--hairline) solid var(--control-border);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: none;
}

.theme-switch:hover {
    background-color: var(--surface-hover);
    color: var(--text);
}

/* ── Seitenfuß ────────────────────────────────────────────────────────── */

.legal-footer {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: var(--hairline) solid var(--border);
}

.legal-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.legal-footer a {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.legal-footer a:hover {
    color: var(--text);
}

/*
    Der Honigtopf. Nicht per display:none - manche Automaten überspringen, was so
    ausgeblendet ist. Aus dem Bild geschoben wird er von jedem gefunden und von keinem
    Menschen gesehen.
*/
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}