/*! NEXTARI · Handy-Reihen */
/* NEXTARI · HANDY-REIHEN · die Form des Bausatzes der drei Reiter Games,
  People und Events (nxm-handyreihen.js baut, diese Datei formt).

  ALLE WERTE SIND NAMEN. Farben, Rundungen, Schrift und Knopfmass kommen
  aus nextari.css und css/nextari-flaechen.css, auch der Takt zwischen
  zwei Reihen am Telefon (--nx-reihen-takt-telefon, neben dem Takt am
  Rechner). Eigene Namen gibt es nur, wo das Haus noch keinen hat: die
  Kante von main auf Pulse, die Kartenbreiten und die Rangzahl.

  DIE BREITE KOMMT VOM BAUSATZ, NICHT VOM FENSTER. .hr-seite ist ein
  Container · 100cqw ist die Breite des Inhalts. So stimmen die Karten am
  Telefon (390, 360) und im Rahmen von Pulse am Rechner gleichermassen,
  ohne eine Schwelle.

  Klassen tragen das Praefix hr-, damit keine Hausregel ueber Teilwoerter
  ([class*=grid], [class*=row], [class*=btn]) auf den Bausatz greift. */

.hr-seite{
  container-type:inline-size;
  /* = Innenrand von main auf Pulse, am Telefon wie im Rahmen am Rechner */
  --hr-kante:14px;
  /* Das Kartenmass (Hochformat 2:3, Querformat 16:9, Rangzahl) gehoert
  nextari.css (--nx-karte-*, Nr. C54) · hier steht nur die Kante, gegen die
  es auf Pulse gerechnet wird. */
  --nx-karte-kante:var(--hr-kante);
  --hr-schleier-oben:color-mix(in srgb, var(--nx-grund) 55%, transparent);
  --hr-schleier-mitte:color-mix(in srgb, var(--nx-grund) 62%, transparent);
  --hr-schleier-tief:color-mix(in srgb, var(--nx-grund) 92%, transparent);
  display:block;padding-bottom:var(--nx-luecke-kompakt);
  font-family:var(--nx-f-text);color:var(--nx-text)}
.hr-seite a{color:inherit;text-decoration:none}
.hr-seite h2{margin:0}

/* ---------- Bildflaeche, ueberall dieselbe ---------- */
.hr-bild{position:relative;display:block;overflow:hidden;border-radius:var(--nx-r-karte);
  background:var(--nx-flaeche-2);aspect-ratio:2/3}
.hr-bild > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hr-seite img[data-hr-ohne]{display:none}
/* Ohne Bild bleibt der Name auf der Flaeche · nie ein kaputtes Zeichen. */
.hr-ohne{position:absolute;inset:0;display:grid;place-items:center;padding:var(--nx-luecke-kompakt);
  text-align:center;font:800 var(--nx-typo-kartenkopf)/1.2 var(--nx-f-titel);color:var(--nx-dim);
  overflow:hidden;overflow-wrap:anywhere}

/* ---------- 1 · Auftakt: randlos, 4:5 ---------- */
.hr-auftakt{position:relative;display:block;overflow:hidden;background:var(--nx-flaeche);
  width:calc(100cqw + 2 * var(--hr-kante));margin:0 calc(-1 * var(--hr-kante));aspect-ratio:4/5}
.hr-auftakt-leer{aspect-ratio:auto;min-height:calc(var(--nx-h-bedien) + 2 * var(--nx-luecke-kompakt));background:none}
.hr-grund{position:absolute;inset:0;display:block}
.hr-grund > img{width:100%;height:100%;object-fit:cover;display:block;object-position:var(--hr-fokus,66% 40%)}
/* Schleier statt Filter, nur oben (fuer die Suche) und unten (fuer den
  Text) · die Mitte des Bildes bleibt frei und laeuft unten in die Seite. */
.hr-auftakt::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--hr-schleier-oben) 0%,transparent 20%,transparent 44%,
    var(--hr-schleier-mitte) 66%,var(--hr-schleier-tief) 86%,var(--nx-grund) 100%)}
.hr-auftakt-leer::after{display:none}
.hr-auftakt-in{position:absolute;left:var(--hr-kante);right:var(--hr-kante);bottom:var(--nx-luecke-wort);z-index:2}
.hr-ueber{display:flex;align-items:center;gap:var(--nx-luecke-knopf);min-width:0;
  font:700 var(--nx-typo-meta)/1.3 var(--nx-f-text);color:var(--nx-weiss)}
