/* /ranks/ "Ranks & Rewards" (seit 29.09.2026 nach dem freigegebenen Entwurf "Rangreise",
 * runde2/ranks-1, Emblem-Set C). Baut auf /assets/style.css auf (Tokens, .panel, .fig, .pill,
 * .btn, .faq-item, Rahmen) und aendert am Rahmen nichts: Leiste, Kopf, Logo, Fuss und Tab-Leiste
 * kommen unveraendert aus style.css. Farben nur ueber Tokens; Rangfarben ueber .rank-*
 * (--rk-glow, --rk-fg, --rk-bg, --rk-line). Embleme aus dem Sprite /assets/embleme.svg, ohne
 * eigene Kachel.
 * Aufbau: 1 Tokens, 2 Kopf mit Stand-Karte, 3 Rangreise, 4 Epoche, 5 Rechner, 6 Galerie,
 * 7 Share of the Week, 8 Einloesen, 9 Dunkel, 10 feste Hoehen der Stand-Karte, 11 Tablet und Handy. */

/* ============ 1 Tokens ============ */
:root {
    /* Kopf und Share of the Week sind in beiden Designs dunkel: Glasflaechen und Schrift auf dem Anker */
    --rj-glass: rgb(255 255 255 / 0.05);
    --rj-glass-2: rgb(255 255 255 / 0.09);
    --rj-glass-line: rgb(255 255 255 / 0.13);
    --rj-on-dark: #ffffff;
    --rj-on-dark-soft: rgb(255 255 255 / 0.82);
    --rj-accent-dark: var(--anchor-code);
    --rj-error-dark: #fca5a5;
    --rj-card-shadow: 0 34px 70px -34px rgb(0 0 0 / 0.75);
    /* Pillen auf dunklem Grund: in beiden Designs wie im dunklen Design (kein heller Aufkleber) */
    --rj-ok: #4ade80; --rj-ok-bg: rgb(34 197 94 / 0.14); --rj-ok-line: rgb(34 197 94 / 0.35);
    --rj-warn: #fbbf24; --rj-warn-bg: rgb(251 191 36 / 0.12); --rj-warn-line: rgb(251 191 36 / 0.35);
    /* Pfad und Vitrinen */
    --rj-track: var(--line-strong);
    --rj-case: var(--sunken);
    --rj-case-floor: rgb(23 21 43 / 0.16);
    /* Gutschein */
    --rj-deep: #2a1d8f;
}

/* ============ 2 Kopf mit Suche und Stand-Karte ============ */
.rj-hero { position: relative; overflow: hidden; padding: 56px 0 64px; color: var(--anchor-text);
    background:
        radial-gradient(44rem 26rem at 80% 18%, color-mix(in srgb, var(--brand) 42%, transparent), transparent 70%),
        radial-gradient(34rem 20rem at 0% 110%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 70%),
        var(--anchor); }
.rj-hero-arc { position: absolute; inset: 0; width: 100%; height: 100%; color: rgb(255 255 255 / 0.13); pointer-events: none; }
.rj-hero-arc path { vector-effect: non-scaling-stroke; }
.rj-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 31rem; gap: 56px; align-items: center; }
.rj-hero-copy { min-width: 0; }
.rj-hero .eyebrow { color: var(--rj-accent-dark); }
.rj-hero h1 { color: var(--rj-on-dark); font-size: var(--fs-h1); letter-spacing: -0.035em; line-height: 1.04; }
.rj-lead { margin-top: 18px; max-width: 35rem; font-size: var(--fs-lg); line-height: 1.6; color: var(--anchor-text); }
.rj-lead strong { color: var(--rj-on-dark); }
.rj-hero :focus-visible { outline-color: var(--rj-accent-dark); }

/* Suche "Deine Rewards": eigener Kasten, damit klar ist, wo die Adresse hinkommt */
.rj-search { position: relative; margin-top: 26px; max-width: 35rem; padding: 18px 18px 16px; border-radius: var(--r-lg); background: var(--anchor-2); border: 1px solid var(--rj-glass-line); box-shadow: 0 24px 50px -30px rgb(0 0 0 / 0.7); }
.rj-search-label { display: flex; align-items: center; gap: 0.5rem; font-size: 1.0625rem; font-weight: 800; color: var(--rj-on-dark); letter-spacing: -0.01em; }
.rj-search-label svg { width: 18px; height: 18px; color: var(--rj-accent-dark); }
.rj-search-sub { margin-top: 4px; font-size: var(--fs-sm); line-height: 1.5; color: var(--anchor-text); }
.rj-search-row { display: flex; gap: 8px; margin-top: 12px; min-width: 0; }
.rj-search .addr-input { height: 52px; font-size: 1rem; }
.rj-search .btn { min-height: 52px; padding: 0 1.5rem; }
.rj-hero .rj-error { color: var(--rj-error-dark); }
.rj-facts { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rj-facts li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); font-weight: 700; color: var(--rj-on-dark); }
.rj-facts svg { width: 17px; height: 17px; color: var(--rj-accent-dark); }

/* Stand-Karte: Glas auf dem dunklen Kopf, getoent in der Farbe des Rangs. Spalte, damit eine
 * Mindesthoehe (siehe unten, ab 1024 px) als Luft ueber der Fusszeile landet. */
