/* Urqivo Sports — Die Profilseite (`/p/<kennung>/<reiter>`)
   ===========================================================================
   Instagram-Bauplan in der Hausform: Farbband, Avatar mit Live-Ring, Zahlenreihe,
   Namensblock, Knopfzeile, Kanal-Chips, runde „Anstehendes"-Kacheln, klebende
   Reiterleiste, Dreier-Raster.

   ⚠⚠ DAS RASTER HAT 12 PX FUGE, NICHT 3. Instagram klebt seine Kacheln aneinander;
      hier hätte dann keine mehr Platz, sich unter dem Finger zu heben — und die Seite
      fiele aus der App heraus. Die Hausregel „alles poppt unter der Maus auf" gilt
      auch für eine nachgebaute Oberfläche.

   ⚠⚠⚠ OHNE JAVASCRIPT DARF NICHTS UNSICHTBAR SEIN. Das Verstecken hängt an der
       Klasse `.pf-bereit`, die AUSSCHLIESSLICH das Skript setzt. Ein `opacity: 0` im
       Grundzustand hieße: Skriptfehler = leere Seite.

   ⚠ Bei „Bewegung reduzieren" bleibt alles ruhig (ganz unten).                     */

/* ── Grundgerüst ───────────────────────────────────────────────────────────── */
.pf-wurzel {
  /* Wird vom Skript gemessen (die Kopfleiste ist veränderlich hoch — die Live-Leiste
     kommt und geht). 56 px ist nur der Rückfall, falls die Messung noch nicht lief. */
  --pf-kopfhoehe: 56px;
  margin: 0 -14px;                  /* das Farbband läuft bis an den Rand */
}
.pf-wurzel > * { padding-inline: 14px; }
.pf-wurzel > #pf-kopf { padding-inline: 0; }

/* ── 2 · Farbband + Avatar ─────────────────────────────────────────────────── */
.pf-band {
  height: 72px;
  background: var(--pf-band, linear-gradient(120deg, var(--surface-2), var(--surface-3)));
  /* Eine Sportfarbe ist kräftig; als volle Fläche über 72 px erschlüge sie den Kopf.
     Der Verlauf nach unten lässt sie auslaufen, statt sie abzuschneiden. */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .35));
  background-color: var(--pf-band, var(--surface-2));
  border-bottom: 1px solid var(--line);
}
.pf-kopfreihe {
  display: flex; align-items: flex-end; gap: 16px;
  padding: 0 14px; margin-top: -44px;    /* der Avatar überlappt das Band zur Hälfte */
}
.pf-avatarknopf {
  position: relative; background: none; border: 0; padding: 0; cursor: pointer;
  border-radius: 50%; line-height: 0;
  flex: 0 0 auto;
}
.pf-avatar {
  border-radius: 50%; object-fit: cover; display: block;
  border: 3px solid var(--bg);
  background: var(--surface-2);
  box-shadow: var(--card-shadow);
}
.pf-avatar.ph {
  display: grid; place-items: center; font-weight: 800; color: var(--text-dim);
  border: 3px solid var(--bg);
}
/* Der Live-Ring — unser Gegenstück zum Story-Ring. Er pulst NUR, wenn wirklich
   gerade jemand läuft; ein Dauerpuls wäre Dekoration und würde übersehen. */
.pf-avatarknopf.laeuft .pf-avatar {
  border-color: var(--live, #e5484d);
  animation: pf-puls 1.8s ease-in-out infinite;
}
.pf-livepunkt {
  position: absolute; right: 4px; bottom: 6px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--live, #e5484d); border: 2px solid var(--bg);
}
@keyframes pf-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); }
  50%      { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); }
}

/* ── 3 · Die Zahlenreihe ───────────────────────────────────────────────────── */
/* ⚠ Die drei Plätze bleiben IMMER besetzt, damit die Zeile beim Nachladen nicht
     springt. Wo eine Zahl nicht sichtbar ist, steht ein „·" — keine 0. */
.pf-zahlen { display: flex; flex: 1; justify-content: space-around; padding-bottom: 6px; }
.pf-zahl { text-align: center; min-width: 62px; }
.pf-zahl b {
  display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;   /* sonst wackelt die Zeile bei jeder Änderung */
}
.pf-zahl span { display: block; font-size: 12px; color: var(--text-dim); margin-top: 1px; }

