/* Profile backyards as F „Raster" / G „Cover" (profil-fg.js, live since 2026-10-17).
   Mockup: 01_Projekte/Backyards-Run/assets/2026-10-16-profil-liste/runde-2 (?v=F / ?v=G). */
.pfg { display:flex; flex-direction:column; gap:10px; min-width:0; }
.pfg-switch { display:flex; justify-content:flex-end; gap:4px; margin:.1rem 0 -.2rem; }
.pfg-chip { all:unset; box-sizing:border-box; cursor:pointer; padding:5px 11px; border-radius:999px;
  font:600 .74rem/1 var(--font); color:var(--text-3); border:1px solid var(--hairline); }
.pfg-chip.on { color:var(--text-strong, #fff); border-color:var(--text-3); }
.pfg-chip:focus-visible, .pfg-tap:focus-visible, .pfg-tabs button:focus-visible { outline:2px solid var(--ok); outline-offset:2px; }

.pfg-tap { all:unset; box-sizing:border-box; display:block; position:relative; cursor:pointer; overflow:hidden;
  background:#0b0b0b; -webkit-tap-highlight-color:transparent; min-width:0; }
.pfg-tap:active { transform:scale(.985); }
.pfg-bg { position:absolute; inset:0; }
.pfg-bg > svg, .pfg-bg > img { width:100%; height:100%; display:block; object-fit:cover; }
.pfg-scrim { position:absolute; inset:0; pointer-events:none; display:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.78) 100%); }
.pfg-has-photo .pfg-scrim { display:block; }
.pfg-num { font-family:var(--font-display); font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:-.045em;
  line-height:.86; color:#fff; }
.pfg-live-c { color:var(--ok) !important; }
.pfg-pr { display:inline-block; font:800 .62rem/1 var(--font); letter-spacing:.04em; color:#000; background:#fff;
  border-radius:4px; padding:3px 4px 2px; }
/* status: glass chip, glyphs only */
.pfg-marks { position:absolute; top:7px; right:7px; display:flex; align-items:center; gap:6px; padding:4px 7px; border-radius:999px;
  background:rgba(0,0,0,.42); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); color:#fff; line-height:0; }
.pfg-marks svg { width:12px; height:12px; }
.pfg-dot { width:7px; height:7px; border-radius:50%; background:#5fd39a; box-shadow:0 0 0 3px rgba(95,211,154,.22); }

/* ---- F: Raster ---- */
.pfg-tabs { display:flex; margin:0 calc(-1 * var(--page-x)); border-bottom:1px solid var(--hairline); }
.pfg-tabs button { all:unset; box-sizing:border-box; cursor:pointer; flex:1; display:grid; place-items:center; height:44px; color:var(--text-3); }
.pfg-tabs button.on { color:var(--text-strong, #fff); box-shadow:inset 0 -1.5px 0 currentColor; }
.pfg-tabs svg { width:22px; height:22px; }
.pfg-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px; margin:-10px calc(-1 * var(--page-x)) 0; }
.pfg-cell { aspect-ratio:1; }
.pfg-cell.pfg-wide { grid-column:span 2; aspect-ratio:auto; }
.pfg-cell .pfg-num { position:absolute; left:9px; bottom:8px; font-size:2.15rem; }
.pfg-cell.pfg-wide .pfg-num { font-size:2.6rem; }
.pfg-cell .pfg-pr { position:absolute; left:9px; top:9px; }
.pfg-cell .pfg-when { position:absolute; left:9px; bottom:9px; font:800 1.55rem/1 var(--font-display); letter-spacing:-.03em; color:#fff; }
.pfg-old { margin-top:-10px; }

/* ---- G: Cover ---- */
.pfg-stack { display:flex; flex-direction:column; gap:10px; }
.pfg-cover { height:208px; border-radius:20px; }
.pfg-cover.pfg-hi { height:262px; }
.pfg-cover .pfg-scrim { display:block;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,.86) 100%); }
.pfg-cover .pfg-t { position:absolute; left:16px; right:96px; top:15px; font:650 .86rem/1.25 var(--font); color:rgba(255,255,255,.92);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pfg-cover .pfg-marks { top:12px; right:12px; }
.pfg-cover .pfg-big { position:absolute; left:14px; bottom:12px; display:flex; align-items:flex-end; gap:10px; }
.pfg-cover .pfg-num { font-size:5.4rem; }
.pfg-cover.pfg-hi .pfg-num { font-size:6.6rem; }
.pfg-cover .pfg-big .pfg-pr { margin-bottom:10px; }
.pfg-cover .pfg-when { position:absolute; left:16px; bottom:16px; font:800 3.4rem/.9 var(--font-display); letter-spacing:-.04em; color:#fff; }
.pfg-cover .pfg-when small { font:600 .9rem var(--font); letter-spacing:0; color:#a8a8a8; margin-left:.4rem; }

/* Offline (meins-model.js): own changes still waiting to go out — a quiet ring, nothing loud.
   .offline-line: the calm „Braucht eine Verbindung" / „Noch nichts gespeichert" line. */
.meins-item.pending .row-main, .meins-lib.pending > summary strong, .arch-vis.pending, .panel.pending { opacity:.72; }
.meins-item.pending .row-main::after, .meins-lib.pending > summary strong::after, .arch-vis.pending::after,
.pfg-tap.pending::after { content:""; display:inline-block; width:6px; height:6px; margin-left:.45rem; border-radius:50%; border:1.5px solid var(--text-3); vertical-align:middle; }
.pfg-tap.pending::after { position:absolute; top:8px; right:8px; margin:0; border-color:#fff; z-index:2; }
.offline-line { color:var(--text-3); padding:.25rem 0; }