.rj-card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; padding: 22px 24px 20px; border-radius: 24px; color: var(--anchor-text);
    background: linear-gradient(165deg, var(--anchor-3) 0%, var(--anchor-2) 62%); border: 1px solid var(--rj-glass-line); box-shadow: var(--rj-card-shadow); }
.rj-card::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(20rem 13rem at 16% 22%, color-mix(in srgb, var(--rk-glow) 24%, transparent), transparent 72%); }
.rj-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 28px; }
.rj-card-title { font-size: var(--fs-sm); font-weight: 700; color: var(--anchor-muted); }
.rj-card-head .pill { margin-left: auto; }
.rj-card-addr { font-size: 0.8125rem; color: var(--rj-on-dark); background: var(--rj-glass-2); padding: 0.15rem 0.5rem; border-radius: 6px; white-space: nowrap; overflow-wrap: normal; }
.rj-me { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 12px; }
.rj-me-emb { display: block; width: 116px; height: 116px; filter: drop-shadow(0 16px 26px color-mix(in srgb, var(--rk-glow) 50%, transparent)); }
/* Platzhalter, solange eine Adresse laedt oder nichts zu zeigen ist */
.rj-me-ph { display: block; width: 116px; height: 116px; border-radius: 50%; border: 1px dashed var(--rj-glass-line); background: radial-gradient(closest-side, var(--rj-glass-2), transparent); }
.rj-me-kicker { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--rk-glow); }
.rj-me-name { margin-top: 2px; font-size: 2.125rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--rj-on-dark); }
.rj-me-sub { margin-top: 6px; font-size: var(--fs-sm); color: var(--anchor-text); }
.rj-me-sub b { color: var(--rj-on-dark); font-weight: 800; }
.rj-me-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rj-me-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0 0; border: 1px solid var(--rj-glass-line); border-radius: var(--r-md); }
.rj-me-figs > div { min-width: 0; padding: 12px 14px; }
.rj-me-figs > div + div { border-left: 1px solid var(--rj-glass-line); }
.rj-me-figs dt { font-size: 0.8125rem; font-weight: 600; color: var(--anchor-muted); }
.rj-me-figs dd { margin: 2px 0 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--rj-on-dark); font-variant-numeric: tabular-nums; }
/* Zwei Zeilen Platz fuer die kleine Zeile: Geruest, Beispiel und Stand bleiben gleich hoch */
.rj-me-figs dd.rj-sub { min-height: 2.7em; margin-top: 3px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; line-height: 1.35; color: var(--anchor-text); }
.rj-me-prog { margin-top: 16px; }
.rj-me-row { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--anchor-text); }
.rj-me-row strong { color: var(--rj-on-dark); }
.rj-me-row .rj-num { font-weight: 700; color: var(--rj-on-dark); font-variant-numeric: tabular-nums; }
.rj-segs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; height: 8px; margin: 8px 0 14px; }
.rj-segs i { display: block; border-radius: 3px; background: linear-gradient(90deg, var(--rk-glow) calc(var(--f, 0) * 100%), var(--rj-glass-line) 0); }
.rj-bar-dark { display: block; height: 8px; margin: 8px 0 14px; border-radius: 99px; background: var(--rj-glass-line); overflow: hidden; }
.rj-bar-dark i { display: block; height: 100%; border-radius: inherit; background: var(--rk-glow); }
.rj-dots { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: -1px; }
.rj-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--anchor-muted); }
.rj-dots i.on { background: var(--rk-glow); border-color: var(--rk-glow); }
.rj-me-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.rj-me-actions .text-link { color: var(--rj-accent-dark); margin-left: 4px; }
.rj-me-note { margin-top: 12px; font-size: var(--fs-xs); line-height: 1.5; color: var(--anchor-muted); }
.rj-card > .rj-me-note { margin-top: auto; padding-top: 12px; }
.rj-me-note button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--rj-accent-dark); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rj-card-msg { margin-top: 14px; font-size: 0.9375rem; line-height: 1.55; color: var(--anchor-text); }
.rj-card-msg strong { color: var(--rj-on-dark); }
/* Pillen in der Karte: Leuchtfarbe auf getoentem Grund, in beiden Designs gleich */
.rj-card .pill { background: var(--rj-glass-2); border-color: var(--rj-glass-line); color: var(--rj-on-dark-soft); }
.rj-card .pill.rank { background: color-mix(in srgb, var(--rk-glow) 14%, transparent); border-color: color-mix(in srgb, var(--rk-glow) 34%, transparent); color: var(--rk-glow); }
.rj-card .pill-ok { background: var(--rj-ok-bg); border-color: var(--rj-ok-line); color: var(--rj-ok); }
.rj-card .pill-warn { background: var(--rj-warn-bg); border-color: var(--rj-warn-line); color: var(--rj-warn); }
/* Pillen mit Erklaerung sind per Tab erreichbar; der Fokusring bleibt rund wie die Pille */
.rj-card .pill[tabindex] { cursor: help; }
.rj-card .pill[tabindex]:focus-visible { border-radius: var(--r-pill); }

/* Geruest, solange eine Adresse laedt: graue Balken so hoch wie die Zeile, in der sie stehen.
 * Auf dem dunklen Kopf und im Share of the Week (beide dunkel) gleich. */
