/* =========================================================================================
   Anliegen: Baukasten Stufe für Stufe, Überblick (Mindmap, Matrix „Wer macht was wo“, Brett)
   ========================================================================================= */

.kb {
    --kb-team-0: #1d4ed8; --kb-team-0-bg: #e8efff;
    --kb-team-1: #047857; --kb-team-1-bg: #e3f6ee;
    --kb-team-2: #b45309; --kb-team-2-bg: #fdf0dc;
    --kb-team-3: #7c3aed; --kb-team-3-bg: #f1eafe;
    --kb-team-4: #be123c; --kb-team-4-bg: #fde8ee;
    --kb-team-5: #0e7490; --kb-team-5-bg: #e0f4f8;
    --kb-team-6: #4d7c0f; --kb-team-6-bg: #eef6df;
    --kb-team-7: #a21caf; --kb-team-7-bg: #fbe8fc;
    --kb-team-8: #92400e; --kb-team-8-bg: #f7ebe0;
    --kb-team-9: #334155; --kb-team-9-bg: #edf1f5;
    --kb-gap: var(--c-danger, #b42318);
    --kb-gap-bg: var(--c-danger-bg, #fdecea);
    min-width: 0;
}

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

.kb-head h1 { margin: 0 0 var(--space-1); }
.kb-head__text { min-width: 0; flex: 1 1 28rem; }
.kb-head__text .page-header__lead { margin: 0; max-width: 62ch; }
.kb-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.kb-undo { margin: 0; }
.kb-undo__label { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; font-weight: var(--fw-regular); }

/* Meldung nach einer Handlung (ersetzt die Meldungsleiste oben, bleibt beim Ersetzen sichtbar) */
.kb-status { margin: 0; min-height: 0; }
.kb-status.is-visible {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-left: 4px solid var(--c-success, #1f7a4d);
    border-radius: var(--radius-sm, 6px);
    background: var(--c-success-bg, #e7f6ee);
    color: var(--c-text);
    animation: kb-status 0.3s ease-out;
}
.kb-status.is-warning { border-left-color: var(--c-warning, #b45309); background: var(--c-warning-bg, #fdf3e2); }
.kb-status.is-error { border-left-color: var(--kb-gap); background: var(--kb-gap-bg); }
@keyframes kb-status { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .kb-status.is-visible { animation: none; } }

/* ---- Fortschritt: vier Stufen mit Zählern ----------------------------------------------- */
.kb-steps { margin-bottom: var(--space-4); }
.kb-steps ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.kb-step {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    height: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-md, 10px);
    background: var(--c-surface);
    color: var(--c-text);
    text-decoration: none;
}
.kb-step:hover { border-color: var(--c-blue); }
.kb-step.is-current { border: 2px solid var(--c-blue); background: var(--c-blue-tint); }
.kb-step__num {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--c-panel, #eef1f5);
    font-weight: var(--fw-bold);
}
.kb-step.is-done .kb-step__num { background: var(--c-success-bg, #e7f6ee); color: var(--c-success-text, #14532d); }
.kb-step.is-current .kb-step__num { background: var(--c-blue); color: #fff; }
.kb-step.has-gap:not(.is-current) .kb-step__num { background: var(--kb-gap-bg); color: var(--kb-gap); }
.kb-step__text { display: grid; min-width: 0; }
.kb-step__label { font-weight: var(--fw-medium); line-height: 1.25; }
.kb-step__count { color: var(--c-muted); font-size: var(--fs-small); }
.kb-step.has-gap .kb-step__count { color: var(--kb-gap); }

.kb-counts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    margin: var(--space-2) 0 0;
    color: var(--c-muted);
}
.kb-counts strong { color: var(--c-heading); }
.kb-counts__gap { color: var(--kb-gap); font-weight: var(--fw-medium); }
a.kb-counts__gap { text-decoration: underline; }
.kb-counts__next {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: var(--radius-pill, 999px);
    background: var(--kb-gap-bg);
    color: var(--kb-gap);
    font-weight: var(--fw-medium);
}

/* ---- Seite: Stufe links, Vorschau rechts ------------------------------------------------- */
.kb-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-5);
    align-items: start;
}
.kb-main { min-width: 0; }
.kb-preview { position: sticky; top: calc(var(--header-h, 64px) + var(--space-4)); }
.kb-preview .cx-phone__screen { min-height: 420px; max-height: 70vh; overflow-y: auto; align-content: start; }
.kb-preview__hint { margin: var(--space-2) 0 0; color: var(--c-muted); font-size: var(--fs-small); }

.kb-stage-title { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-2); font-size: var(--fs-h2); }
.kb-stage-title__num {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--c-blue);
    color: #fff;
    font-size: var(--fs-md, 1rem);
}
.kb-stage-title__area { color: var(--c-muted); font-weight: var(--fw-regular); }
.kb-lead { margin: 0 0 var(--space-3); max-width: 70ch; color: var(--c-text); }
.kb-subtitle { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-h3); }
.kb-subtitle__hint { color: var(--c-muted); font-size: var(--fs-small); font-weight: var(--fw-regular); }
.kb-empty { padding: var(--space-3); border: 1px dashed var(--c-line-strong); border-radius: var(--radius-md); color: var(--c-muted); }
.kb-hint-inline { color: var(--c-muted); font-size: var(--fs-small); }

/* Großes Eingabefeld: tippen und Enter */
.kb-add { display: flex; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-3); }
.kb-add .input { flex: 1 1 auto; min-width: 0; }
.kb-add--big .input { height: var(--control-h-lg, 52px); font-size: var(--fs-lead, 1.125rem); border-width: 2px; }
.kb-add--big .btn { height: var(--control-h-lg, 52px); }
.kb-add--answer { margin: var(--space-2) 0 0; }
.kb-add--inline { margin: 4px 0 0; }
.kb-add--inline .input { height: 34px; font-size: var(--fs-small); }

/* Vorschläge als Chips */
.kb-suggest { margin: 0 0 var(--space-3); }
.kb-suggest__label { margin: 0 0 var(--space-2); color: var(--c-muted); font-size: var(--fs-small); }
.kb-suggest__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.kb-suggest__list form { margin: 0; }
.kb-suggest__chip {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px dashed var(--c-blue);
    border-radius: var(--radius-pill, 999px);
    background: var(--c-surface);
    color: var(--c-blue-dark);
    font: inherit;
    font-size: var(--fs-small);
    text-align: left;
    cursor: pointer;
}
.kb-suggest__chip:hover { background: var(--c-blue-tint); border-style: solid; }

/* Standardkatalog per Haken */
.kb-catalog { margin: 0 0 var(--space-4); border: 1px solid var(--c-line-strong); border-radius: var(--radius-md); background: var(--c-surface); }
.kb-catalog > summary { padding: var(--space-3); font-weight: var(--fw-medium); cursor: pointer; }
.kb-catalog__count { color: var(--c-muted); font-size: var(--fs-small); font-weight: var(--fw-regular); }
.kb-catalog__form { padding: 0 var(--space-3) var(--space-3); }
.kb-catalog__areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.kb-catalog__area { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--c-line); border-radius: var(--radius-md); }
.kb-catalog__area legend { padding: 0 4px; font-weight: var(--fw-bold); }
.kb-catalog__area ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.kb-catalog__area label { display: flex; gap: 6px; align-items: flex-start; }

