/* =========================================================================
   kb-base.css - gemeinsame Klubboard-Grundbausteine
   =========================================================================

   Enthaelt nur, was das BuddyBoss-Theme NICHT liefert. Buttons kommen
   unveraendert aus theme.css (.button / .outline / .small) - hier steht
   bewusst keine eigene Buttonklasse.

   Regeln und Begruendungen: plugins/STYLEGUIDE.md

   Farben ausschliesslich ueber var(--bb-*, <BuddyBoss-Default>). Jede
   Kundeninstanz stellt ihre Vereinsfarbe im Customizer ein; ein fester
   Hexwert sieht nur auf der Entwicklungsinstanz richtig aus.

   Stand: erste Etappe (Meldungen, Toasts, Dialog). Badges, Chips und
   Segmente folgen, wenn die betreffenden Module migriert werden - sie jetzt
   schon anzulegen haette einen Layer erzeugt, den niemand benutzt.
   ========================================================================= */

/* ---- Token ---------------------------------------------------------------
 *
 * Der Klubboard-Tokensatz, EINMAL. Die Komponenten (Vorgangsraum,
 * Vorgangsdesigner, ...) zeigen mit ihren eigenen Praefixen hierher, statt die
 * BuddyBoss-Variablen jeweils selbst zu mappen.
 *
 * Genau das war naemlich der Fehler: --kb-vr-* und --kb-vad-* haben dieselben
 * BuddyBoss-Variablen mit UNTERSCHIEDLICHEN Fallbacks belegt (#d6d9dd gegen
 * #e7e9ec, #1e2132 gegen #122b46, #db222a gegen #ef3e46 ...). Solange das Theme
 * seine Variablen liefert, faellt das nicht auf - fehlt eine, driften die
 * beiden Module sichtbar auseinander. Mit einer Quelle kann das nicht mehr
 * passieren.
 *
 * Die Fallbacks sind die BuddyBoss-Defaults, nicht frei gewaehlt.
 *
 * Auf :root, damit jede Komponente sie erbt, ohne dass hier eine
 * Selektorliste gepflegt werden muss. Wer lokal etwas anderes braucht,
 * ueberschreibt den Token in seinem eigenen Wurzelselektor - so macht es
 * kb-files mit --kb-accent.
 */