.rj-ph { display: inline-block; width: var(--w, 6em); max-width: 100%; height: 0.72em; border-radius: 6px; background: var(--rj-glass-2); vertical-align: middle; animation: rj-pulse 1.2s ease-in-out infinite alternate; }
/* So hoch wie eine .pill (Meilenstein, Punktebonus): 1,4 x 0,8125rem + 2 x 0,15rem + 2 px Rand */
.rj-ph-pill { height: calc(1.4375rem + 2px); border-radius: var(--r-pill); }
@keyframes rj-pulse { from { opacity: 1; } to { opacity: 0.5; } }

/* ============ 3 Die Rangreise ============ */
.rj-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; }
.rj-head-copy { flex: 1 1 30rem; max-width: 46rem; }
.rj-today { flex: none; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-sm); }
.rj-today-num { margin-top: 2px; font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.rj-today-unit { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0; color: var(--text); }

/* Waagerecht: sechs Spalten, eine Linie durch die Emblem-Mitten. Jede Stufe zeichnet ihr
 * Stueck bis zur naechsten; --p ist der Fortschritt auf diesem Stueck (0 bis 1). */
.rj-path { --e: 104px; --g: 16px; --top: 38px; list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--g); }
.rj-stage { position: relative; isolation: isolate; min-width: 0; padding: var(--top) 6px 18px; text-align: center; }
.rj-stage.is-me::before { content: ''; position: absolute; z-index: -1; inset: 26px -6px 0; border-radius: var(--r-lg); background: var(--brand-50); border: 1px solid var(--brand-100); }
.rj-track { position: absolute; z-index: 0; top: calc(var(--top) + var(--e) / 2 - 2px); left: 50%; width: calc(100% + var(--g)); height: 4px; border-radius: 4px;
    background: repeating-linear-gradient(90deg, var(--rj-track) 0 6px, transparent 6px 12px); }
.rj-stage:last-child .rj-track { display: none; }
.rj-fill { position: absolute; top: 0; left: 0; height: 100%; width: calc(var(--e) / 2 + (100% - var(--e)) * var(--p, 0)); border-radius: inherit; background: var(--brand); }
.rj-stage:not(.is-done):not(.is-me) .rj-fill { display: none; }
.rj-stage.is-me .rj-fill::after { content: ''; position: absolute; top: 50%; right: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); border: 3px solid var(--bg); transform: translateY(-50%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
.rj-emb-wrap { position: relative; z-index: 1; display: block; width: var(--e); height: var(--e); margin: 0 auto; }
.rj-emb-wrap::before { content: ''; position: absolute; z-index: -1; inset: -16%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--rk-glow) 34%, transparent), transparent); }
.rj-emb { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 16px color-mix(in srgb, var(--rk-glow) 32%, transparent)); transition: transform .2s ease; }
.rj-stage:hover .rj-emb { transform: translateY(-3px) scale(1.03); }
.rj-stage-body { margin-top: 14px; }
.rj-stage h3 { font-size: 1.1875rem; }
.rj-you { position: absolute; z-index: 2; top: 0; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: 99px; background: var(--brand); color: #fff; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; box-shadow: 0 8px 16px -8px rgb(73 51 209 / 0.8); }
.rj-you::after { content: ''; position: absolute; z-index: -1; left: 50%; bottom: -4px; width: 10px; height: 10px; border-radius: 2px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.rj-when { margin-top: 3px; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; color: var(--muted); }
.rj-mult { display: inline-block; margin-top: 10px; padding: 0.15rem 0.65rem; border-radius: 99px; border: 1px solid var(--rk-line); background: var(--rk-bg); color: var(--rk-fg); font-size: 0.875rem; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Zaehler: schon vor den Daten so hoch wie Zahl plus Balken (Zeile + 12 px) */
.rj-count { min-height: calc(1.6em + 12px); margin-top: 10px; font-size: 0.8125rem; color: var(--text); }
.rj-count b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.rj-meter { display: block; width: 72px; height: 6px; margin: 6px auto 0; border-radius: 99px; background: var(--bar-track); overflow: hidden; }
.rj-meter i { display: block; height: 100%; border-radius: inherit; background: var(--bar); }
.rj-none { display: inline-block; padding: 0.1rem 0.6rem; border: 1px dashed var(--line-strong); border-radius: 99px; color: var(--muted); font-weight: 600; line-height: 1.5; }
.rj-text { margin-top: 8px; font-size: 0.8125rem; line-height: 1.5; color: var(--text); }
.rj-me-line { margin: 18px auto 0; max-width: 52rem; text-align: center; font-size: 0.9375rem; color: var(--text); }
.rj-me-line:empty { display: none; }
/* Platz fuer den ganzen Satz, auch solange er noch laedt (zwei Zeilen; schmaler: drei, vier) */
.rj-me-line { min-height: 3.2em; }
.rj-me-line b { color: var(--brand-strong); }

/* ============ 4 Was eine Epoche ist ============ */
.rj-epoch { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 32px; align-items: center; margin-top: 28px; padding: 24px 28px; }
.rj-epoch h3 { font-size: var(--fs-md); }
.rj-epoch p { margin-top: 6px; font-size: 0.9375rem; }
/* Laufende Epoche aus /pool: zwei Zeilen Platz, bevor sie kommt */
.rj-epoch .rj-epoch-now { min-height: 3.2em; color: var(--muted); font-size: var(--fs-sm); }
.rj-days { margin: 0; min-width: 0; }
.rj-days-strip { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.rj-days-strip li { position: relative; height: 30px; border-radius: 6px; background: var(--card); border: 1px solid var(--line-strong); }
.rj-days-strip li.on { background: var(--brand); border-color: var(--brand); }
.rj-days-strip li.out { background: repeating-linear-gradient(135deg, var(--off-line) 0 3px, var(--off-bg) 3px 7px); border-color: var(--off-line); }
.rj-days-strip li.is-count { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ok); }
/* Beschriftung ueber dem siebten aktiven Tag: echtes Element statt content, damit sie uebersetzt wird */
.rj-days-lbl { position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); font-size: 0.6875rem; font-weight: 800; line-height: 1.2; color: var(--ok); white-space: nowrap; }
.rj-days-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); }
.rj-days-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.rj-days-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--card); border: 1px solid var(--line-strong); }
.rj-days-legend i.on { background: var(--brand); border-color: var(--brand); }
.rj-days-legend i.out { background: repeating-linear-gradient(135deg, var(--off-line) 0 2px, var(--off-bg) 2px 5px); border-color: var(--off-line); }
.rj-days figcaption { margin-top: 8px; font-size: 0.8125rem; line-height: 1.5; color: var(--text); }
.rj-epoch-rule { padding-left: 24px; border-left: 1px solid var(--line); }

