/* netbits.ai-host – Portal-Stile nach coding-guidelines/rules/blazor-portal.md.
   Farben, Flächen und Text kommen aus der MudBlazor-Palette (NetbitsTheme); hier stehen nur
   Schriften, die UI-BASIS-Variablen und die gemeinsamen Bausteine. Werte wie in Netbits.Flow. */

/* ── Hausschriften: mitgeliefert, nicht geholt (SIL OFL 1.1, Lizenzen in fonts/) ── */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/jetbrains-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/jetbrains-mono-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/jetbrains-mono-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/jetbrains-mono-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Schriftrollen: bedienen oder lesen ── */
:root {
    --nb-schriftart-bedienen: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    --nb-schriftart-lesen: "IBM Plex Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
    --nb-schriftart-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* ── UI-BASIS: Zustände, Maße (4er-Raster), Schriftgrößen, Breiten ── */
:root {
    --nb-aktiv: #2C2A44;
    --nb-gewaehlt: #26243A;
    --nb-hover: #24242E;

    --nb-abstand-fenster: 20px;
    --nb-abstand-eintraege: 4px;
    --nb-abstand-gruppen: 20px;

    --nb-radius-knopf: 8px;
    --nb-radius-eintrag: 10px;
    --nb-radius-marke: 12px;
    --nb-radius-fenster: 14px;

    --nb-schrift-detailtitel: 20px;
    --nb-schrift-fenstertitel: 18px;
    --nb-schrift-eintrag: 15px;
    --nb-schrift-text: 15px;
    --nb-schrift-bedienung: 14px;
    --nb-schrift-beiwerk: 13px;
    --nb-schrift-gruppenlabel: 12px;

    --nb-breite-seitenleiste: 210px;
    --nb-breite-detail: 320px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: var(--nb-schriftart-bedienen);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Leseflächen: EINE Regel, EINE Liste ── */
.nb-lesen,
.nb-abschnitt > .erklaerung,
.nb-leer,
.nb-hinweis {
    font-family: var(--nb-schriftart-lesen);
}

.nb-lesen code,
.nb-hinweis code {
    font-family: var(--nb-schriftart-code);
}

/* ── Abschnitte als Karten: Überschrift und Anlegen-Knopf in einer Zeile ── */
.nb-abschnitt {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--nb-radius-marke);
    padding: 14px 16px 16px;
    margin-bottom: 18px;
    background: var(--mud-palette-surface);
}

.nb-abschnitt > .kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.nb-abschnitt h2 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
}

.nb-abschnitt > .kopf h2 { margin-bottom: 0; }

.nb-abschnitt > .erklaerung {
    margin: 0 0 12px;
    font-size: 13px;
    opacity: .7;
    line-height: 1.45;
}

/* ── Kopfzeilen und Filter: volle Breite, Filter rechts bündig ── */
.nb-reiterkopf { width: 100%; }

.nb-pf-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}

.nb-pf-filter .mud-input-control { flex: 0 0 auto; width: 220px; }
.nb-pf-filterwort { font-size: 13px; opacity: .7; white-space: nowrap; }

/* ── Leere Listen und Hinweise ── */
.nb-leer { opacity: .7; padding: 8px 0; }
.nb-hinweis { font-size: 13px; opacity: .8; line-height: 1.45; }

/* ── Anmeldung ── */
.nb-anmeldung {
    max-width: 380px;
    margin: 12vh auto 0;
    padding: var(--nb-abstand-fenster);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--nb-radius-fenster);
    background: var(--mud-palette-surface);
}

/* Beim Seitenwechsel setzt Blazor den Fokus auf die Überschrift (FocusOnNavigate), damit Vorleser dort
   beginnen. Die Überschrift ist kein Bedienelement; ein Rahmen darum wäre nur Unruhe. */
h4:focus,
h4:focus-visible {
    outline: none;
}

/* ── Einstellungszeilen: links Titel und Beschreibung, rechts das Feld ── */
.nb-einstellungsgruppe { margin-bottom: var(--nb-abstand-gruppen); }

.nb-einstellungsgruppe > h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
}

.nb-einstellungsgruppe > .erklaerung {
    margin: 0 0 8px;
    font-size: 13px;
    opacity: .7;
    line-height: 1.45;
    font-family: var(--nb-schriftart-lesen);
}

.nb-einstellung {
    display: grid;
    grid-template-columns: minmax(220px, 40%) 1fr;
    gap: 24px;
    align-items: start;
    padding: 14px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.nb-einstellung-text .titel { font-weight: 600; font-size: var(--nb-schrift-bedienung); }
.nb-einstellung-text .titel .pflicht { color: var(--mud-palette-error); margin-left: 2px; }

.nb-einstellung-text .beschreibung {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    opacity: .75;
}

.nb-einstellung-feld .mud-input-control { margin-top: 0; }
.nb-einstellung-feld .nb-feldhinweis { font-size: 12px; opacity: .7; margin-top: 4px; }

@media (max-width: 900px) {
    .nb-einstellung { grid-template-columns: 1fr; gap: 8px; }
}

/* Datenklassen-Leiter: Stufe, Zustand als Wort, Beispiel */
.nb-leiter { list-style: none; margin: 8px 0 0; padding: 0; }
.nb-leiter li {
    display: grid;
    grid-template-columns: 20px 200px 190px 1fr;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.nb-leiter li:first-child { border-top: none; }
.nb-leiter .stufe { font-weight: 600; }
.nb-leiter .beispiel { color: var(--mud-palette-text-secondary); font-size: 0.85em; }
.nb-leiter .erlaubt .mud-icon-root, .nb-leiter .erlaubt .zustand { color: var(--mud-palette-success); }
.nb-leiter .frei .mud-icon-root, .nb-leiter .frei .zustand { color: var(--mud-palette-text-secondary); }
.nb-leiter .gesperrt { opacity: 0.6; }
.nb-leiter .gesperrt .mud-icon-root, .nb-leiter .gesperrt .zustand { color: var(--mud-palette-error); }
@media (max-width: 900px) {
    .nb-leiter li { grid-template-columns: 20px 1fr auto; }
    .nb-leiter .beispiel { grid-column: 2 / -1; }
}

/* Einmal-Anzeige eines neuen Keys */
.nb-einmal .titel { font-weight: 600; }
.nb-einmal .zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nb-einmal-key {
    flex: 1 1 420px;
    font-family: var(--nb-schriftart-code);
    font-size: 0.95em;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}
.nb-kopieren {
    padding: 7px 14px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-primary);
    cursor: pointer;
    font: inherit;
}
.nb-kopieren:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* Budget-Rechner der Nutzungsstufen */
.nb-rechner { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.nb-rechner-ergebnis td:first-child { width: 220px; }

/* Nutzungsauswertung */
.nb-summe td { font-weight: 600; border-top: 2px solid var(--mud-palette-lines-default); }
.nb-abschnitt td.text-right { white-space: nowrap; }