:root {
    --kb-bg: var(--bb-content-background-color, #fff);
    --kb-bg-alt: var(--bb-content-alternate-background-color, #f2f4f5);
    --kb-page: var(--bb-body-background-color, #fafbfd);
    --kb-line: var(--bb-content-border-color, #d6d9dd);
    --kb-fg: var(--bb-body-text-color, #5a5a5a);
    --kb-muted: var(--bb-alternate-text-color, #9b9c9f);
    --kb-heading: var(--bb-headings-color, #1e2132);
    --kb-accent: var(--bb-primary-color, #385dff);
    --kb-accent-hover: var(--bb-primary-button-background-hover, #1e42dd);
    --kb-info: var(--bb-default-notice-color, #385dff);
    --kb-success: var(--bb-success-color, #14b550);
    --kb-warning: var(--bb-warning-color, #ed9615);
    --kb-error: var(--bb-danger-color, #db222a);
    --kb-radius: var(--bb-block-radius, 10px);
    --kb-radius-inner: var(--bb-block-radius-inner, 6px);
    --kb-radius-btn: var(--bb-button-radius, 7px);
    --kb-input-radius: var(--bb-input-radius, 6px);

    /* Schatten. Das Theme hat keine Schatten-Token; die drei Werte sind aus
       theme.css kopiert (Lift: 4416, Panel: 4995) bzw. buddypress.css
       (Modal: 33316) - nicht frei gewaehlt. Karten in Ruhe tragen KEINEN
       Schatten (wie .widget im Theme); Lift ist fuer Hover, Panel fuer
       schwebende Flaechen (Dropdown), Modal fuer Dialoge. */
    --kb-shadow-lift: 0 3px 24px 0 rgba(18, 43, 70, 0.08);
    --kb-shadow-panel: 0 2px 7px 1px rgba(0, 0, 0, 0.05), 0 6px 32px 0 rgba(18, 43, 70, 0.1);
    --kb-shadow-modal: 0 12px 28px 0 rgba(18, 43, 70, 0.15), 0 2px 7px 0 rgba(18, 43, 70, 0.08);
}

/* ---- Kleinteile ----------------------------------------------------------
 *
 * Badge, Chip, Segment, Icon- und Textbutton. Alles Dinge, die das Theme nicht
 * mitbringt und die deshalb bisher jedes Modul fuer sich gebaut hat.
 *
 * Abgeleitet aus dem Vorgangsraum, der die ausgereifteste Fassung hatte - mit
 * zwei Korrekturen: der Icon-Button faerbt beim Ueberfahren nicht mehr pauschal
 * rot (das galt dort auch fuer den Stift "Bearbeiter aendern"), und jedes
 * Element hat einen sichtbaren Fokus.
 *
 * Bewusst ausschliesslich ueber eigene Klassen, nie ueber Elementselektoren:
 * ein globaler Input- oder .is-active-Layer wuerde WPForms, ACF-Frontendformulare,
 * die BuddyBoss-Suche und das Bulma des DataTables-Editors mittreffen.
 */

.kb-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--kb-bg-alt);
    color: var(--kb-fg);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.kb-badge.info { background: color-mix(in srgb, var(--kb-accent) 12%, transparent); color: var(--kb-accent); }
.kb-badge.success { background: color-mix(in srgb, var(--kb-success) 12%, transparent); color: color-mix(in srgb, var(--kb-success) 80%, #000); }
.kb-badge.warning { background: color-mix(in srgb, var(--kb-warning) 14%, transparent); color: color-mix(in srgb, var(--kb-warning) 70%, #000); }
.kb-badge.error { background: color-mix(in srgb, var(--kb-error) 12%, transparent); color: var(--kb-error); }

.kb-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 3px 10px;
    border: 1px solid var(--kb-line);
    border-radius: 999px;
    background: var(--kb-bg);
    color: var(--kb-heading);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

.kb-chip:hover,
.kb-chip:focus-visible {
    border-color: var(--kb-accent);
}

.kb-chip.is-on {
    border-color: var(--kb-accent);
    color: var(--kb-accent);
    background: color-mix(in srgb, var(--kb-accent) 6%, transparent);
}

/* Segmentierte Umschaltung (z. B. "Offen | Alle | Archiv"). */
.kb-seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--kb-radius-btn);
    background: var(--kb-bg-alt);
}

.kb-seg > * {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 10px;
    border: 0;
    border-radius: calc(var(--kb-radius-btn) - 2px);
    background: none;
    color: var(--kb-fg);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.kb-seg > *:hover {
    color: var(--kb-heading);
}

.kb-seg > .is-on {
    background: var(--kb-bg);
    color: var(--kb-heading);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Icon-Button ohne Flaeche. Neutraler Hover - destruktiv nur mit --danger. */
.kb-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 0;
    background: none;
    color: var(--kb-muted);
    line-height: 1;
    cursor: pointer;
}

/* :focus muss mit, nicht nur :focus-visible - und die Flaeche gehoert dazu.
   theme.css faerbt mit "button:hover, button:focus" (Spezifitaet 0,1,1) jeden
   nackten <button> dunkel und schlaegt damit .kb-iconbtn (0,1,0). Sichtbar
   wurde das am Ein-/Ausklapp-Schalter des Vorgangsraums: nach dem Klick blieb
   ein dunkler Kasten stehen, weil der Fokus am Button haengt. Ein Klassen-
   Zustandsselektor (0,2,0) gewinnt - Spezifitaet statt !important, siehe
   STYLEGUIDE.md. Dasselbe gilt fuer den Textbutton darunter. */
.kb-iconbtn:hover,
.kb-iconbtn:focus,
.kb-iconbtn:focus-visible {
    background: none;
    color: var(--kb-heading);
}

.kb-iconbtn--danger:hover,
.kb-iconbtn--danger:focus,
.kb-iconbtn--danger:focus-visible {
    color: var(--kb-error);
}

/* Textbutton: sieht aus wie ein Link, verhaelt sich wie ein Button. */
.kb-linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kb-accent);
    font-size: inherit;
    cursor: pointer;
}

.kb-linkbtn:hover,
.kb-linkbtn:focus,
.kb-linkbtn:focus-visible {
    background: none;
    color: var(--kb-accent-hover);
    text-decoration: underline;
}

.kb-badge:focus-visible,
.kb-chip:focus-visible,
.kb-seg > *:focus-visible,
.kb-iconbtn:focus-visible,
.kb-linkbtn:focus-visible {
    outline: none;
    box-shadow: var(--bb-primary-button-focus-shadow, 0 0 0 2px color-mix(in srgb, var(--kb-accent) 35%, transparent));
}

/* ---- Buttons als Links -------------------------------------------------- */

/*
 * <a class="button"> steht in den Tabellen von klubboard-listsandtables als
 * Zeilenaktion. Ohne diese Regeln zieht dort die Linkfarbe des Themes und der
 * Button sieht aus wie ein Link. Stand frueher als eigener <style>-Block in
 * class-htmltablegenerator.php - dort aber nur fuer den Primaerbutton und mit
 * der Regular- statt der Hover-Textfarbe im :hover, sodass sich beim
 * Ueberfahren nichts tat.
 */
a.button {
    color: var(--bb-primary-button-text-regular);
}

a.button:hover,
a.button:focus {
    color: var(--bb-primary-button-text-hover);
}

a.button.outline {
    color: var(--bb-secondary-button-text-regular);
}

a.button.outline:hover,
a.button.outline:focus {
    color: var(--bb-secondary-button-text-hover);
}

/* ---- Inline-Meldung ---------------------------------------------------- */

/* Nachbildung von .bp-feedback (theme buddypress.css:5238-5262, 5348) mit
   denselben Token, damit Klubboard-Meldungen und Theme-Meldungen auf einer
   Seite nicht auseinanderfallen.

   Die Geometrie ist bewusst eigenstaendig statt geerbt: das Flex-Layout von
   .bp-feedback kommt aus BuddyPress Nouveau, nicht aus dem Theme. Wer sich
   darauf stuetzt, hat eine unsichtbare Abhaengigkeit zu einem Plugin, das auf
   der Seite gar nicht aktiv sein muss. Der farbige Streifen ist deshalb 4px
   breit - dieselbe Idiomatik wie die abgeloesten kb-vr-alert/kb-schl-notice
   (border-left: 4px solid), statt eines Icon-Blocks mit Glyphe. */
.kb-notice {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    margin: 0 0 16px;
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius-inner);
    background: var(--kb-bg);
    color: var(--kb-fg);
}

.kb-notice-icon {
    flex: 0 0 4px;
    width: 4px;
    background: var(--kb-info);
}

/* Das Padding sitzt am Body, nicht am <p>: Meldungen mit mehreren Absaetzen
   oder einer Liste klebten sonst am farbigen Streifen. */
.kb-notice-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
}

.kb-notice-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.kb-notice-body p + p,
.kb-notice-body p + ul,
.kb-notice-body p + ol {
    margin-top: 0.5em;
}

.kb-notice.info .kb-notice-icon {
    background: var(--kb-info);
}

.kb-notice.success .kb-notice-icon {
    background: var(--kb-success);
}

.kb-notice.warning .kb-notice-icon {
    background: var(--kb-warning);
}

.kb-notice.error .kb-notice-icon {
    background: var(--kb-error);
}

/* ---- Toast ------------------------------------------------------------- */

/* Festgelegte Form: Kasten unten rechts. Die zweite, konkurrierende Variante
   (Pille oben mittig, kb-vad-flash) entfaellt mit der Migration.

   Anzeigedauer steuert das JS, nicht das CSS: info/success blenden nach 6 s
   aus, warning/error bleiben bis zum Schliessen stehen. */
.kb-toasts {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    /* Der Container selbst darf keine Klicks abfangen - er liegt sonst als
       unsichtbare Flaeche ueber der rechten unteren Ecke der Seite. */
    pointer-events: none;
}

.kb-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: min(480px, calc(100vw - 48px));
    padding: 12px 16px;
    border-radius: var(--kb-radius-inner);
    border-left: 4px solid var(--kb-info);
    background: var(--kb-heading);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-size: 0.95rem;
    line-height: 1.45;
}

.kb-toast p {
    margin: 0;
    flex: 1 1 auto;
}

.kb-toast.info {
    border-left-color: var(--kb-info);
}

.kb-toast.success {
    border-left-color: var(--kb-success);
}

.kb-toast.warning {
    border-left-color: var(--kb-warning);
}

.kb-toast.error {
    border-left-color: var(--kb-error);
}

.kb-toast-close {
    flex: none;
    padding: 0 2px;
    border: 0;
    background: none;
    color: inherit;
    opacity: 0.7;
    font-size: 1.1rem;
    line-height: 1.3;
    cursor: pointer;
}

.kb-toast-close:hover,
.kb-toast-close:focus-visible {
    opacity: 1;
}

/* ---- Dialog ------------------------------------------------------------ */

/* Ersatz fuer window.confirm. Vorlage ist das Confirm-Overlay des Agent-Chats,
   die einzige a11y-nahe Dialogumsetzung im Portal. */
.kb-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 25, 40, 0.45);
}

.kb-modal {
    width: 100%;
    max-width: 380px;
    padding: 20px;
    border-radius: var(--bb-block-radius, 10px);
    background: var(--kb-bg);
    color: var(--kb-fg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
}

.kb-modal-text {
    margin: 0 0 18px;
    color: var(--kb-heading);
    font-size: 0.95rem;
    line-height: 1.5;
}

.kb-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* Die Buttons im Dialog tragen .button aus dem Theme; nur der Aussenabstand
   aus custom.css (.button { margin: 10px 0 }) stoert in der Knopfleiste. */
.kb-modal-actions .button {
    margin: 0;
}

/* Destruktive Bestaetigung: einzige Danger-Variante im System. Fuellung statt
   nur Textfarbe, damit sie sich vom Abbrechen-Button klar abhebt. */
.button.kb-btn-danger,
.kb-modal-actions .button.kb-btn-danger {
    background-color: var(--bb-danger-color, #db222a);
    border-color: var(--bb-danger-color, #db222a);
    color: #fff;
}

.button.kb-btn-danger:hover,
.button.kb-btn-danger:focus {
    /* Kein eigenes Danger-Hover-Token im Theme - abdunkeln statt einen
       zweiten Rotton zu erfinden. */
    background-color: color-mix(in srgb, var(--bb-danger-color, #db222a) 85%, #000);
    border-color: color-mix(in srgb, var(--bb-danger-color, #db222a) 85%, #000);
    color: #fff;
}

@media (max-width: 640px) {
    .kb-toasts {
        right: 12px;
        left: 12px;
        bottom: 12px;
        align-items: stretch;
    }

    .kb-toast {
        max-width: none;
    }
}

/* =========================================================================
   Layoutbausteine
   =========================================================================

   Seitenkopf, Karte, Listen, Formular-Geruest usw. - die Ebene ueber den
   Kleinteilen. Werte kopiert aus der Vorgangsraum-App (kb-vorgangsraum.css,
   die ausgereifteste Fassung) bzw. aus dem Theme (.widget, nav#object-nav,
   .modal-container), Herkunft steht am jeweiligen Baustein. Die App selbst
   behaelt ihre kb-vr-*-Klassen (STYLEGUIDE.md Anhang A); dieser Katalog ist
   fuer die uebrigen Oberflaechen.

   Regeln wie bei den Kleinteilen: nur eigene Klassen, nie Elementselektoren;
   Farben nur ueber var(--kb-*); Zustaende heissen .is-on (nie .is-active /
   .is-open - Bulma-Kollision ueber dt-bulma-css). */

/* ---- Seitenkopf --------------------------------------------------------- */

/* EIN flaches Kopfmuster fuer alle Klubboard-Seiten (Beschluss 08/2026):
   optionaler Kicker, Titel, Aktionen rechts, Haarlinie darunter. Ersetzt den
   100vw-Hero der Vorgangsseiten und die Emoji-/h2-Koepfe der Module.
   Zielhoehe unter 64px Desktop. Werte aus .kb-vr-head (Vorgangsraum). */
.kb-page-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0 0 12px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--kb-line);
}

.kb-page-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--kb-fg);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    flex: none;
    text-decoration: none;
}

.kb-page-back:hover,
.kb-page-back:focus-visible {
    color: var(--kb-heading);
}

.kb-page-head-main {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kb-page-kicker {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--kb-muted);
}

/* Gilt fuer h1 wie h2 - die Optik haengt an der Klasse, nicht am Element,
   damit die Ueberschriften-Hierarchie der Seite frei bleibt. */
.kb-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--kb-heading);
}

.kb-page-sub {
    margin: 0;
    font-size: 14px;
    color: var(--kb-muted);
}

.kb-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    margin-left: auto;
}

/* custom.css gibt .button in Tabellenkontext margin 10px 0 - in der
   Kopfzeile stoert jeder Aussenabstand. */
.kb-page-actions .button {
    margin: 0;
}

/*
 * Monats-Direktauswahl zwischen den beiden Monats-Buttons (Stundenerfassung,
 * Prozessuebersicht). Groesse, Rahmen, Radius und Chevron liefert die Klasse
 * 'small' aus dem Theme - hier steht nur, was das Theme im Kopfzeilenkontext
 * falsch macht: Selects laufen dort sonst auf volle Breite und bringen einen
 * Aussenabstand mit.
 */
.kb-page-actions .kb-month-select {
    margin: 0;
    width: auto;
    max-width: 14rem;
    cursor: pointer;
}

@media (max-width: 600px) {
    .kb-page-actions {
        flex-basis: 100%;
        margin-left: 0;
    }

    /* Drei Bedienelemente nebeneinander sprengen die schmale Zeile; das
       Auswahlfeld darf schrumpfen, die Pfeil-Buttons nicht. */
    .kb-page-actions .kb-month-select {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ---- Karte -------------------------------------------------------------- */

/* Die weisse Inhaltsflaeche. Werte = .kb-vr-card (Vorgangsraum), die
   ihrerseits .widget aus theme.css:9797 entsprechen: Flaeche, 1px Linie,
   Blockradius. KEIN Schatten in Ruhe - der grosse Schatten der alten
   Vorgangs-Sidebar ist bewusst abgeschafft. */
.kb-card {
    background: var(--kb-bg);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius);
    padding: 16px 20px;
    margin: 0 0 20px;
}

/* Fuer Tabellen und Listen, die bis an den Kartenrand laufen sollen. */
.kb-card--flush {
    padding: 0;
    overflow: hidden;
}

.kb-card--flush > table,
.kb-card--flush > .dt-container {
    margin: 0;
}

/* Betonte Karte (z. B. Aktionsleiste) bzw. Fehlerkarte: 4px-Rand links,
   dieselbe Idiomatik wie .kb-notice-icon. */
.kb-card--accent {
    border-left: 4px solid var(--kb-accent);
}

.kb-card--danger {
    border-left: 4px solid var(--kb-error);
}

/* Kopfzeile in der Karte: Titel links, Aktionen rechts, Haarlinie.
   Titelwerte wie .widget-title im Theme (14px/600). */
.kb-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--kb-line);
}

.kb-card--flush > .kb-card-head {
    padding: 12px 20px 10px;
    margin-bottom: 0;
}

.kb-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--kb-heading);
    text-transform: var(--bb-widget-title-text-transform, none);
}

/* Fusszeile wie .bb-model-footer im Theme: abgesetzte Flaeche. */
.kb-card-foot {
    margin: 12px -20px -16px;
    padding: 10px 20px;
    background: var(--kb-bg-alt);
    border-top: 1px solid var(--kb-line);
    border-radius: 0 0 var(--kb-radius) var(--kb-radius);
    font-size: 13px;
    color: var(--kb-muted);
}

.kb-card--flush > .kb-card-foot {
    margin: 0;
}

/* Abschnittstitel innerhalb einer Karte oder Seite. */
.kb-section-title {
    margin: 16px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--kb-line);
    font-size: 13px;
    font-weight: 600;
    color: var(--kb-muted);
}

/* ---- Tabs --------------------------------------------------------------- */

/* Horizontale Navigations-Tabs, Werte von nav#object-nav (theme
   buddypress.css:4518-4571): Leiste auf abgesetzter Flaeche, aktiver Tab mit
   1px-Unterstrich in der Vereinsfarbe. Fuer NAVIGATION zwischen Ansichten;
   fuer Filter/Auswahl ist .kb-seg da. */
ul.kb-tabs {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 20px;
    padding: 0 20px;
    background: var(--kb-bg-alt);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius-inner);
}

ul.kb-tabs li {
    margin: 0;
    padding: 0 30px 0 0;
    list-style: none;
}

ul.kb-tabs li a {
    display: block;
    padding: 11px 0;
    font-size: 14px;
    line-height: 2;
    color: var(--kb-fg);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
}

ul.kb-tabs li a:hover,
ul.kb-tabs li a:focus-visible {
    color: var(--kb-accent);
}

ul.kb-tabs li.is-on a {
    border-bottom-color: var(--kb-accent);
    font-weight: 500;
    color: var(--kb-heading);
}

/* ---- Schluessel/Wert ---------------------------------------------------- */

/* Datenblatt-Zeilen. Zwei Formen, weil die Bestandsflaechen beide rendern:
   <dl class="kb-kv"> fuer neues Markup, table.kb-kv fuer die Tabellen der
   Vorgangsraum-Akte (.kb-vr-kv-Werte: Key 40%, 0.875rem). */
dl.kb-kv {
    display: grid;
    grid-template-columns: minmax(140px, 40%) 1fr;
    gap: 0 12px;
    margin: 0;
    font-size: 0.875rem;
}

dl.kb-kv dt {
    font-weight: 600;
    color: var(--kb-muted);
    padding: 6px 0;
    margin: 0;
}

dl.kb-kv dd {
    color: var(--kb-fg);
    padding: 6px 0;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Zeile ueber die volle Breite (lange Texte, Unterschriften, Tabellen). */
dl.kb-kv .is-wide {
    grid-column: 1 / -1;
}

table.kb-kv {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin: 0;
}

table.kb-kv th {
    text-align: left;
    width: 40%;
    font-weight: 600;
    color: var(--kb-muted);
    padding: 0 0.75rem 0.6rem 0;
    vertical-align: top;
    border: 0;
    background: none;
}

table.kb-kv td {
    color: var(--kb-fg);
    padding: 0 0 0.6rem 0;
    vertical-align: top;
    border: 0;
    background: none;
}

@media (max-width: 600px) {
    dl.kb-kv {
        grid-template-columns: 1fr;
    }

    dl.kb-kv dt {
        padding-bottom: 0;
    }
}

/* ---- Zeilenliste (Posteingang-Muster) ------------------------------------ */

/* Anklickbare Zeilen mit Haarlinien, Werte aus .kb-vr-row (Vorgangsraum);
   dasselbe Muster wie .bs-item-wrap im Theme. In .kb-card--flush einbetten. */
.kb-rows {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kb-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 14px 16px 14px 20px;
    border: 0;
    border-bottom: 1px solid var(--kb-line);
    border-left: 4px solid transparent;
    background: var(--kb-bg);
    color: var(--kb-fg);
    cursor: pointer;
    font: inherit;
    line-height: 1.4;
    text-decoration: none;
}

.kb-row:last-child {
    border-bottom: 0;
}

.kb-row:hover {
    background: var(--kb-page);
}

.kb-row.is-on {
    background: color-mix(in srgb, var(--kb-accent) 6%, var(--kb-bg));
    border-left-color: var(--kb-accent);
}

/* Nicht anklickbare Zeile (z. B. Changelog-Eintraege). */
.kb-row.is-static {
    cursor: default;
}

.kb-row.is-static:hover {
    background: var(--kb-bg);
}

/* Einzeilige Variante der Zeilenliste.
 *
 * Die Grundform stapelt Kicker, Titel und Meta untereinander - richtig fuer
 * einen Posteingang mit wenigen, inhaltsreichen Zeilen. Fuer Uebersichten, die
 * VIELE gleichartige Zeilen zeigen (die zwoelf Monate von
 * [kb_stdabrechnung_meine_abrechnungen]), ist das zu hoch: dort traegt die
 * Zeile genau ein .kb-row-meta, und dessen Abstand nach oben sowie das
 * Spalten-gap sind dann toter Raum.
 *
 * Nur die senkrechten Masse werden angefasst - Haarlinie, 4px-Auswahlrand und
 * die seitlichen Abstaende bleiben, damit beide Varianten in derselben Karte
 * buendig stehen.
 */
.kb-rows--compact .kb-row {
    gap: 0;
    padding-top: 7px;
    padding-bottom: 7px;
}

.kb-rows--compact .kb-row-meta {
    margin-top: 0;
}

.kb-row-kick {
    font-size: 0.75rem;
    color: var(--kb-muted);
}

.kb-row-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kb-heading);
}

.kb-row-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--kb-muted);
}