/* Karten (Stufe 1 und 2) */
.kb-cards { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.kb-card {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-md);
    background: var(--c-surface);
}
.kb-card.is-open { border-color: var(--kb-gap); }
.kb-card.is-dragging, .kb-node.is-dragging { opacity: 0.5; }
.kb-card .kb-title { flex: 1 1 auto; }
.kb-card__count, .kb-card__result { flex: 0 0 auto; display: inline-flex; gap: 4px; align-items: center; color: var(--c-muted); font-size: var(--fs-small); text-decoration: none; }
.kb-card__result:hover, .kb-card__count:hover { text-decoration: underline; }

.kb-grip {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 32px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-muted);
    cursor: grab;
}
.kb-grip:hover, .kb-grip:focus-visible { background: var(--c-panel); color: var(--c-text); }

.kb-title { flex: 1 1 auto; min-width: 0; margin: 0; }
.kb-title__input {
    display: block;
    width: 100%;
    min-height: 40px;
    resize: none;
    overflow: hidden;
    field-sizing: content;
    line-height: 1.35;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-heading);
    font: inherit;
    font-weight: var(--fw-medium);
}
.kb-title__input:hover { border-color: var(--c-line-strong); background: var(--c-page); }
.kb-title__input:focus { border-color: var(--c-blue); background: var(--c-surface); outline: var(--focus-width, 3px) solid var(--c-focus, #2563eb); outline-offset: 1px; }
.kb-title--answer .kb-title__input { min-height: 32px; padding: 2px 6px; font-weight: var(--fw-regular); }
.kb-delete { flex: 0 0 auto; margin: 0; }
.kb-delete__btn { color: var(--c-muted); }
.kb-delete__btn:hover { color: var(--kb-gap); }

/* Bildzeichen wählen */
.kb-icon { position: relative; flex: 0 0 auto; }
.kb-icon > summary {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-blue-tint);
    color: var(--c-blue-dark);
    list-style: none;
    cursor: pointer;
}
.kb-icon > summary::-webkit-details-marker { display: none; }
.kb-icon > summary:hover { box-shadow: 0 0 0 2px var(--c-blue); }
.kb-icon__panel {
    position: absolute;
    z-index: 20;
    top: 46px;
    left: 0;
    width: min(320px, 80vw);
    padding: var(--space-2);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    box-shadow: var(--shadow-pop);
}
.kb-icon__panel fieldset { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; margin: 0; padding: 0; border: 0; }
.kb-icon__option { display: inline-grid; place-items: center; height: 40px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-surface); cursor: pointer; }
.kb-icon__option.is-on { border: 2px solid var(--c-blue); background: var(--c-blue-tint); }