.hr-ueber > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr-ueber .hr-ava{width:24px;height:24px;font-size:var(--nx-typo-klein)}
.hr-titel{display:block;margin:6px 0;font:800 var(--nx-typo-seite)/1.06 var(--nx-f-titel);color:var(--nx-weiss);
  letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
.hr-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin:0 0 var(--nx-luecke-kompakt);font:400 var(--nx-typo-meta)/1.4 var(--nx-f-text);color:var(--nx-text)}
.hr-knoepfe{display:flex;gap:var(--nx-luecke-knopf)}
.hr-knopf{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:var(--nx-luecke-knopf);
  height:var(--nx-h-bedien);padding:0 var(--nx-luecke-kompakt);border-radius:var(--nx-r-bedien);
  font:700 var(--nx-typo-text)/1 var(--nx-f-text);color:var(--nx-weiss);white-space:nowrap;
  background:var(--nx-hebung-2);-webkit-backdrop-filter:var(--nx-glas-weich);backdrop-filter:var(--nx-glas-weich)}
.hr-knopf.hr-voll{background:var(--nx-akzent)}
/* Ein langer Name (Sprache, schmales Telefon) wird gekuerzt, nie umgebrochen
  und nie ueber den Rand geschoben. Der Knopf mit mehr Text nimmt mehr Platz. */
.hr-knopf > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hr-knopf svg{width:16px;height:16px;flex:none}

/* Die Suche · Glas oben im Bild, ein Feld in Fingermass. */
.hr-wahl{position:absolute;top:var(--nx-luecke-kompakt);left:var(--hr-kante);right:var(--hr-kante);z-index:3}
.hr-auftakt-leer .hr-wahl{position:relative;top:auto;left:auto;right:auto;margin:var(--nx-luecke-kompakt) var(--hr-kante)}
.hr-suche{display:flex;align-items:center;gap:var(--nx-luecke-knopf);height:var(--nx-h-bedien);padding:0 var(--nx-luecke-kompakt);
  border-radius:var(--nx-r-pille);background:var(--nx-glas);-webkit-backdrop-filter:var(--nx-glas-weich);backdrop-filter:var(--nx-glas-weich);
  color:var(--nx-dim);cursor:text}
.hr-suche svg{width:18px;height:18px;flex:none}
.hr-suche input{flex:1 1 auto;min-width:0;height:100%;border:0;outline:0;background:none;padding:0;margin:0;
  font:400 var(--nx-schrift-feld) var(--nx-f-text);color:var(--nx-weiss);-webkit-appearance:none;appearance:none}
.hr-suche input::placeholder{color:var(--nx-dim)}
.hr-suche input::-webkit-search-decoration{-webkit-appearance:none}
.hr-suche:focus-within{box-shadow:0 0 0 2px var(--nx-hebung-2)}

/* ---------- Datum auf dem Bild ---------- */
.hr-datum{position:absolute;top:var(--nx-luecke-knopf);left:var(--nx-luecke-knopf);z-index:2;min-width:46px;box-sizing:border-box;
  padding:6px 7px 7px;border-radius:var(--nx-r-bedien);text-align:center;line-height:1;color:var(--nx-weiss);
  background:var(--nx-glas);-webkit-backdrop-filter:var(--nx-glas-weich);backdrop-filter:var(--nx-glas-weich)}
.hr-datum span{display:block;font:700 var(--nx-typo-klein)/1.1 var(--nx-f-text);color:var(--nx-text)}
.hr-datum b{display:block;margin:2px 0 1px;font:800 var(--nx-typo-abschnitt)/1.05 var(--nx-f-titel);color:var(--nx-weiss)}
.hr-datum-offen{max-width:84px}
.hr-datum-offen b{margin:0;font:700 var(--nx-typo-klein)/1.2 var(--nx-f-text);white-space:normal}
.hr-auftakt > .hr-datum{top:calc(var(--nx-h-bedien) + 2 * var(--nx-luecke-kompakt));left:var(--hr-kante)}

/* ---------- 2 · Reihe: Kopf in EINER Zeile, darunter die Wischzeile ---------- */
.hr-reihe,.hr-kasten{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--nx-luecke-knopf);
  align-items:center;margin-top:var(--nx-reihen-takt-telefon)}
