/**
 * Floating-Menü / Supportframe Shell — CSS
 *
 * Fachliche Gliederung:
 *   A) Tokens
 *   B) Shell (Root, Trigger, Panel, Header, Tabs, Panes)
 *   C) Shared (Separator, Section-Label)
 *   D) Menü-Tab (Owner, Tools, Navigation, Module, Hints)
 *   E) Community-Tab (Listen, Footer, Empty)
 *   F) Konto-Tab (Profil, Aktionen, Gast)
 *   G) Accessibility / Focus
 *   H) Responsive
 *   I) Motion
 *
 * Phase 167: Aus floating-menu.php extrahiert.
 * Phase 170: Logisch gegliedert.
 * Phase 171: Design-Tokens zentralisiert.
 * Phase 172: Duplikate reduziert.
 * Phase 173: Fachlich entflochten.
 */


/* ═══════════════════════════════════════════════════════════════════════════ */
/* A) Tokens — presetgeführt (M14.3d)                                         */
/*    Kern-Tokens erben von der Seiten-Preset-Familie (--surface, --text,     */
/*    --accent, --border). Fallbacks greifen auf Seiten ohne Preset.          */
/* ═══════════════════════════════════════════════════════════════════════════ */

.scl-sf {
    /* Accent — erbt von Seiten-Preset */
    --sf-indigo:        var(--accent, #4f46e5);
    /* M14.4f: Text-on-accent — lesbar auf dunklen UND hellen Flächen */
    --sf-indigo-deep:   var(--accent, #a78bfa);
    --sf-indigo-dark:   var(--accent, #a78bfa);
    --sf-indigo-mid:    var(--accent, #6366f1);
    --sf-indigo-light:  rgba(167, 139, 250, .45);
    /* M14.4f: Tint-Tokens adaptiv — transparent statt hart-hell.
       Auf dunklen Presets: subtile helle Schimmer. Auf hellen: gleicher Effekt. */
    --sf-indigo-soft:   rgba(167, 139, 250, .10);
    --sf-indigo-border: rgba(167, 139, 250, .18);

    /* Text — vollständig presetgeführt (M14.4c) */
    --sf-text:          var(--text, #111827);
    --sf-text-dark:     var(--text, #1f2937);
    --sf-text-base:     var(--text, #374151);
    --sf-text-secondary:var(--muted, #6b7280);
    --sf-text-muted:    #9ca3af;

    /* Surfaces — vollständig presetgeführt (M14.4c) */
    --sf-bg-white:      var(--surface, #fff);
    --sf-bg-panel:      var(--surface-2, #fafafa);
    --sf-bg-subtle:     var(--surface-2, #f9fafb);
    --sf-bg-hover:      var(--surface-3, #f3f4f6);

    /* Borders — vollständig presetgeführt (M14.4c) */
    --sf-border:        var(--border, #e5e7eb);
    --sf-border-soft:   var(--border, #f3f4f6);
    --sf-border-mid:    #d1d5db;

    --sf-radius-xs:     3px;
    --sf-radius-sm:     5px;
    --sf-radius:        8px;
    --sf-radius-lg:     12px;
    --sf-radius-pill:   22px;

    --sf-shadow-panel:  0 8px 32px rgba(0,0,0,.13);
    --sf-shadow-trigger:0 3px 12px rgba(124,58,237,.28);
    /* M24.6: Hover-Shadow-Alias fuer Kacheln im Supportframe — vorher inline. */
    --sf-shadow-hover:  0 2px 8px rgba(0,0,0,.08);

    /* M14.8: Statuschip-Tokens — global-bridged wo verfuegbar.
       --accent/--accent-dim kommen aus dem Portal-Preset.
       success/warn/info/muted sind SF-eigene Sekundaertokens,
       weil die globalen --color-success etc. in Default-Presets
       nicht definiert sind (nur in ALLOWED_TOKENS als Platzhalter). */
    --sf-chip-accent-bg:    var(--accent-dim, rgba(167, 139, 250, .14));
    --sf-chip-accent-text:  var(--accent, #a78bfa);
    /* M24.9: Chip-Aliase greifen jetzt auf die neue Status-Token-Familie zurück.
       Ohne gesetzte Tokens fällt der Chip auf seine bisherigen Hartwerte —
       Drift mit anderen Status-Komponenten (Alerts, Badges) ist damit beendet. */
    --sf-chip-success-bg:   var(--success-bg, rgba(16, 185, 129, .14));
    --sf-chip-success-text: var(--success-text, #34d399);
    --sf-chip-warn-bg:      var(--warning-bg, rgba(245, 158, 11, .14));
    --sf-chip-warn-text:    var(--warning-text, #fbbf24);
    /* Info bleibt eigenständig (Blau-Familie), keine Status-Semantik. */
    --sf-chip-info-bg:      rgba(59, 130, 246, .14);
    --sf-chip-info-text:    #60a5fa;
    --sf-chip-muted-bg:     rgba(148, 163, 184, .12);
    --sf-chip-muted-text:   var(--muted, #94a3b8);

    --sf-dur-fast:      .12s;
    --sf-dur:           .15s;
    --sf-dur-open:      .18s;
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* B) Shell                                                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Root */
.scl-sf {
    position: fixed; top: 0; left: 0;
    z-index: 9990;
    /* M24.5: font-family vom Preset-Token gespeist; System-Stack als Fallback. */
    font-family: var(--font-family-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 14px;
}

/* Trigger */
.scl-sf-trigger {
    display: inline-flex; align-items: center; gap: 7px;
    /* M24.5: Trigger-Farben tokenisiert — vorher hartkodiert #7c3aed/#6d28d9.
       Damit folgt der prominente Trigger jetzt dem aktiven Preset-Akzent. */
    background: var(--accent, #7c3aed); color: #fff; border: none;
    padding: 11px 16px; border-radius: 22px;
    cursor: pointer; font-size: 0.82rem; font-weight: 600; font-family: inherit;
    box-shadow: var(--sf-shadow-trigger);
    user-select: none; transition: background var(--sf-dur), box-shadow var(--sf-dur);
    white-space: nowrap; letter-spacing: .01em;
}
.scl-sf-trigger:hover {
    background: var(--accent-hover, #6d28d9); box-shadow: 0 4px 16px rgba(124,58,237,.38);
}
.scl-sf-trigger-icon { font-size: 1.1rem; line-height: 1; }

/* Panel */
.scl-sf-panel {
    display: none; position: fixed; top: 42px; left: 0;
    width: 380px; max-height: calc(100vh - 42px); background: var(--sf-bg-white);
    border: 1px solid var(--sf-border); border-radius: 12px;
    box-shadow: var(--sf-shadow-panel);
    flex-direction: column; overflow: hidden;
}
.scl-sf.is-open .scl-sf-panel {
    display: flex; animation: scl-sf-slidein var(--sf-dur-open) ease;
}
@keyframes scl-sf-slidein {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* M14.4e: Tabbar mit integriertem Close-Button — kein separater Head */
.scl-sf-tabbar {
    display: flex; border-bottom: 1px solid var(--sf-border);
    flex-shrink: 0; background: var(--sf-bg-panel);
}
.scl-sf-close {
    font-size: 0.82rem; color: var(--sf-text-muted);
    cursor: pointer; padding: 8px 12px; line-height: 1; flex-shrink: 0;
    border: none; background: none; border-radius: 0; font-family: inherit;
    border-left: 1px solid var(--sf-border);
    transition: color var(--sf-dur-fast), background var(--sf-dur-fast);
}
.scl-sf-close:hover { color: var(--sf-text-base); background: var(--sf-bg-hover); }
.scl-sf-tab {
    flex: 1; text-align: center;
    padding: 10px 4px 9px; font-size: 0.74rem; font-weight: 600;
    color: var(--sf-text-secondary); cursor: pointer;
    border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
    background: none; font-family: inherit;
    transition: color var(--sf-dur-fast), border-color var(--sf-dur-fast);
    user-select: none;
}
.scl-sf-tab:hover { color: var(--sf-text-base); }
.scl-sf-tab.is-active { color: var(--sf-indigo); border-bottom-color: var(--sf-indigo); }

/* Panes */
/* M24.1: harter 480px-Cap war ein Desktop-Bottleneck (Supportframe scrollte
   intern, obwohl viel Viewport-Höhe verfügbar war). Cap jetzt viewport-aware,
   so dass auf Desktop die Pane atmen kann. Das Panel limitiert sich ohnehin
   über calc(100vh - 42px) → die Pane füllt nur den tatsächlich verfügbaren
   Panel-Raum. Mobile-Override (< 461px) bleibt als etwas strengere Regel. */
.scl-sf-pane { display: none; overflow-y: auto; max-height: calc(100vh - 120px); padding: 12px 16px 16px; }
.scl-sf-pane.is-active { display: block; }


/* ═══════════════════════════════════════════════════════════════════════════ */
/* C) Shared (cross-pane)                                                      */
/* ═══════════════════════════════════════════════════════════════════════════ */

.scl-sf-sep { height: 1px; background: var(--sf-bg-hover); margin: 0; }
.scl-sf-section-label {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--sf-text-muted);
    padding: 10px 14px 2px; margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* D) Menü-Tab                                                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kachel-Basis (Owner-Tiles, Tool-Tiles, Module-Items) ─── */
.scl-sf-owner-block__tile,
.scl-sf-tool-tile,
.scl-sf-module-item {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; font-weight: 600; text-decoration: none;
    cursor: pointer;
    transition: background var(--sf-dur-fast), border-color var(--sf-dur-fast);
}

/* ── Owner-Block ─── */
.scl-sf-owner-block {
    padding: 2px 0 6px; border-bottom: 1px solid var(--sf-border);
}
.scl-sf-owner-block .scl-sf-section-label {
    color: var(--sf-indigo-mid); padding: 6px 14px 2px;
}
.scl-sf-owner-block__views { display: flex; gap: 4px; padding: 2px 14px 6px; }
.scl-sf-owner-block__view-btn {
    flex: 1; padding: 7px 6px;
    font-size: 0.68rem; font-weight: 600; font-family: inherit;
    border: 1px solid var(--sf-indigo-border); border-radius: 5px;
    background: var(--sf-bg-subtle); color: var(--sf-indigo); cursor: pointer;
    transition: background var(--sf-dur-fast), border-color var(--sf-dur-fast), color var(--sf-dur-fast);
}
.scl-sf-owner-block__view-btn:hover {
    background: var(--sf-indigo-soft); border-color: var(--sf-indigo-light); color: var(--sf-indigo-deep);
}
.scl-sf-owner-block__view-btn.scl-le-view-btn--active {
    background: var(--sf-indigo); color: var(--sf-bg-white); border-color: var(--sf-indigo);
}
.scl-sf-owner-block__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 5px; padding: 2px 14px 4px;
}
.scl-sf-owner-block__tile {
    gap: 3px; padding: 8px 4px 7px; min-height: 50px; font-family: inherit;
    border: 1px solid var(--sf-indigo-border); border-radius: 8px;
    background: var(--sf-bg-white); color: var(--sf-indigo-dark);
    justify-content: center;
}
.scl-sf-owner-block__tile:hover {
    background: var(--sf-indigo-soft); border-color: var(--sf-indigo-light); color: var(--sf-indigo-deep);
}
.scl-sf-owner-block__tile.is-active {
    background: var(--sf-indigo); color: var(--sf-bg-white); border-color: var(--sf-indigo);
}
.scl-sf-owner-block__tile-icon { font-size: 1rem; line-height: 1; }
.scl-sf-owner-block__tile-label {
    font-size: 0.62rem; font-weight: 600;
    text-align: center; line-height: 1.3;
    white-space: normal; word-break: break-word; color: inherit;
}

/* ── Schnellzugriff / Tools ─── */
.scl-sf-tool-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 6px; padding: 4px 12px 0;
}
.scl-sf-tool-tile {
    gap: 5px; padding: 10px 6px 8px; border-radius: 8px;
    background: var(--sf-bg-white);
    border: 1px solid var(--sf-indigo-border); color: var(--sf-indigo-dark);
    font-size: 0.73rem;
    transition: background var(--sf-dur-fast), border-color var(--sf-dur-fast), transform .1s, box-shadow .1s;
}
.scl-sf-tool-tile:hover {
    background: var(--sf-indigo-soft); border-color: var(--sf-indigo-light);
    transform: translateY(-1px); box-shadow: var(--sf-shadow-hover);
}
.scl-sf-tool-icon,
.scl-sf-module-icon { font-size: 1.1rem; line-height: 1; }
.scl-sf-tool-label {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; line-height: 1.2;
}

/* Schnellzugriff Card */
.scl-sf-quickaccess {
    background: var(--sf-bg-subtle);
    border: 1px solid var(--sf-border);
    border-radius: 8px;
    padding: 10px 12px 12px;
    margin-bottom: 10px;
}
.scl-sf-quickaccess .scl-sf-section-label { margin-bottom: 6px; }
.scl-sf-quickaccess .scl-sf-tool-grid { padding: 0; }

/* Hauptmodule Card */
.scl-sf-modules-card {
    background: var(--sf-bg-white);
    border: 1px solid var(--sf-border);
    border-radius: 8px;
    padding: 10px 12px 12px;
}

/* Unreleased-Badge */
.scl-sf-module-unreleased {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--sf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Module ─── */
.scl-sf-module-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 6px; padding: 6px 14px 14px;
}
.scl-sf-module-item {
    gap: 3px; padding: 9px 4px; border-radius: 7px; font-size: 0.72rem;
    color: var(--sf-text-base);
    border: 1px solid var(--sf-border); background: var(--sf-bg-subtle);
}
.scl-sf-module-item:hover {
    background: var(--sf-bg-hover); border-color: var(--sf-border-mid); color: var(--sf-text);
}
.scl-sf-module-item.is-locked { opacity: .55; }
.scl-sf-module-plan { font-size: 0.6rem; font-weight: 700; color: var(--sf-indigo); white-space: nowrap; }
.scl-sf-module-item.is-coming-soon { opacity: .38; cursor: default; pointer-events: none; }
.scl-sf-module-soon { font-size: 0.6rem; font-weight: 700; color: var(--sf-text-muted); white-space: nowrap; }

/* ── Kontext-Hinweise ─── */
.scl-sf-hint {
    display: flex; align-items: center; gap: 8px; padding: 8px 14px;
    background: var(--sf-indigo-soft);
    border-top: 1px solid var(--sf-indigo-border);
    font-size: 0.77rem; color: var(--sf-indigo-deep);
}
.scl-sf-hint-text { flex: 1 1 0; }
.scl-sf-hint-link {
    font-weight: 600; color: var(--sf-indigo); text-decoration: none;
    white-space: nowrap; flex-shrink: 0;
}
.scl-sf-hint-link:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════════════════ */
/* E) Community-Tab                                                            */
/* ═══════════════════════════════════════════════════════════════════════════ */

.scl-sf-list { list-style: none; margin: 0; padding: 0 0 4px; }
.scl-sf-item {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 6px; padding: 7px 14px;
    border-bottom: 1px solid var(--sf-bg-hover);
}
.scl-sf-item:last-child { border-bottom: none; }
.scl-sf-item-main {
    overflow: hidden; display: flex; align-items: baseline; gap: 5px; min-width: 0;
}
.scl-sf-item-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--sf-indigo); flex-shrink: 0; margin-top: 1px; align-self: center;
}
.scl-sf-item-title {
    font-size: 0.82rem; color: var(--sf-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
}
.scl-sf-item-title:hover { color: var(--sf-indigo); }
.scl-sf-item-date { font-size: 0.7rem; color: var(--sf-text-muted); white-space: nowrap; flex-shrink: 0; }

/* Footer + Empty (Community-spezifisch) */
.scl-sf-pane-footer {
    padding: 8px 14px 12px; border-top: 1px solid var(--sf-border); text-align: right;
}
.scl-sf-pane-footer a {
    font-size: 0.77rem; font-weight: 600; color: var(--sf-indigo); text-decoration: none;
}
.scl-sf-pane-footer a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════════════════ */
/* F) Konto-Tab                                                                */
/* ═══════════════════════════════════════════════════════════════════════════ */

.scl-sf-profile-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sf-border); background: var(--sf-bg-panel);
}
.scl-sf-profile-avatar { font-size: 1.8rem; line-height: 1; color: var(--sf-indigo); flex-shrink: 0; }
.scl-sf-profile-name {
    font-size: 0.88rem; font-weight: 700; color: var(--sf-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scl-sf-plan-badge {
    display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: .04em;
    padding: 1px 6px; border-radius: 4px;
    background: var(--sf-indigo-soft); color: var(--sf-indigo-deep);
    border: 1px solid var(--sf-indigo-light);
    margin-left: 5px; vertical-align: middle; line-height: 1.6;
}

.scl-sf-profile-nav { display: flex; flex-direction: column; padding: 6px 0 8px; }
.scl-sf-profile-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; font-size: 0.83rem;
    color: var(--sf-text-base); text-decoration: none;
    transition: background .1s;
}
.scl-sf-profile-item:hover { background: var(--sf-bg-subtle); }
.scl-sf-profile-item.is-highlight {
    color: var(--sf-indigo); font-weight: 600;
    margin-top: 4px; border-top: 1px solid var(--sf-border); padding-top: 10px;
}
.scl-sf-profile-item.is-logout {
    color: var(--sf-text-muted); margin-top: 4px; border-top: 1px solid var(--sf-border);
}
/* M24.5: Logout-Hover-Farbe tokenisiert (vorher hartkodiert #ef4444). */
.scl-sf-profile-item.is-logout:hover { color: var(--color-danger, #ef4444); background: var(--sf-bg-subtle); }
.scl-sf-profile-item-icon {
    width: 18px; text-align: center; font-size: 0.88rem; flex-shrink: 0; color: var(--sf-text-muted);
}
.scl-sf-profile-item.is-highlight .scl-sf-profile-item-icon { color: var(--sf-indigo); }
.scl-sf-profile-item.is-logout   .scl-sf-profile-item-icon { color: var(--sf-text-muted); }

/* Gast */
.scl-sf-guest-pane { padding: 28px 20px; text-align: center; }
.scl-sf-guest-icon { font-size: 2.4rem; display: block; margin-bottom: 10px; color: var(--sf-border-mid); line-height: 1; }
.scl-sf-guest-text { font-size: 0.83rem; color: var(--sf-text-secondary); margin: 0 0 16px; line-height: 1.5; }
.scl-sf-guest-login {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--sf-indigo); color: var(--sf-bg-white);
    padding: 9px 22px; border-radius: 22px;
    font-size: 0.82rem; font-weight: 600; text-decoration: none;
    transition: background .14s;
}
.scl-sf-guest-login:hover { background: var(--accent-hover, #6d28d9); }
.scl-sf-guest-plans {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--sf-indigo); background: none;
    padding: 7px 16px; border-radius: 22px;
    border: 1px solid var(--sf-indigo-border);
    font-size: 0.82rem; font-weight: 600; text-decoration: none;
    transition: background .14s, border-color .14s;
    margin-left: 6px;
}
.scl-sf-guest-plans:hover { background: var(--sf-indigo-soft); border-color: var(--sf-indigo-light); }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* G) Accessibility / Focus                                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Shell-Controls */
.scl-sf-trigger:focus-visible,
.scl-sf-guest-login:focus-visible { outline: 2px solid var(--sf-indigo); outline-offset: 2px; }
.scl-sf-close:focus-visible       { outline: 2px solid var(--sf-indigo); outline-offset: 1px; }
.scl-sf-tab:focus-visible          { outline: 2px solid var(--sf-indigo); outline-offset: -2px; }

/* Menü-Tab Controls */
.scl-sf-owner-block__tile:focus-visible,
.scl-sf-owner-block__view-btn:focus-visible,
.scl-sf-tool-tile:focus-visible,
.scl-sf-module-item:focus-visible { outline: 2px solid var(--sf-indigo); outline-offset: 1px; }

/* Konto-Tab Controls */
.scl-sf-profile-item:focus-visible { outline: 2px solid var(--sf-indigo); outline-offset: -1px; }


/* ═══════════════════════════════════════════════════════════════════════════ */
/* H) Responsive                                                               */
/* ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 460px) {
    .scl-sf { top: 10px; left: 10px; }
    .scl-sf-panel { width: calc(100vw - 20px); left: 0; }
    .scl-sf-tool-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
    .scl-sf-pane { max-height: calc(100vh - 140px); }
}
@media (max-width: 320px) {
    .scl-sf-owner-block__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* I) Motion                                                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .scl-sf.is-open .scl-sf-panel { animation: none; }
    .scl-sf-tool-tile:hover { transform: none; box-shadow: none; }
    .scl-sf-qa:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* J) Supportframe 4-Ebenen-Hierarchie (M14.3b / M14.3d presetgeführt)      */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Ebene 1: Kontextkopf — nur Chips, Titel lebt im Panel-Head */
.scl-sf-context-header {
    padding: 10px 16px 8px;
    border-bottom: 1px solid var(--sf-border-soft);
}
.scl-sf-ctx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.scl-sf-ctx-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    /* M14.7: Default (muted) via Token */
    background: var(--sf-chip-muted-bg);
    color: var(--sf-chip-muted-text);
}
/* M14.7: Tone-Klassen mit semantischen Chip-Tokens */
.scl-sf-ctx-chip.is-success { background: var(--sf-chip-success-bg); color: var(--sf-chip-success-text); }
.scl-sf-ctx-chip.is-warn    { background: var(--sf-chip-warn-bg);    color: var(--sf-chip-warn-text); }
.scl-sf-ctx-chip.is-accent  { background: var(--sf-chip-accent-bg);  color: var(--sf-chip-accent-text); }
.scl-sf-ctx-chip.is-info    { background: var(--sf-chip-info-bg);    color: var(--sf-chip-info-text); }
.scl-sf-ctx-chip.is-muted   { background: var(--sf-chip-muted-bg);   color: var(--sf-chip-muted-text); }

/* Ebene 2: Quick Actions — presetgeführt */
.scl-sf-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--sf-border-soft);
}
.scl-sf-qa {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--sf-bg-subtle);
    border: 1px solid var(--sf-border);
    color: var(--sf-text-base);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background .12s, border-color .12s, transform .12s;
}
.scl-sf-qa:hover {
    background: var(--sf-bg-hover);
    border-color: var(--sf-indigo-light);
    text-decoration: none;
    transform: translateX(2px);
}
.scl-sf-qa--primary {
    background: var(--sf-indigo-soft);
    border-color: var(--sf-indigo-border);
    color: var(--sf-indigo-deep);
}
.scl-sf-qa--primary:hover {
    background: var(--sf-indigo-soft);
    border-color: var(--sf-indigo-light);
}
.scl-sf-qa__icon {
    font-size: 0.92rem;
    line-height: 1;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}
.scl-sf-qa__label { line-height: 1.3; }