/* _content/bettERFramework.KNOW.UI/Components/Pages/KnowAreaAccess.razor.rz.scp.css */
/* Bereichsrechte: eine Kartenliste, keine Tabelle — Zustand, Seitenzahl und Personenliste eines
   Bereichs gehören zusammen und sind keine Spalten. */

.know-areas__title[b-2qmecju5e3] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bp-text);
}

.know-areas__lead[b-2qmecju5e3] {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--bp-text-muted);
}

.know-area[b-2qmecju5e3] {
    padding: 0;
    overflow: hidden;
}

/* Die Kopfzeile ist die ganze Klickfläche — ein kleiner Pfeil als einziges Ziel wäre eine
   Geduldsprobe. */
.know-area__head[b-2qmecju5e3] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1.15rem;
    border: 0;
    background: none;
    color: var(--bp-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.know-area__head:hover[b-2qmecju5e3] { background: var(--bp-panel); }

.know-area__head:focus-visible[b-2qmecju5e3] {
    outline: 2px solid var(--bp-yellow);
    outline-offset: -2px;
}

.know-area__name[b-2qmecju5e3] {
    font-size: 0.95rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.know-area__state[b-2qmecju5e3] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--bp-text-muted);
    white-space: nowrap;
}

.know-area__count[b-2qmecju5e3] {
    font-size: 0.78rem;
    color: var(--bp-text-muted);
    white-space: nowrap;
}

.know-area__body[b-2qmecju5e3] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0 1.15rem 1.15rem;
    border-top: 1px solid var(--bp-panel-border);
    padding-top: 0.85rem;
}

/* Der Sperrschalter: die erste Entscheidung im Rumpf, deshalb etwas kräftiger als der Rest. */
.know-area__lock[b-2qmecju5e3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
}

.know-area__explain[b-2qmecju5e3] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--bp-text-muted);
}

/* Der Hinweis auf die Wirkung: sichtbar, aber kein Fehler — deshalb Warn-Ton statt roter Fläche. */
.know-area__warn[b-2qmecju5e3] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bp-warn);
    color: var(--bp-warn);
    font-size: 0.82rem;
}

.know-area__users[b-2qmecju5e3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.know-area__user[b-2qmecju5e3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid transparent;
}

.know-area__user:hover[b-2qmecju5e3] { border-color: var(--bp-panel-border); }

.know-area__pick[b-2qmecju5e3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    cursor: pointer;
}

.know-area__user-name[b-2qmecju5e3] {
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

/* Zwei Stufen, ein Umschalter: nebeneinander statt Auswahlfeld — bei genau zwei Werten ist das
   Aufklappen ein Klick zu viel. */
.know-area__levels[b-2qmecju5e3] {
    display: inline-flex;
    flex-shrink: 0;
}

.know-area__level[b-2qmecju5e3] {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--bp-panel-border);
    background: none;
    color: var(--bp-text-muted);
    font: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}

.know-area__level + .know-area__level[b-2qmecju5e3] { border-left: 0; }

.know-area__level:hover[b-2qmecju5e3] { color: var(--bp-text); }

.know-area__level.is-active[b-2qmecju5e3] {
    border-color: var(--bp-yellow);
    color: var(--bp-yellow);
}

.know-area__actions[b-2qmecju5e3] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* ---- Bereichsverwaltung: Farbpunkt, Umbenennen, Palette ---- */

/* Derselbe Punkt wie auf /know — die Maske zeigt den Bereich so, wie er in der Ablage erscheint. */
.know-area__dot[b-2qmecju5e3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    background: color-mix(in srgb, var(--area-color) 22%, transparent);
    border: 1px solid var(--area-color);
    color: var(--area-color);
    font-size: 0.72rem;
}

.know-area__manage[b-2qmecju5e3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--bp-panel-border);
}

.know-area__field[b-2qmecju5e3] { flex: 1 1 16rem; }
.know-area__field--colour[b-2qmecju5e3] { flex: 0 0 auto; }

.know-area__rename[b-2qmecju5e3] {
    display: flex;
    gap: 0.5rem;
}

.know-area__rename .know-field__input[b-2qmecju5e3] { flex: 1 1 auto; }