/* Reiter der Bereiche */
.kb-tabs { margin: var(--space-2) 0 var(--space-3); }
.kb-tabs ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.kb-tab {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-pill, 999px);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--fs-small);
    text-decoration: none;
}
.kb-tab[aria-current="page"] { border: 2px solid var(--c-blue); background: var(--c-blue-tint); font-weight: var(--fw-medium); }
.kb-tab.has-gap { border-color: var(--kb-gap); }
.kb-tab.has-gap::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--kb-gap); }
.kb-tab.is-drop { box-shadow: 0 0 0 3px var(--c-blue); }
.kb-tab__count { padding: 0 6px; border-radius: var(--radius-pill); background: var(--c-panel); font-size: var(--fs-xs, 0.75rem); }
.kb-tab--add { border-style: dashed; color: var(--c-blue-dark); }

.kb-next { display: flex; justify-content: flex-end; margin: var(--space-4) 0 var(--space-2); }

/* Lücken: rot */
.kb-gap { color: var(--kb-gap); font-size: var(--fs-small); font-weight: var(--fw-medium); white-space: nowrap; }
.kb-gap--block { display: block; margin: var(--space-2) 0 0; white-space: normal; }

/* ---- Stufe 3: Was passiert dann? ------------------------------------------------------- */
.kb-tree, .kb-answers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.kb-node, .kb-node__card, .kb-node__head, .kb-cards > li, .kb-rows > li { min-width: 0; }
.kb-title__input { max-width: 100%; }
.kb-answers { gap: var(--space-2); margin-top: var(--space-2); padding-left: var(--space-4); border-left: 3px solid var(--c-blue-tint); }
.kb-node__card { padding: var(--space-3); border: 1px solid var(--c-line-strong); border-radius: var(--radius-md); background: var(--c-surface); }
.kb-node--answer > .kb-node__card { padding: var(--space-2) var(--space-3); background: var(--c-page); }
.kb-node.is-open > .kb-node__card { border: 2px solid var(--kb-gap); }
.kb-node__head { display: flex; gap: var(--space-2); align-items: center; }
.kb-crumbs { margin: 0 0 2px; color: var(--c-muted); font-size: var(--fs-xs, 0.75rem); }