/* ---- Leerzustand -------------------------------------------------------- */

/* Ruhige Flaeche statt nackter Tabelle oder blossem <h2>. Werte aus
   .kb-vr-empty-card / .kb-vr-list-empty (Vorgangsraum). Mit .kb-card
   kombinierbar fuer die Karten-Form. */
.kb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 24px;
    text-align: center;
    color: var(--kb-muted);
}

.kb-empty-icon {
    font-size: 32px;
    line-height: 1;
}

.kb-empty-icon svg {
    width: 32px;
    height: 32px;
}

.kb-empty h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--kb-heading);
}

.kb-empty p {
    margin: 0;
    font-size: 0.9rem;
    max-width: 46ch;
}

.kb-empty-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.kb-empty-actions .button {
    margin: 0;
}

/* ---- Skeleton ----------------------------------------------------------- */

/* Ladeplatzhalter, Werte aus .kb-vr-skel; eigene Keyframes statt der
   Theme-Animation, damit hier keine Abhaengigkeit an BuddyPress entsteht. */
.kb-skel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0;
}

.kb-skel span {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: var(--kb-bg-alt);
    width: 85%;
    animation: kb-skel-pulse 1.6s ease-in-out infinite;
}

.kb-skel span:nth-child(2) {
    width: 60%;
}

