/* Baustein „Sprachangebot“ – einbettbar. Liest nur --b-* (gesperrt) und --host-* (vom Host gesetzt). */

/* ---------- Beispiel-Hostsoftware (gehört NICHT zum Baustein) ---------- */
.host {
  background: var(--host-app-bg); color: var(--b-ink);
  font-family: var(--host-font);
  border: 1px solid var(--b-rule); width: 100%; max-width: var(--stage-w, 420px);
  margin: 0 auto; transition: max-width 0.2s ease;
}
.host-bar {
  background: var(--host-app-bar); color: var(--host-app-bar-ink);
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--b-rule-soft); font-size: var(--fs-s);
}
.host-bar b { font-weight: 600; }
.host-bar .host-crumb { opacity: 1; margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); }
.host-body { padding: var(--sp-3); }
.host-note { font: 400 var(--fs-xs)/1.4 var(--font-mono); color: var(--b-ink-2); margin: 0 0 var(--sp-2); }

/* ---------- Baustein ---------- */
.b {
  container-type: inline-size; container-name: baustein;
  background: var(--b-sheet); color: var(--b-ink);
  border: 1px solid var(--b-rule-soft); border-radius: var(--host-radius);
  font: 400 var(--fs-m)/var(--lh-text) var(--host-font);
  font-variant-numeric: tabular-nums;
}
.b [hidden] { display: none !important; }
.b :focus-visible { outline: 3px solid var(--b-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--b-focus-gap); }
.b h3, .b h4 { margin: 0; line-height: var(--lh-eng); font-family: var(--host-font); }
.b p { margin: var(--sp-2) 0 0; max-width: none; }

.b-head { padding: var(--sp-3) var(--sp-4) 0; }
.b-label { font: 600 var(--fs-xs)/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--b-ink-2); margin: 0; }
.b-steps-nav { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; counter-reset: s; }
.b-steps-nav li {
  counter-increment: s; font-size: var(--fs-xs); font-weight: 600; color: var(--b-ink-2);
  padding: var(--sp-2) 0 var(--sp-2); border-top: 4px solid var(--b-rule-soft);
}
.b-steps-nav li::before { content: counter(s) " · "; font-family: var(--font-mono); }
.b-steps-nav li[data-done] { border-top-color: var(--b-ink-2); color: var(--b-ink); }
.b-steps-nav li[aria-current="step"] { border-top-color: var(--b-beleg); color: var(--b-ink); }

.b-screen { padding: var(--sp-4); }
.b-screen > h3 { font-size: var(--fs-l); font-weight: 600; }
.b-screen > h3:focus { outline: none; }
.b-screen > h3:focus-visible { outline: 3px solid var(--b-focus); }
.b-context { margin: var(--sp-3) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--b-rule-soft); }
.b-context li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--b-rule-soft); font-size: var(--fs-s); }
.b-context li span:first-child { color: var(--b-ink-2); }
.b-context li span:last-child { text-align: right; font-weight: 600; }

/* Schaltflächen des Bausteins: Primär nimmt die Hostfarbe */
.b-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--target); min-width: var(--target); padding: 0 var(--sp-4);
  font: 600 var(--fs-m)/1.15 var(--host-font);
  background: var(--host-accent); color: var(--host-on-accent);
  border: 2px solid var(--host-accent); border-radius: var(--host-radius); cursor: pointer;
}
.b-btn--sec { background: transparent; color: var(--b-ink); border-color: var(--b-ink); }
.b-btn--quiet { background: transparent; color: var(--b-ink); border-color: transparent; text-decoration: underline; text-underline-offset: 0.2em; padding: 0 var(--sp-2); }
.b-btn--wide { width: 100%; }
.b-btn svg { flex: none; }
.b-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* Aufnahme */
.b-rec-wrap { display: grid; justify-items: center; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-2); text-align: center; }
.b-rec {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--host-accent); color: var(--host-on-accent);
  border: 4px solid var(--b-sheet); box-shadow: 0 0 0 2px var(--host-accent);
  display: grid; place-items: center; cursor: pointer;
}
.b-rec-ind { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--b-fehlt); margin-right: var(--sp-2); vertical-align: 0.05em; animation: b-puls 1.4s ease-in-out infinite; }
@keyframes b-puls { 50% { opacity: 0.35; } }
.b-rec-label { font-weight: 600; }
.b-timer { font: 600 var(--fs-xl)/1 var(--font-mono); letter-spacing: 0.02em; }
.b-hint { list-style: none; margin: var(--sp-4) 0 0; padding: 0; font-size: var(--fs-s); color: var(--b-ink-2); }
.b-hint li { padding: var(--sp-1) 0 var(--sp-1) var(--sp-5); position: relative; }
.b-hint li::before { content: "—"; content: "—" / ""; position: absolute; left: 0; color: var(--b-beleg); }
.b-demo { font: 400 var(--fs-xs)/1.4 var(--font-mono); color: var(--b-ink-2); border-top: 1px dashed var(--b-rule); padding-top: var(--sp-2); margin-top: var(--sp-4); }

