/* budget-calculator.css — Slice 69 (Tool 2, TOOLS-SPECS)
 * Eigenes, token-reines Bundle: KEINE Farbliterale, nur var(--...) Referenzen
 * (design-budget-Kanon; Praezedenz check24-embed.css). Spacing/Radien aus Tokens.
 * Accessibility: Fokus-Ring 2px, Tap-Targets min-height 44px, aria-live-Region.
 */

.bc-tool {
  background: var(--bg-elevated, var(--bg));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5);
  margin: var(--sp-6) 0;
}

.bc-tool__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--text);
  margin-bottom: var(--sp-2);
}

.bc-tool__hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}

.bc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.bc-field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-2);
}

.bc-field select {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.bc-field select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.bc-submit {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-on-dark);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.bc-submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bc-output {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-5);
}

.bc-output__summe {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--text);
  margin-bottom: var(--sp-1);
}

.bc-output__kennzeichnung {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}

.bc-output details {
  margin-bottom: var(--sp-4);
}

.bc-output summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--primary);  /* Link-Farbe Kanon (site.css a) */
  min-height: 44px;
  display: flex;
  align-items: center;
}

.bc-rechenweg {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: var(--sp-3);
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}

.bc-lern {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-left: 3px solid var(--border);
  padding-left: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.bc-lern strong { color: var(--text); }

.bc-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .bc-tool * { transition: none !important; animation: none !important; }
}