/* Fokusabend Jahreskarte — Kachel im Konto-Hub + Vollansicht.
   Farben vollstaendig nach IMPLEMENTIERUNG.md §3, nichts dazwischen.
   ⭐ Der Label-Ton steht als TOKEN (--fkl) auf der Kachel, nicht in den Regeln:
   in der Designphase stand er als Literal in jeder Regel — dreimal in Folge hat eine
   neue Regel ihn verfehlt und Text bei 3:1 hinterlassen. Jede Label-Regel nimmt var(--fkl). */

.rjk {
  --fkl: #948B7F;        /* alle Mono-Labels */
  --fkl-name: #9A9184;   /* Themenname, offen */
  --fkl-dim: #8A8177;    /* Themenname, ruht */
  --fkt: #8FE0D3;        /* Fokusabend */
  --fkth: #C6F6ED;
  --fkg: #C6F6ED;        /* vollstaendig — der Hoehepunkt DERSELBEN Teal-Skala,
                            keine zweite Farbfamilie (Gold gehoert der Begleitung) */
  --fkbg: #1B1A18;
  --fkline: #2C2823;
}

/* ── Kachel im Hub ─────────────────────────────────────────────────────────── */
/* ⚠️ SPEZIFITAET: RAMs `.hcard { background: var(--paper) }` hat DIESELBE Spezifitaet
   (0,1,0) und sein Stylesheet laedt spaeter -> es gewinnt. Live stand die Kachel
   dadurch auf hellem Grund, und die weissen Kennzahlen waren unsichtbar.
   Deshalb ueberall `.hcard.hcard--map` (0,2,0) statt `.hcard--map`. */
.hcard.hcard--map {
  background: var(--fkbg); border-color: var(--fkbg);
  border-top: 2px solid var(--fkt);
  text-align: left;
  /* ⚠️ `clip`, NIEMALS `hidden`: `hidden` macht die Kachel zum Scroll-Container,
     und ein `position: sticky`-Kind richtet sich am naechsten Scroll-Container aus
     — die Kachel selbst scrollt nie, das Kind klebte also an nichts. `clip`
     schneidet genauso ab, erzeugt aber keinen Scroll-Container. Beide sehen im
     Standbild identisch aus; der Unterschied zeigt sich erst beim Scrollen auf
     dem Geraet (Handoff MOBIL.md). */
  overflow: clip;
  /* Die Kachel selbst ist KEIN Knopf — klickbar sind die Ringe und „Jahreskarte oeffnen". */
  cursor: default;
}
.hcard.hcard--map::before { display: none }
/* Nicht schweben und nicht aufhellen: eine Karte, die auf Hover reagiert, verspricht
   einen Klick, den es hier nicht gibt. */