/* Mitschrift = Durchschlag */
.b-transcript { list-style: none; margin: var(--sp-4) 0 0; padding: 0; border-left: 3px solid var(--b-beleg); min-height: 3em; }
.b-transcript li { padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); font: 400 var(--fs-s)/1.45 var(--font-mono); color: var(--b-beleg); }
.b-transcript time { color: var(--b-ink-2); margin-right: var(--sp-2); }

.b-field { display: grid; gap: var(--sp-1); margin-top: var(--sp-3); }
.b-field label { font-weight: 600; font-size: var(--fs-s); }
.b-field input, .b-field select, .b-field textarea {
  min-height: var(--target); width: 100%; padding: var(--sp-2) var(--sp-3);
  font: 400 var(--fs-m)/1.4 var(--host-font); color: var(--b-ink); background: var(--b-sheet);
  border: 2px solid var(--b-rule); border-radius: var(--host-radius);
}
.b-field textarea { min-height: 9em; resize: vertical; }
.b-field .b-help { font-size: var(--fs-xs); color: var(--b-ink-2); }

/* Verarbeitung */
.b-progress { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.b-progress li { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--b-rule-soft); color: var(--b-ink-2); }
.b-progress li[data-done] { color: var(--b-ink); }
.b-progress .b-dot { width: 22px; height: 22px; border: 2px solid var(--b-rule); border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 13px; }
.b-progress li[data-done] .b-dot { background: var(--b-fertig); border-color: var(--b-fertig); color: var(--b-sheet); font-size: 15px; }

/* Zusammenfassung und Status */
.b-summary { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.b-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--sp-2);
  font: 600 var(--fs-xs)/1.5 var(--host-font); border: 1px solid currentColor; border-radius: 2px; white-space: nowrap;
}
.b-tag .g { font-family: var(--font-mono); font-weight: 600; }
/* Häkchen gezeichnet statt U+2713: IBM Plex zeichnet ✓ als schräges „V“, Hostschriften haben es oft gar nicht. */
.g-haken, .b-progress li[data-done] .b-dot::before, .b-done-list li::before {
  content: ""; display: inline-block; box-sizing: border-box; width: 0.36em; height: 0.68em;
  border: solid currentColor; border-width: 0 0.14em 0.14em 0; transform: translateY(-0.12em) rotate(45deg);
}
.b-tag .g-haken { margin: 0 0.12em 0 0.08em; }
.b-tag--beleg { color: var(--b-beleg); background: var(--b-beleg-tint); }
.b-tag--pruefen { color: var(--b-pruefen); background: var(--b-pruefen-tint); }
.b-tag--fehlt { color: var(--b-fehlt); background: var(--b-fehlt-tint); }
.b-tag--fertig { color: var(--b-fertig); background: var(--b-fertig-tint); }

.b-filter { margin-top: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); min-height: var(--target); font-size: var(--fs-s); }
.b-filter input { width: 24px; height: 24px; accent-color: var(--b-ink); }

.b-alert { margin-top: var(--sp-3); padding: var(--sp-3); border-left: 6px solid var(--b-fehlt); background: var(--b-fehlt-tint); color: var(--b-ink); font-size: var(--fs-s); }
.b-alert:empty { display: none; }