.know-area__swatches[b-2qmecju5e3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Die Palette statt eines freien Farbwählers: Freie Wahl brächte Töne, die auf der Navy-Fläche
   nicht lesbar sind, und zwei Bereiche in fast gleichem Grün. */
.know-area__swatch[b-2qmecju5e3] {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: var(--swatch);
    border: 2px solid transparent;
    cursor: pointer;
}

.know-area__swatch:hover[b-2qmecju5e3] { border-color: var(--bp-text-muted); }

.know-area__swatch.is-active[b-2qmecju5e3] {
    border-color: var(--bp-text);
    box-shadow: inset 0 0 0 2px var(--bp-panel);
}

.know-area__swatch:focus-visible[b-2qmecju5e3] {
    outline: 2px solid var(--bp-yellow);
    outline-offset: 2px;
}

.know-area__delete[b-2qmecju5e3] { flex: 0 0 auto; }

/* Der Warnsatz vor dem Zusammenführen: gelb, weil er eine Folge ankündigt, die niemand zurückholt. */
.know-area__warn[b-2qmecju5e3] {
    margin-top: 0.6rem;
    color: var(--bp-yellow);
    font-size: 0.85rem;
}
/* _content/bettERFramework.KNOW.UI/Components/Pages/KnowHome.razor.rz.scp.css */
/* Einstieg der Wissensablage: das Suchfeld führt, alles andere ordnet sich ihm unter.
   Wiederverwendbare Bausteine (Meta-Zeile, Panel, Liste) liegen in bp-components.css. */

.know-home__title[b-cj7hv5kqbt] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bp-text);
}

/* ---- Suchfeld ---- */

.know-search[b-cj7hv5kqbt] {
    margin-bottom: 1.5rem;
}

.know-search__field[b-cj7hv5kqbt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: min(760px, 100%);
    padding: 0.85rem 1.1rem;
    background: var(--bp-panel);
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-lg);
    transition: border-color 120ms ease-out;
}

/* Fokus trägt die Marke — das Suchfeld ist der Ort, an dem diese Seite arbeitet. */
.know-search__field:focus-within[b-cj7hv5kqbt] {
    border-color: var(--bp-yellow);
}

.know-search__icon[b-cj7hv5kqbt] {
    font-size: 1.1rem;
    color: var(--bp-text-muted);
}

.know-search__input[b-cj7hv5kqbt] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--bp-text);
    font-size: 1.05rem;
    font-family: inherit;
}

.know-search__input[b-cj7hv5kqbt]::placeholder {
    color: var(--bp-text-muted);
}

/* Der Browser zeichnet in ein type=search sein eigenes Kreuz — es passt in keine Designwelt. */
.know-search__input[b-cj7hv5kqbt]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.know-search__filters[b-cj7hv5kqbt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.know-search__count[b-cj7hv5kqbt] {
    font-size: 0.82rem;
    color: var(--bp-text-muted);
}

/* ---- Trefferliste ---- */

.know-hits[b-cj7hv5kqbt] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 72ch;
}

.know-hits__title[b-cj7hv5kqbt] {
    font-size: 1.02rem;
    font-weight: 600;
}

.know-hits__snippet[b-cj7hv5kqbt] {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--bp-text);
}

/* Der Treffer im Ausschnitt: Markierung ohne Farbfläche — Gelb gehört der Navigation. */
.know-hits__snippet mark[b-cj7hv5kqbt] {
    padding: 0 0.1em;
    background: transparent;
    color: var(--bp-text);
    font-weight: 600;
    box-shadow: inset 0 -0.35em 0 rgba(230, 255, 3, 0.22);
}

/* ---- Übersicht (ohne Suchbegriff) ---- */

/* Zwei oder drei Kästen, je nachdem ob „Meine Seiten" etwas zu zeigen hat — deshalb auto-fit
   statt einer festen Spaltenzahl. Unter 22rem je Spalte bricht die Zeile um, statt die Titel
   zu Buchstabensäulen zu quetschen. */
.know-columns[b-cj7hv5kqbt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 1rem;
    align-items: start;
}

/* ---- Seitenbaum (Nebenansicht) ---- */

.know-tree[b-cj7hv5kqbt] {
    margin-top: 1rem;
}

.know-tree__toggle[b-cj7hv5kqbt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border: 0;
    background: none;
    color: var(--bp-text-muted);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.know-tree__toggle:hover[b-cj7hv5kqbt] {
    color: var(--bp-text);
}

.know-tree__body[b-cj7hv5kqbt] {
    margin-top: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--bp-panel);
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-lg);
}

/* ---- Verzeichnis: nach Bereich gruppiert, mehrspaltig ---- */

.know-areas-grid[b-cj7hv5kqbt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
    align-items: start;
}

.know-areacard[b-cj7hv5kqbt] {
    padding: 0.85rem 1rem;
}

.know-areacard__head[b-cj7hv5kqbt] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Der Bereichspunkt trägt die gepflegte Farbe; ein Symbol sitzt darin statt daneben, damit die
   Zeilen unabhängig davon bündig bleiben, ob ein Bereich eines hat. */
.know-areacard__dot[b-cj7hv5kqbt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    background: color-mix(in srgb, var(--area-color) 22%, transparent);
    border: 1px solid var(--area-color);
    color: var(--area-color);
    font-size: 0.72rem;
}

.know-areacard__name[b-cj7hv5kqbt] { overflow-wrap: anywhere; }

.know-areacard__count[b-cj7hv5kqbt] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--bp-text-muted);
}