.kb-skel span:nth-child(3) {
    width: 40%;
}

.kb-skel.is-head span:first-child {
    height: 24px;
    width: 55%;
}

@keyframes kb-skel-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ---- Formular-Geruest ---------------------------------------------------- */

/* Kein Input-Layer (STYLEGUIDE §5): Masse, Radius und Fokus der Felder
   kommen aus theme.css. Hier steht nur das Geruest drumherum - Feldabstand,
   Label, Hinweis, Aktionszeile - und der schmale ACF-Scope, der ACFs
   wp-admin-Raender im Frontend neutralisiert. */
.kb-field {
    margin: 0 0 20px;
}

.kb-field-label {
    display: block;
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--kb-heading);
}

.kb-field-hint {
    display: block;
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--kb-muted);
}

.kb-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 20px;
}

@media (min-width: 600px) {
    .kb-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.kb-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--kb-line);
}

.kb-form-actions .button {
    margin: 0;
}

/* ACF-Frontendformular in einer Klubboard-Karte: nur Abstaende und Label -
   Feld-Innenleben (Repeater, Relationship, Datepicker) bleibt ACF. */
.kb-form .acf-fields > .acf-field {
    padding: 0;
    border: 0;
    margin: 0 0 20px;
}

.kb-form .acf-fields > .acf-field .acf-label label {
    font-size: 14px;
    font-weight: 600;
    color: var(--kb-heading);
}