/* Position: Durchschlag (gesprochen) über / neben der Angebotszeile */
.b-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.b-pos { position: relative; border-top: 1px solid var(--b-rule-soft); padding: var(--sp-3) 0 var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-2); }
.b-pos::before { content: ""; position: absolute; left: 0; top: var(--sp-3); bottom: var(--sp-3); width: 6px; background: var(--b-beleg); }
.b-pos[data-status="pruefen"]::before { background: repeating-linear-gradient(-45deg, var(--b-pruefen-mark) 0 4px, transparent 4px 7px); outline: 1px solid var(--b-pruefen-mark); }
.b-pos[data-status="fehlt"]::before { background: repeating-linear-gradient(-45deg, var(--b-fehlt) 0 4px, transparent 4px 7px); outline: 1px solid var(--b-fehlt); }
.b-pos[data-status="fertig"]::before { background: var(--b-fertig); }
.b-pos[data-status="gestrichen"] { opacity: 1; }
.b-pos[data-status="gestrichen"]::before { background: var(--b-rule); }
.b-pos[data-status="gestrichen"] .b-pos__title, .b-pos[data-status="gestrichen"] .b-pos__money { text-decoration: line-through; color: var(--b-ink-2); }

.b-beleg { margin: 0; font: 400 var(--fs-s)/1.45 var(--font-mono); color: var(--b-beleg); }
.b-beleg time { color: var(--b-ink-2); margin-right: var(--sp-2); }
.b-pos__head { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
.b-pos__nr { font: 600 var(--fs-s)/1.2 var(--font-mono); color: var(--b-ink-2); order: 0; }
.b-pos__head .b-tag { order: 1; margin-left: auto; }
.b-pos__title { font-size: var(--fs-m); font-weight: 600; flex: 1 1 100%; order: 2; }
.b-pos__money { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-s); }
.b-pos__money .gp { font-weight: 600; font-size: var(--fs-m); }
.b-pos__src { font: 400 var(--fs-xs)/1.4 var(--font-mono); color: var(--b-ink-2); }
.b-pos__why { font-size: var(--fs-s); }
.b-fix { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: var(--b-surface); border: 1px solid var(--b-rule-soft); border-radius: var(--host-radius); }
.b-fix .b-field { margin-top: 0; }
.b-fix .b-actions { margin-top: 0; }

.b-foot {
  position: sticky; bottom: 0; background: var(--b-sheet); border-top: 2px solid var(--b-ink);
  padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-2);
  border-radius: 0 0 var(--host-radius) var(--host-radius);
}
.b-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.b-total strong { font: 600 var(--fs-xl)/1 var(--host-font); }
.b-total span { font-size: var(--fs-xs); color: var(--b-ink-2); }

.b-done-list { margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.b-done-list li { padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); position: relative; border-bottom: 1px solid var(--b-rule-soft); font-size: var(--fs-s); }
.b-done-list li::before { position: absolute; left: 0.25em; top: calc(var(--sp-2) + 0.3em); color: var(--b-fertig); }
.b-done-list.nicht li::before { content: "×"; content: "×" / ""; border: 0; width: auto; height: auto; transform: none; left: 0; top: var(--sp-2); font-weight: 700; color: var(--b-fehlt); }

/* Feste Summenleiste darf den Fokus nicht verdecken (WCAG 2.4.11) */
.b :is(button, input, select, textarea, h3, h4, [tabindex]) { scroll-margin-bottom: 170px; scroll-margin-top: var(--sp-4); }

.b-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Breite Einbettung (Büro): Durchschlag links, Angebotszeile rechts */
@container baustein (min-width: 640px) {
  .b-pos { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--sp-5); align-items: start; }
  .b-pos .b-beleg { grid-column: 1; grid-row: 1 / span 4; padding-right: var(--sp-3); border-right: 1px dashed var(--b-rule); }
  .b-pos > :not(.b-beleg) { grid-column: 2; }
  .b-foot { grid-template-columns: 1fr auto; align-items: center; }
  .b-screen, .b-head { padding-left: var(--sp-5); padding-right: var(--sp-5); }
}

@media (prefers-reduced-motion: reduce) {
  .b-rec-ind { animation: none; }
  .host { transition: none; }
}
@media (forced-colors: active) {
  .b-pos::before { background: CanvasText !important; }
  .b-tag { border-color: CanvasText; }
}