/* Bootspass – Umbau 27.10.2026 (Boot-Pass.de, gilt in allen Apps): Bootsakte als große Knöpfe, QR-Übergabe mit
   Auswahlkarten, Zurück-Knopf statt neun Reitern am Handy. Benutzt die Farben des Designs (Klar/Klassisch, hell/dunkel). */
:root {
  --bpk-card: var(--kl-card, var(--card, #fff)); --bpk-ink: var(--kl-ink, #0f1e2e); --bpk-muted: var(--kl-muted, #5b6b7c);
  --bpk-line: var(--kl-line, #e3e8ee); --bpk-accent: var(--kl-accent, #0b6e91); --bpk-soft: var(--kl-accent-soft, #e3f0f5);
  --bpk-on: var(--kl-on-accent, #fff); --bpk-warn: #b7791f; --bpk-warn-bg: #fdf3e1; --bpk-bad: #c0392b; --bpk-bad-bg: #fbe9e7;
}
:root[data-theme="dark"] {
  --bpk-card: var(--kl-card, var(--dk-card, #13202d)); --bpk-ink: var(--kl-ink, var(--dk-ink, #e6eef6)); --bpk-muted: var(--kl-muted, var(--dk-muted, #9fb2c4));
  --bpk-line: var(--kl-line, var(--dk-line, #22313f)); --bpk-soft: var(--kl-accent-soft, rgba(58,166,207,.16));
  --bpk-warn-bg: rgba(183,121,31,.18); --bpk-bad-bg: rgba(192,57,43,.2); --bpk-warn: #f0b75a; --bpk-bad: #ff8a7a;
}

/* ── Übergabe-Knopf (oben in der Bootsakte) ─────────────────────────────────────────────────────────────── */
.bpk-uebergabe { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; padding: 16px 18px; border-radius: 18px;
  background: linear-gradient(135deg, var(--bpk-accent), var(--kl-accent-dark, #0b4f8a)); color: var(--bpk-on); text-decoration: none;
  box-shadow: 0 8px 22px rgba(11,79,138,.22); }
.bpk-uebergabe:hover, .bpk-uebergabe:focus-visible { color: var(--bpk-on); filter: brightness(1.06); }
.bpk-uebergabe-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.16); }
.bpk-uebergabe-ic .ic, .bpk-uebergabe-ic svg { width: 28px; height: 28px; }
.bpk-uebergabe-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bpk-uebergabe-tx strong { font-size: 17px; }
.bpk-uebergabe-tx small { color: rgba(255,255,255,.85) !important; font-size: 13px; }
.bpk-badge { flex: none; min-width: 28px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.22); font-weight: 700; text-align: center; }

/* ── Bootsakte: Kacheln (Handy 2 nebeneinander, Rechner 4) ─────────────────────────────────────────────── */
.bpk-akte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
@media (min-width: 720px) { .bpk-akte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bpk-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 104px; padding: 14px; border-radius: 16px;
  background: var(--bpk-card); border: 1px solid var(--bpk-line); color: var(--bpk-ink); text-decoration: none; position: relative; }
.bpk-kachel:hover, .bpk-kachel:focus-visible { border-color: var(--bpk-accent); color: var(--bpk-ink); }
.bpk-kachel-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--bpk-soft); color: var(--bpk-accent); margin-bottom: 4px; }
.bpk-kachel strong { font-size: 15px; line-height: 1.25; }
.bpk-kachel small { color: var(--bpk-muted); font-size: 12.5px; line-height: 1.3; }
.bpk-kachel.bpk-warn { border-color: var(--bpk-warn); }
.bpk-kachel.bpk-warn small { color: var(--bpk-warn); font-weight: 600; }
.bpk-kachel.bpk-warn .bpk-kachel-ic { background: var(--bpk-warn-bg); color: var(--bpk-warn); }
.bpk-kachel.bpk-bad { border-color: var(--bpk-bad); }
.bpk-kachel.bpk-bad small { color: var(--bpk-bad); font-weight: 600; }
.bpk-kachel.bpk-bad .bpk-kachel-ic { background: var(--bpk-bad-bg); color: var(--bpk-bad); }

/* ── Unterseiten: großer Zurück-Knopf; die Reiterleiste nur noch am Rechner ─────────────────────────────── */
.bpk-zurueck { display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 0 0 12px; padding: 8px 14px; border-radius: 14px;
  background: var(--bpk-card); border: 1px solid var(--bpk-line); color: var(--bpk-accent); text-decoration: none; font-weight: 600; }
.bpk-zurueck span { color: var(--bpk-muted); font-weight: 500; }
.bpk-zurueck strong { color: var(--bpk-ink); }
.bpk-zurueck span::after { content: "›"; margin-left: 8px; color: var(--bpk-muted); }
@media (max-width: 719px) { .bpk-tabs { display: none; } }
@media (min-width: 720px) { .bpk-zurueck { display: none; } }

/* ── Große Knöpfe ──────────────────────────────────────────────────────────────────────────────────────── */
.bpk-big { min-height: 52px; padding: 0 20px; font-size: 16px; border-radius: 14px; justify-content: center; }
.bpk-full { width: 100%; }
.bpk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
@media (max-width: 420px) { .bpk-actions { grid-template-columns: 1fr; } }
.bpk-qr-aktiv { text-align: center; }
.bpk-qr-aktiv .eyebrow { justify-content: center; }
.bpk-qr-meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 0; }

/* ── QR-Code erstellen: Schritte mit Auswahlkarten ──────────────────────────────────────────────────────── */
.bpk-step { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.bpk-step legend { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 700; font-size: 16px; color: var(--bpk-ink); }
.bpk-nr { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bpk-accent); color: var(--bpk-on); font-size: 14px; }
.bpk-choices { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .bpk-choices { grid-template-columns: 1fr 1fr; } }
.bpk-choice { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 16px; border: 2px solid var(--bpk-line);
  background: var(--bpk-card); cursor: pointer; position: relative; }
.bpk-choice input { position: absolute; opacity: 0; pointer-events: none; }
.bpk-choice:has(input:checked) { border-color: var(--bpk-accent); background: var(--bpk-soft); }
.bpk-choice:has(input:focus-visible) { outline: 3px solid var(--bpk-accent); outline-offset: 2px; }
.bpk-choice-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--bpk-soft); color: var(--bpk-accent); }
.bpk-choice:has(input:checked) .bpk-choice-ic { background: var(--bpk-accent); color: var(--bpk-on); }
.bpk-choice-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bpk-choice-tx strong { color: var(--bpk-ink); }
.bpk-choice-tx small { font-size: 13px; line-height: 1.35; }
.bpk-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.bpk-seg label { flex: 1 1 auto; cursor: pointer; position: relative; }
/* unsichtbares Auswahlfeld im Knopf festhalten (sonst lag es außerhalb der Seite → seitliches Scrollen, 27.10.2026) */
.bpk-seg input, .bpk-choice input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.bpk-seg span { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 14px; border-radius: 12px;
  border: 2px solid var(--bpk-line); background: var(--bpk-card); color: var(--bpk-ink); font-weight: 600; white-space: nowrap; }
.bpk-seg input:checked + span { border-color: var(--bpk-accent); background: var(--bpk-accent); color: var(--bpk-on); }
.bpk-seg input:focus-visible + span { outline: 3px solid var(--bpk-accent); outline-offset: 2px; }
.bpk-check { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bpk-soft); cursor: pointer; }
.bpk-check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--bpk-accent); }
.bpk-check span { display: flex; flex-direction: column; }
.bpk-check[hidden] { display: none; }

