/* =========================================================
   VENDBAR COMPONENTS CSS
   ---------------------------------------------------------
   Globale wiederverwendbare UI-Bausteine.
   Keine PDP-spezifische Struktur. Keine Seitenlogik.
   ========================================================= */

.vb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--vb-radius-md);
  font-size: var(--vb-text-sm);
  font-weight: var(--vb-weight-bold);
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--vb-transition), border-color var(--vb-transition), color var(--vb-transition), box-shadow var(--vb-transition), transform var(--vb-transition);
}

.vb-btn:hover { transform: translateY(-1px); }

.vb-btn-primary {
  background: var(--vb-action);
  border-color: var(--vb-action);
  color: var(--vb-action-text) !important;
  box-shadow: 0 8px 18px rgba(64,148,221,.22);
}

.vb-btn-primary:hover,
.vb-btn-primary:focus {
  background: var(--vb-action-hover);
  border-color: var(--vb-action-hover);
  color: var(--vb-action-text) !important;
}

.vb-btn-secondary {
  background: var(--vb-surface);
  border-color: var(--vb-border);
  color: var(--vb-action-active) !important;
}

.vb-btn-secondary:hover,
.vb-btn-secondary:focus {
  background: var(--vb-action-soft);
  border-color: var(--vb-action-border);
  color: var(--vb-action-active) !important;
}

.vb-card {
  background: var(--vb-surface);
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius-lg);
  box-shadow: var(--vb-shadow-card);
}

.vb-card-pad { padding: var(--vb-space-xl); }

.vb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--vb-space-sm) 14px;
  border-radius: var(--vb-radius-pill);
  background: var(--vb-surface-muted);
  color: var(--vb-text);
  font-size: var(--vb-text-xs);
  font-weight: var(--vb-weight-bold);
  line-height: 1.1;
}

.vb-badge-info { background: var(--vb-info-soft); color: var(--vb-info); }
.vb-badge-success { background: var(--vb-success-soft); color: var(--vb-success); }
.vb-badge-warning { background: var(--vb-warning-soft); color: var(--vb-warning); }
.vb-badge-action { background: var(--vb-action-soft); color: var(--vb-action-active); }

.vb-notice {
  padding: var(--vb-space-md) var(--vb-space-lg);
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius-md);
  background: var(--vb-surface-soft);
  color: var(--vb-text);
  font-size: var(--vb-text-sm);
  line-height: var(--vb-line-normal);
}

.vb-notice-info { background: var(--vb-info-soft); border-color: var(--vb-info-border); }
.vb-notice-success { background: var(--vb-success-soft); border-color: var(--vb-success-border); }
.vb-notice-warning { background: var(--vb-warning-soft); border-color: var(--vb-warning-border); }

.vb-table-clean {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vb-text-sm);
}

.vb-table-clean th,
.vb-table-clean td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--vb-border);
  text-align: left;
  vertical-align: top;
}

.vb-table-clean th {
  width: 34%;
  color: var(--vb-text);
  font-weight: var(--vb-weight-semibold);
  background: var(--vb-surface-soft);
}

.vb-accordion {
  border-top: 1px solid var(--vb-border);
}

.vb-accordion-item {
  border-bottom: 1px solid var(--vb-border);
}

.vb-accordion-title {
  margin: 0;
  padding: var(--vb-space-md) 0;
  font-size: var(--vb-text-base);
  font-weight: var(--vb-weight-bold);
  line-height: var(--vb-line-normal);
}

.vb-accordion-content {
  padding: 0 0 var(--vb-space-md);
  color: var(--vb-text-soft);
  font-size: var(--vb-text-sm);
  line-height: var(--vb-line-relaxed);
}

/* Globale Icon-Sicherungen */
.vb-btn svg,
.vb-badge svg,
.vb-notice svg {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  max-width: 1em;
  max-height: 1em;
}