/* ============================================================
   Badge Bar – Block Styles
   Block: kss/badge-bar
   ============================================================ */

/* ── Block-Wrapper (kein Hintergrund) ────────────────────── */
.kss-badge-bar {
    background: transparent;
}

/* ── Badge-Liste ──────────────────────────────────────────── */
.kss-badge-bar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 0.6rem;
}

/* Ausrichtung */
.kss-badge-bar__list--align-left    { justify-content: flex-start; }
.kss-badge-bar__list--align-center  { justify-content: center; }
.kss-badge-bar__list--align-right   { justify-content: flex-end; }

/* Zeilenumbruch optional */
.kss-badge-bar__list--wrap {
    flex-wrap: wrap;
}

/* ── Badge-Element ────────────────────────────────────────── */
.kss-badge-bar__item {
    display: inline-flex;
}

/* ── Badge-Basis ──────────────────────────────────────────── */
.kss-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.85em;
    border-radius: 999px;
    font-size: clamp(0.72rem, 1vw, 0.82rem);
    font-weight: 500;
    letter-spacing: 0.015em;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: default;
}

.kss-badge:hover {
    opacity: 0.85;
    transform: scale(1.04);
}

/* ── Icon innerhalb des Badges ────────────────────────────── */
.kss-badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.kss-badge__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================================
   STILE: outline / filled / subtle
   ============================================================ */

/* ── Farben: Outline ──────────────────────────────────────── */
.kss-badge--outline.kss-badge--blue   { color: #60a5fa; border-color: rgba(96,165,250,0.55); background: transparent; }
.kss-badge--outline.kss-badge--green  { color: #4ade80; border-color: rgba(74,222,128,0.55); background: transparent; }
.kss-badge--outline.kss-badge--pink   { color: #f472b6; border-color: rgba(244,114,182,0.55); background: transparent; }
.kss-badge--outline.kss-badge--orange { color: #fb923c; border-color: rgba(251,146,60,0.55); background: transparent; }
.kss-badge--outline.kss-badge--purple { color: #a78bfa; border-color: rgba(167,139,250,0.55); background: transparent; }
.kss-badge--outline.kss-badge--cyan   { color: #22d3ee; border-color: rgba(34,211,238,0.55); background: transparent; }
.kss-badge--outline.kss-badge--yellow { color: #fbbf24; border-color: rgba(251,191,36,0.55); background: transparent; }
.kss-badge--outline.kss-badge--teal   { color: #2dd4bf; border-color: rgba(45,212,191,0.55); background: transparent; }
.kss-badge--outline.kss-badge--gray   { color: #9ca3af; border-color: rgba(156,163,175,0.55); background: transparent; }
.kss-badge--outline.kss-badge--white  { color: #f0f2f8; border-color: rgba(240,242,248,0.55); background: transparent; }

/* ── Farben: Filled ───────────────────────────────────────── */
.kss-badge--filled.kss-badge--blue   { color: #fff; background: #3b82f6; border-color: #3b82f6; }
.kss-badge--filled.kss-badge--green  { color: #fff; background: #22c55e; border-color: #22c55e; }
.kss-badge--filled.kss-badge--pink   { color: #fff; background: #ec4899; border-color: #ec4899; }
.kss-badge--filled.kss-badge--orange { color: #fff; background: #f97316; border-color: #f97316; }
.kss-badge--filled.kss-badge--purple { color: #fff; background: #8b5cf6; border-color: #8b5cf6; }
.kss-badge--filled.kss-badge--cyan   { color: #0f172a; background: #06b6d4; border-color: #06b6d4; }
.kss-badge--filled.kss-badge--yellow { color: #0f172a; background: #f59e0b; border-color: #f59e0b; }
.kss-badge--filled.kss-badge--teal   { color: #fff; background: #14b8a6; border-color: #14b8a6; }
.kss-badge--filled.kss-badge--gray   { color: #fff; background: #6b7280; border-color: #6b7280; }
.kss-badge--filled.kss-badge--white  { color: #111; background: #f0f2f8; border-color: #f0f2f8; }

/* ── Farben: Subtle ───────────────────────────────────────── */
.kss-badge--subtle.kss-badge--blue   { color: #60a5fa; background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.22); }
.kss-badge--subtle.kss-badge--green  { color: #4ade80; background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.22); }
.kss-badge--subtle.kss-badge--pink   { color: #f472b6; background: rgba(244,114,182,0.12); border-color: rgba(244,114,182,0.22); }
.kss-badge--subtle.kss-badge--orange { color: #fb923c; background: rgba(251,146,60,0.12); border-color: rgba(251,146,60,0.22); }
.kss-badge--subtle.kss-badge--purple { color: #a78bfa; background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.22); }
.kss-badge--subtle.kss-badge--cyan   { color: #22d3ee; background: rgba(34,211,238,0.12); border-color: rgba(34,211,238,0.22); }
.kss-badge--subtle.kss-badge--yellow { color: #fbbf24; background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.22); }
.kss-badge--subtle.kss-badge--teal   { color: #2dd4bf; background: rgba(45,212,191,0.12); border-color: rgba(45,212,191,0.22); }
.kss-badge--subtle.kss-badge--gray   { color: #9ca3af; background: rgba(156,163,175,0.12); border-color: rgba(156,163,175,0.22); }
.kss-badge--subtle.kss-badge--white  { color: #f0f2f8; background: rgba(240,242,248,0.08); border-color: rgba(240,242,248,0.22); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .kss-badge-bar__list:not(.kss-badge-bar__list--wrap) {
        flex-wrap: wrap;
    }
}