.know-areacard__list[b-cj7hv5kqbt] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Die Einrückung zeigt die Baumtiefe — sie bleibt die Ordnung, nur innerhalb des Bereichs. */
.know-areacard__row[b-cj7hv5kqbt] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.45rem;
    padding: 0.22rem 0 0.22rem calc(var(--depth, 0) * 0.85rem);
    font-size: 0.85rem;
}

.know-areacard__link[b-cj7hv5kqbt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Der Vorschau-Knopf erscheint erst beim Überfahren der Zeile: In einer Liste mit achtzig Zeilen
   wären achtzig sichtbare Knöpfe eine Wand. */
.know-areacard__peek[b-cj7hv5kqbt] {
    padding: 0.1rem 0.25rem;
    border: 0;
    background: none;
    color: var(--bp-text-muted);
    font: inherit;
    cursor: pointer;
    opacity: 0;
}

.know-areacard__row:hover .know-areacard__peek[b-cj7hv5kqbt],
.know-areacard__peek:focus-visible[b-cj7hv5kqbt] { opacity: 1; }

.know-areacard__peek:hover[b-cj7hv5kqbt] { color: var(--bp-yellow); }

/* ---- Vorschau-Panel ---- */

.know-peek[b-cj7hv5kqbt] {
    position: sticky;
    bottom: 1rem;
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--bp-panel);
    border: 1px solid var(--bp-yellow);
}

.know-peek__head[b-cj7hv5kqbt] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
}

.know-peek__title[b-cj7hv5kqbt] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.know-peek__close[b-cj7hv5kqbt] {
    border: 0;
    background: none;
    color: var(--bp-text-muted);
    font: inherit;
    cursor: pointer;
}

.know-peek__close:hover[b-cj7hv5kqbt] { color: var(--bp-text); }

.know-peek__meta[b-cj7hv5kqbt] { margin-top: 0.4rem; }

.know-peek__excerpt[b-cj7hv5kqbt] {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--bp-text);
}

.know-peek__excerpt--empty[b-cj7hv5kqbt] { color: var(--bp-text-muted); font-style: italic; }

.know-peek__facts[b-cj7hv5kqbt] {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--bp-text-muted);
}

.know-peek__open[b-cj7hv5kqbt] {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
}

/* Herkunft eines Treffers aus einem Anhang — gelb wie die Verweise, weil es dieselbe Aussage ist:
   „hier geht es weiter, aber woanders hin, als du denkst". */
.know-hits__source[b-cj7hv5kqbt] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--bp-yellow);
}
/* _content/bettERFramework.KNOW.UI/Components/Pages/KnowImport.razor.rz.scp.css */
/* Übernahme aus Notion: zwei Karten untereinander, Datei oben, Vorschau darunter.
   Wiederverwendbare Bausteine (Karte, Chip, Meta-Zeile) liegen in bp-components.css. */

.know-import__lead[b-d5qdw183bx] {
    margin: 0.35rem 0 0;
    color: var(--bp-text-muted);
    font-size: 0.9rem;
}

.know-import__panel[b-d5qdw183bx] {
    padding: 1.25rem 1.5rem;
}

.know-import__panel-head[b-d5qdw183bx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.know-import__panel-title[b-d5qdw183bx] {
    margin: 0 0 0.9rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bp-text);
}

.know-import__panel-head .know-import__panel-title[b-d5qdw183bx] {
    margin-bottom: 0;
}

.know-import__quiet[b-d5qdw183bx] {
    color: var(--bp-text-muted);
    font-size: 0.875rem;
}

/* ---- Datei wählen ---- */

/* Das Feld ist ein <label> um ein verstecktes <input type=file> — ein Klick irgendwo darauf
   öffnet den Dateidialog, ohne dass die Seite dafür JavaScript braucht. */
.know-import__drop[b-d5qdw183bx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.25rem 1.5rem;
    border: 1px dashed var(--bp-panel-border);
    border-radius: var(--bp-radius-lg);
    background: var(--bp-panel);
    cursor: pointer;
    transition: border-color 120ms ease-out;
}

.know-import__drop:hover[b-d5qdw183bx],
.know-import__drop:focus-within[b-d5qdw183bx] {
    border-color: var(--bp-yellow);
}

.know-import__drop input[type="file"][b-d5qdw183bx] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.know-import__drop-icon[b-d5qdw183bx] {
    font-size: 1.6rem;
    color: var(--bp-text-muted);
}

.know-import__drop-text[b-d5qdw183bx] {
    font-weight: 600;
    color: var(--bp-text);
}

.know-import__howto[b-d5qdw183bx] {
    margin: 1rem 0 0;
    padding-left: 1.25rem;
    color: var(--bp-text-muted);
    font-size: 0.875rem;
    line-height: 1.7;
}