/* ============ 5 Punkte-Rechner ============ */
.rj-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; overflow: hidden; }
.rj-calc-in { display: grid; gap: 24px; align-content: start; padding: 26px 28px 28px; }
.rj-calc-in fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.rj-calc-in legend { margin-bottom: 10px; padding: 0; font-size: var(--fs-sm); font-weight: 800; color: var(--ink); }
/* Geraete als Raster; das sechste Feld ist die eigene Hashrate */
.rj-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rj-chip, .rj-rk-opt, .rj-seg label { position: relative; display: block; min-width: 0; }
.rj-chip input[type="radio"], .rj-rk-opt input, .rj-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rj-chip > span { display: flex; flex-direction: column; justify-content: center; gap: 1px; height: 100%; min-height: 56px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card); cursor: pointer; transition: border-color .15s, background-color .15s; }
.rj-chip b { font-size: 0.875rem; color: var(--ink); line-height: 1.25; }
.rj-chip small { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rj-chip:hover > span, .rj-rk-opt:hover > span, .rj-seg label:hover > span { border-color: var(--line-strong); }
.rj-chip input:checked + span, .rj-rk-opt input:checked + span, .rj-seg input:checked + span, .rj-chip-own.is-on > span { border-color: var(--brand); background: var(--brand-50); }
.rj-chip input:focus-visible + span, .rj-rk-opt input:focus-visible + span, .rj-seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.rj-chip-own > span { cursor: default; padding: 6px 10px 7px 14px; }
.rj-chip-own label { cursor: pointer; }
.rj-own-field { display: flex; align-items: center; gap: 6px; }
.rj-own-field input { width: 100%; min-width: 0; height: 28px; padding: 0 0.5rem; font: inherit; font-size: 0.875rem; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: 6px; font-variant-numeric: tabular-nums; }
.rj-own-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(73 51 209 / 0.18); }
.rj-rk-pick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.rj-rk-opt > span { display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.rj-rk-opt svg { width: 42px; height: 42px; margin-bottom: 4px; filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--rk-glow) 30%, transparent)); }
.rj-rk-opt b { font-size: 0.75rem; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.rj-rk-opt small { font-size: 0.6875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rj-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rj-seg.rj-seg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Gruppen im Rechner seit 21.10.2026: keine + fuenf Stufen, zwei Reihen zu drei */
.rj-seg.rj-seg-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rj-seg.rj-seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rj-seg label > span { display: grid; justify-items: center; gap: 1px; padding: 8px 6px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card); font-size: 0.875rem; font-weight: 700; color: var(--ink); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.rj-seg small { font-size: 0.6875rem; font-weight: 600; color: var(--muted); white-space: nowrap; }

.rj-calc-out { min-width: 0; padding: 26px 28px 24px; border-left: 1px solid var(--line); background: linear-gradient(180deg, var(--brand-50), var(--card) 70%); }
.rj-calc-hint { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 12px; padding: 0.2rem 0.65rem; border-radius: 99px; background: var(--card); border: 1px solid var(--brand-200); color: var(--brand-strong); font-size: 0.8125rem; font-weight: 700; }
.rj-big { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
.rj-big > span:first-child { font-size: 3.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.rj-big-unit { font-size: var(--fs-md); font-weight: 700; color: var(--muted); }
.rj-formula { margin-top: 10px; font-size: var(--fs-sm); color: var(--text); font-variant-numeric: tabular-nums; }
.rj-out-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.rj-out-figs .fig { padding: 12px 14px; }
.rj-out-figs .fig + .fig { border-left: 1px solid var(--line); }
.rj-bars-fig { margin: 20px 0 0; }
.rj-bars-title { font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.rj-bars { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.rj-bars li { display: grid; grid-template-columns: 22px 5.4rem minmax(0, 1fr) 7.6rem; align-items: center; gap: 10px; font-size: 0.8125rem; }
.rj-bars svg { width: 22px; height: 22px; }
.rj-bars .nm { font-weight: 600; color: var(--text); white-space: nowrap; }
.rj-bars .bar { display: block; height: 12px; min-width: 0; border-left: 1px solid var(--line-strong); }
.rj-bars .bar i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--bar) 34%, var(--card)); }
.rj-bars .v { text-align: right; white-space: nowrap; color: var(--text); font-variant-numeric: tabular-nums; }
.rj-bars li.is-sel .nm, .rj-bars li.is-sel .v { color: var(--ink); font-weight: 800; }
.rj-bars li.is-sel .bar i { background: var(--bar); }

/* ============ 6 Galerie: Gruppenstufen und Auszeichnungen ============ */
.rj-gal-h { display: flex; align-items: center; gap: 0.5rem; margin: 6px 0 14px; font-size: var(--fs-md); }
.rj-gal-h svg { width: 18px; height: 18px; color: var(--brand); }
.rj-gal-note + .rj-gal-h { margin-top: 40px; }
.rj-gal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.rj-gal.rj-gal-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rj-gal.rj-gal-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rj-gal-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
/* Vitrine: das Emblem auf eigenem Grund, mit Lichtkegel in der Rangfarbe und Schatten darunter */
.rj-case { --es: 120px; position: relative; display: grid; place-items: center; height: 184px; border-bottom: 1px solid var(--line);
    background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--rk-glow) 30%, transparent) 0, transparent 58%), var(--rj-case); }
