/* ============================================================
   radl.css — Radl / Rundlauf (js/screens/radl.js, Karten im
   Spiele-Reiter, Admin-Karte)

   Bildsprache wie im Rest der App: grüne Bühne im satten Fando-
   Verlauf MIT grosser, angeschnittener Palme (nie Hellgrün als
   Fläche), Glas-Chips darauf, weisse Karten darunter. Der Scorer
   ist die dunkle Bühne des Einzel-Scorers – mit bis zu acht Feldern
   in zwei Reihen statt zwei Hälften.
   ============================================================ */

/* Fordern-Seite: der dritte Schnellknopf liegt als volle Zeile unter
   „Offener Tisch“ und „Doppel“ – drei nebeneinander zerquetschten den
   Text auf Handybreite. */
.ch-quick [data-quick-radl] { grid-column: 1 / -1; }
/* „Testphase“ (Paul, 1.10.2026): kleines Band am Radl-Knopf (Fordern), im
   Aufstell-Sheet und bei den Admin-Einstellungen – solange das Radl neu ist.
   Ein Wort, ein Chip; verschwindet, sobald die Klasse aus dem Markup fliegt. */
.radl-test {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-left: 6px;
  border-radius: 99px; background: #fff3c4; color: #7a4e00;
  font-size: 10px; font-weight: var(--fw-black); letter-spacing: .06em; text-transform: uppercase;
  vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(122, 78, 0, 0.18);
}
.ch-qbtn .radl-test { margin-left: 4px; }