.know-import__file[b-d5qdw183bx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.know-import__file-name[b-d5qdw183bx] {
    font-weight: 600;
    color: var(--bp-text);
    word-break: break-all;
}

.know-import__skipped[b-d5qdw183bx] {
    margin-top: 0.9rem;
    color: var(--bp-text-muted);
    font-size: 0.875rem;
}

.know-import__skipped ul[b-d5qdw183bx] {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    line-height: 1.6;
}

/* ---- Zahlen der Vorschau ---- */

.know-import__counts[b-d5qdw183bx] {
    display: flex;
    gap: 2.5rem;
    margin: 1.25rem 0 0.75rem;
    flex-wrap: wrap;
}

.know-import__count[b-d5qdw183bx] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.know-import__count-value[b-d5qdw183bx] {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--bp-text);
}

/* Übersprungenes ist kein Erfolg und kein Fehler — es tritt zurück, statt mitzuzählen. */
.know-import__count--quiet .know-import__count-value[b-d5qdw183bx] {
    color: var(--bp-text-muted);
}

.know-import__count-label[b-d5qdw183bx] {
    font-size: 0.8rem;
    color: var(--bp-text-muted);
}

.know-import__note[b-d5qdw183bx] {
    margin: 0.25rem 0 0;
    color: var(--bp-text-muted);
    font-size: 0.875rem;
}

.know-import__note--done[b-d5qdw183bx] {
    color: var(--bp-text);
}

/* Hinweis auf einen grossen Lauf: sichtbar, aber kein Fehler — deshalb der Warn-Ton und keine
   rote Flaeche. Er haelt niemanden auf, er sagt nur, was der Lauf kostet. */
.know-import__warn[b-d5qdw183bx] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.25rem 0 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bp-warn);
    color: var(--bp-warn);
    font-size: 0.875rem;
}

.know-import__sub[b-d5qdw183bx] {
    margin: 1.5rem 0 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bp-text);
}

.know-import__messages[b-d5qdw183bx] {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--bp-text-muted);
    font-size: 0.875rem;
    line-height: 1.7;
}

.know-import__messages > li + li[b-d5qdw183bx] {
    margin-top: 0.6rem;
}

.know-import__entry-title[b-d5qdw183bx] {
    color: var(--bp-text);
    font-weight: 600;
    margin-right: 0.5rem;
}

.know-import__done-actions[b-d5qdw183bx] {
    margin-top: 1.5rem;
}

/* ---- Quellenauswahl ---- */

.know-sources[b-d5qdw183bx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.know-source[b-d5qdw183bx] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--bp-panel-border);
    background: transparent;
    color: var(--bp-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.know-source:hover:not(:disabled)[b-d5qdw183bx] { border-color: var(--bp-yellow); }

.know-source:focus-visible[b-d5qdw183bx] {
    outline: 2px solid var(--bp-yellow);
    outline-offset: 2px;
}

/* Die gewählte Quelle trägt den CI-Rahmen — gefüllt wäre sie eine gelbe Fläche, und die gehört
   der Navigation (DESIGN.md, Anti-Patterns). */
.know-source.is-active[b-d5qdw183bx] {
    border-color: var(--bp-yellow);
    box-shadow: inset 0 0 0 1px var(--bp-yellow);
}

/* Noch nicht gebaut: sichtbar, aber erkennbar nicht wählbar. */
.know-source--soon[b-d5qdw183bx] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Das Format-Kürzel trägt die Kennfarbe der Quelle — sie leistet hier, was sonst ein Anbieterlogo
   leistete: acht Kacheln auf einen Blick unterscheidbar machen. Bewusst KEINE Anbieterfarben
   nachgebaut, sondern dieselbe Palette wie die Bereichspunkte auf /know. */
.know-source__format[b-d5qdw183bx] {
    min-width: 3.1rem;
    padding: 0.3rem 0.4rem;
    background: color-mix(in srgb, var(--source-color) 18%, transparent);
    border: 1px solid var(--source-color);
    color: var(--source-color);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
}

/* Eine noch nicht gebaute Quelle wird grau: Die Kachel ist ohnehin ausgegraut, und eine kräftige
   Farbe daneben sähe aus wie ein Angebot, das sie nicht ist. */
.know-source--soon .know-source__format[b-d5qdw183bx] {
    background: transparent;
    border-color: var(--bp-panel-border);
    color: var(--bp-text-muted);
}

.know-source__body[b-d5qdw183bx] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.know-source__name[b-d5qdw183bx] {
    font-size: 0.9rem;
    font-weight: 500;
}

.know-source__hint[b-d5qdw183bx] {
    font-size: 0.74rem;
    color: var(--bp-text-muted);
    overflow-wrap: anywhere;
}

.know-source__badge[b-d5qdw183bx] { font-size: 0.65rem; }

/* Solange keine Quelle gewählt ist, ist das Ablagefeld sichtbar zu. */
.know-import__drop--disabled[b-d5qdw183bx] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Fortschritt: Zahlen über dem Balken. Ein Balken allein sagt „es läuft"; die Zahl darüber sagt
   „wie lange noch" — das ist die Frage, die man bei einem minutenlangen Lauf stellt. */
.know-import__progress[b-d5qdw183bx] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.know-import__running[b-d5qdw183bx] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--bp-text);
}