.hr-reihe > *,.hr-kasten > *{grid-column:1/-1}
.hr-reihe > .hr-kopf,.hr-kasten > .hr-kopf,.hr-kasten > .hr-kanalkopf{grid-column:1}
.hr-reihe > .hr-alle,.hr-kasten > .hr-alle{grid-column:2}
.hr-kopf{font:800 var(--nx-typo-abschnitt)/1.15 var(--nx-f-titel);color:var(--nx-weiss);min-width:0;overflow-wrap:anywhere}
/* "Alle" · leise, rechts, und trotzdem in Fingermass. */
.hr-alle{display:inline-flex;align-items:center;gap:2px;min-height:var(--nx-h-bedien);margin:-10px 0;padding-left:var(--nx-luecke-knopf);
  font:700 var(--nx-typo-meta)/1 var(--nx-f-text);color:var(--nx-dim);white-space:nowrap}
.hr-alle svg{width:14px;height:14px}
.hr-satz{margin:6px 0 0;font:400 var(--nx-typo-meta)/1.4 var(--nx-f-text);color:var(--nx-dim)}

/* Die Wischzeile laeuft bis an den Rand des Telefons · die letzte Karte im
  Bild ist rechts angeschnitten, das sagt: hier geht es weiter. Am Ende
  schliesst sie mit derselben Luft wie links. */
.hr-zeile{display:flex;gap:var(--nx-luecke-knopf);align-items:flex-start;overflow-x:auto;overflow-y:hidden;
  margin:var(--nx-luecke-kompakt) calc(-1 * var(--hr-kante)) 0;padding:0 var(--hr-kante);
  scroll-snap-type:x mandatory;scroll-padding:0 var(--hr-kante);scrollbar-width:none;overscroll-behavior-x:contain}
.hr-zeile::-webkit-scrollbar{display:none}
.hr-zeile > *{flex:none;scroll-snap-align:start}
.hr-zeile::after{content:"";flex:0 0 1px;margin-left:calc(var(--hr-kante) - var(--nx-luecke-knopf) - 1px)}