.rj-case::after { content: ''; position: absolute; left: 50%; top: calc(50% + var(--es) / 2 - 12px); width: calc(var(--es) * 0.8); height: 14px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(closest-side, var(--rj-case-floor), transparent); }
.rj-gal-emb { position: relative; z-index: 1; width: var(--es); height: var(--es); margin-top: -8px; filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--rk-glow) 40%, transparent)); transition: transform .2s ease; }
.rj-gal-card:hover .rj-gal-emb { transform: translateY(-3px) rotate(-2deg); }
.rj-gal-body { display: flex; flex-direction: column; flex: 1; padding: 16px 20px 18px; }
.rj-gal-body h4 { font-size: 1.1875rem; color: var(--ink); letter-spacing: -0.01em; }
.rj-gal-cond { margin-top: 4px; font-size: 0.9rem; line-height: 1.5; color: var(--text); }
.rj-gal-mult { align-self: flex-start; margin: 10px 0 14px; padding: 0.15rem 0.65rem; border-radius: 12px; border: 1px solid var(--rk-line); background: var(--rk-bg); color: var(--rk-fg); font-size: 0.8125rem; font-weight: 800; }
/* "Heute"-Zeile unten buendig, auch wenn die Bedingung unterschiedlich lang ist; zwei Zeilen
 * Platz schon vor /pool und /groups (Linie + 12 px + 2 Zeilen), damit darunter nichts rutscht */