.hcard.hcard--map:hover { background: var(--fkbg); transform: none; box-shadow: none }
.hcard.hcard--map .idx { color: var(--fkt) }
.hcard.hcard--map .ci { color: #6F8C86 }
.hcard.hcard--map .ci svg { width: 20px; height: 20px }

.rjk__head {
  display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 4vw, 60px);
  align-items: flex-end; justify-content: space-between;
  margin: 16px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--fkline);
}
.rjk__intro { min-width: 0; max-width: 52ch }
.hcard.hcard--map h3 { color: #F2EEE7; margin: 0 0 7px }
.hcard.hcard--map .pv { color: #9E958A; margin: 0 }
.rjk__jahr {
  margin-left: 11px; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .13em; color: var(--fkt);
  border: 1px solid #3A443F; border-radius: 2px; padding: 4px 7px; vertical-align: middle;
}
.rjk__nums { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 2.4vw, 32px) }
.rjk__nums li { display: flex; align-items: baseline; gap: 8px }
.rjk__nums b { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 400; color: #F2EEE7; line-height: 1 }
.rjk__nums span {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fkl); line-height: 1.4; max-width: 10ch;
}

/* Figur links (Feld umschliesst sie), Ringliste rechts — beide gleich hoch. */
.rjk__body { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.4vw, 32px); align-items: stretch; min-height: 0 }
.rjk__fig {
  background: radial-gradient(120% 92% at 50% 42%, #221F1C 0%, #171513 60%, #100E0C 100%);
  border: 1px solid #2A2621; padding: 20px 22px;
  display: flex; align-items: center; justify-content: center;
}
/* ⚠️ Die Figur wird ueber die HOEHE dimensioniert (Seitenverhaeltnis ~1:3,5).
   Ueber die Breite gesteuert wird sie absurd hoch. */
.rjk__fig svg { display: block; height: clamp(300px, 36vw, 436px); width: auto }

/* ── Ringliste ─────────────────────────────────────────────────────────────── */
.rjk-ringe { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.rjk-rl {
  list-style: none; margin: 0; padding: 0; flex: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  /* ⭐ SPALTENWEISE fuellen: erst eine Spalte von oben nach unten, dann die
     naechste. Zeilenweise (der Grid-Standard) laeuft die alphabetische Folge
     quer ueber drei Spalten und ist nicht am Stueck lesbar.
     32 Themen / 3 Spalten = 11 Zeilen. Die Zeilenzahl MUSS zur Spaltenzahl
     passen, sonst bricht der Fluss in eine vierte Spalte aus — deshalb steht
     sie in jedem Breakpoint mit dabei.
     ⚠️ Bewusst KEIN `column-count`: Multi-Column laesst beim Hover eines
     Kindes die Nachbarn neu zeichnen und flackern (Haus-Lehre RTC v0.3.1). */
  grid-auto-flow: column;
  /* Die Zeilenzahl kommt aus dem Markup: sie haengt an der Zahl der Themen DIESES
     Jahres, nicht an einer festen 32. Ohne passende Zeilenzahl braeche der Fluss
     in eine vierte Spalte aus. */
  grid-template-rows: repeat(var(--rjk-rows, 11), auto);
  gap: 2px clamp(10px, 1.5vw, 24px);
  align-content: start;
  row-gap: clamp(4px, 1.1vw, 13px);
}
.rjk-rl__i { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 0; cursor: pointer; background: none; border: 0 }
/* Nur fuer Screenreader. EIGENE Klasse statt der Theme-Klasse `.screen-reader-text` —
   die ist nicht in jedem Theme definiert, und ohne Regel stuende der Text sichtbar
   als drittes Flex-Element in jeder Ringzeile. */
.rjk-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.rjk-rl__i:focus-visible { outline: 1px solid var(--fkt); outline-offset: 2px }
.rjk-ring { width: 21px; height: 21px; flex: none; display: block; transition: transform .16s }
.rjk-rl__i:hover .rjk-ring, .rjk-rl__i:focus-visible .rjk-ring { transform: scale(1.16) }
.rjk-rl__tx { min-width: 0; flex: 1; text-decoration: none; display: block }
/* Stand + Haken stehen rechts, getrennt vom Namen — der Name ist ein Link in die
   Themen-Uebersicht, der Stand nicht (er ist keine Zusage auf ein Ziel). */
.rjk-rl__st { display: inline-flex; align-items: baseline; gap: 5px; flex: none }
#root a.rjk-rl__tx, a.rjk-rl__tx { color: inherit }
a.rjk-rl__tx:hover b { text-decoration: underline }
.rjk-rl__tx b {
  font-family: 'Inter Tight', sans-serif; font-size: 12px; font-weight: 400;
  color: var(--fkl-name); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; min-width: 0;
}
.rjk-rl__st i {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .05em;
  font-style: normal; color: var(--fkl); flex: none; min-width: 27px; text-align: right;
}
.rjk-rl__i.is-on .rjk-rl__tx b { color: #CFC8BC }
.rjk-rl__i.is-on .rjk-rl__st i { color: #7FC4BA }
.rjk-rl__i.is-voll .rjk-rl__tx b { color: #DCEFEA }
.rjk-rl__i.is-voll .rjk-rl__st i { color: var(--fkg) }
.rjk-rl__i.is-ruht .rjk-rl__tx b { color: var(--fkl-dim); font-style: italic }
.rjk-rl__i.is-ruht .rjk-rl__st i { color: var(--fkl) }

/* ── Fuss ──────────────────────────────────────────────────────────────────── */
.rjk__foot {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--fkline);
}
.rjk__next { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.rjk__next b { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 400; color: var(--fkt); flex: none }
.rjk__next span { font-size: 12.5px; line-height: 1.45; color: var(--fkl) }
.rjk__reset { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fkl); line-height: 1.5; max-width: 36ch }
.rjk__open {
  font-family: 'Inter Tight', sans-serif; font-size: 13px; font-weight: 500;
  background: none; border: 1px solid #3A443F; border-radius: 2px; padding: 10px 15px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  transition: border-color .2s, color .2s; text-decoration: none;
}
.rjk__open svg { width: 15px; height: 15px }
/* ⚠️ Kaskaden-Falle: `#root a { color: var(--brass-ink) }` ist ein ID-Selektor und
   schlaegt jede Klassenregel. Anker-Varianten brauchen dieselbe Spezifitaet — sonst
   steht der Knopf kupfer auf dunkel. */
#root .rjk__open, .rjk__open { color: var(--fkt) }
#root .rjk__open:hover, .rjk__open:hover { border-color: var(--fkt); color: var(--fkth) }

/* ── Vollansicht ───────────────────────────────────────────────────────────── */
.rjk-voll { max-width: 1120px; margin: 0 auto }
.rjk-eye { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink, #8B4A29); display: block; margin-bottom: 14px }
.rjk-voll__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: clamp(20px, 2.6vw, 32px); flex-wrap: wrap }
.rjk-voll__head h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(30px, 3.6vw, 44px); font-weight: 400; margin: 0 0 10px }
.rjk-voll__head p { font-size: 14.5px; line-height: 1.68; margin: 0; max-width: 62ch }

.rjk-jahre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: clamp(16px, 2.2vw, 26px); padding-bottom: 14px; border-bottom: 1px solid var(--line, #E4DED3) }
.rjk-jahre__t { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase }
.rjk-jahre a {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line, #E4DED3); border-radius: 2px; padding: 8px 12px; text-decoration: none;
}
#root .rjk-jahre a.on, .rjk-jahre a.on { border-color: var(--brass, #B5663F); color: var(--brass-ink, #8B4A29) }
.rjk-jahre__h { font-size: 12px; line-height: 1.5; flex: 1 1 260px; min-width: 200px }

.rjk-voll__grid { display: grid; grid-template-columns: minmax(238px, 338px) 1fr; gap: 2px; background: var(--line, #E4DED3); border: 1px solid var(--line, #E4DED3) }
.rjk-stage { background: var(--fkbg); padding: clamp(20px, 2.6vw, 28px); align-self: start; position: sticky; top: 16px }
.rjk-stage__in { background: radial-gradient(120% 92% at 50% 40%, #221F1C 0%, #171513 60%, #100E0C 100%); border: 1px solid #2A2621; padding: 20px; max-width: 292px; margin: 0 auto }
.rjk-stage__in svg { display: block; height: clamp(258px, 32vw, 372px); width: auto; max-width: 100%; margin: 0 auto }

.rjk-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: var(--fkl) }
.rjk-sw { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 5px; vertical-align: -1px }
.sw--0 { border: 1px solid #4A545C }
.sw--1 { background: rgba(143, 224, 211, .34) }
.sw--2 { background: rgba(143, 224, 211, .62) }
.sw--3 { background: var(--fkt) }

.rjk-scrub { margin-top: 20px; border-top: 1px solid #242A31; padding-top: 16px }
.rjk-scrub__t { display: flex; justify-content: space-between; align-items: baseline; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--fkl); margin-bottom: 9px }
.rjk-scrub__t b { color: var(--fkt); font-weight: 500 }
.rjk-scrub input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; height: 16px; cursor: pointer }
.rjk-scrub input[type=range]::-webkit-slider-runnable-track { height: 2px; background: #2A3138 }
.rjk-scrub input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 999px; background: var(--fkt); margin-top: -5px }
.rjk-scrub input[type=range]::-moz-range-track { height: 2px; background: #2A3138 }
.rjk-scrub input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 999px; background: var(--fkt) }
.rjk-scrub__h { display: block; font-size: 11.5px; line-height: 1.55; color: var(--fkl); margin-top: 8px }

.rjk-sys { margin-top: 20px; border-top: 1px solid #242A31; padding-top: 16px }
.rjk-sys__t { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--fkl); display: block; margin-bottom: 10px }
.rjk-sys__l { display: flex; flex-wrap: wrap; gap: 6px }
.rjk-sys__l span { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid #2A3138; padding: 5px 8px; color: #6E7A82 }
.rjk-sys__l span.on { border-color: var(--fkt); color: var(--fkt) }

.rjk-panel { background: var(--paper, #FAF7F2); padding: clamp(20px, 2.6vw, 30px) }
.rjk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line, #E4DED3); border: 1px solid var(--line, #E4DED3); margin-bottom: 24px }
.rjk-stats > div { background: var(--paper-warm, #F4EFE7); padding: 14px 16px }
.rjk-stats .k { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 6px }
.rjk-stats .v { font-family: 'Cormorant Garamond', serif; font-size: 28px; line-height: 1; white-space: nowrap }
.rjk-stats .v i { font-style: normal; font-size: 14px; color: var(--brass-ink, #8B4A29) }

.rjk-sub { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink, #8B4A29); margin: 0 0 10px }
.rjk-list { display: grid; gap: 1px; background: var(--line-soft, #EFE9DF); border-top: 1px solid var(--line, #E4DED3); border-bottom: 1px solid var(--line, #E4DED3) }
.rjk-list--next { margin-bottom: 26px; border-top: 2px solid var(--brass, #B5663F) }
.rjk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; background: var(--paper, #FAF7F2); padding: 13px 14px 13px 6px }
.rjk-row .n { flex: 0 0 26px; font-family: 'JetBrains Mono', monospace; font-size: 10px; text-align: right }
.rjk-row .rg { flex: 0 0 22px; display: flex; align-items: center }
.rjk-row .rg svg { width: 22px; height: 22px; display: block }
.rjk-row .tx { flex: 1 1 200px; min-width: min(200px, 100%); display: flex; flex-direction: column; gap: 2px }
.rjk-row .ti { font-family: 'Cormorant Garamond', serif; font-size: 18px; line-height: 1.2 }
.rjk-row.ruht .ti { font-style: italic; opacity: .75 }
.rjk-row .re { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .09em; text-transform: uppercase }
.rjk-row .ac { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; justify-content: flex-end; margin-left: auto }
.rjk-row .dt { font-family: 'JetBrains Mono', monospace; font-size: 10.5px }
.rjk-row .chip { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line, #E4DED3); padding: 4px 7px; white-space: nowrap }
.rjk-row .chip--on { border-color: var(--brass, #B5663F); color: var(--brass-ink, #8B4A29) }
.rjk-row .chip--voll { border-color: #3F7A72; color: #2C6A62 }
.rjk-row .chip--ruht { border-style: dashed; opacity: .8 }
.rjk-row[hidden] { display: none !important }

.rjk-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 12px }
.rjk-filter button { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; background: none; border: 1px solid var(--line, #E4DED3); border-radius: 2px; padding: 8px 11px; cursor: pointer }
.rjk-filter button.on { border-color: var(--brass, #B5663F); color: var(--brass-ink, #8B4A29) }
.rjk-note { font-size: 11.5px; line-height: 1.6; border-top: 1px solid var(--line, #E4DED3); padding-top: 14px; margin: 24px 0 0; max-width: 70ch }

/* ── Breakpoints ───────────────────────────────────────────────────────────── */

/* Platz im Hub-Raster: volle Breite × 2 Zeilen (Handoff §7).
   Das Raster gehoert RAM (.hubgrid) — hier nur die Spannweite dieser einen Kachel. */
.hubgrid .hcard--map { grid-column: 1 / -1; grid-row: span 2 }
@media (max-width: 600px) { .hubgrid .hcard--map { grid-row: auto } }

/* ── Vorschau beim Überfahren eines Themas ─────────────────────────────────── */
/* Die Formen liegen fertig im SVG und sind versteckt; das Skript blendet die
   passende ein. Ohne JS passiert schlicht nichts — es fehlt nichts Wesentliches. */
/* Standard: unsichtbar. Sichtbar wird eine Gruppe ueber die :has()-Regeln, die
   direkt bei der Kachel stehen -- ohne JavaScript. */
.rjk-pv { display: none; animation: rjkPuls 1.8s ease-in-out infinite }
@keyframes rjkPuls { 0%, 100% { opacity: .72 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .rjk-pv { animation: none } }

/* ⚠️ Die Filter-Knöpfe standen live als volle Kupferblöcke da: das Theme setzt
   `background` auf jedem `button`, und meine Regel hatte dieselbe Spezifität.
   Deshalb hier über den Wurzel-Container qualifiziert. */
.rjk-voll .rjk-filter button {
  background: none; border: 1px solid var(--line, #E4DED3); color: var(--text-mid, #6B6357);
  box-shadow: none; text-shadow: none; min-height: 0; line-height: 1.4;
}
.rjk-voll .rjk-filter button:hover { background: none; border-color: var(--brass, #B5663F); color: var(--brass-ink, #8B4A29) }
.rjk-voll .rjk-filter button.on { background: none; border-color: var(--brass, #B5663F); color: var(--brass-ink, #8B4A29) }
/* Ebenso die Jahres-Umschalter (auch Anker im Konto-Kontext). */
.rjk-voll .rjk-jahre a { background: none; text-decoration: none }

/* ── Haken: das Thema ist abgeschlossen ────────────────────────────────────── */
/* ⭐ Der Haken ist seit v0.80.0 ein <path> IM Ring-SVG (REVT_Jahreskarte_Svg::ring),
   auf viewBox 0 0 26 26 gerechnet — damit sitzt er bei 21 px auf dem Desktop
   genauso mittig wie bei 44 px auf dem Telefon und braucht weder eigene Regel
   noch Ausblendung. Als eigenes Element NEBEN dem Ring belegte er mobil eine
   Ringposition und verschob die Zeile (Handoff MOBIL.md, Defekt 5). */

/* ── Sortier-Leiste ────────────────────────────────────────────────────────── */
/* Steht per `hidden` im Markup; erst das Skript blendet sie ein. Ohne JavaScript
   bleibt die Liste in ihrer Grundordnung (A–Z) — es fehlt nichts, es steht nur
   kein Knopf da, der nichts täte. */
.rjk-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px }
.rjk-sort[hidden] { display: none !important }
.rjk-sort__t {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fkl); margin-right: 2px;
}
.rjk-sort button {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; background: none; border: 1px solid #3A443F;
  border-radius: 2px; padding: 5px 8px; color: var(--fkl); cursor: pointer;
  box-shadow: none; min-height: 0; line-height: 1.4;
}
.rjk-sort button:hover { border-color: var(--fkt); color: var(--fkt) }
.rjk-sort button.on { border-color: var(--fkt); color: var(--fkt) }
/* In der Vollansicht steht sie auf hellem Grund — die Schrift folgt dem Hintergrund. */
.rjk-panel .rjk-sort__t { color: var(--text-mid, #6B6357) }
.rjk-panel .rjk-sort button { border-color: var(--line, #E4DED3); color: var(--text-mid, #6B6357) }
.rjk-panel .rjk-sort button:hover,
.rjk-panel .rjk-sort button.on { border-color: #3F7A72; color: #2C6A62 }

/* Pflichthinweis (HWG). Stand bis v0.73.0 in der Vollansicht; die gibt es nicht
   mehr, also gehoert er hierher — er darf nicht fehlen und nicht abgeschwaecht werden. */
.rjk__hwg {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--fkline);
  font-size: 11px; line-height: 1.6; color: var(--fkl); max-width: 92ch;
}

/* Jahr ohne eingetragene Termine. */
.rjk-leer { margin: 0; padding: 24px 0; font-size: 13px; line-height: 1.6; color: var(--fkl) }

/* Wirkungs-Vorschau: „so würde deine Karte danach aussehen". Ist die Region schon
   „vertraut", gibt es keinen Zugewinn — dann pulsiert nur die Kontur, damit die
   Vorschau nichts verspricht, was nicht passiert. */
.rjk-pv.is-max { animation: rjkPulsLeise 2.2s ease-in-out infinite }
@keyframes rjkPulsLeise { 0%, 100% { opacity: .45 } 50% { opacity: .75 } }
@media (prefers-reduced-motion: reduce) { .rjk-pv.is-max { animation: none } }


/* ══ Breakpoints ═══════════════════════════════════════════════════════════
   ⚠️ Diese Bloecke stehen bewusst am DATEIENDE. In der Mitte standen sie VOR
   den Basis-Regeln der Sortierleiste — bei gleicher Spezifitaet gewinnt die
   spaetere Regel, und die mobile 2×2-Ordnung wurde vom `display:flex` der
   Basis wieder ueberschrieben (gemessen: 3 Knopfzeilen statt 2). ══════════ */

@media (max-width: 1080px) {
  /* 32 / 2 = 16 Zeilen */
  .rjk-rl { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rjk-rows2, 16), auto) }
  .rjk__fig svg { height: clamp(300px, 42vw, 420px) }
}
@media (max-width: 940px) {
  .rjk-stage { position: static }
  .rjk-stats { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 620px) {
  .rjk-voll__grid { grid-template-columns: 1fr }
  .rjk-stage__in { max-width: 262px }
  .rjk-stage__in svg { height: 248px }
}
/* ── Telefon (Handoff MOBIL.md) ─────────────────────────────────────────────
   Figur LINKS in einer schmalen Spalte, so hoch wie der Screen hergibt; die
   Liste der benannten Ringe rechts daneben in einer EIGENEN Scrollbox derselben
   Höhe.

   ⚠️ Die Vorgänger-Fassung stellte die Figur mittig über ein 8er-Raster aus
   Ringen OHNE Namen. Gemessen bei 393/430/360 px: Figur 68 × 236 px bei einem
   Leeranteil von 0,40 im Feld, 0 von 32 Namen lesbar, 2 Elemente liefen rechts
   aus der Karte. 32 unbenannte Kreise sind auf einem Gerät ohne Hover ein
   Rätsel — deshalb bleiben die Namen, und der Platz kommt aus der Höhe.

   ⭐ Die Höhe steht EINMAL als --rjk-mapH: Figur und Scrollbox müssen exakt
   gleich hoch sein, zwei getrennte Werte laufen beim nächsten Umbau auseinander.
   `vh` statt fester Pixel, damit die Figur den Screen ausnutzt, den sie
   vorfindet; die Kappe verhindert nur Übergrößen auf dem Tablet. */
@media (max-width: 600px) {
  .rjk { --rjk-mapH: min(56vh, 520px) }
  .rjk__body { grid-template-columns: minmax(120px, 150px) 1fr; gap: 12px; align-items: start }
  .rjk__fig { height: var(--rjk-mapH); padding: 10px 6px }
  .rjk__fig svg { height: 100%; width: auto }

  /* Die Liste scrollt IN SICH — dadurch ist die Figur immer im Bild, ohne an
     einer 1400px hohen Liste zu kleben. `height`, nicht `max-height`: die Box
     muss die Figurhöhe ANNEHMEN, sonst schrumpft sie bei wenigen Themen. */
  .rjk-ringe { position: relative; height: var(--rjk-mapH); min-height: 0; gap: 0 }
  .rjk-rl {
    grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none;
    gap: 0; align-content: start;
    height: 100%; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-right: 2px;
  }
  .rjk-rl::-webkit-scrollbar { width: 3px }
  .rjk-rl::-webkit-scrollbar-thumb { background: #3A342D; border-radius: 2px }
  /* 44px Trefferfläche: bei acht Ringen je Zeile waren es 33 px — der Finger
     trifft dann zwei gleichzeitig. */
  .rjk-rl__i { min-height: 44px; padding: 5px 2px; border-bottom: 1px solid #241F1A }
  .rjk-rl__i:last-child { border-bottom: 0 }

  /* Ein abgeschnittener Themenname ist schlimmer als ein zweizeiliger. */
  .rjk-rl__tx { display: block }
  .rjk-rl__tx b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; font-size: 12.5px }
  /* Der Stand entfällt: die Ringsegmente zeigen ihn grafisch, das Häkchen die
     Vollständigkeit. Eine Zahl daneben wiederholt nur, was das Bild schon sagt —
     und der Platz gehört dem Namen. */
  .rjk-rl__st { display: none }

  /* Der Verlauf am unteren Rand ist die einzige Anzeige, dass die Liste
     weitergeht: eine Scrollleiste ist auf iOS unsichtbar, bis man scrollt. */
  .rjk-ringe::after {
    content: ""; position: absolute; left: 0; right: 3px; bottom: 0; height: 26px;
    pointer-events: none; background: linear-gradient(to bottom, rgba(27,26,24,0), #1B1A18);
  }
  .rjk-ringe, .rjk-rl, .rjk-rl__i { min-width: 0; max-width: 100% }

  /* Vier Zahlen als 2×2, Label UNTER der Zahl — nebeneinander brechen die Labels
     um und man kann nicht mehr zuordnen, welche Zahl wohin gehört. */
  /* ⚠️ `display: grid` MUSS mit: die Basis-Regel ist `flex; flex-wrap: wrap`, und
     auf einem Flex-Container wirkt `grid-template-columns` gar nicht. Ohne sie
     bleibt es beim Umbruch 3+1 — vier Zahlen in zwei Zeilen, aber ohne Raster,
     und die vierte lief rechts aus der Karte. */
  .rjk__nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 14px }
  .rjk__nums li { display: block }
  .rjk__nums b { font-size: 25px; display: block; margin-bottom: 3px }
  .rjk__nums span { max-width: none; display: block }

  /* Die vier Sortierarten sind gleichrangig -> 2×2. Umbrechen liefe auf 3+1
     hinaus, und das sieht nach Fehler aus statt nach Absicht. */
  .rjk-sort { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px }
  .rjk-sort__t { grid-column: 1 / -1 }
  .rjk-sort button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
}
@media (max-width: 360px) {
  .rjk { --rjk-mapH: min(52vh, 460px) }
  .rjk__body { grid-template-columns: minmax(104px, 126px) 1fr; gap: 10px }
  .rjk__nums b { font-size: 22px }
  .rjk-rl__tx b { font-size: 12px }
}