/* ---------- 3 · Karten: hoch 2:3, quer 16:9 ---------- */
.hr-karte{display:block;width:var(--nx-karte-hoch);min-width:0}
.hr-karte.hr-quer{width:var(--nx-karte-quer)}
.hr-quer .hr-bild{aspect-ratio:16/9}
.hr-name{display:block;margin-top:var(--nx-luecke-knopf);font:700 var(--nx-typo-text)/1.3 var(--nx-f-text);color:var(--nx-weiss);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* KEIN BESCHNITTENER TITEL. Auf der Karte bricht der Name nach zwei Zeilen
  um, statt nach einer abgeschnitten zu werden · und jede Karte haelt den
  Platz fuer zwei Zeilen frei, damit die Karten einer Reihe gleich hoch
  bleiben. */
.hr-unter > .hr-name,.hr-was > .hr-name,.hr-name.hr-zwei{white-space:normal;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hr-unter{display:block;min-height:calc(var(--nx-luecke-knopf) + var(--nx-typo-text) * 2.6 + 2px + var(--nx-typo-meta) * 1.35)}
.hr-unter-zwei{min-height:calc(var(--nx-luecke-knopf) + var(--nx-typo-text) * 2.6 + 2px + var(--nx-typo-meta) * 2.7)}
.hr-meta{display:block;margin-top:2px;font:400 var(--nx-typo-meta)/1.35 var(--nx-f-text);color:var(--nx-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-meta.hr-zwei{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Herkunft und Kennung auf dem Bild · klein, Glas, keine Linie. */
.hr-quelle,.hr-kennung,.hr-live{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;
  border-radius:var(--nx-r-marke);font:700 var(--nx-typo-klein)/1 var(--nx-f-text);color:var(--nx-weiss);
  background:var(--nx-glas);-webkit-backdrop-filter:var(--nx-glas-weich);backdrop-filter:var(--nx-glas-weich)}
.hr-quelle{right:var(--nx-luecke-knopf);bottom:var(--nx-luecke-knopf)}
.hr-kennung,.hr-live{left:var(--nx-luecke-knopf);top:var(--nx-luecke-knopf)}
.hr-live{font-weight:800;letter-spacing:var(--nx-sperrung)}
.hr-live i{width:6px;height:6px;border-radius:var(--nx-r-pille);background:var(--nx-live)}

/* Menschen · Profilbild mit Ring: rot heisst live, gruen heisst gerade dabei. */
.hr-ava{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--nx-r-pille);overflow:hidden;
  background:var(--nx-akzent);font:800 var(--nx-typo-meta)/1 var(--nx-f-text);color:var(--nx-weiss);text-transform:none}
.hr-person .hr-bild .hr-ava{position:absolute;left:var(--nx-luecke-knopf);bottom:var(--nx-luecke-knopf);z-index:2}
.hr-person .hr-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,var(--hr-schleier-mitte) 100%)}
.hr-ring-live{box-shadow:0 0 0 2px var(--nx-grund),0 0 0 4px var(--nx-live)}
.hr-ring-an{box-shadow:0 0 0 2px var(--nx-grund),0 0 0 4px var(--nx-gut)}

/* ---------- 4 · Top 10: grosse Rangzahl, das Plakat liegt daneben ---------- */
.hr-top{position:relative;display:block;width:var(--nx-karte-hoch);padding-left:calc(var(--nx-karte-hoch) * .34);box-sizing:border-box}
.hr-top.hr-top-zwei{width:calc(var(--nx-karte-hoch) * 1.25);padding-left:calc(var(--nx-karte-hoch) * .59)}
.hr-top .hr-karte{position:relative;z-index:1;width:100%}
.hr-rang{position:absolute;left:0;top:0;z-index:0;width:52%;height:calc((var(--nx-karte-hoch) * .66) * 1.5);
  display:flex;align-items:flex-end;justify-content:flex-end;pointer-events:none;
  font:800 var(--nx-karte-rang)/.74 var(--nx-f-titel);letter-spacing:-.04em;color:var(--nx-grund);
  -webkit-text-stroke:2px var(--nx-dim)}
.hr-top-zwei .hr-rang{width:68%;height:calc((var(--nx-karte-hoch) * .66) * 1.5)}

/* ---------- 5 · Kasten: Liste 1 bis 5 und Kanal ---------- */
.hr-kasten{padding:var(--nx-luecke-wort);border-radius:var(--nx-r-block);background:var(--nx-flaeche)}
.hr-kasten .hr-zeile{margin:var(--nx-luecke-kompakt) calc(-1 * var(--nx-luecke-wort)) 0;padding:0 var(--nx-luecke-wort);
  scroll-padding:0 var(--nx-luecke-wort)}
.hr-kasten .hr-zeile::after{margin-left:calc(var(--nx-luecke-wort) - var(--nx-luecke-knopf) - 1px)}
.hr-liste{list-style:none;margin:var(--nx-luecke-knopf) 0 0;padding:0}
.hr-liste > li{margin:0;padding:0}
.hr-eintrag{display:flex;align-items:center;gap:var(--nx-luecke-kompakt);min-height:52px;padding:6px 0}
.hr-nr{flex:none;width:18px;text-align:left;font:800 var(--nx-typo-abschnitt)/1 var(--nx-f-titel);color:var(--nx-weiss)}
.hr-mini{position:relative;flex:none;display:block;overflow:hidden;border-radius:var(--nx-r-marke);background:var(--nx-flaeche-2)}
.hr-mini > img{width:100%;height:100%;object-fit:cover;display:block}
.hr-mini-quer{width:72px;aspect-ratio:16/9}
.hr-mini-datum{width:46px;background:none;overflow:visible}
.hr-mini-datum .hr-datum{position:static;background:var(--nx-hebung)}
.hr-eintrag > .hr-ava{width:40px;height:40px}
.hr-was{flex:1 1 auto;min-width:0}
.hr-was .hr-name{margin-top:0}
.hr-wert{flex:none;margin-left:auto;text-align:right;font:400 var(--nx-typo-meta)/1.3 var(--nx-f-text);color:var(--nx-dim);white-space:nowrap}
.hr-fuss{margin:var(--nx-luecke-knopf) 0 0;font:400 var(--nx-typo-klein)/1.4 var(--nx-f-text);color:var(--nx-leise)}
.hr-kanalkopf{display:flex;align-items:center;gap:var(--nx-luecke-kompakt);min-width:0}
.hr-kanalkopf .hr-ava{width:36px;height:36px}
.hr-kanalname{min-width:0}
.hr-kanalname .hr-meta{margin-top:0}

/* ---------- 5b · Matchmaking: eine eigene Karte gleich nach "Deine Leute" ----------
  Die Auswahl (Spiele, Stimmung, Knopf) baut nxm-mobilapp.js, der Bausatz
  legt sie in seinen Kasten. Hier steht nur ihre Form im Kasten: Kopf und
  Satz wie jede Reihe, die Wahlen in Knopfgruppen mit der Luecke des
  Hauses, der eine gefuellte Knopf ueber die ganze Breite. */
.hr-match-in{min-width:0}
.hr-match-in .m-t{margin:var(--nx-luecke-wort) 0 0;font:700 var(--nx-typo-meta)/1.3 var(--nx-f-text);color:var(--nx-dim)}
.hr-match-in .m-s{margin-top:var(--nx-luecke-knopf);font:400 var(--nx-typo-meta)/1.4 var(--nx-f-text);color:var(--nx-dim)}
.hr-match-in .m-chiprow{display:flex;flex-wrap:wrap;gap:var(--nx-luecke-knopf);margin:var(--nx-luecke-knopf) 0 0}
.hr-match-in .m-chip{height:var(--nx-h-bedien);min-height:0;padding:0 var(--nx-luecke-kompakt);border-radius:var(--nx-r-bedien)}
.hr-match-in .m-kn{display:flex;width:100%;box-sizing:border-box;height:var(--nx-h-bedien);min-height:0;margin:var(--nx-luecke-wort) 0 0;border-radius:var(--nx-r-bedien)}
.hr-match-in .m-kn + .m-s{margin-top:var(--nx-luecke-knopf);font-size:var(--nx-typo-klein);color:var(--nx-leise)}

/* ---------- 6 · Story-Karte: eine je Seite, die Karte ist das Ziel ---------- */
.hr-story{position:relative;display:block;margin-top:var(--nx-reihen-takt-telefon);border-radius:var(--nx-r-karte);overflow:hidden}
.hr-story > .hr-bild{aspect-ratio:4/5;border-radius:0}
.hr-story > .hr-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,var(--hr-schleier-mitte) 64%,var(--hr-schleier-tief) 100%)}
.hr-story-in{position:absolute;left:var(--nx-luecke-wort);right:var(--nx-luecke-wort);bottom:var(--nx-luecke-wort);z-index:2;display:block}
.hr-story-in .hr-text{margin:0}
.hr-story > .hr-praes{position:absolute;top:var(--nx-luecke-knopf);right:var(--nx-luecke-knopf);z-index:2}
.hr-praes{display:inline-flex;align-items:center;gap:var(--nx-luecke-knopf);height:32px;padding:0 4px 0 10px;
  border-radius:var(--nx-r-marke);font:400 var(--nx-typo-klein)/1 var(--nx-f-text);color:var(--nx-text);
  background:var(--nx-glas);-webkit-backdrop-filter:var(--nx-glas-weich);backdrop-filter:var(--nx-glas-weich)}