.know-import__current[b-d5qdw183bx] {
    margin-left: 0.35rem;
    color: var(--bp-text-muted);
}
/* _content/bettERFramework.KNOW.UI/Components/Pages/KnowPages.razor.rz.scp.css */
/* Tabellensicht auf die Ablage. Raster, Zeilen und Pager kommen aus dem gethemten Grid
   (bp-components.css) — hier steht nur, was diese Seite darüber legt. */

.know-pages__title[b-3otlir5kdh] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bp-text);
}

.know-pages__subtitle[b-3otlir5kdh] {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--bp-text-muted);
}

.know-pages__filters[b-3otlir5kdh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Das Filterfeld trägt die Breite der Seite, nicht die eines Formularfelds: Es ist der
   Haupteinstieg in die Tabelle, nicht eine Angabe unter vielen. */
.know-pages__search[b-3otlir5kdh] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bp-panel-border);
    background: var(--bp-panel);
    color: var(--bp-text);
    font-family: inherit;
    font-size: 0.88rem;
}

.know-pages__search[b-3otlir5kdh]::placeholder {
    color: var(--bp-text-muted);
}

.know-pages__search:focus[b-3otlir5kdh] {
    outline: none;
    border-color: var(--bp-yellow);
}

/* Die Reiter stehen dicht unter der Filterzeile — sie sind ihre zweite Achse, nicht ein
   eigener Abschnitt. */
.know-pages__areas[b-3otlir5kdh] {
    margin: 0;
}

.know-pages__status[b-3otlir5kdh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.know-pages__tags[b-3otlir5kdh] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* Aktionsleiste über der Tabelle — erscheint erst mit Auswahl. Gelber Rahmen, weil sie einen
   Zustand anzeigt, der auf eine Handlung wartet. */
.know-pages__bulk[b-3otlir5kdh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.7rem 0.9rem;
    background: var(--bp-panel);
    border: 1px solid var(--bp-yellow);
}

.know-pages__bulk-count[b-3otlir5kdh] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bp-text);
}
/* _content/bettERFramework.KNOW.UI/Components/Pages/KnowPageView.razor.rz.scp.css */
/* Eine Wissensseite: Lesen ist der Normalfall, Bearbeiten der Ausnahmezustand derselben Seite.
   Fließtext, Meta-Zeile und Listen liegen in bp-components.css. */

.know-page__crumbs[b-m7qabafgg1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--bp-text-muted);
}

.know-page__title[b-m7qabafgg1] {
    margin: 0.15rem 0 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bp-text);
}

/* Im Bearbeiten-Modus bleibt der Titel an seinem Platz — er wird zum Feld, nicht zu einer Zeile
   weiter unten; sonst springt die Seite beim Umschalten. */
.know-page__title-input[b-m7qabafgg1] {
    width: min(48rem, 100%);
    margin: 0.15rem 0 0;
    padding: 0.15rem 0;
    border: 0;
    border-bottom: 1px solid var(--bp-panel-border);
    background: transparent;
    color: var(--bp-text);
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 600;
}

.know-page__title-input:focus[b-m7qabafgg1] {
    outline: none;
    border-bottom-color: var(--bp-yellow);
}

.know-page__body[b-m7qabafgg1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.know-page__meta[b-m7qabafgg1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.know-page__facts[b-m7qabafgg1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: var(--bp-text-muted);
}

.know-page__fact[b-m7qabafgg1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.know-page__fact--author[b-m7qabafgg1] {
    margin-left: auto;
}

/* ---- Eigenschaften im Bearbeiten-Modus ---- */

.know-field[b-m7qabafgg1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 12rem;
    flex: 1 1 12rem;
}

.know-field--wide[b-m7qabafgg1] {
    flex: 1 1 100%;
}

.know-field__label[b-m7qabafgg1] {
    font-size: 0.75rem;
    color: var(--bp-text-muted);
}

.know-field__input[b-m7qabafgg1] {
    padding: 0.4rem 0.6rem;
    background: var(--bp-surface);
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius);
    color: var(--bp-text);
    font: inherit;
    font-size: 0.9rem;
}

.know-field__input:focus[b-m7qabafgg1] {
    outline: none;
    border-color: var(--bp-yellow);
}

/* ---- Markdown-Editor mit Vorschau ---- */

.know-editor[b-m7qabafgg1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
    min-height: 26rem;
}

.know-editor__input[b-m7qabafgg1] {
    width: 100%;
    min-height: 26rem;
    padding: 1rem 1.1rem;
    background: var(--bp-panel);
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-lg);
    color: var(--bp-text);
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
    font-size: 0.88rem;
    line-height: 1.6;
    resize: vertical;
    tab-size: 2;
}

.know-editor__input:focus[b-m7qabafgg1] {
    outline: none;
    border-color: var(--bp-yellow);
}

.know-editor__preview[b-m7qabafgg1] {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    background: var(--bp-panel);
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-lg);
}