/* ── 4 · Namensblock ───────────────────────────────────────────────────────── */
.pf-namensblock { padding: 12px 14px 0; }
.pf-name { font-size: 19px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.pf-schloss { font-size: 14px; opacity: .7; }
.pf-sportzeile { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.pf-bio { font-size: 14px; line-height: 1.45; margin: 8px 0 0; white-space: pre-wrap; }
.pf-bio-leer {
  margin-top: 8px; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 14px; color: var(--accent); text-align: left;
}

/* ── 5 · Knopfzeile ────────────────────────────────────────────────────────── */
.pf-knopfzeile { display: flex; gap: 8px; padding: 12px 14px 0; }
.pf-knopf {
  flex: 1; min-height: 38px; padding: 8px 12px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .18s ease;
}
.pf-knopf:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(0,0,0,.85);
  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line)); }
.pf-knopf:active { transform: translateY(-1px); }
.pf-knopf-voll { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.pf-knopf-an { background: var(--surface-3); }
.pf-knopf-live { flex: 0 0 auto; background: var(--live, #e5484d); color: #fff; border-color: transparent; }

/* ── 6 · Kanal-Chips ──────────────────────────────────────────────────────── */
.pf-chips {
  display: flex; gap: 8px; padding: 12px 14px 0;
  overflow-x: auto; scrollbar-width: none;
}
.pf-chips::-webkit-scrollbar { display: none; }
.pf-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none;
  cursor: pointer;
}
.pf-chip-z { font-size: 14px; }
.pf-chip-neu { color: var(--text-dim); border-style: dashed; }

/* ── 7 · Stufenzeile (NUR im eigenen Profil) ──────────────────────────────── */
.pf-stufe {
  display: flex; width: calc(100% - 28px); margin: 12px 14px 0;
  align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer;
}
.pf-weiter { opacity: .45; }

.pf-hinweis {
  margin: 12px 14px 0; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 13px; color: var(--text-dim); line-height: 1.45;
}
.pf-hinweis b { color: var(--text); }

/* ── 8 · „Anstehendes" — die runden Kacheln ───────────────────────────────── */
.pf-anstehend { margin-top: 16px; }
.pf-anstehend-spur {
  display: flex; gap: 14px; overflow-x: auto; padding: 2px 0 6px;
  scrollbar-width: none;
}
.pf-anstehend-spur::-webkit-scrollbar { display: none; }
.pf-runde {
  flex: 0 0 auto; width: 72px; background: none; border: 0; padding: 0;
  cursor: pointer; display: grid; gap: 5px; justify-items: center;
}
.pf-runde-kreis {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 2px solid var(--line);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pf-runde:hover .pf-runde-kreis {
  transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(0,0,0,.85);
  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line));
}
.pf-runde.live .pf-runde-kreis {
  border-color: var(--live, #e5484d);
  animation: pf-puls 1.8s ease-in-out infinite;
}
.pf-runde-marke {
  font-size: 12px; font-weight: 800; letter-spacing: -.01em;
  max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-runde-txt {
  font-size: 11px; color: var(--text-dim);
  max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 9 · Reiterleiste, klebt beim Scrollen ────────────────────────────────── */
/* ⚠⚠ `top` kommt aus der GEMESSENEN Kopfhöhe, nicht aus einer geratenen Zahl: Die
      Live-Leiste erscheint und verschwindet, die Kopfzeile ist also veränderlich hoch. */
.pf-reiterleiste {
  position: sticky; top: var(--pf-kopfhoehe); z-index: 5;
  display: flex; gap: 2px; margin-top: 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.pf-reiterleiste::-webkit-scrollbar { display: none; }
.pf-reiter {
  flex: 1 0 auto; min-width: 66px; min-height: 46px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-mute); cursor: pointer;
  display: grid; gap: 1px; justify-items: center; padding: 6px 4px;
  transition: color .18s ease, border-color .18s ease;
}
.pf-reiter-ico { font-size: 15px; line-height: 1; }
.pf-reiter-txt { font-size: 11px; font-weight: 700; }
.pf-reiter.on { color: var(--text); border-bottom-color: var(--accent); }
.pf-reiter:hover { color: var(--text); }
.pf-reiterinhalt { padding-top: 14px; padding-bottom: 24px; }

/* ── 10 · Das Raster ──────────────────────────────────────────────────────── */
.pf-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pf-kachel {
  background: none; border: 0; padding: 0; cursor: pointer; min-width: 0;
  display: grid; gap: 5px; text-align: center;
}
.pf-kachel-flaeche {
  position: relative; display: grid; place-items: center; gap: 2px;
  aspect-ratio: 1 / 1; width: 100%;
  border-radius: 22px; overflow: hidden;
  background: var(--pf-kachel, var(--surface-2));
  border: 1px solid var(--line);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pf-kachel:hover .pf-kachel-flaeche {
  transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(0,0,0,.85);
  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line));
}
.pf-kachel:active .pf-kachel-flaeche { transform: translateY(-1px) scale(.97); }
/* Eine Sportfarbe als volle Fläche ist zu laut. Der dunkle Schleier darüber macht
   aus der Farbe einen Hintergrund und lässt Zahl und Zeichen lesbar bleiben. */
.pf-kachel-flaeche::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.46));
  pointer-events: none;
}
.pf-kachel.mit-bild .pf-kachel-flaeche::after { background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35)); }
.pf-kachel-bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-kachel.bild-fehlt .pf-kachel-flaeche { background: var(--surface-2); }
.pf-kachel-zeichen { position: relative; z-index: 1; font-size: 22px; line-height: 1; }
.pf-kachel-wert {
  position: relative; z-index: 1;
  font-size: 12px; font-weight: 800; color: #fff;
  max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.pf-kachel-unten { font-size: 11px; color: var(--text-dim); }
.pf-kachel-pokal { position: absolute; top: 6px; right: 8px; z-index: 2; font-size: 15px; }
.pf-kachel.meilenstein .pf-kachel-flaeche { border-color: var(--warn); }
.pf-kachel.live .pf-kachel-flaeche { border-color: var(--live, #e5484d); }

.pf-mehr { display: flex; justify-content: center; margin-top: 16px; }
.pf-mehr .pf-knopf { flex: 0 0 auto; min-width: 160px; }
.pf-sichtmarke { height: 1px; }

/* ── 11 · Reiter Trainings ────────────────────────────────────────────────── */
.pf-monat { margin-bottom: 18px; }
.pf-monat-kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 0 2px 8px; font-size: 13px;
}
.pf-monat-kopf b { font-size: 15px; letter-spacing: -.01em; }
.pf-monat-kopf span { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pf-einheit {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.pf-einheit-ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px;
  background: color-mix(in srgb, var(--pf-sport, var(--accent)) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--pf-sport, var(--accent)) 45%, transparent);
}
.pf-einheit-txt { flex: 1; min-width: 0; }
.pf-einheit-txt b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-einheit-txt small { color: var(--text-dim); font-size: 12px; }
.pf-einheit-werte { flex: 0 0 auto; display: grid; gap: 1px; text-align: right; }
.pf-einheit-werte i {
  font-style: normal; font-size: 12px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.pf-einheit-werte i:first-child { font-size: 14px; font-weight: 800; color: var(--text); }

.pf-fusszeilen { display: grid; gap: 8px; margin-top: 8px; }
.pf-fusszeile {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text); font-size: 14px; font-weight: 600;
  cursor: pointer;
}

/* ── 12 · Reiter Veranstaltungen ─────────────────────────────────────────── */
.pf-gruppe { margin-bottom: 20px; }
.pf-gruppe-titel { font-size: 13px; color: var(--text-dim); margin: 0 2px 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; }
.pf-gruppe-fussnote { font-size: 12px; color: var(--text-mute); margin: -4px 2px 8px; }
.pf-gruppe-selbst { border-top: 1px solid var(--line); padding-top: 16px; }
.pf-va {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; margin-bottom: 8px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); cursor: pointer;
}
.pf-va-selbst { cursor: default; opacity: .9; }
.pf-va.live { border-color: var(--live, #e5484d); }
.pf-va-marke {
  flex: 0 0 auto; min-width: 42px; padding: 5px 8px; border-radius: 8px;
  background: var(--surface-2); font-size: 11px; font-weight: 800; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 76px;
}
.pf-va-txt { flex: 1; min-width: 0; }
.pf-va-txt b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-va-txt small { color: var(--text-dim); font-size: 12px; }
.pf-va-live { flex: 0 0 auto; }

/* ── 13 · Reiter Essen ───────────────────────────────────────────────────── */
.pf-essen .pf-kachel-flaeche { gap: 0; }
.pf-essen-kcal {
  position: relative; z-index: 1; font-size: 20px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.pf-essen-einheit { position: relative; z-index: 1; font-size: 11px; color: var(--text-dim); }
.pf-essen-balken {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1;
  display: flex; height: 5px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,.10);
}
.pf-essen-balken i { display: block; height: 100%; }
.pf-fussnote { font-size: 12px; color: var(--text-mute); line-height: 1.45; margin: 14px 2px 0; }

/* ── Reiter „Mehr" ───────────────────────────────────────────────────────── */
.pf-block {
  margin-bottom: 16px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.pf-block.zu { background: none; border-style: dashed; }
.pf-block h3 { margin: 0 0 10px; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.pf-grau { color: var(--text-mute); }

.pf-erfolge, .pf-ziele { display: grid; gap: 8px; }
.pf-erfolg, .pf-ziel {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px;
}
.pf-erfolg-pokal { font-size: 17px; line-height: 1.2; }
.pf-ziel-punkt { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px;
  background: var(--text-mute); }
.pf-ziel-punkt.gut { background: var(--good); }

.pf-balken { display: flex; align-items: flex-end; gap: 8px; height: 108px; padding: 0 2px 4px; }
.pf-balken-spalte { flex: 1; display: grid; align-content: end; justify-items: center; gap: 5px; height: 100%; }
.pf-balken-saeule { width: 100%; max-width: 34px; border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dim)); }
.pf-balken-txt { font-size: 10px; color: var(--text-mute); }
.pf-statzeilen { margin-top: 10px; display: grid; gap: 5px; }
.pf-statzeile { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.pf-statzeile span:first-child { color: var(--text-dim); }
.pf-statzeile span:last-child { font-variant-numeric: tabular-nums; }

/* Punktdiagramm — die Hausform seit dem 31.08.2026. Ein Tag ohne Eintrag bekommt
   KEINEN Punkt; eine Linie durch die Lücke behauptete einen Wert, den niemand
   gemessen hat. */
.pf-punkte svg { width: 100%; height: 96px; display: block; }
.pf-punkte circle { fill: var(--accent-2); }
.pf-punkte-achse { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-mute); }

/* ── Leere Zustände ──────────────────────────────────────────────────────── */
/* Jeder leere Reiter bekommt einen eigenen SATZ, nie ein leeres Feld. */
.pf-leer {
  padding: 28px 18px; text-align: center; color: var(--text-dim);
  font-size: 14px; line-height: 1.5;
}
.pf-leer b { display: block; color: var(--text); font-size: 15px; margin-bottom: 6px; }
.pf-leer p { margin: 0 0 12px; }
.pf-leer .pf-knopf { display: inline-flex; justify-content: center; flex: 0 0 auto; min-width: 180px; }

/* ── Skelette beim Laden ─────────────────────────────────────────────────── */
.pf-kopf-skelett .pf-band { margin-bottom: 0; }
.pf-skelett-kreis {
  width: 88px; height: 88px; border-radius: 50%; margin: -44px 14px 0;
  background: var(--surface-2); border: 3px solid var(--bg);
}
.pf-skelett-zeile { height: 14px; border-radius: 7px; background: var(--surface-2);
  margin: 12px 14px 0; width: 45%; }
.pf-skelett-zeile.kurz { width: 28%; }
.pf-skelett-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pf-skelett-kachel { aspect-ratio: 1 / 1; border-radius: 22px; background: var(--surface-2); }
.pf-kopf-skelett [class^="pf-skelett"], .pf-skelett-kachel { animation: pf-atmen 1.5s ease-in-out infinite; }
@keyframes pf-atmen { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }

/* ── Die Frage nach den Zahlen ───────────────────────────────────────────── */
.pf-frage-hg {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(0,0,0,.62); padding: 20px;
}
.pf-frage {
  width: min(420px, 100%); padding: 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pf-frage h3 { margin: 0 0 10px; font-size: 17px; letter-spacing: -.02em; }
.pf-frage p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.pf-frage-klein { font-size: 12px !important; color: var(--text-mute) !important; }
.pf-frage-knoepfe { display: flex; gap: 10px; margin-top: 16px; }

/* ── Vorschau vor der Sammel-Freigabe (06.09.2026) ───────────────────────── */
/* Drei echte Zeilen statt einer nackten Zahl: Wer 200 Einheiten freigibt, soll sehen,
   WAS das ist. Die Liste ist bewusst gedeckelt (drei plus „… und N weitere") — sie soll
   die Entscheidung stützen, nicht das Blatt zum Scrollen bringen. */
.pf-vorschau {
  list-style: none;
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--flaeche-2, rgba(127, 127, 127, .09));
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.6;
}
.pf-vorschau li {
  /* Ein langer Einheitenname darf die Zeile nicht sprengen — er kürzt sich selbst,
     statt das Blatt breiter zu machen. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-vorschau li.muted { color: var(--text-mute); }

/* ── Profilbild groß ─────────────────────────────────────────────────────── */
/* Groß steht das Bild UNBESCHNITTEN — genau das ist der Gewinn gegenüber dem
   kleinen Kreis, der zuschneidet. */
.pf-bildgross {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  background: rgba(0,0,0,.88); padding: 24px; cursor: zoom-out;
}
.pf-bildgross img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 12px; }
.pf-bildgross-name { margin-top: 12px; text-align: center; font-size: 14px; color: var(--text-dim); }
.pf-bildgross-zu {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
  border-radius: 50%; background: rgba(255,255,255,.12); border: 0; color: #fff;
  font-size: 18px; cursor: pointer;
}

/* ── Toast (nur als Rückfall, wenn es den Haus-Toast nicht gibt) ─────────── */
.pf-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 99; max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--surface-3); border: 1px solid var(--line);
  font-size: 14px; box-shadow: var(--shadow);
  transition: opacity .4s ease;
}
.pf-toast.weg { opacity: 0; }

/* ── Einblenden ──────────────────────────────────────────────────────────── */
/* ⚠⚠⚠ Das Verstecken hängt an `.pf-bereit`, und die Klasse setzt AUSSCHLIESSLICH das
    Skript. Stünde `opacity: 0` schon im Grundzustand, zeigte ein Skriptfehler eine
    leere Seite — die teuerste Art, eine Animation zu bauen. */
.pf-popp.pf-bereit > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity .42s ease, transform .42s ease;
}
.pf-popp.pf-fertig > * { opacity: 1; transform: none; }
/* Versetzt, damit eine Kachelgruppe hereinläuft statt aufzuploppen. Nur die ersten
   zwölf: Ab da wartete man auf sein eigenes Raster. */
