/* ============================================================
   Bildfunk Design System — reusable component classes
   Used by the exported components (Button, Badge, Icon) so they
   render correctly anywhere the root styles.css is linked.
   Depends on tokens from colors_and_type.css.

   ── UPDATE (Master „Startseite", Juni 2026) ──────────────────
   ICON STYLE geändert: von Duotone (Flächenfüllung) auf
   MONOLINE / OUTLINE. Die Hauptform (.bf-i-p) wird jetzt als
   Kontur gezeichnet (fill:none + stroke), nicht mehr gefüllt.
   Grund: eleganter, moderner, einheitlicher – vom Kunden
   freigegeben. Alles andere unverändert.
   ============================================================ */

/* ---------- Icon — MONOLINE / OUTLINE (was: duotone) ---------- */
.bf-icon { display: block; }
/* Hauptform: früher pale-blue Füllung (#DCE6F2). Jetzt als Kontur. */
.bf-icon .bf-i-p { fill: none; stroke: var(--bf-blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Detail-Striche: unverändert, Strichstärke auf 1.5 angeglichen. */
.bf-icon .bf-i-s { fill: none; stroke: var(--bf-blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Sparsamer Orange-Akzent: früher Füllung, jetzt feine Kontur (keine Füllung). */
.bf-icon .bf-i-a { fill: none; stroke: var(--bf-orange); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Auf dunklem Grund: Konturen aufhellen, Orange-Akzent bleibt. */
.bf-on-dark .bf-icon .bf-i-p,
.bf-on-dark .bf-icon .bf-i-s { stroke: #BCD0EA; }

/* ---------- Button ---------- */
.bf-btn {
  font-family: var(--bf-font-sans);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--bf-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background var(--bf-dur-base) var(--bf-ease-standard), border-color var(--bf-dur-base) var(--bf-ease-standard);
}
.bf-btn-lg { font-size: 16px; padding: 13px 24px; }
.bf-btn-block { width: 100%; }
.bf-btn:disabled, .bf-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.bf-btn-primary { background: var(--bf-orange); color: #fff; }
.bf-btn-primary:hover { background: var(--bf-orange-600); color: #fff; }
.bf-btn-primary:active { background: var(--bf-orange-800); }

.bf-btn-secondary { background: var(--bf-blue); color: #fff; }
.bf-btn-secondary:hover { background: var(--bf-blue-600); color: #fff; }
.bf-btn-secondary:active { background: var(--bf-blue-800); }

.bf-btn-outline { background: #fff; color: var(--bf-blue); border-color: var(--bf-border-strong); }
.bf-btn-outline:hover { border-color: var(--bf-blue); }

.bf-btn-ghost { background: transparent; color: var(--bf-blue); }
.bf-btn-ghost:hover { background: var(--bf-surface); }

.bf-btn:focus-visible { outline: none; box-shadow: var(--bf-shadow-focus); }

/* On-dark button variants (added on the Master, hoisted into the system) */
.bf-btn-outline-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.30); }
.bf-btn-outline-on-dark:hover { border-color: #fff; background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }

/* ---------- Badge & tag ---------- */
.bf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--bf-radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.bf-badge .bf-badge-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.bf-badge-cert { background: #E6EEF7; color: var(--bf-blue); border-color: #C7D6E9; }
.bf-badge-accent { background: #FFF0DE; color: var(--bf-orange-800); border-color: #F7D5A6; }
.bf-badge-success { background: #E4F4EB; color: var(--bf-success); border-color: #BEE4CB; }
.bf-badge-warning { background: #FBEFDB; color: var(--bf-warning); border-color: #F1DBA3; }
.bf-badge-danger { background: #FBE4E1; color: var(--bf-danger); border-color: #F3BDB5; }
.bf-badge-neutral { background: var(--bf-surface); color: var(--bf-text); border-color: var(--bf-border); }

.bf-tag {
  display: inline-flex;
  align-items: center;
  background: var(--bf-surface);
  color: var(--bf-text);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 500;
}