/* ---- Dateien an der Seite ---- */

.know-files[b-m7qabafgg1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* Der Browser zeichnet für ein <input type=file> einen eigenen Knopf, der in keiner Designwelt
   sitzt — das Feld wird versteckt, die Beschriftung ist der Knopf. */
.know-files__add[b-m7qabafgg1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: var(--bp-panel);
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-lg);
    color: var(--bp-text);
    font-size: 0.85rem;
    cursor: pointer;
}

.know-files__add:hover[b-m7qabafgg1] {
    border-color: var(--bp-yellow);
}

.know-files__add:focus-within[b-m7qabafgg1] {
    outline: 2px solid var(--bp-yellow);
    outline-offset: 2px;
}

.know-files__add input[type="file"][b-m7qabafgg1] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.know-files__hint[b-m7qabafgg1],
.know-files__size[b-m7qabafgg1] {
    font-size: 0.78rem;
    color: var(--bp-text-muted);
}

.know-files__list[b-m7qabafgg1] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.know-files__item[b-m7qabafgg1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.know-files__action[b-m7qabafgg1] {
    border: 0;
    background: none;
    padding: 0;
    color: var(--bp-text-muted);
    font: inherit;
    font-size: 0.78rem;
    text-decoration: underline;
    cursor: pointer;
}

.know-files__action:hover[b-m7qabafgg1] {
    color: var(--bp-text);
}

.know-files__action--danger:hover[b-m7qabafgg1] {
    color: var(--bp-debit);
}

.know-page__children[b-m7qabafgg1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bp-panel-border);
}

/* --- Lesesicht: Text links, Infobox rechts ------------------------------------------------ */

/* Der Text bekommt die Breite, die Fakten die Kante. 2fr/1fr statt fester Spalten: die Infobox
   soll auf einem schmalen Fenster mitgehen, nicht den Fließtext unter die Messgrenze drücken. */
.know-page__split[b-m7qabafgg1] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.know-page__main[b-m7qabafgg1] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

/* Die Infobox klebt beim Scrollen: Wer in einem langen Text steht, will Status und Gliederung
   sehen, ohne zurückzuspringen. */
.know-aside[b-m7qabafgg1] {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.know-aside__card[b-m7qabafgg1] {
    padding: 1rem 1.15rem;
}

/* --- Faktenliste (Hausmuster dl/dt/dd wie XrmAccountDetail) -------------------------------- */

.know-facts[b-m7qabafgg1] {
    display: flex;
    flex-direction: column;
    margin: 0.5rem 0 0;
}

.know-facts__row[b-m7qabafgg1] {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.5rem;
    padding: 0.42rem 0;
    border-bottom: 1px solid var(--bp-panel-border);
}

.know-facts__row:last-child[b-m7qabafgg1] {
    border-bottom: 0;
}

.know-facts dt[b-m7qabafgg1] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--bp-text-muted);
}

.know-facts dd[b-m7qabafgg1] {
    margin: 0;
    font-size: 0.84rem;
    color: var(--bp-text);
    overflow-wrap: anywhere;
}

.know-facts__author[b-m7qabafgg1] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.know-facts__tags[b-m7qabafgg1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Ein Schlagwort führt in die Tabellensicht, auf den eigenen Filter — deshalb ein echter Link
   und kein reiner Anzeige-Chip. */
.know-tag[b-m7qabafgg1] {
    text-decoration: none;
}

.know-tag:hover[b-m7qabafgg1] {
    border-color: var(--bp-yellow);
    color: var(--bp-yellow);
}

/* --- Objektverweise ------------------------------------------------------------------------ */

.know-links[b-m7qabafgg1] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.know-link[b-m7qabafgg1] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--bp-panel-border);
    color: var(--bp-text);
    font-size: 0.82rem;
    text-decoration: none;
}

a.know-link:hover[b-m7qabafgg1] {
    border-color: var(--bp-yellow);
}

/* Das Modul-Kürzel trägt die Herkunft — klein, ruhig, immer an derselben Stelle, damit die
   Spalte beim Überfliegen eine Spalte bleibt. */
.know-link__module[b-m7qabafgg1] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--bp-text-muted);
    text-transform: uppercase;
}

.know-link__title[b-m7qabafgg1] {
    overflow-wrap: anywhere;
}

.know-link__subtitle[b-m7qabafgg1] {
    grid-column: 2;
    font-size: 0.74rem;
    color: var(--bp-text-muted);
}

/* Abgeschlossen/archiviert: der Verweis gilt noch, das Ziel ruht. */
.know-link--inactive .know-link__title[b-m7qabafgg1] {
    color: var(--bp-text-muted);
}

