/* Bilder (Runde 2c): einheitliche Grössen der Bausteine avatar und firmenLogo, Knopf „Foto ändern“ bzw. „Logo ändern“, Bild-Pop-ups.
   Nur Tokens aus styles.css, Präfix .bi- für neue Klassen. */

/* ---------- Grössen (xs 22, sm 28, '' 34, md 54, lg 80 bzw. 96) ---------- */
.avatar.xs { width: 22px; height: 22px; border-radius: 50%; font-size: 9px; font-weight: 700; letter-spacing: 0; }
.avatar.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.flogo.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 10.5px; letter-spacing: 0; }
img.flogo.sm { padding: 2px; }
img.avatar { object-fit: cover; object-position: 50% 22%; }
img.avatar.xs, img.avatar.sm { object-position: 50% 18%; }
.avatar.xs, .avatar.sm, .flogo.sm { flex: none; vertical-align: middle; }

/* Bild neben einem Text in einer Zeile (z.B. „via Agentur“, „Eingereicht von“, Chips) */
.bi-mit { display: inline-flex; align-items: center; gap: 6px; min-width: 0; vertical-align: middle; }
.bi-mit > span:last-child, .bi-mit > b:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bi-chip { display: inline-flex; align-items: center; gap: 5px; }
.bi-chip > .avatar.xs, .bi-chip > .flogo.xs { margin-left: -3px; box-shadow: none !important; }

/* ---------- Kopfbild als Knopf (Kandidatenseite, Kundenprofil, Meine Agentur) ---------- */
.bi-bild-knopf { position: relative; display: inline-grid; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: pointer;
  border-radius: 20px; line-height: 0; }
.bi-bild-knopf:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.bi-bild-knopf .bi-stift { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--flaeche-2); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong), 0 4px 10px rgba(0, 0, 0, .25); opacity: 0;
  transform: scale(.85); transition: opacity .15s ease, transform .15s ease; }
.bi-bild-knopf .bi-stift .i { width: 14px; height: 14px; }
.bi-bild-knopf:hover .bi-stift, .bi-bild-knopf:focus-visible .bi-stift { opacity: 1; transform: none; }
@media (hover: none) { .bi-bild-knopf .bi-stift { opacity: .92; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bi-bild-knopf .bi-stift { transition: none; } }

/* ---------- Pop-up „Foto“ bzw. „Logo“ ---------- */
.bi-dialog { display: grid; gap: 14px; }
.bi-kopf { display: flex; align-items: center; gap: 10px; }
.bi-kopf h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.bi-kopf .spacer { flex: 1; }
.bi-buehne { display: grid; place-items: center; padding: 18px; border-radius: 16px; background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--line); }
.bi-buehne .avatar.bi-gross { width: 160px; height: 176px; border-radius: 16px; font-size: 48px; }
.bi-buehne .flogo.bi-gross { width: 160px; height: 160px; border-radius: 22px; font-size: 44px; }
.bi-buehne img.flogo.bi-gross { padding: 12px; }
.bi-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.bi-knoepfe .btn { display: inline-flex; align-items: center; gap: 6px; }
.bi-datei { position: relative; overflow: hidden; }
.bi-datei input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.bi-hinweis { margin: 0; }
.bi-fehler { margin: 0; min-height: 1.2em; }

/* Meine Agentur und Admin-Pop-up: Logo-Zeile */
.bi-logo-zeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bi-logo-zeile .bi-knoepfe { flex: 1; min-width: 180px; }
.bi-reg-logo { display: grid; gap: 6px; }
.bi-reg-logo input[type=file] { max-width: 100%; }

/* Portal-Kopf: Agenturlogo vor dem Gruss */
.vm-gruss .bi-gruss { display: flex; align-items: center; gap: 12px; }
.vm-gruss .bi-gruss h1 { margin: 0; }

@media (max-width: 560px) {
  .bi-buehne .avatar.bi-gross { width: 128px; height: 140px; font-size: 40px; }
  .bi-buehne .flogo.bi-gross { width: 128px; height: 128px; }
  .bi-knoepfe .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Einsatzstellen (nur Grössen und Abstände der Bausteine) ---------- */
.vl-chip .avatar.xs { width: 18px; height: 18px; font-size: 7.5px; margin-left: -3px; }
.bi-chip .avatar.xs, .bi-chip .flogo.xs { width: 18px; height: 18px; font-size: 7.5px; }
.tag.big.bi-chip .avatar.xs { width: 20px; height: 20px; }
.kd-via { gap: 5px; }
.bi-via-zeile { display: flex; min-width: 0; }
.bi-via-zeile > .kd-via { max-width: 100%; }
.kd-via .flogo.xs, .vm-von .flogo.xs, .pd-von .flogo.xs { box-shadow: none !important; border-radius: 6px; }
.call-pop-kopf { gap: 10px; margin: 2px 0 4px; }
.call-pop-kopf .flogo.md { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }
.mi-pop-mit { gap: 9px; align-items: center; }
.mi-pop-mit .avatar.sm, .mi-pop-mit .flogo.sm { width: 32px; height: 32px; }
.mi-zeile > .avatar.sm, .mi-zeile > .flogo.sm { width: 30px; height: 30px; }
.pd-kopf > .pd-bild { flex: none; margin-top: 2px; }
.im-p-kopf > .im-p-bild { width: 42px; height: 42px; border-radius: 50%; font-size: 15px; flex: none; }
.ag-t-agentur .bi-mit { gap: 8px; }
.bi-ag-logo .bi-logo-zeile { padding-top: 4px; }
.task > .flogo.sm { align-self: center; }
.pe-f-titel h2.bi-mit { gap: 10px; }
.pe-f-titel h2 .flogo.md { width: 40px; height: 40px; font-size: 14px; }
@media (max-width: 760px) {
  .pe-zeile > .flogo { display: none; }
  .pd-kopf > .pd-bild { width: 42px; height: 42px; font-size: 14px; }
}