.kb-form .acf-form-submit {
    margin-top: 24px;
    padding: 20px 0 0;
    border-top: 1px solid var(--kb-line);
}

/* Checkbox-Raster (Kategorienwahl u. ae.). */
.kb-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px 16px;
    padding: 12px 16px;
    background: var(--kb-bg-alt);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius-inner);
}

/* ---- Ablagezone und Fortschritt ------------------------------------------ */

.kb-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 24px;
    border: 2px dashed var(--kb-line);
    border-radius: var(--kb-radius-inner);
    text-align: center;
    color: var(--kb-fg);
    cursor: pointer;
}

.kb-dropzone:hover,
.kb-dropzone:focus-visible,
.kb-dropzone.is-dragover {
    border-color: var(--kb-accent);
    background: color-mix(in srgb, var(--kb-accent) 6%, transparent);
}

.kb-dropzone-hint {
    font-size: 12px;
    color: var(--kb-muted);
}

.kb-progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--kb-bg-alt);
    overflow: hidden;
}

.kb-progress-bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--kb-accent);
    transition: width 0.2s linear;
}

/* ---- Kennzahlen ---------------------------------------------------------- */

.kb-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}

.kb-stat {
    background: var(--kb-bg);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kb-stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--kb-heading);
}

.kb-stat--success .kb-stat-value {
    color: color-mix(in srgb, var(--kb-success) 80%, #000);
}

.kb-stat--warning .kb-stat-value {
    color: color-mix(in srgb, var(--kb-warning) 70%, #000);
}

.kb-stat-label {
    font-size: 12px;
    color: var(--kb-muted);
}

/* ---- Schrittanzeige ------------------------------------------------------ */

/* Horizontaler Stepper (z. B. Einzelabrechnung Schritt 1-3). Abgeleitet aus
   der vertikalen Zeitachse des Vorgangsraums (.kb-vr-tl): 28px-Punkt,
   2px-Verbinder, done = gruen, current = Akzent mit Ring, future =
   gestrichelt. Fuer Verlaeufe mit Zeitpunkten bleibt die Zeitachse das
   richtige Muster. */
.kb-steps {
    display: flex;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.kb-step {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    text-align: center;
}

/* Verbinder zum vorigen Schritt. */
.kb-step + .kb-step::before {
    content: "";
    position: absolute;
    top: 13px;
    right: calc(50% + 20px);
    left: calc(-50% + 20px);
    height: 2px;
    background: var(--kb-line);
}

.kb-step.done + .kb-step.done::before,
.kb-step.done + .kb-step.current::before {
    background: var(--kb-success);
}

.kb-step-pt {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--kb-line);
    background: var(--kb-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kb-muted);
}

.kb-step.done .kb-step-pt {
    background: var(--kb-success);
    border-color: var(--kb-success);
    color: #fff;
}

.kb-step.current .kb-step-pt {
    border-color: var(--kb-accent);
    color: var(--kb-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--kb-accent) 18%, transparent);
}

.kb-step.future .kb-step-pt {
    border-style: dashed;
}

.kb-step-label {
    font-size: 0.875rem;
    line-height: 1.25;
    color: var(--kb-muted);
}

.kb-step.current .kb-step-label {
    font-weight: 600;
    color: var(--kb-heading);
}

/* ---- Dialog: Groessen, Kopf, Fuss, Sheet --------------------------------- */

/* .kb-modal (380px) ist der Confirm-Dialog. Fuer Formulardialoge und
   zweispaltige Arbeitsdialoge gibt es zwei Groessen; Kopf- und Fusszeile
   folgen .bb-model-header/-footer aus dem Theme (Haarlinie als Schatten,
   Fuss auf abgesetzter Flaeche). */
.kb-modal--md {
    max-width: 560px;
    padding: 0;
}

.kb-modal--lg {
    max-width: 860px;
    padding: 0;
}

.kb-modal--md .kb-modal-actions,
.kb-modal--lg .kb-modal-actions {
    padding: 0 20px 20px;
}

.kb-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    box-shadow: 0 1px 0 0 var(--kb-line);
}