/* Gelöscht oder nicht sichtbar: sichtbar bleiben, aber nicht anklickbar aussehen. Das
   Durchstreichen sagt „war einmal" — ein verschwundener Verweis sagte gar nichts. */
.know-link--missing[b-m7qabafgg1] {
    border-style: dashed;
}

.know-link--missing .know-link__title[b-m7qabafgg1] {
    color: var(--bp-text-muted);
    text-decoration: line-through;
}

/* --- Inhaltsverzeichnis -------------------------------------------------------------------- */

.know-outline[b-m7qabafgg1] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.5rem;
}

.know-outline__item[b-m7qabafgg1] {
    padding: 0.28rem 0 0.28rem 0.6rem;
    border-left: 1px solid var(--bp-panel-border);
    color: var(--bp-text-muted);
    font-size: 0.82rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.know-outline__item:hover[b-m7qabafgg1] {
    border-left-color: var(--bp-yellow);
    color: var(--bp-text);
}

.know-outline__item--h3[b-m7qabafgg1] {
    padding-left: 1.4rem;
    font-size: 0.78rem;
}

/* --- Hinweis unter dem Editor --------------------------------------------------------------- */

.know-editor__hint[b-m7qabafgg1] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--bp-text-muted);
}

/* Unter 1200px hat die Infobox keine sinnvolle Breite mehr — sie wandert unter den Text und
   gibt das Kleben auf (eine klebende Leiste, die den halben Schirm füllt, ist eine Sperre). */
@media (max-width: 1200px) {
    .know-page__split[b-m7qabafgg1] {
        grid-template-columns: minmax(0, 1fr);
    }

    .know-aside[b-m7qabafgg1] {
        position: static;
    }
}

/* ---- KI-Zusammenfassung der Anhänge ---- */

/* Der Schalter trägt LILA und das KI-Zeichen — Hausregel für jede KI-Aktion, ohne Ausnahme. */
.know-files__ai[b-m7qabafgg1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.know-files__row[b-m7qabafgg1] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Der Kurztext steht eingerückt UNTER der Datei — er gehört zu ihr, konkurriert aber nicht mit
   dem Dateinamen, der das Sprungziel ist. */
.know-files__summary[b-m7qabafgg1] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.2rem 0 0 1.4rem;
    color: var(--bp-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.know-files__progress[b-m7qabafgg1] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.know-files__progress-text[b-m7qabafgg1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
}

.know-files__progress-count[b-m7qabafgg1] { color: var(--bp-text-muted); }

/* Läuft gerade die KI, wird der Schritt lila — dieselbe Farbe wie der Schalter, damit sichtbar
   bleibt, WOFÜR gerade Geld ausgegeben wird. */
.know-files__ai-active[b-m7qabafgg1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--bp-purple);
}

/* Der Nachrüst-Knopf dreht sich, solange die KI arbeitet. */
.know-files__spin[b-m7qabafgg1] {
    display: inline-block;
    animation: know-files-spin-b-m7qabafgg1 1.2s linear infinite;
}

@keyframes know-files-spin-b-m7qabafgg1 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .know-files__spin[b-m7qabafgg1] { animation: none; }
}

/* ---- KI-Entwurf des Seitentextes ---- */

.know-editor__tools[b-m7qabafgg1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.know-editor__tools-hint[b-m7qabafgg1] {
    color: var(--bp-text-muted);
    font-size: 0.8rem;
}

/* Der Entwurfs-Knopf spricht dieselbe Sprache wie der Zusammenfassen-Schalter ueber der Ablage:
   lila Flaeche, eigenes Feld fuer das KI-Zeichen, Preis in der zweiten Zeile. Zwei KI-Aktionen auf
   einer Seite, die verschieden aussehen, lesen sich wie zwei verschiedene Dinge. */
.know-editor__ai[b-m7qabafgg1] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.9rem;
    background: color-mix(in srgb, var(--bp-purple) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--bp-purple) 35%, transparent);
    text-align: left;
    cursor: pointer;
}

.know-editor__ai:hover:not(:disabled)[b-m7qabafgg1],
.know-editor__ai:focus-visible:not(:disabled)[b-m7qabafgg1] {
    background: color-mix(in srgb, var(--bp-purple) 14%, transparent);
    border-color: var(--bp-purple);
}

/* Waehrend die KI laeuft, ist der Knopf gesperrt — das muss man sehen, sonst klickt man erneut. */
.know-editor__ai:disabled[b-m7qabafgg1] {
    opacity: 0.55;
    cursor: default;
}

.know-editor__ai-mark[b-m7qabafgg1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: color-mix(in srgb, var(--bp-purple) 22%, transparent);
    border: 1px solid var(--bp-purple);
    color: var(--bp-purple);
    font-size: 1.6rem;
}

.know-editor__ai-text[b-m7qabafgg1] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.know-editor__ai-label[b-m7qabafgg1] {
    color: var(--bp-text);
    font-size: 0.9rem;
    font-weight: 600;
}