.rj-gal-today { min-height: calc(3.2em + 13px); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 0.8125rem; color: var(--muted); }
.rj-gal-today code { background: none; padding: 0; font-size: 0.8125rem; color: var(--ink); white-space: nowrap; overflow-wrap: normal; }
.rj-gal-today b { color: var(--ink); }
.rj-gal-note { margin-top: 14px; font-size: var(--fs-sm); color: var(--muted); }
.rj-gal-note .text-link { margin-left: 4px; }
.rj-rule { margin-top: 32px; padding: 20px 24px; border-radius: var(--r-lg); border: 1px dashed var(--line-strong); background: var(--band); }
.rj-rule-title { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rj-rule-eq { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.rj-term { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-size: 0.9375rem; color: var(--text); }
.rj-term svg { width: 30px; height: 30px; }
.rj-term b { color: var(--ink); font-weight: 800; }
.rj-term-total { padding: 9px 16px; background: var(--brand); border-color: var(--brand); color: #fff; }
.rj-term-total b { color: #fff; }
.rj-op { font-size: 1.25rem; font-weight: 800; color: var(--muted); }
.rj-rule-text { margin-top: 12px; font-size: 0.9375rem; color: var(--text); }

/* ============ 7 Share of the Week ============ */
.rj-sotw-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.rj-sotw .eyebrow { color: var(--rj-accent-dark); }
.rj-sotw :focus-visible { outline-color: var(--rj-accent-dark); }
.rj-holder { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 26px; padding: 18px 22px 18px 18px; border-radius: var(--r-lg); background: var(--rj-glass); border: 1px solid var(--rj-glass-line); }
.rj-holder-emb { display: block; width: 108px; height: 108px; filter: drop-shadow(0 14px 24px color-mix(in srgb, var(--rk-glow) 45%, transparent)); }
.rj-holder-body { min-width: 0; }
.rj-holder-kicker { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--rk-glow); }
.rj-holder-addr { display: block; margin-top: 6px; padding: 0; background: none; font-size: 1rem; color: var(--rj-on-dark); overflow-wrap: anywhere; }
.rj-holder-val { margin-top: 4px; font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--rj-on-dark); font-variant-numeric: tabular-nums; }
.rj-holder-meta { margin-top: 4px; font-size: 0.8125rem; color: var(--anchor-text); }
.rj-holder-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* Pillen auf dem dunklen Abschnitt: wie im dunklen Design, auch im hellen */
.rj-holder .pill-gold { background: var(--rj-warn-bg); border-color: var(--rj-warn-line); color: var(--rj-warn); }
.rj-holder .pill-brand { background: color-mix(in srgb, var(--rj-accent-dark) 14%, transparent); border-color: color-mix(in srgb, var(--rj-accent-dark) 34%, transparent); color: var(--rj-accent-dark); }
/* Die Zeile steht mit dem Kalender sofort da; der Spitzenreiter kommt dazu, ohne dass sie waechst */
.rj-running { min-height: 3.1em; margin-top: 16px; font-size: 0.9375rem; line-height: 1.55; color: var(--anchor-text); }
.rj-running:empty { display: none; }
.rj-running strong { color: var(--rj-on-dark); }
.rj-running code { background: var(--rj-glass-2); color: var(--rj-on-dark); }
.rj-hist { margin: 0; padding: 22px 24px 18px; border-radius: var(--r-lg); background: var(--anchor-2); border: 1px solid var(--anchor-line); }
.rj-hist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.9375rem; font-weight: 800; color: var(--rj-on-dark); }
.rj-hist-unit { font-size: var(--fs-xs); font-weight: 600; color: var(--anchor-muted); }
.rj-hist-list { list-style: none; margin: 12px 0 0; padding: 0; }
.rj-hist-list li { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--anchor-line); }
.rj-hist-list li.rj-hist-note { display: block; font-size: 0.8125rem; color: var(--anchor-muted); }
.rj-hist-wk { font-size: 0.75rem; line-height: 1.35; color: var(--anchor-muted); }
.rj-hist-wk b { display: block; font-size: 0.9375rem; color: var(--rj-on-dark); }
.rj-hist-main { min-width: 0; }
.rj-hist-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 0.8125rem; }
.rj-hist-top code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; padding: 0; background: none; font-size: 0.8125rem; color: var(--anchor-text); }
.rj-hist-top .v { margin-left: auto; font-weight: 800; color: var(--rj-on-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rj-hist-tag { flex: none; padding: 0 0.45rem; border-radius: 99px; font-size: 0.6875rem; font-weight: 800; line-height: 1.6; white-space: nowrap; background: var(--rj-glass-2); color: var(--rj-on-dark); }
.rj-hist-tag.is-title { background: var(--rj-accent-dark); color: var(--anchor); }
.rj-hist-bar { display: block; height: 12px; margin-top: 7px; border-left: 1px solid var(--anchor-muted); }
.rj-hist-bar i { display: block; height: 100%; min-width: 3px; border-radius: 0 4px 4px 0; background: var(--rj-accent-dark); }
.rj-hist-list li.is-running .rj-hist-bar i { background: repeating-linear-gradient(135deg, var(--rj-accent-dark) 0 3px, transparent 3px 7px); box-shadow: inset 0 0 0 1px var(--rj-accent-dark); }
.rj-hist-foot { margin-top: 10px; font-size: var(--fs-xs); color: var(--anchor-muted); }

/* ============ 8 Einloesen und sechs Schritte ============ */
.rj-redeem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 48px; align-items: start; }
.rj-redeem-copy { min-width: 0; }
.rj-coupon { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 30rem; margin-top: 24px; border-radius: 18px; color: #fff;
    background: radial-gradient(22rem 11rem at 0% 0%, rgb(255 255 255 / 0.18), transparent 60%), linear-gradient(135deg, var(--brand) 0%, var(--rj-deep) 100%); box-shadow: 0 20px 40px -24px rgb(42 29 143 / 0.9); }
.rj-coupon::before, .rj-coupon::after { content: ''; position: absolute; left: calc(50% - 11px); width: 22px; height: 22px; border-radius: 50%; background: var(--bg); }
.rj-coupon::before { top: -11px; }
.rj-coupon::after { bottom: -11px; }
.rj-coupon-val, .rj-coupon-code { min-width: 0; padding: 20px 22px; }
.rj-coupon-code { border-left: 2px dashed rgb(255 255 255 / 0.38); }
.rj-coupon-num { display: block; font-size: 2.4rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.rj-coupon-sub { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--rj-on-dark-soft); }
.rj-coupon-lbl { display: block; font-size: 0.75rem; font-weight: 700; color: var(--rj-on-dark-soft); }
.rj-coupon code { display: block; margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: rgb(255 255 255 / 0.15); color: #fff; font-size: 0.9375rem; letter-spacing: 0.05em; white-space: nowrap; overflow-wrap: normal; }
.rj-rules { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.rj-rules li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9375rem; color: var(--text); }
.rj-rules svg { width: 18px; height: 18px; margin-top: 3px; color: var(--brand); }
.rj-redeem-actions { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 24px; }
.rj-steps-box { padding: 26px 28px 24px; border-radius: var(--r-lg); background: var(--band); border: 1px solid var(--line); }
.rj-steps-h { font-size: var(--fs-xl); }
.rj-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.rj-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }
.rj-steps .step-no { margin: 0; grid-row: auto; }
.rj-steps h4 { font-size: var(--fs-md); color: var(--ink); line-height: 1.3; margin-top: 4px; }
.rj-steps p { margin-top: 4px; font-size: 0.875rem; line-height: 1.55; }
.rj-steps code { white-space: nowrap; overflow-wrap: normal; }
.rj-steps-btn { margin-top: 22px; }
.rj-faq { margin-top: 0; }

/* ============ 9 Dunkel ============ */
:root[data-theme="dark"] {
    --rj-case: #15122e;
    --rj-case-floor: rgb(0 0 0 / 0.55);
    --rj-deep: #231a78;
}
:root[data-theme="dark"] .rj-mult, :root[data-theme="dark"] .rj-gal-mult { color: var(--rk-glow); }
:root[data-theme="dark"] .rj-stage.is-me::before { background: color-mix(in srgb, var(--brand) 12%, transparent); border-color: var(--brand-200); }
/* Im Dunkeln ist das Feld nicht weiss: ein hellerer Rand zeigt, wo die Adresse hinkommt */
:root[data-theme="dark"] .rj-search .addr-input { border-color: var(--brand-300); }
/* Fokus im Suchfeld: der Ring aus style.css (18 % Blau) verschwindet auf dem dunklen Kopf, und im
 * dunklen Design schlug die Regel darueber den Rand von .addr-input:focus. Hellvioletter Ring in
 * beiden Designs, im Dunkeln dazu der Rand in derselben Farbe. */
.rj-search .addr-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rj-accent-dark) 60%, transparent); }
:root[data-theme="dark"] .rj-search .addr-input:focus { border-color: var(--rj-accent-dark); }