.pf-popp.pf-bereit > *:nth-child(1)  { transition-delay: .00s; }
.pf-popp.pf-bereit > *:nth-child(2)  { transition-delay: .03s; }
.pf-popp.pf-bereit > *:nth-child(3)  { transition-delay: .06s; }
.pf-popp.pf-bereit > *:nth-child(4)  { transition-delay: .09s; }
.pf-popp.pf-bereit > *:nth-child(5)  { transition-delay: .12s; }
.pf-popp.pf-bereit > *:nth-child(6)  { transition-delay: .15s; }
.pf-popp.pf-bereit > *:nth-child(7)  { transition-delay: .18s; }
.pf-popp.pf-bereit > *:nth-child(8)  { transition-delay: .21s; }
.pf-popp.pf-bereit > *:nth-child(9)  { transition-delay: .24s; }
.pf-popp.pf-bereit > *:nth-child(10) { transition-delay: .27s; }
.pf-popp.pf-bereit > *:nth-child(11) { transition-delay: .30s; }
.pf-popp.pf-bereit > *:nth-child(12) { transition-delay: .33s; }

/* ── Größere Bildschirme ─────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .pf-raster, .pf-skelett-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pf-reiter { min-width: 92px; }
}

/* ── „Bewegung reduzieren": alles bleibt ruhig ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pf-popp.pf-bereit > * { opacity: 1; transform: none; transition: none; }
  .pf-knopf, .pf-kachel-flaeche, .pf-runde-kreis, .pf-toast { transition: none; }
  .pf-knopf:hover, .pf-kachel:hover .pf-kachel-flaeche, .pf-runde:hover .pf-runde-kreis { transform: none; }
  .pf-avatarknopf.laeuft .pf-avatar, .pf-runde.live .pf-runde-kreis,
  .pf-kopf-skelett [class^="pf-skelett"], .pf-skelett-kachel { animation: none; }
}

/* ── Foto beim Verfassen (Etappe 6) ──────────────────────────────────────── */
/* Steht in DIESER Datei und nicht in styles.css: Es gehört zum selben Umbau wie das
   Bildraster und wird mit ihm zusammen gepflegt. */
