/* Freunde (#freunde, freunde.js). Eigene Klassen mit Präfix fr-, sonst Bausteine aus konto.css (panel, inv-item, cmb, dk-card …). */
#view > .fr-sec-h { margin: 6px 0 10px; font: 700 21px/1.2 var(--font-display); }
#view > .fr-sec-h .sub { font-size: 14px; }
#view > .dk-card { margin-bottom: 18px; }
.fr-back { margin: -6px 0 12px; font-size: 14px; }
.fr-back a { color: var(--accent); text-decoration: none; font-weight: 600; }
.fr-back a:hover { text-decoration: underline; }
.fr-hidden { margin: -6px 0 14px; }

/* Punkt mit der Zahl neuer Anfragen am Profil-Knopf und im Menü */
.fr-dot {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px;
  background: var(--x); color: #fff; font: 700 11px/1 var(--font-body); vertical-align: 1px;
}
.acct-menu a .fr-dot { margin-left: 8px; }

/* Freund hinzufügen */
.fr-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.fr-form .field { flex: 1 1 220px; }
.fr-form .btn { flex: none; }
.fr-me { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; font-size: 14px; color: var(--muted); }
.fr-me b { color: var(--text); }
.fr-invite { border-color: var(--accent); }
.fr-invite .lede b { color: var(--text); }

/* Anfragen */
.fr-rows { display: grid; gap: 8px; }
.fr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.fr-txt { flex: 1; min-width: 150px; display: grid; gap: 2px; }
.fr-txt b { font: 600 15px/1.2 var(--font-display); overflow-wrap: anywhere; }

/* Freundesliste */
.fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.fr-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); text-decoration: none; color: inherit; }
.fr-card:hover { border-color: var(--border-strong); }
.fr-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fr-go { font-size: 22px; color: var(--faint); }

/* Was sehen deine Freunde? */
.fr-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-bottom: 14px; }
.fr-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; cursor: pointer; }
.fr-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.fr-opt input { margin-top: 3px; accent-color: var(--accent); }
.fr-opt span { display: grid; gap: 2px; }
.fr-opt small { font-size: 12.5px; color: var(--muted); }
.fr-areas { display: flex; flex-wrap: wrap; gap: 6px 18px; border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.fr-areas[disabled] { opacity: .5; }
.fr-chk { display: inline-flex; gap: 8px; align-items: center; font-size: 14.5px; cursor: pointer; }
.fr-chk input { width: 17px; height: 17px; accent-color: var(--accent); }
.fr-areas[disabled] .fr-chk { cursor: not-allowed; }
.fr-req { padding-top: 12px; border-top: 1px solid var(--border); width: 100%; }

/* Profil eines Freundes */
.fr-filter { margin: 0 0 6px; }
.fr-filter .chip .sub { color: inherit; opacity: .7; }
.fr-item { position: relative; }
.fr-item.has { border-color: color-mix(in srgb, var(--def) 45%, var(--border)); }
.fr-item .own-ok, .fr-item .own-no { margin-top: 3px; }
.fr-item .wish-btn { position: static; flex: none; }

@media (max-width: 560px) {
  .fr-form .btn { width: 100%; }
  .fr-row .row { width: 100%; }
}

/* Bey-/Teile-Fenster: „Bei deinen Freunden“ (unter „In meiner Sammlung“) */
.fr-own { display: grid; gap: 6px; margin: 10px 0 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); font-size: 13.5px; }
.fr-own-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fr-own-l { font-size: 13px; color: var(--muted); }
.fr-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fr-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: inherit; text-decoration: none; font-weight: 600; font-size: 13px;
}
.fr-chip:hover { border-color: var(--border-strong); }
.fr-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fr-chip .ava.xs { width: 22px; height: 22px; font-size: 11px; }