/* ============ 10 Feste Hoehen der Stand-Karte (ab 1024 px, Karte neben dem Text) ============
 * Der Kopf zentriert Text und Karte; waechst die Karte, springen H1 und Suche mit. Darum hat jeder
 * Zustand seine Hoehe schon, bevor ranks.js zeichnet: theme.js setzt data-me, wenn eine Adresse
 * gemerkt ist oder im Link steht, dann kommt die Karte einer Adresse, sonst das Beispiel.
 * Werte gemessen (Scratchpad pw/fix-ranks-heights.mjs), bei Textaenderungen in der Karte neu messen. */
@media (min-width: 1024px) {
    .rj-card { --rj-card-ex: 32.83rem; --rj-card-addr: 35rem; }
    :root:not([data-me]) .rj-card:not(.is-ready), .rj-card.is-example { min-height: var(--rj-card-ex); }
    :root[data-me] .rj-card:not(.is-ready), .rj-card.is-addr { min-height: var(--rj-card-addr); }
    /* Eine Reihe Pillen (Gruppe, Auszeichnung, Meilenstein) aendert die Hoehe nicht */
    .rj-card.is-addr .rj-me { min-height: calc(6.2625rem + 20px); }
}
@media (min-width: 1024px) and (max-width: 1099px) {
    .rj-card { --rj-card-ex: 31.58rem; --rj-card-addr: 34.66rem; }
    .rj-card.is-addr .rj-me { min-height: calc(5.925rem + 20px); }
}