.uq-bs-vorschau { display: grid; gap: 8px; }
.uq-bs-vorschau img {
  width: 100%; max-height: 260px; object-fit: cover;
  border-radius: 12px; display: block;
  background: var(--surface-2);
}

/* ── Das ⋯-Menü im fremden Profil ────────────────────────────────────────── */
/* Drei Einträge, jeder mit einem Haus dahinter — und einer davon, das Blockieren,
   war seit dem 14.08.2026 fertig am Server und hatte in der ganzen App keine Tür. */
.pf-knopf-mehr { flex: 0 0 44px; padding: 8px 0; font-size: 17px; letter-spacing: 2px; }
.pf-menue h3 { margin-bottom: 14px; }
.pf-menue-zeile {
  display: block; width: 100%; text-align: left;
  padding: 13px 14px; margin-bottom: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pf-menue-zeile:hover {
  transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(0,0,0,.85);
  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line));
}
/* ⚠⚠ NIE ROT AUF ROT (Hausregel): Der Warnton sitzt auf der normalen Fläche, nicht auf
   einem roten Grund — die Schrift bleibt lesbar, die Warnung trotzdem eindeutig. */
.pf-menue-zeile.warn { color: var(--bad); }
.pf-menue-zeile.ruhig { background: none; border-color: transparent; color: var(--text-dim); }
.pf-knopf-warn { background: var(--bad); color: #fff; border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .pf-menue-zeile { transition: none; }
  .pf-menue-zeile:hover { transform: none; }
}