/* ---------------- Aufstellen (Sheet) ---------------- */
.dialog-ic.radl { background: linear-gradient(135deg, var(--fando), var(--fando-700)); color: #fff; }
.radl-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.radl-seg-btn {
  min-height: 44px; padding: 8px 10px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.2;
  transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.radl-seg-btn.on { background: var(--fando-tint); border-color: var(--fando); color: var(--fando-700); }
.radl-picks { display: flex; flex-direction: column; gap: 6px; }
.rp-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  transition: background var(--dur-2), border-color var(--dur-2);
}
.rp-row .pr-name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.rp-check {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--border); color: transparent; transition: all var(--dur-2);
}
.rp-row.on { background: var(--fando-tint); border-color: var(--fando-200); }
.rp-row.on .rp-check { background: var(--fando); border-color: var(--fando); color: #fff; }
/* Vorschau: zwei Kennzahl-Kacheln (Ziel, Punkte) + Hinweiszeilen. Vorher
   waren es Sätze, deren Teile am Handy auseinanderbrachen (die Regel
   `.radl-preview span {display:flex}` traf auch die inneren Spans). */
.radl-preview { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.rv-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.rv-stat {
  min-width: 0; padding: 10px 12px 11px; border-radius: 14px; background: var(--stone-100);
  display: flex; flex-direction: column; gap: 3px;
}
.rv-k {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-muted);
}
.rv-k .icon-sm { color: var(--fando-700); }
.rv-v { font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: 1.1; color: var(--text); white-space: nowrap; }
.rv-c { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-note {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 14px;
  background: var(--stone-100); font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-normal);
}
.rv-note .icon-sm, .rv-note .palm-ic { flex: none; margin-top: 1px; color: var(--fando-700); }
.rv-note.palms { background: #fff3c4; color: #7a4e00; }
.rv-note.palms .palm-ic { color: #7a4e00; }
.radl-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ---------------- Warteraum ---------------- */
.radl-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: 22px 20px 20px; border-radius: 22px; margin-bottom: 16px;
  background: linear-gradient(150deg, #5aa233 0%, #43811f 60%, #356a1b 100%);
  box-shadow: var(--shadow-md);
}
.radl-hero::after {
  content: ""; position: absolute; z-index: 0; right: -30px; bottom: -34px;
  width: 170px; aspect-ratio: 1133.91 / 1333.65;
  background: url("../img/logo-white.svg") no-repeat center / contain;
  opacity: 0.14; pointer-events: none;
}
.radl-hero > * { position: relative; z-index: 1; }
.radl-hero-ov { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.radl-hero h2 { margin-top: 6px; font-size: var(--fs-2xl); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); line-height: 1.1; }
.radl-hero p { margin-top: 6px; font-size: var(--fs-sm); color: rgba(255,255,255,.85); max-width: 92%; }
.radl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.radl-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap;
}
.radl-list { display: flex; flex-direction: column; gap: 6px; }
.rl-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
}
.rl-row .pr-name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.rl-state { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--fando-700); white-space: nowrap; }
.rl-row.is-open .rl-state { color: var(--text-muted); }
.rl-row.is-out { opacity: .55; }
.rl-row.is-out .rl-state { color: var(--text-muted); }
.radl-actions { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.radl-actions .request-actions { margin-top: 0; }

/* ---------------- Scorer-Bühne ---------------- */
.radl-scorer { background: var(--ink-900); }
.radl-stage {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px;
  padding: calc(var(--safe-top) + 62px) 12px calc(var(--safe-bottom) + 12px);
}
.radl-stage::after {
  content: ""; position: absolute; z-index: 0; right: -36px; bottom: -32px;
  width: 190px; aspect-ratio: 1133.91 / 1333.65;
  background: url("../img/logo-white.svg") no-repeat center / contain;
  opacity: 0.05; pointer-events: none;
}
.radl-stage > * { position: relative; z-index: 1; }
.radl-pages { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.radl-page {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.radl-page.on { background: #fff; color: var(--fando-700); box-shadow: none; }
.radl-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  /* Reihen explizit (1 oder 2, js/lib/radl.js gridLayout): So füllen auch
     zwei Felder die volle Höhe, und die Spannweiten der Felder decken jede
     Reihe lückenlos ab. */
  grid-template-rows: repeat(var(--rows, 2), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr); gap: 8px; align-content: stretch;
}
/* Hochkant mit drei oder vier Reihen: flachere Felder, weniger Luft oben
   und unten, damit auch acht Felder auf ein kleines Handy passen. */
.radl-grid[data-rows="3"] .radl-tile { min-height: 104px; padding: 16px 6px 24px; }
.radl-grid[data-rows="4"] .radl-tile { min-height: 92px; padding: 12px 6px 22px; gap: 0; }
.radl-grid[data-rows="4"] .radl-tile .rt-score { font-size: var(--fs-2xl); }
/* Jedes Feld ist eine Farbbühne wie die Hälften des Einzel-Scorers: satter
   Verlauf in der Farbe der Position (--c1/--c2/--c3 aus js/lib/radl.js,
   playerColor) und die grosse, unten rechts angeschnittene Palme. */
.radl-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 118px; padding: 24px 6px 30px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(150deg, var(--c1, #5aa233) 0%, var(--c2, #43811f) 60%, var(--c3, #356a1b) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14);
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-1) var(--ease-standard), box-shadow var(--dur-2);
  animation: radl-tile-in 520ms var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes radl-tile-in { from { opacity: 0; transform: translateY(14px) scale(.94); } }
.radl-tile::after {
  content: ""; position: absolute; z-index: 0; right: -26px; bottom: -22px;
  width: 54%; min-width: 96px; max-width: 190px; aspect-ratio: 1133.91 / 1333.65;
  background: url("../img/logo-white.svg") no-repeat center / contain;
  opacity: 0.13; pointer-events: none;
}
.radl-tile > * { position: relative; z-index: 1; }
.radl-tile:active { transform: scale(0.95); }
/* Mein eigenes Feld: weisser Rahmen – auf farbigen Flächen liest sich Grün nicht. */
.radl-tile.is-me { box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.85); }
/* Ziel erreicht: Goldrahmen und Krone, die Farbe bleibt. */
.radl-tile.is-done { box-shadow: inset 0 0 0 2.5px var(--gold), 0 0 22px rgba(0,0,0,.25); }
.rt-nr {
  position: absolute; top: 7px; left: 8px; min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 99px;
  background: rgba(255,255,255,.2); color: #fff;
  font-size: var(--fs-2xs); font-weight: var(--fw-black);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.radl-tile.is-done .rt-nr { background: var(--gold); color: var(--ink-900); box-shadow: none; }
.rt-late {
  position: absolute; top: 7px; right: 8px; height: 18px; padding: 0 6px; border-radius: 99px;
  background: var(--gold); color: var(--ink-900); font-size: 9px; font-weight: var(--fw-black);
  text-transform: uppercase; letter-spacing: .06em; display: grid; place-items: center;
}
.rt-crown { position: absolute; top: 6px; right: 8px; color: var(--gold); display: none; }
.radl-tile.is-done .rt-crown { display: block; animation: pop-in 480ms var(--ease-spring) both; }
.radl-tile.is-done .rt-late { display: none; }
.rt-ava .avatar { --sz: 30px; font-size: 11px; }
.rt-name { max-width: 100%; font-size: 11px; font-weight: var(--fw-semibold); color: rgba(255,255,255,.9); }
.rt-ava .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.rt-score {
  font-size: clamp(30px, 6.5vh, 48px); font-weight: var(--fw-black); line-height: 1;
  letter-spacing: -0.04em; color: #fff;
}
.rt-dots { display: flex; gap: 4px; }
.rt-dots .race-dot { width: 6px; height: 6px; background: rgba(255,255,255,.3); }
.rt-dots .race-dot.on { background: #fff; }
.rt-minus {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 32px; height: 24px; border-radius: 99px; display: grid; place-items: center;
  background: rgba(255,255,255,.18); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.rt-minus:active { background: rgba(255,255,255,.32); }
/* Auf der Bühne steht kein Satz – der Platz gehört den Feldern (Paul, 1.10.).
   Alles andere (Endmodus, offener Tisch, Seiten, Stand) liegt im Sheet
   hinter dem (i) oben: .rs-* */
.rs-list { display: flex; flex-direction: column; gap: 6px; }
.rs-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 8px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
}
.rs-row.is-me { background: var(--fando-tint); border-color: var(--fando-200); }
.rs-col { flex: none; width: 10px; height: 26px; border-radius: 6px; background: var(--c1, var(--stone-300)); }
.rs-nr { width: 20px; font-weight: var(--fw-black); color: var(--text-muted); text-align: center; }
.rs-row .avatar { --sz: 28px; font-size: 10px; }
.rs-name { flex: 1; min-width: 0; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.rs-score { font-weight: var(--fw-black); font-size: var(--fs-lg); }
.rs-score.done { color: var(--fando-700); }

/* Querformat: die Seiten-Pillen stehen links als Spalte, die Felder füllen den Rest */
@media (orientation: landscape) and (max-height: 500px) {
  .radl-stage { padding-top: calc(var(--safe-top) + 58px); flex-direction: row; align-items: stretch; }
  .radl-stage .radl-pages { flex-direction: column; justify-content: flex-start; }
  .radl-grid { flex: 1; }
  .radl-tile { min-height: 0; padding: 20px 6px 26px; }
  .rt-score { font-size: clamp(26px, 12vh, 44px); }
}

/* ---------------- Ergebnis ---------------- */
.radl-podium { width: 100%; display: flex; flex-direction: column; gap: 6px; margin: 10px 0 6px; }
.rp-line {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: #fff;
  text-align: left;
}
.rp-line.is-me { background: rgba(255,255,255,.24); }
.rp-line { border-left: 5px solid var(--c1, rgba(255,255,255,.4)); }
.rp-pl { width: 22px; font-weight: var(--fw-black); font-size: var(--fs-md); opacity: .9; }
.rp-line .avatar { --sz: 28px; font-size: 10px; }
.rp-name { flex: 1; min-width: 0; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.rp-score { font-weight: var(--fw-black); opacity: .85; }
.rp-prize {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 99px;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap;
}
.rp-prize.pts { background: #fff; color: var(--fando-700); }
.rp-prize.palms { background: rgba(255,255,255,.18); color: #fff; }
.rp-prize.palms .palm-ic { width: 12px; height: 14px; }
.rp-prize.none { color: rgba(255,255,255,.55); }

/* ---------------- Die Ziehung (Auslosung der Reihenfolge) ----------------
   Dieselbe Bauform wie die Doppel-Auslosung (td-stage in components.css):
   dunkle Bühne, Losrollen mit lesbaren Namen, die nacheinander einrasten –
   hier eine Rolle je Position, mit Nummer davor. Beim Einrasten nimmt die
   Zeile die Farbe an, die das Feld im Scorer haben wird. Läuft bei ALLEN
   Mitspielern, nicht nur beim Organisator (js/screens/radl.js). */
.rd-stage {
  position: fixed; inset: 0; z-index: var(--z-celebrate);
  background: radial-gradient(120% 90% at 50% 12%, var(--ink-700) 0%, var(--ink-900) 62%, #161818 100%);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6) var(--sp-5);
  animation: backdrop-in var(--dur-3) ease both;
  overflow: hidden;
}
.rd-stage::after {
  content: ""; position: absolute; z-index: 0; right: -40px; bottom: -40px;
  width: 230px; aspect-ratio: 1133.91 / 1333.65;
  background: url("../img/logo-white.svg") no-repeat center / contain;
  opacity: 0.05; pointer-events: none;
}
.rd-stage.leaving { animation: backdrop-in var(--dur-2) ease reverse both; }
.rd-inner {
  position: relative; z-index: 1; width: min(100%, var(--app-max));
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-5);
  max-height: 100%;
}
.rd-head { text-align: center; }
.rd-eyebrow {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--fando-300);
}
.rd-title { margin-top: 6px; color: #fff; font-size: var(--fs-xl); letter-spacing: var(--tracking-tight); transition: opacity var(--dur-2); }
.rd-list {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  max-height: 58vh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  /* Luft für den Einrast-Ruck (td-lock skaliert die Zeile auf 106 %): Ohne
     sie ragte die Zeile kurz über den Rand der rollbaren Liste – und macOS
     wie Windows blitzen dann bei jedem Einrasten den Rollbalken auf (Paul,
     1.10.: „unten flackert ein weisser Strich, jedes Mal wenn eine Farbe
     kommt“). Darum seitlich Platz, kein Rollbalken, nur Fingerrollen. */
  padding: 4px 12px; margin: 0 -12px; width: calc(100% + 24px);
  scrollbar-width: none;
}
.rd-list::-webkit-scrollbar { display: none; }
.rd-list.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rd-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rd-nr {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.75);
  font-size: var(--fs-sm); font-weight: var(--fw-black);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  transition: background var(--dur-3), color var(--dur-3);
}
.rd-row.locked .rd-nr { background: #fff; color: var(--ink-900); }
/* Das Fenster, in dem der Namensstreifen vorbeiläuft – sichtbar ist genau eine Zeile. */
.rd-slot {
  position: relative; flex: 1; min-width: 0; height: 48px; overflow: hidden;
  border-radius: var(--r-md);
  background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: box-shadow var(--dur-3), background var(--dur-3), transform var(--dur-2) var(--ease-spring);
}
.rd-reel { will-change: transform; transition: filter var(--dur-2); }
.rd-stage.is-done .rd-reel { will-change: auto; }
.rd-slot.spinning .rd-reel { filter: blur(1.1px); }
.rd-stage.is-calm .rd-slot.spinning .rd-reel { filter: none; }
.rd-item { height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 10px; min-width: 0; }
.rd-item .avatar { width: 30px; height: 30px; font-size: var(--fs-2xs); }
.rd-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: rgba(255,255,255,.92); min-width: 0; }
/* Einrasten: Ruck, und die Zeile nimmt ihre Feldfarbe an. */
.rd-slot.locked {
  background: linear-gradient(135deg, var(--c1, #5aa233), var(--c2, #43811f));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), 0 0 22px rgba(0,0,0,.35);
  animation: td-lock 420ms var(--ease-spring);
}
.rd-slot.locked .rd-name { color: #fff; }
.rd-slot.locked .rd-item .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.rd-go {
  background: #fff; color: var(--fando-700); font-weight: var(--fw-bold); min-width: 200px;
  animation: fade-up var(--dur-4) var(--ease-out) both;
}
.rd-hint { color: rgba(255,255,255,.6); font-size: var(--fs-xs); text-align: center; animation: fade-up var(--dur-4) var(--ease-out) 120ms both; }
@media (prefers-reduced-motion: reduce) {
  .rd-slot.locked { animation: none; }
  .rd-slot.spinning .rd-reel { filter: none; }
}

/* „So läuft es ab“ im Erklär-Sheet: nummerierte Schritte, Fando-Ziffern. */
.radl-steps { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.radl-steps li {
  counter-increment: schritt; position: relative; padding-left: 34px;
  font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text);
}
.radl-steps li::before {
  content: counter(schritt); position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fando); color: #fff; font-size: var(--fs-2xs); font-weight: var(--fw-black);
}

/* Einstiegs-Anfragen im Status-Sheet (Admin gibt frei) + Punkt am (i). */
.rs-row.rs-req { gap: 8px; }
.rs-req .btn-sm { flex: none; }
.rule-note.rs-note { align-items: center; }
.rule-note.rs-note .btn-sm { flex: none; margin-left: auto; }
.scorer-fly .icon-btn { position: relative; }
.scorer-fly .icon-btn.has-req::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger, #e5484d); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
}

/* Live-Zeile am Startbildschirm: statt eines Spielstands die Gesichter
   der Mitspieler (überlappend, höchstens vier, Rest als „+N“). */
.d4-live .lv-faces { display: flex; align-items: center; flex: none; }
.d4-live .lv-faces .pr-avatar + .pr-avatar { margin-left: -9px; }
.d4-live .lv-faces .avatar { --sz: 28px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface); }
.d4-live.other .lv-faces .avatar { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.22); }
.d4-live .lv-faces .presence-more { margin-left: 4px; }

/* „Break“ am Erstgezogenen, erscheint mit dem Schlussbild der Ziehung. */
.rd-break {
  margin-left: auto; flex: none; height: 22px; padding: 0 9px; border-radius: 99px;
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.92); color: var(--ink-900);
  font-size: var(--fs-2xs); font-weight: var(--fw-black); letter-spacing: .08em; text-transform: uppercase;
  animation: pop-in 480ms var(--ease-spring) both;
}