/* ============ 11 Tablet und Handy ============ */
@media (max-width: 1099px) {
    .rj-hero-grid { grid-template-columns: minmax(0, 1fr) 27.5rem; gap: 36px; }
    .rj-me { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
    .rj-me-emb, .rj-me-ph { width: 96px; height: 96px; }
    .rj-me-name { font-size: 1.8rem; }
    .rj-epoch { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
    .rj-epoch-rule { grid-column: 1 / -1; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
    .rj-rk-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rj-gal.rj-gal-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rj-gal.rj-gal-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rj-gal.rj-gal-5 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
    .rj-hero { padding: 40px 0 48px; }
    .rj-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .rj-card { max-width: 36rem; }
    /* Senkrecht: die Linie laeuft links durch die Embleme, Text rechts daneben */
    .rj-path { --e: 76px; --g: 12px; --top: 14px; grid-template-columns: minmax(0, 1fr); row-gap: var(--g); max-width: 44rem; margin-top: 26px; }
    .rj-stage { display: grid; grid-template-columns: var(--e) minmax(0, 1fr); column-gap: 18px; align-items: start; padding: var(--top) 14px 14px; text-align: left; }
    .rj-stage.is-me::before { inset: 0; }
    .rj-emb-wrap { margin: 0; }
    .rj-track { top: calc(var(--top) + var(--e) / 2); left: calc(14px + var(--e) / 2 - 2px); width: 4px; height: calc(100% + var(--g));
        background: repeating-linear-gradient(180deg, var(--rj-track) 0 6px, transparent 6px 12px); }
    .rj-fill { width: 100%; height: calc(var(--e) / 2 + (100% - var(--e)) * var(--p, 0)); }
    .rj-stage.is-me .rj-fill::after { top: auto; right: 50%; bottom: -8px; transform: translateX(50%); }
    .rj-stage-body { margin-top: 2px; }
    .rj-stage h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .rj-you { position: static; transform: none; padding: 0.1rem 0.55rem; box-shadow: none; }
    .rj-you::after { display: none; }
    .rj-mult { margin-top: 8px; }
    .rj-meter { margin: 6px 0 0; }
    .rj-me-line { margin-left: 0; text-align: left; }
    .rj-calc { grid-template-columns: minmax(0, 1fr); }
    .rj-calc-out { border-left: 0; border-top: 1px solid var(--line); }
    .rj-rk-pick { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .rj-sotw-grid, .rj-redeem { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 899px) {
    .rj-gal, .rj-gal.rj-gal-4, .rj-gal.rj-gal-5 { grid-template-columns: minmax(0, 1fr); }
    .rj-gal-card { flex-direction: row; }
    .rj-case { --es: 84px; flex: none; width: 132px; height: auto; min-height: 150px; border-bottom: 0; border-right: 1px solid var(--line); }
    .rj-gal-emb { margin-top: -10px; }
    .rj-epoch { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .rj-epoch-rule { grid-column: auto; }
}
/* Karten als Zeilen mit breitem Text: jede "Heute"-Zeile und die laufende Epoche passen in eine Zeile */
@media (min-width: 640px) and (max-width: 899px) {
    .rj-gal-today { min-height: calc(1.6em + 13px); }
    .rj-epoch .rj-epoch-now { min-height: 1.6em; }
}
@media (max-width: 767px) {
    .rj-hero-arc { display: none; }
    .rj-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rj-hero { padding: 28px 0 36px; }
    .rj-hero h1 { font-size: 2.15rem; }
    .rj-lead { margin-top: 12px; font-size: var(--fs-md); }
    .rj-search { margin-top: 20px; padding: 14px; }
    .rj-facts { gap: 6px 16px; margin-top: 16px; }
    .rj-card { padding: 18px 16px 16px; border-radius: 20px; }
    .rj-me { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
    .rj-me-emb, .rj-me-ph { width: 84px; height: 84px; }
    .rj-me-name { font-size: 1.625rem; }
    .rj-me-figs dd { font-size: 1.375rem; }
    .rj-me-figs > div { padding: 10px 12px; }
    /* Tippflaechen auf dem Handy mindestens 40 px hoch */
    .rj-me-actions .btn { flex: 1 1 auto; min-height: 44px; }
    .rj-me-actions .text-link, .rj-redeem-actions .text-link, #fragen .sec-head .text-link, .rj-gal-note .text-link { min-height: 40px; }
    .rj-me-note button { display: inline-flex; align-items: center; min-height: 40px; }
    .rj-steps-btn { min-height: 44px; }
    .rj-today { width: 100%; }
    .rj-path { --e: 64px; --top: 12px; }
    .rj-stage { column-gap: 14px; padding: var(--top) 10px 12px; }
    .rj-track { left: calc(10px + var(--e) / 2 - 2px); }
    .rj-stage h3 { font-size: 1.0625rem; }
    .rj-epoch { padding: 18px 16px; }
    .rj-days-strip { gap: 3px; }
    .rj-days-strip li { height: 26px; border-radius: 5px; }
    .rj-calc-in, .rj-calc-out { padding: 18px 16px; }
    .rj-chip > span { padding: 7px 11px; }
    .rj-own-field input { height: 40px; }
    .rj-rk-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rj-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rj-seg.rj-seg-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rj-seg.rj-seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rj-big > span:first-child { font-size: 2.75rem; }
    .rj-out-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rj-out-figs .fig:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
    .rj-bars li { grid-template-columns: 20px 4.6rem minmax(0, 1fr) auto; gap: 8px; }
    .rj-bars svg { width: 20px; height: 20px; }
    .rj-bars .eur { display: none; }
    .rj-case { --es: 68px; width: 96px; min-height: 136px; }
    .rj-gal-body { padding: 14px 14px 14px; }
    .rj-gal-body h4 { font-size: 1.0625rem; }
    .rj-gal-cond { font-size: 0.8125rem; }
    .rj-gal-h { font-size: 0.9375rem; }
    .rj-rule { padding: 16px; }
    .rj-term { font-size: 0.875rem; }
    .rj-holder { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 14px; }
    .rj-holder-emb { width: 76px; height: 76px; }
    .rj-holder-val { font-size: 1.5rem; }
    .rj-hist { padding: 16px; }
    .rj-hist-list li { grid-template-columns: minmax(0, 1fr); }
    .rj-hist-wk b { display: inline; margin-right: 6px; }
    .rj-coupon-val, .rj-coupon-code { padding: 16px; }
    .rj-coupon-num { font-size: 1.9rem; }
    .rj-coupon code { font-size: 0.8125rem; padding: 5px 8px; }
    .rj-steps-box { padding: 18px 16px; }
    .rj-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .rj-redeem-actions .btn { width: 100%; }
}
@media (max-width: 599px) {
    .rj-me-line { min-height: 4.8em; }
    .rj-running { min-height: 4.65em; }
}
@media (max-width: 380px) {
    .rj-me-line { min-height: 6.4em; }
}
@media (max-width: 420px) {
    .rj-search-row { flex-wrap: wrap; }
    .rj-search .btn { width: 100%; }
    /* Hier bricht die Zeile "einlösbar ab 500, noch …" dreimal um: Platz fuer drei Zeilen */
    .rj-me-figs dd.rj-sub { min-height: 4.05em; font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .rj-emb, .rj-gal-emb { transition: none; }
    .rj-ph { animation: none; }
    .rj-stage:hover .rj-emb, .rj-gal-card:hover .rj-gal-emb { transform: none; }
}
@media (forced-colors: active) {
    .rj-fill, .rj-days-strip li.on, .rj-bars .bar i, .rj-hist-bar i { background: Highlight; forced-color-adjust: none; }
    .rj-you { border: 1px solid CanvasText; }
}