.kb-modal-head h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--kb-heading);
}

.kb-modal-body {
    padding: 16px 20px;
    overflow: auto;
}

.kb-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    background: var(--kb-bg-alt);
    border-top: 1px solid var(--kb-line);
    border-radius: 0 0 var(--kb-radius) var(--kb-radius);
}

.kb-modal-foot .button {
    margin: 0;
}

/* Zweispaltiger Arbeitsdialog (Vorschau links, Formular rechts). */
.kb-modal-split {
    display: flex;
    align-items: stretch;
    max-height: 90vh;
}

.kb-modal-split > * {
    min-width: 0;
}

/* Bottom-Sheet auf Mobil: Overlay unten andocken, Radius nur oben. Die
   Overlay-Klasse kommt dazu: class="kb-modal-overlay kb-sheet". */
.kb-modal-overlay.kb-sheet {
    align-items: flex-end;
    padding: 0;
}

.kb-modal-overlay.kb-sheet .kb-modal {
    max-width: 680px;
    max-height: 90vh;
    overflow: auto;
    border-radius: var(--kb-radius) var(--kb-radius) 0 0;
}

/* ---- Text-Hilfsklassen und Leisten --------------------------------------- */

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

.kb-text-danger {
    color: var(--kb-error);
}

/* Outline-Variante der destruktiven Bestaetigung: fuer Loeschen-Links, die
   nicht als gefuellter Button auftreten sollen. Kein !important - ersetzt
   die vier !important des alten .button-link-delete. */