/* ── Bootspass gehört zu … / E-Mail ändern (27.10.2026) ─────────────────────────────────────────────────── */
.bpk-gehoert { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 14px; padding: 10px 14px; border-radius: 14px;
  background: var(--bpk-soft); color: var(--bpk-ink); font-size: 14px; }
.bpk-gehoert .ic, .bpk-gehoert svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--bpk-accent); }
.bpk-gehoert a { white-space: nowrap; font-weight: 600; }
.bpk-email-form summary { list-style: none; display: inline-flex; cursor: pointer; }
.bpk-email-form summary::-webkit-details-marker { display: none; }
.bpk-email-form[open] summary { margin-bottom: 12px; }
.bpk-merge { margin: 12px 0 18px; display: grid; gap: 8px; }
.bpk-merge li { display: flex; gap: 8px; align-items: flex-start; }
.bpk-merge svg { flex: none; width: 18px; height: 18px; color: var(--bpk-accent); margin-top: 2px; }

/* ── Dokumente: Datei oder Link aus der Cloud (27.10.2026) ──────────────────────────────────────────────── */
.bpk-quelle { margin-bottom: 12px; }
.bpk-quelle legend { font-size: 14px; font-weight: 600; }
.bpk-seg span .ic, .bpk-seg span svg { width: 18px; height: 18px; margin-right: 6px; }
[data-bp-quelle][hidden] { display: none !important; }

/* ── Dokumente: Dokumentart antippen ────────────────────────────────────────────────────────────────────── */
.bpk-chips-t { margin: 0 0 6px; font-weight: 600; font-size: 14px; }
.bpk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.bpk-chips button { min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--bpk-line); background: var(--bpk-card);
  color: var(--bpk-ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.bpk-chips button.on, .bpk-chips button:hover { border-color: var(--bpk-accent); color: var(--bpk-accent); }