.know-editor__ai-hint[b-m7qabafgg1] {
    color: var(--bp-text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.know-draft__header[b-m7qabafgg1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.know-draft__lead[b-m7qabafgg1] {
    margin: 0 0 0.8rem;
    color: var(--bp-text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.know-draft__input[b-m7qabafgg1] {
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: var(--bp-input-bg, var(--bp-panel));
    border: 1px solid var(--bp-panel-border);
    color: var(--bp-text);
    font: inherit;
    resize: vertical;
}

.know-draft__input:focus-visible[b-m7qabafgg1] {
    outline: 2px solid var(--bp-yellow);
    outline-offset: 1px;
}

.know-draft__files[b-m7qabafgg1] {
    margin: 0.6rem 0 0;
    color: var(--bp-purple);
    font-size: 0.82rem;
}

/* Der Hinweis steht VOR dem Klick, nicht erst am Ergebnis: Wer erzeugt, soll wissen, dass eine
   Maschine schreibt — und dass sie plausibel irren kann. */
.know-draft__note[b-m7qabafgg1] {
    margin: 0.6rem 0 0;
    padding: 0.5rem 0.6rem;
    background: color-mix(in srgb, var(--bp-purple) 12%, transparent);
    border-left: 2px solid var(--bp-purple);
    color: var(--bp-text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.know-draft__progress[b-m7qabafgg1] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

/* ---- Ablagebereich: Datei wählen und KI-Schalter als EINE Einheit ---- */

.know-upload[b-m7qabafgg1] {
    display: grid;
    /* auto statt fester Spanne: Ohne den nativen Dateitext ist das Ablagefeld so breit wie
       sein Inhalt — eine feste Mindestbreite liesse daneben eine Lücke stehen. Der gap sorgt
       für den Abstand, den das überlaufende Feld vorher aufgefressen hat. */
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 0.75rem;
}

@media (max-width: 720px) {
    .know-upload[b-m7qabafgg1] { grid-template-columns: 1fr; }
}

.know-upload__drop[b-m7qabafgg1] { margin: 0; }

/* Das native Dateifeld wird VERSTECKT, nicht nur mitgeführt: Der Browser rendert darin seinen
   eigenen Knopf plus „Keine Datei ausgewählt" — zwei Bedienelemente und ein Statustext, die
   niemand entworfen hat. Sie liefen aus der Spalte heraus und stiessen an den KI-Schalter
   daneben, sodass beide zusammenklebten.

   Das Feld bleibt im DOM und bedienbar: Es liegt deckungsgleich über dem gestalteten Label
   (deshalb absolut und durchsichtig, nicht display:none) — damit funktionieren Klick, Tastatur
   und Drag-and-drop weiter, nur eben auf der Flaeche, die wir gezeichnet haben. */
.know-files__add[b-m7qabafgg1] {
    position: relative;
    overflow: hidden;
}

.know-files__add input[type="file"][b-m7qabafgg1] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Der Schalter trägt die KI-Farbe sichtbar — nicht als Randnotiz. Er entscheidet über Geld,
   und was Geld kostet, darf nicht wie eine Nebeneinstellung aussehen. */
.know-upload__ai[b-m7qabafgg1] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    background: color-mix(in srgb, var(--bp-purple) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--bp-purple) 35%, transparent);
    cursor: pointer;
}

.know-upload__ai:hover[b-m7qabafgg1] {
    background: color-mix(in srgb, var(--bp-purple) 14%, transparent);
    border-color: var(--bp-purple);
}

/* Eingeschaltet: deutlich kräftiger, damit im Vorbeigehen erkennbar ist, dass KI mitläuft. */
.know-upload__ai.is-on[b-m7qabafgg1] {
    background: color-mix(in srgb, var(--bp-purple) 20%, transparent);
    border-color: var(--bp-purple);
    box-shadow: inset 0 0 0 1px var(--bp-purple);
}

/* Das KI-Zeichen war bei 0.45em kaum zu sehen. Hier trägt es die Aussage — also groß, in einem
   eigenen Feld, in voller Markenfarbe. */
.know-upload__ai-mark[b-m7qabafgg1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: color-mix(in srgb, var(--bp-purple) 22%, transparent);
    border: 1px solid var(--bp-purple);
    color: var(--bp-purple);
    font-size: 1.6rem;
}

.know-upload__ai.is-on .know-upload__ai-mark[b-m7qabafgg1] {
    background: var(--bp-purple);
    color: var(--bp-surface, #0f1720);
}

.know-upload__ai-text[b-m7qabafgg1] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.know-upload__ai-label[b-m7qabafgg1] {
    color: var(--bp-text);
    font-size: 0.9rem;
    font-weight: 600;
}

.know-upload__ai-hint[b-m7qabafgg1] {
    color: var(--bp-text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}