.button.kb-btn-danger--outline {
    background-color: transparent;
    border-color: var(--kb-error);
    color: var(--kb-error);
}

.button.kb-btn-danger--outline:hover,
.button.kb-btn-danger--outline:focus {
    background-color: var(--kb-error);
    border-color: var(--kb-error);
    color: #fff;
}

/* Fixierte Hinweisleiste am unteren Rand (z. B. Sperr-Hinweis im Review).
   Farben wie .kb-toast: dunkle Flaeche, farbiger Balken je Level. */
.kb-bar-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--kb-heading);
    color: #fff;
    border-top: 4px solid var(--kb-info);
    font-size: 0.95rem;
}

.kb-bar-bottom.success {
    border-top-color: var(--kb-success);
}

.kb-bar-bottom.warning {
    border-top-color: var(--kb-warning);
}

.kb-bar-bottom.error {
    border-top-color: var(--kb-error);
}

/* ---- Kleinteil-Erweiterungen --------------------------------------------- */

/* Punkt "laeuft gerade" am Badge (Muster .kb-vr-badge.is-inbearbeitung). */
.kb-badge.is-live::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Kompakte Badge-Groesse fuer Tabellenzellen und Chips. */
.kb-badge.small {
    font-size: 11px;
    padding: 0.1rem 0.5rem;
}

.kb-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Entfernen-Kreuz im Chip. */
.kb-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--kb-muted);
    font-size: 0.9em;
    line-height: 1;
    cursor: pointer;
}

.kb-chip-x:hover,
.kb-chip-x:focus-visible {
    color: var(--kb-error);
}

/* Avatar (Initialen oder Bild), Werte aus .kb-vr-avatar. */
.kb-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: var(--bb-cover-image-background-color, #647385);
    flex: none;
    object-fit: cover;
}

.kb-avatar.is-sm {
    width: 20px;
    height: 20px;
    font-size: 9px;
}

.kb-avatar-stack {
    display: inline-flex;
}

.kb-avatar-stack .kb-avatar {
    margin-left: -6px;
    box-shadow: 0 0 0 2px var(--kb-bg);
}

.kb-avatar-stack .kb-avatar:first-child {
    margin-left: 0;
}

.kb-page-back:focus-visible,
.kb-row:focus-visible,
.kb-dropzone:focus-visible,
.kb-chip-x:focus-visible,
ul.kb-tabs li a:focus-visible {
    outline: none;
    box-shadow: var(--bb-primary-button-focus-shadow, 0 0 0 2px color-mix(in srgb, var(--kb-accent) 35%, transparent));
}