/* Unterlagen und Abholung (CQ10; Mocks browser-unterlagen*.html und browser-abholung*.html).
   Bausteine aus gestaltung.css und familie.css der Mocks (Knöpfe, Fehlerzeile, Karte der Unterlage,
   Feld für den Code), gekürzt auf das, was diese Seiten brauchen. */

.jf-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: var(--radius-rund);
  font: 700 16px/1.2 var(--font-sans); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.jf-knopf svg { width: 18px; height: 18px; flex: none; }
.jf-knopf--primaer { background: var(--ink); color: var(--auf-ink); }
.jf-knopf--primaer:hover { background: var(--rose-tief); }
.jf-knopf--sekundaer { background: transparent; color: var(--ink); border-color: var(--rand); }
.jf-knopf--sekundaer:hover { background: var(--papier); border-color: var(--ink); }
.jf-knopf--klein { min-height: 44px; padding: 0 20px; font-size: 15px; }
.jf-knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.jf-knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.jf-fehler { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--rose-tief); }
.jf-fehler svg { width: 18px; height: 18px; flex: none; }

.fb-voll { width: 100%; }
.fb-zurueck { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font: 700 15px/1 var(--font-sans); color: var(--ink); text-decoration: none; }
.fb-zurueck svg { width: 18px; height: 18px; }
.fb-liste { display: flex; flex-direction: column; gap: var(--space-4); }

/* Karte der Unterlage */
.fb-dok { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; border-radius: 20px; background: var(--papier); border: 1px solid var(--linie); }
.fb-dok__kopf { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.fb-dok__kopf .fb-weg__icon { width: 40px; height: 40px; }
.fb-dok__kopf .fb-weg__icon svg { width: 20px; height: 20px; }
.fb-dok b { display: block; font: 600 22px/1.2 var(--font-serif); }
.fb-dok small { display: block; font-size: 15px; color: var(--ink-leise); }
.fb-dok .jf-knopfreihe { gap: 10px; }
.fb-dok .jf-knopf { flex: 1 1 0; padding: 0 14px; }

/* Sechs Ziffern: sichtbar sind die Kästchen, getippt wird in das durchsichtige Feld darüber. */
.fb-codefeld { position: relative; margin-bottom: 20px; } /* DT17: Abstand zum Knopf */
.fb-code { display: grid; grid-template-columns: repeat(3, 1fr) 10px repeat(3, 1fr); gap: 6px; }
.fb-code span { display: grid; place-items: center; height: 58px; border-radius: var(--radius-feld); border: 1.5px solid var(--rand); background: var(--creme);
  font: 600 30px/1 var(--font-serif); font-variant-numeric: lining-nums; color: var(--ink); }
.fb-code span.aktiv { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--papier); }
.fb-code span.falsch { border-color: var(--rose-tief); box-shadow: inset 0 0 0 1px var(--rose-tief); }
.fb-code i { display: block; }
.fb-codefeld__eingabe {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent;
  color: transparent; caret-color: transparent; font-size: 16px; opacity: .01; cursor: text;
}
.fb-codefeld:focus-within .fb-code span.aktiv { box-shadow: inset 0 0 0 2px var(--ink); }