.hr-praes .nxfn-kasten img{height:24px;width:auto;display:block}

/* ---------- 7 · Was oben bleibt, weil es eine Uhrzeit hat ---------- */
.hr-oben{margin-top:var(--nx-luecke-wort)}

/* ---------- 8 · Die eine Reihe grauer Kaestchen (Form: nxm-leerreihe.js) ---------- */
.hr-leerband{margin-top:var(--nx-luecke-kompakt)}

/* ---------- 9 · Der Weg in die volle Seite und die Liste dahinter ---------- */
.hr-weiter{display:flex;align-items:center;justify-content:center;gap:4px;height:var(--nx-h-bedien);margin-top:var(--nx-reihen-takt-telefon);
  border-radius:var(--nx-r-bedien);background:var(--nx-hebung);font:700 var(--nx-typo-text)/1 var(--nx-f-text);color:var(--nx-weiss)}
.hr-weiter svg{width:16px;height:16px}
.hr-alt{margin-top:var(--nx-luecke-knopf)}
.hr-alt > summary{display:flex;align-items:center;justify-content:center;min-height:var(--nx-h-bedien);cursor:pointer;list-style:none;
  font:400 var(--nx-typo-meta)/1 var(--nx-f-text);color:var(--nx-dim)}
.hr-alt > summary::-webkit-details-marker{display:none}
.hr-alt[open] > summary{color:var(--nx-text)}
.hr-alt-in{padding-top:var(--nx-luecke-knopf)}