.kb-kinds { margin: var(--space-2) 0 0; }
.kb-kinds fieldset { margin: 0; padding: 0; border: 0; }
.kb-kinds__legend { margin-bottom: var(--space-1); color: var(--c-muted); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.kb-kinds__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.kb-kind {
    display: grid;
    gap: 4px;
    justify-items: center;
    align-content: center;
    min-height: 76px;
    padding: 8px 4px;
    border: 2px solid var(--c-line);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
    font-size: var(--fs-small);
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}
.kb-kind__icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-panel); }
.kb-kind__icon .icon { width: 20px; height: 20px; }
.kb-kind:hover { border-color: var(--c-blue); }
.kb-kind.is-on { border-color: var(--c-blue); background: var(--c-blue-tint); font-weight: var(--fw-bold); }
.kb-kind.is-on .kb-kind__icon { background: var(--c-blue); color: #fff; }
.kb-kind--frage.is-on { border-color: #7c3aed; background: #f1eafe; }
.kb-kind--frage.is-on .kb-kind__icon { background: #7c3aed; }
.kb-kinds--compact .kb-kinds__row { display: flex; gap: 3px; }
.kb-kinds--compact .kb-kind { min-height: 32px; width: 32px; padding: 0; border-width: 1px; }
.kb-kinds--compact .kb-kind__icon { width: auto; height: auto; background: none; }
.kb-kinds--compact .kb-kind.is-on .kb-kind__icon { background: none; color: var(--c-blue-dark); }
.kb-kinds--compact .kb-kind--frage.is-on .kb-kind__icon { color: #6d28d9; }

.kb-panel { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--c-blue-tint); }
.kb-panel label { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; font-weight: var(--fw-medium); font-size: var(--fs-small); }
.kb-panel__row { display: flex; gap: var(--space-2); align-items: flex-start; }
.kb-panel__row .input { flex: 1 1 auto; min-width: 0; }
.kb-panel__help { margin: 4px 0 0; color: var(--c-muted); font-size: var(--fs-small); }

.kb-question { margin-top: var(--space-3); }
.kb-question__prompt { display: flex; gap: var(--space-2); align-items: center; margin: 0; }
.kb-question__prompt label { display: inline-flex; gap: 6px; align-items: center; flex: 0 0 auto; color: #6d28d9; font-weight: var(--fw-bold); }

/* Ergebnis als Chip */
.kb-result { display: inline-flex; gap: 4px; align-items: center; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--c-panel); color: var(--c-text); font-size: var(--fs-small); white-space: nowrap; }
.kb-result .icon { width: 16px; height: 16px; flex: none; }
/* Schmal: Das Ergebnis bricht um, statt über den Rand der Karte zu ragen (Befund bei 390 px, Anliegen-Liste). */
@media (max-width: 640px) { .kb-result { max-width: 100%; white-space: normal; } }
.kb-result--termin, .kb-result--beides { background: #e8efff; color: #1e3a8a; }
.kb-result--wartenummer { background: #e3f6ee; color: #14532d; }
.kb-result--verweis { background: #fdf0dc; color: #78350f; }
.kb-result--information { background: #e0f4f8; color: #164e63; }
.kb-result--frage { background: #f1eafe; color: #5b21b6; }
.kb-result--offen { background: var(--kb-gap-bg); color: var(--kb-gap); }

/* ---- Stufe 4: Wer kümmert sich, und wo? ------------------------------------------------- */
.kb-rows { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.kb-row {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-md);
    background: var(--c-surface);
}
.kb-row.is-missing { border: 2px solid var(--kb-gap); }
.kb-row__what { display: grid; gap: 6px; align-content: start; justify-items: start; }
.kb-row__title { margin: 0; font-weight: var(--fw-medium); }
.kb-row__edit { font-size: var(--fs-small); }
.kb-row__who { min-width: 0; display: grid; gap: var(--space-2); align-content: start; }
.kb-who { margin: 0; }
.kb-who fieldset, .kb-places fieldset, .kb-bulk fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.kb-who__legend { margin-bottom: 4px; color: var(--c-muted); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.kb-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kb-chip {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 36px;
    padding: 4px 12px;
    border: 2px solid var(--kb-c, var(--c-line-strong));
    border-radius: var(--radius-pill);
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
    font-size: var(--fs-small);
    cursor: pointer;
}
.kb-chip::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--kb-c, var(--c-muted)); }
.kb-chip--rule::before { display: none; }
.kb-chip.is-on { background: var(--kb-c-bg, var(--c-blue-tint)); font-weight: var(--fw-bold); box-shadow: inset 0 0 0 1px var(--kb-c, var(--c-blue)); }
.kb-chip--rule.is-on { --kb-c: var(--c-blue); }
.kb-who__more { max-width: 14rem; min-height: 36px; }
.kb-who.is-missing .kb-who__more { border-color: var(--kb-gap); }
.kb-bulk { margin: 0 0 var(--space-3); padding: var(--space-3); border: 2px dashed var(--kb-gap); border-radius: var(--radius-md); background: var(--kb-gap-bg); }
.kb-bulk legend { display: flex; gap: 6px; align-items: center; margin-bottom: var(--space-2); font-weight: var(--fw-medium); }
.kb-bulk--kinds { border-color: var(--c-blue); background: var(--c-blue-tint); }
.kb-bulk--answers { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); }
.kb-bulk__url { flex: 1 1 14rem; min-width: 0; max-width: 22rem; height: 36px; }
.kb-panel__sub { margin-top: var(--space-2); }
.kb-panel__answers { width: 100%; }
.kb-places { margin: 0; }
.kb-place { display: inline-flex; gap: 6px; align-items: center; min-height: 36px; padding: 4px 10px; border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill); font-size: var(--fs-small); cursor: pointer; }
.kb-place.is-on { border-color: var(--c-blue); background: var(--c-blue-tint); }
.kb-places__all { margin: 4px 0 0; }
.kb-places__on > summary { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 36px; font-size: var(--fs-small); cursor: pointer; list-style: none; }
.kb-places__on > summary::-webkit-details-marker { display: none; }
.kb-places__change { color: var(--c-blue-dark); text-decoration: underline; }
.kb-places__on[open] > summary .kb-places__change { display: none; }
.kb-compact-note { display: block; max-width: 13rem; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--c-muted); font: inherit; font-size: var(--fs-xs, 0.75rem); text-align: left; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; }
.br-places { margin: 0; padding: 0; list-style: none; }
.br-change { font-size: var(--fs-xs, 0.75rem); }

/* Team-Farben */
.team-c0 { --kb-c: var(--kb-team-0); --kb-c-bg: var(--kb-team-0-bg); }
.team-c1 { --kb-c: var(--kb-team-1); --kb-c-bg: var(--kb-team-1-bg); }
.team-c2 { --kb-c: var(--kb-team-2); --kb-c-bg: var(--kb-team-2-bg); }
.team-c3 { --kb-c: var(--kb-team-3); --kb-c-bg: var(--kb-team-3-bg); }
.team-c4 { --kb-c: var(--kb-team-4); --kb-c-bg: var(--kb-team-4-bg); }
.team-c5 { --kb-c: var(--kb-team-5); --kb-c-bg: var(--kb-team-5-bg); }
.team-c6 { --kb-c: var(--kb-team-6); --kb-c-bg: var(--kb-team-6-bg); }
.team-c7 { --kb-c: var(--kb-team-7); --kb-c-bg: var(--kb-team-7-bg); }
.team-c8 { --kb-c: var(--kb-team-8); --kb-c-bg: var(--kb-team-8-bg); }
.team-c9 { --kb-c: var(--kb-team-9); --kb-c-bg: var(--kb-team-9-bg); }
.team-chip {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 2px 10px;
    border: 1px solid var(--kb-c, var(--c-line-strong));
    border-radius: var(--radius-pill);
    background: var(--kb-c-bg, var(--c-panel));
    color: var(--c-text);
    font-size: var(--fs-small);
    white-space: nowrap;
}
.team-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--kb-c, var(--c-muted)); }
.team-chip--rule { --kb-c: #64748b; --kb-c-bg: #f1f5f9; }
.team-chip--rule::before { border-radius: 2px; }
.team-chip--missing { --kb-c: var(--kb-gap); --kb-c-bg: var(--kb-gap-bg); color: var(--kb-gap); font-weight: var(--fw-bold); }
.team-chip--off { --kb-c: var(--c-line-strong); --kb-c-bg: transparent; color: var(--c-muted); }
.kb-whosum { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.kb-whosum__item { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kb-whosum__where { display: inline-flex; gap: 2px; align-items: center; color: var(--c-muted); font-size: var(--fs-xs, 0.75rem); }
.kb-whosum__where .icon { width: 12px; height: 12px; }

/* ---- Vorschau (Handy) --------------------------------------------------------------------- */
.kb-phone { font-size: var(--fs-small); }
.kb-phone__tile { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.kb-phone__tile:hover { border-color: var(--c-blue); }
.kb-phone__crumbs { margin: 0; color: var(--c-muted); font-size: var(--fs-xs, 0.75rem); }
.kb-phone__note { display: block; color: var(--kb-gap); font-size: var(--fs-xs, 0.75rem); }
.kb-phone__empty { margin: 0; padding: 10px; border: 1px dashed var(--kb-gap); border-radius: 12px; color: var(--kb-gap); }
.kb-phone__result { display: grid; gap: 8px; }
.kb-phone__action { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 12px; border-radius: 12px; background: var(--brand-primary, #0b4f8a); color: var(--brand-on-primary, #fff); font-weight: var(--fw-bold); }
.kb-phone__field { display: grid; gap: 4px; }
.kb-phone__label { font-weight: var(--fw-medium); }
.kb-phone__input { padding: 10px; border: 1px solid var(--c-line-strong); border-radius: 10px; background: var(--c-surface); color: var(--c-muted); }
.kb-phone__url { color: var(--c-muted); font-size: var(--fs-xs, 0.75rem); word-break: break-all; text-align: center; }
.kb-phone__info { padding: 10px; border-radius: 12px; background: var(--c-info-bg, #e0f4f8); }
.kb-phone__back { justify-self: start; }
.kb-preview-float { margin: 0 0 var(--space-3); }
.kb-preview-float > summary { list-style: none; display: inline-flex; }
.kb-preview-float > summary::-webkit-details-marker { display: none; }
.kb-preview-float[open] .kb-preview {
    position: fixed;
    z-index: 30;
    right: var(--space-4);
    bottom: var(--space-4);
    width: 300px;
    padding: var(--space-2);
    border-radius: var(--radius-lg, 16px);
    background: var(--c-surface);
    box-shadow: var(--shadow-overlay);
}
.kb-preview-float[open] .kb-preview .cx-phone__screen { min-height: 300px; max-height: 50vh; }

.kb-loose { margin-top: var(--space-5); }

/* ---- Überblick ------------------------------------------------------------------------------ */
.kb-viewbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin: var(--space-3) 0; }
.kb-views ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.kb-view { display: inline-flex; gap: 6px; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill); color: var(--c-text); text-decoration: none; }
.kb-view.is-current { border: 2px solid var(--c-blue); background: var(--c-blue-tint); font-weight: var(--fw-bold); }
.kb-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
.kb-filter label { display: inline-flex; gap: 4px; align-items: center; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.kb-filter select { width: auto; min-width: 9rem; max-width: 14rem; font-size: var(--fs-small); }
.kb-filter__result { margin: 0 0 var(--space-3); color: var(--c-muted); }

.kb-teams { margin: 0 0 var(--space-4); border: 1px solid var(--c-line-strong); border-radius: var(--radius-md); background: var(--c-surface); }
.kb-teams > summary { padding: var(--space-3); font-weight: var(--fw-medium); cursor: pointer; }
.kb-teamcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2); margin: 0; padding: 0 var(--space-3) var(--space-3); list-style: none; }
.kb-teamcard { padding: var(--space-2) var(--space-3); border: 1px solid var(--c-line); border-left: 6px solid var(--kb-c); border-radius: var(--radius-md); background: var(--c-surface); font-size: var(--fs-small); }
.kb-teamcard.is-idle { opacity: 0.75; }
.kb-teamcard__name { margin: 0 0 4px; font-weight: var(--fw-bold); }
.kb-teamcard__line { margin: 2px 0; }
.kb-teamcard__paths { margin: 2px 0; padding-left: 1.1rem; }

/* Mindmap: von links nach rechts */
.mm { --mm-zoom: 1; }
.mm-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.mm-tools__zoom { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.mm-canvas { overflow: auto; max-height: 75vh; padding: var(--space-3); border: 1px solid var(--c-line-strong); border-radius: var(--radius-md); background: var(--c-page); }
.mm-tree { zoom: var(--mm-zoom); }
.mm-tree, .mm-children { margin: 0; padding: 0; list-style: none; }
.mm-item { position: relative; display: flex; align-items: center; }
/* Bereiche untereinander: Name oben, die Anliegen rechts daneben eingerückt */
.mm-tree > .mm-item { flex-direction: column; align-items: flex-start; margin-bottom: var(--space-4); }
.mm-tree > .mm-item > .mm-children { margin: var(--space-2) 0 0 var(--space-4); padding-left: 0; }
.mm-tree > .mm-item > .mm-children::before { display: none; }
.mm-tree > .mm-item > .mm-children > .mm-item::after { top: 0; bottom: 0; }
.mm-tree > .mm-item > .mm-children > .mm-item:first-child::after { top: -10px; }
.mm-tree > .mm-item > .mm-children > .mm-item:last-child::after { bottom: 50%; }
.mm-tree > .mm-item > .mm-children > .mm-item:only-child::after { display: block; top: -10px; bottom: 50%; }
.mm-row { display: flex; flex: 0 0 auto; gap: 4px; align-items: center; }
.mm-children { position: relative; display: flex; flex-direction: column; padding-left: 28px; }
.mm-children::before { content: ''; position: absolute; top: 50%; left: 0; width: 20px; border-top: 2px solid var(--c-line-strong); }
.mm-children > .mm-item { padding: 3px 0 3px 18px; }
.mm-children > .mm-item::before { content: ''; position: absolute; top: 50%; left: 0; width: 18px; border-top: 2px solid var(--c-line-strong); }
.mm-children > .mm-item::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; border-left: 2px solid var(--c-line-strong); }
.mm-children > .mm-item:first-child::after { top: 50%; }
.mm-children > .mm-item:last-child::after { bottom: 50%; }
.mm-children > .mm-item:only-child::after { display: none; }
.mm-box {
    display: inline-grid;
    gap: 2px;
    max-width: 18rem;
    padding: 6px 10px;
    border: 1px solid var(--c-line-strong);
    border-radius: 10px;
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--fs-small);
    line-height: 1.25;
    text-decoration: none;
}
.mm-box:hover { border-color: var(--c-blue); box-shadow: 0 0 0 2px var(--c-blue-tint); }
.mm-box--group { display: inline-flex; gap: 6px; align-items: center; padding: 8px 12px; border: 2px solid var(--c-blue); background: var(--c-blue-tint); font-weight: var(--fw-bold); font-size: var(--fs-base, 1rem); }
.mm-box--answer { background: var(--c-page); }
.mm-box.is-open { border: 2px dashed var(--kb-gap); }
.mm-box__ask { display: inline-flex; gap: 4px; align-items: center; color: #5b21b6; font-size: var(--fs-xs, 0.75rem); }
.mm-box__ask .icon { width: 12px; height: 12px; }
.mm-toggle { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--c-line-strong); border-radius: 50%; background: var(--c-surface); cursor: pointer; }
.mm-toggle .icon { width: 14px; height: 14px; transition: transform 0.15s; }
.mm-toggle[aria-expanded="false"] .icon { transform: rotate(180deg); }
.mm-result { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 4px 8px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); color: inherit; text-decoration: none; }
.mm-result.is-missing { border: 2px solid var(--kb-gap); }
.mm-result:hover { border-color: var(--c-blue); }
.mm-box.is-current { border: 2px solid var(--c-blue); background: var(--c-blue-tint); box-shadow: 0 0 0 3px var(--c-blue-tint); }
.mm-box__here { color: var(--c-blue); font-size: var(--fs-xs, 0.75rem); font-weight: var(--fw-bold); }

/* Detailseite: Weg des Anliegens oben – das eine Anliegen als Mindmap, ohne Ein-/Ausklappen */
.cd-weg { margin: 0 0 var(--space-4); }
.cd-weg__title { display: flex; gap: 6px; align-items: center; margin: 0 0 var(--space-2); font-size: var(--fs-base, 1rem); }
.cd-weg__title .icon { width: 18px; height: 18px; }
.cd-weg__hint { color: var(--c-muted); font-size: var(--fs-small); font-weight: normal; }
.cd-weg .mm-canvas { max-height: 22rem; padding: var(--space-2) var(--space-3); background: var(--c-surface); }
.cd-weg .mm-tree > .mm-item { margin-bottom: 0; }
.cd-weg .mm-toggle { display: none; }

/* Matrix „Wer macht was wo“ */
.wm-wrap, .br-wrap { overflow-x: auto; }
.wm { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.wm th, .wm td { padding: 6px 8px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.wm thead th { position: sticky; top: 0; z-index: 1; background: var(--c-panel); }
.wm tbody th[scope="row"] { font-weight: var(--fw-regular); min-width: 16rem; }
.wm tbody th[scope="row"] .kb-result { margin-top: 2px; }
.wm-group th { padding-top: var(--space-3); background: var(--c-surface); font-size: var(--fs-base, 1rem); font-weight: var(--fw-bold); }
.wm tr.is-missing th[scope="row"] { box-shadow: inset 4px 0 0 var(--kb-gap); }
.wm-none, .wm-off { color: var(--c-muted); font-size: var(--fs-xs, 0.75rem); }
.wm-note { display: block; color: var(--c-muted); font-size: var(--fs-xs, 0.75rem); }

/* Brett in Spalten */
.br { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.br th, .br td { padding: 4px 6px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.br thead th { background: var(--c-panel); }
.br-c-area { width: 9rem; }
.br-c-concern { width: 22%; }
.br-c-answer { width: 18%; }
.br-c-result { width: 13.5rem; }
.br-area { background: var(--c-blue-tint); }
.br-area__inner { position: sticky; top: 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-weight: var(--fw-bold); }
.br-toggle { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.br-toggle[aria-expanded="false"] .icon { transform: rotate(-90deg); }
.br-group.is-collapsed .br-row:first-child > td { opacity: 0.6; }
.br-row.is-missing > td.br-who { box-shadow: inset 3px 0 0 var(--kb-gap); }
.br-row.is-open > td.br-result { box-shadow: inset 3px 0 0 var(--kb-gap); }
.br-path { color: var(--c-muted); font-size: var(--fs-xs, 0.75rem); }
.br-dash { color: var(--c-muted); }
.br .kb-title__input { min-height: 32px; padding: 2px 6px; }
.br .cx-assign { margin: 0; }
.br .cx-select { max-width: 12rem; }
.br .kb-panel { padding: 6px 8px; }
.br-addrow td { background: var(--c-page); }
.br-addrow--area td { padding: var(--space-2); }

/* ---- Schmal (Handy, 390 px) ---------------------------------------------------------------- */
@media (max-width: 1180px) {
    .kb-layout { grid-template-columns: minmax(0, 1fr); }
    .kb-preview { position: static; max-width: 340px; }
}

@media (max-width: 720px) {
    .kb-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kb-step { padding: var(--space-2); }
    .kb-counts__next { margin-left: 0; }
    .kb-kinds__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kb-kind { min-height: 64px; }
    .kb-add { flex-wrap: wrap; }
    .kb-add .btn { flex: 1 1 100%; }
    .kb-row { grid-template-columns: minmax(0, 1fr); }
    .kb-card { flex-wrap: wrap; }
    .kb-card .kb-title { flex: 1 1 calc(100% - 120px); }
    .kb-answers { padding-left: var(--space-2); }
    .kb-panel__row { flex-wrap: wrap; }
    .kb-question__prompt { flex-wrap: wrap; }
    .kb-head__actions { width: 100%; }
    .kb-undo__label { max-width: 9rem; }
    .kb-filter select { max-width: 100%; }
    .kb-preview-float[open] .kb-preview { right: 8px; left: 8px; width: auto; }
}

/* Brett bei schmaler Breite: je Zeile eine Karte statt Spalten */
@media (max-width: 720px) {
    .br, .br tbody, .br tr, .br th, .br td { display: block; width: auto; }
    .br thead, .br colgroup { display: none; }
    .br tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--c-line); }
    .br th, .br td { border-bottom: 0; }
    .br td[data-label]::before { content: attr(data-label); display: block; color: var(--c-muted); font-size: var(--fs-xs, 0.75rem); }
    .br-area { margin-top: var(--space-3); border-radius: var(--radius-sm); }
    .br .cx-select { max-width: 100%; }
}

/* ---- Drucken: nur die Mindmap (nur im Überblick – die Datei gilt für alle Seiten) ---------- */
@page concern-mindmap { size: landscape; margin: 10mm; }
@media print {
    body:has([data-controller~="concern-mindmap"]) { page: concern-mindmap; }
    body:has([data-controller~="concern-mindmap"]) * { visibility: hidden; }
    body:has([data-controller~="concern-mindmap"]) .mm-canvas,
    body:has([data-controller~="concern-mindmap"]) .mm-canvas * { visibility: visible; }
    body:has([data-controller~="concern-mindmap"]) .mm-canvas { position: absolute; top: 0; left: 0; overflow: visible; max-height: none; border: 0; }
    .mm-toggle { display: none; }
}

/* ---- Ergebnis „Termin“: Team · Termindauer · Servicezeiten (Terminvergabe) --------------- */
.kb-appt { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--c-blue); border-radius: var(--radius); background: var(--c-blue-tint); }
.kb-appt.is-missing { border-left-color: var(--kb-gap); background: var(--kb-gap-bg); }
.kb-appt__line { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0; font-size: var(--fs-small); }
.kb-appt__form { margin-top: var(--space-2); }
.kb-appt__form fieldset { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; padding: 0; border: 0; }
.kb-appt__legend { float: left; margin-right: var(--space-2); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.kb-appt .kb-chip { min-height: 32px; padding: 2px 10px; }

/* „Was passiert? → Termin“: Terminlänge aus der Termingenerierung des Teams (15, 30, 60 Min. …) */
.kb-length { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--c-blue); border-radius: var(--radius); background: var(--c-blue-tint); }
.kb-length.is-missing { border-left-color: var(--kb-gap); background: var(--kb-gap-bg); }
.kb-length__line { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0; font-size: var(--fs-small); }
.kb-length__line > .icon, .kb-length__label > .icon { width: 16px; height: 16px; color: var(--c-muted); }
.kb-length__label { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.kb-length__form { margin: 0; }
.kb-length__form fieldset { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; padding: 0; border: 0; min-width: 0; }
.kb-length__form legend { float: left; margin-right: var(--space-2); }
.kb-length .kb-chip { min-height: 32px; padding: 2px 10px; }
.kb-length .kb-chip.is-gap { border-color: var(--kb-gap); color: var(--kb-gap); text-decoration: line-through; cursor: not-allowed; }
.kb-length__help { margin: var(--space-1, 4px) 0 0; color: var(--c-muted); font-size: var(--fs-small); }
.kb-result--gap { background: var(--kb-gap-bg); color: var(--kb-gap); }
.kb-result__length { font-weight: var(--fw-bold); }

/* BG-Routing: Endziffer → Team */
.kb-routes { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.kb-routes code { font-weight: var(--fw-bold); }
.kb-probe__team { display: flex; gap: 6px; align-items: center; margin: 0; font-size: var(--fs-md); }

/* ---- Stufe 4 ruhig (Plan 3.24): Auswahl statt Chip-Flut, Kette Team → Warteschlange → Termine ------ */
.kb-rows--calm .kb-row { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
.kb-row__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; }
.kb-who--calm { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.kb-who__label { color: var(--c-muted); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.kb-who__pick { display: inline-flex; gap: 8px; align-items: center; min-width: 0; }
.kb-who__select { min-width: 14rem; max-width: 100%; min-height: 36px; }
.kb-who__select.is-missing { border-color: var(--kb-gap); }
.kb-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--kb-c, var(--c-muted)); }
.kb-chain { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 0; color: var(--c-text); font-size: var(--fs-small); }
.kb-chain > .icon { width: 16px; height: 16px; color: var(--c-muted); }
/* Langer Satz (Kundennummern-Liste, Regel): Symbol vor der ersten Zeile statt allein darüber */
.kb-chain--text { display: block; }
.kb-chain--text > .icon { display: inline-block; margin-right: 4px; vertical-align: -3px; }
.kb-rows--calm .kb-appt { margin: 0; padding: 0; border: 0; background: none; }
.kb-where > summary { font-size: var(--fs-small); }
.kb-where[open] > summary { margin-bottom: var(--space-2); }
.kb-bulk--calm { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.kb-bulk--calm label { display: inline-flex; gap: 6px; align-items: center; font-weight: var(--fw-medium); }

/* Endziffern 0–9 als eine Reihe, längere Endungen darunter, „testen“ daneben */
.bg-table { display: grid; gap: var(--space-2); }
.bg-table__summary { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.bg-table__summary.is-ok { color: var(--c-success-text); }
.bg-table__summary.is-missing { color: var(--kb-gap); }
.bg-table__summary .subtle { font-weight: normal; }
.bg-table__body { display: grid; gap: var(--space-2); max-width: 40rem; }
.bg-digits { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); margin: 0; padding: 0; border: 1px solid var(--c-line-strong); border-radius: var(--radius-md); list-style: none; overflow: hidden; }
.bg-digits__cell { display: grid; justify-items: center; min-width: 0; padding: 4px 2px; border-left: 1px solid var(--c-line); text-align: center; }
.bg-digits__cell:first-child { border-left: 0; }
.bg-digits__digit { color: var(--c-muted); font-size: var(--fs-xs, 0.75rem); font-weight: var(--fw-bold); }
.bg-digits__team { max-width: 100%; overflow-wrap: anywhere; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.bg-digits__cell.is-missing { background: var(--kb-gap-bg); color: var(--kb-gap); }
.bg-digits__cell.is-fallback .bg-digits__team { font-weight: normal; }
.bg-long { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: var(--space-2) 0 0; padding: 0; font-size: var(--fs-small); list-style: none; }
.bg-probe { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.bg-probe .input { flex: 0 1 14rem; min-width: 0; height: 36px; }
.bg-probe__label { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.bg-probe__result { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.bg-probe__result.is-missing { color: var(--kb-gap); }

@media (max-width: 720px) {
    .kb-rows--calm .kb-row { grid-template-columns: minmax(0, 1fr); }
    .bg-digits { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .bg-digits__cell:nth-child(6) { border-left: 0; }
    .bg-digits__cell:nth-child(n+6) { border-top: 1px solid var(--c-line); }
    .kb-who__select { min-width: 0; width: 100%; }
    .kb-who__pick { width: 100%; }
}

/* ---- Überblick: Werkzeuge (früher „Kundenwege“) als schlichte Knöpfe, Eintrag: Weitere Einstellungen ------- */
.kb-tools { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0 0 var(--space-3); }
.kb-more { margin: var(--space-1) 0 0; font-size: var(--fs-small); }
.kb-more a { display: inline-flex; gap: 6px; align-items: center; }
.kb-more .icon { width: 16px; height: 16px; }
.wm-queue { display: inline-flex; gap: 4px; align-items: center; }
.wm-queue .icon { width: 12px; height: 12px; }