/**
 * assets/bu-rechner.css — Styling fuer den BU-Bedarfsrechner (/bu-rechner/).
 * Additiv zum Design-System. Nutzt ausschliesslich die vorhandenen CSS-Variablen
 * aus assets/kredus.css (Marke = var(--brand-*)), damit der Rechner farblich
 * exakt zum aktuellen Theme passt. Wird nur auf der Rechner-Seite geladen.
 * Erstellt 2026-07-22.
 */

/* Layout: Eingaben links, Ergebnis rechts; ab 860px zweispaltig. */
.bur-sec { padding-top: clamp(8px, 2vw, 20px); }
.bur-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: clamp(20px, 3.2vw, 34px);
}
@media (min-width: 860px) {
  .bur-card { grid-template-columns: 1.05fr 1fr; gap: var(--s-8); }
}

.bur-form { margin: 0; min-width: 0; }
.bur-form h2, .bur-results h2 {
  font-size: 1.16rem; margin: 0 0 var(--s-5); letter-spacing: -.01em; color: var(--ink);
}

.bur-field { margin-bottom: var(--s-5); }
.bur-field:last-child { margin-bottom: 0; }
.bur-field > label {
  display: block; font-size: .82rem; font-weight: 700; color: var(--ink);
  margin: 0 0 6px; letter-spacing: .01em;
}
.bur-field .opt { font-weight: 500; color: var(--muted-2); text-transform: none; letter-spacing: 0; }

.bur-inputwrap { position: relative; display: flex; align-items: stretch; }
.bur-inputwrap input {
  width: 100%; min-height: 50px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 46px 12px 14px; font-size: 1.05rem; font-family: var(--font-num);
  background: var(--ground); color: var(--ink); -moz-appearance: textfield;
}
.bur-inputwrap input::-webkit-outer-spin-button,
.bur-inputwrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bur-inputwrap input:focus {
  outline: 3px solid var(--brand-200); outline-offset: 1px; border-color: var(--brand-400);
}
.bur-inputwrap .bur-unit {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-weight: 600; pointer-events: none; font-size: 1rem;
}
.bur-hint { color: var(--muted); font-size: var(--fs-xs); margin: 6px 0 0; line-height: 1.45; }

/* Ergebnis-Panel */
.bur-results {
  background: var(--brand-050); border: 1px solid var(--brand-100);
  border-radius: var(--r); padding: clamp(18px, 2.6vw, 26px); min-width: 0;
}
.bur-headline { margin-bottom: var(--s-5); }
.bur-headline .bur-label {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--brand-600); margin: 0 0 4px;
}
.bur-big {
  font-family: var(--font-num); font-size: clamp(2rem, 1.4rem + 3vw, 2.9rem);
  font-weight: 700; line-height: 1.05; color: var(--brand-800); letter-spacing: -.02em;
}
.bur-big .bur-permo { font-size: 1rem; font-weight: 600; color: var(--muted); }
.bur-band {
  margin-top: 4px; font-size: .96rem; color: var(--ink-soft);
}
.bur-band strong { color: var(--brand-700); font-weight: 700; }

.bur-rows { margin-top: var(--s-5); border-top: 1px solid var(--brand-100); }
.bur-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: 12px 0; border-bottom: 1px solid var(--brand-100);
}
.bur-row:last-child { border-bottom: 0; }
.bur-row .bur-k { color: var(--ink-soft); font-size: .95rem; }
.bur-row .bur-v {
  font-family: var(--font-num); font-weight: 700; color: var(--brand-800);
  font-size: 1.08rem; text-align: right; white-space: nowrap;
}
.bur-row .bur-v small { display: block; font-family: var(--font); font-weight: 500; font-size: .78rem; color: var(--muted); white-space: normal; }

.bur-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: var(--s-5); padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--accent-050); border: 1px solid var(--accent-100);
  color: var(--ink-soft); font-size: .9rem; line-height: 1.5;
}
.bur-note svg { width: 18px; height: 18px; flex: none; color: var(--accent-700); margin-top: 1px; }
.bur-note[hidden] { display: none; }

.bur-disc { margin: var(--s-4) 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }

.bur-cta { margin-top: var(--s-6); }
.bur-cta .btn { width: 100%; justify-content: center; }

/* Reine No-JS-Absicherung: Hinweis, falls JS aus ist. */
.bur-nojs { display: none; color: var(--muted); font-size: .95rem; }
html:not(.js) .bur-nojs { display: block; }
html:not(.js) .bur-results .bur-live { display: none; }

/* E-E-A-T Autoren-Box und Quellen (im .article-Kontext) */
.article .k-authorbox {
  display: flex; gap: var(--s-4); align-items: flex-start;
  margin: var(--s-8) 0 var(--s-6); padding: clamp(16px, 2.4vw, 22px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.article .k-authorbox-ic {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-050); color: var(--brand-700); border: 1px solid var(--brand-100);
}
.article .k-authorbox-ic svg { width: 24px; height: 24px; }
.article .k-authorbox-name { margin: 0 0 4px; font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.article .k-authorbox-role { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.article .k-sources { font-size: .88rem; color: var(--muted); line-height: 1.6; margin: 0 0 var(--s-4); }
.article .k-sources strong { color: var(--ink-soft); }