/* Ein TEXTbeitrag bekommt drei Zeilen statt einer abgeschnittenen: Auf 106 px Kachel
   stand sonst „Trainingsl…" — das ist kein Beitrag mehr, sondern ein Rätsel.
   ⚠ Nur für Textkacheln. Zahlen (km, Zeit) bleiben einzeilig: Sie sind kurz und sollen
   untereinander vergleichbar stehen. */
.pf-kachel.text .pf-kachel-wert {
  white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden; text-overflow: clip;
  font-size: 11px; font-weight: 600; line-height: 1.25;
  max-width: 86%;
}

/* Der Hinweis auf zurückgehaltene Gewichtsziele (02.09.2026). ⚠⚠ NIE ROT AUF ROT:
   Der Warnton sitzt auf der normalen Fläche, nur der linke Rand trägt die Farbe. */
.pf-warnzeile {
  border-left: 3px solid var(--warn);
  padding-left: 10px;
  color: var(--text-dim) !important;
}

/* ── Der Fortschritt eines Ziels (02.09.2026) ────────────────────────────── */
/* Ein Balken, der nur da steht, wo der Server echte Leistung gemessen hat — nie für
   verstrichene Zeit. Die Zahl steht daneben, nicht IM Balken: Bei 4 % läge sie sonst
   außerhalb der Füllung und wäre unlesbar. */
.pf-ziel-txt { flex: 1; min-width: 0; }
.pf-fortschritt { display: block; margin-top: 7px; }
.pf-fortschritt-bahn {
  display: block; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--surface-3);
}
.pf-fortschritt-bahn i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-2), var(--good));
  /* ⚠ Eine Mindestbreite, damit ein angefangenes Ziel nicht wie ein unangetastetes
     aussieht: Bei 1 % wäre die Füllung sonst ein halber Pixel und damit unsichtbar. */
  min-width: 3px;
  transition: width .5s ease;
}
.pf-fortschritt-txt {
  display: block; margin-top: 4px;
  font-size: 11px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.pf-fortschritt-txt b { color: var(--text); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .pf-fortschritt-bahn i { transition: none; }
}