@charset "UTF-8";
/* ============================================================================
   RUSHLIFERP — „VIOLET HOUR"  ·  Design-System v10
   Ein komplett neu aufgebautes visuelles Fundament. Violett als Leitfarbe,
   redaktionelles Raster, Duotone-Bildwelt, Signal-Motiv, Glas mit echtem Licht.

   Aufbau:
     01  Tokens
     02  Reset & Basis
     03  Atmosphäre (Bloom, Grain, Signal)
     04  Typografie
     05  Layout & Raster
     06  Navigation
     07  Buttons & Links
     08  Karten, Flächen, Glas
     09  Marken-Bausteine (Kicker, Stat, Pill, Tag, Divider)
     10  Bildwelt (Duotone, Frames)
     11  Formulare & Tabellen
     12  Footer
     13  Motion & Reveal
     14  Utilities
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,75..125,400..900;1,75..125,400..900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@300;400;500;700&display=swap');

/* ── 01 · TOKENS ───────────────────────────────────────────────────────── */
:root {
  /* Grundflächen — sehr dunkles Indigo-Violett statt Schwarz */
  --void:      #06040C;
  --bg-1:      #0A0715;
  --bg-2:      #100B1F;
  --bg-3:      #17102B;
  --bg-4:      #1F1738;

  /* Violett-Skala */
  --vi-900:    #240B52;
  --vi-800:    #3A1385;
  --vi-700:    #551FBD;
  --vi-600:    #6D2BE8;
  --vi-500:    #8B46FF;   /* Primär */
  --vi-400:    #A877FF;
  --vi-300:    #C6A8FF;
  --vi-200:    #E3D4FF;

  /* Akzente */
  --mag:       #FF4FD8;
  --iris:      #5D6BFF;
  --mint:      #3DF2B4;
  --amber:     #FFB547;
  --rose:      #FF5C7A;

  /* Text */
  --ink:       #F7F3FF;
  --ink-2:     #BCB0DC;
  --ink-3:     #837799;
  --ink-4:     #5B5273;

  /* Linien & Glas */
  --line:      rgba(198,168,255,.15);
  --line-2:    rgba(198,168,255,.09);
  --line-3:    rgba(198,168,255,.28);
  --glass:     rgba(23,16,43,.62);
  --glass-2:   rgba(16,11,31,.78);

  /* Leuchten */
  --glow-vi:   0 0 0 1px rgba(139,70,255,.35), 0 18px 60px -18px rgba(139,70,255,.6);
  --glow-soft: 0 24px 80px -32px rgba(109,43,232,.55);
  --shadow-1:  0 2px 4px rgba(4,2,10,.4);
  --shadow-2:  0 18px 48px -24px rgba(4,2,10,.9);
  --shadow-3:  0 40px 100px -40px rgba(4,2,10,1);

  /* Schrift */
  --f-d: 'Archivo', 'Archivo Expanded', system-ui, sans-serif;
  --f-b: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --f-m: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Raster */
  --gutter:    clamp(20px, 4.5vw, 64px);
  --maxw:      1280px;
  --maxw-wide: 1520px;
  --maxw-read: 780px;
  --nav-h:     72px;
  --sect:      clamp(84px, 11vw, 168px);
  --r-s:       6px;
  --r-m:       14px;
  --r-l:       22px;
  --r-xl:      32px;

  /* Kurven */
  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-io:   cubic-bezier(.65,0,.35,1);
  --e-soft: cubic-bezier(.4,0,.2,1);

  color-scheme: dark;
}

/* ── 02 · RESET & BASIS ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 52px);
  scrollbar-color: var(--vi-700) var(--bg-1);
  scrollbar-width: thin;
}
html:focus-within { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  background: var(--void);
  color: var(--ink);
  font-family: var(--f-b);
  font-size: clamp(15.5px, .42vw + 14px, 17.5px);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.rl-lock { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); }

::selection { background: var(--vi-600); color: #fff; }

:focus-visible {
  outline: 2px solid var(--vi-400);
  outline-offset: 3px;
  border-radius: 3px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--vi-700), var(--vi-900));
  border-radius: 99px;
  border: 2px solid var(--bg-1);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--vi-500), var(--vi-700)); }

/* ── 03 · ATMOSPHÄRE ───────────────────────────────────────────────────── */
/* Zwei driftende Violett-Blüten + feines Korn. Gibt der Seite Tiefe,
   ohne dass ein einziges Bild geladen werden muss. */
.rl-atmo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.rl-atmo::before,
.rl-atmo::after {
  content: '';
  position: absolute;
  width: 72vmax;
  height: 72vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}
.rl-atmo::before {
  top: -34vmax; left: -22vmax;
  background: radial-gradient(circle, rgba(109,43,232,.55), rgba(109,43,232,0) 68%);
  animation: rl-drift-a 34s var(--e-io) infinite alternate;
}
.rl-atmo::after {
  bottom: -40vmax; right: -26vmax;
  background: radial-gradient(circle, rgba(255,79,216,.26), rgba(93,107,255,.2) 45%, rgba(93,107,255,0) 70%);
  animation: rl-drift-b 44s var(--e-io) infinite alternate;
}
@keyframes rl-drift-a {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(12vw,8vh,0) scale(1.18); }
}
@keyframes rl-drift-b {
  from { transform: translate3d(0,0,0) scale(1.1); }
  to   { transform: translate3d(-14vw,-10vh,0) scale(1); }
}

/* Korn — eigenständige Ebene über allem, sehr fein */
.rl-grain {
  position: fixed;
  inset: -120px;
  z-index: 999;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: rl-grain 7s steps(6) infinite;
}
@keyframes rl-grain {
  0%   { transform: translate(0,0); }
  16%  { transform: translate(-14px,9px); }
  33%  { transform: translate(9px,-14px); }
  50%  { transform: translate(-9px,-9px); }
  66%  { transform: translate(14px,6px); }
  83%  { transform: translate(-6px,14px); }
  100% { transform: translate(0,0); }
}

/* Maus-Licht — nur auf Zeigergeräten */
.rl-cursor-light {
  position: fixed;
  top: 0; left: 0;
  z-index: 1;
  width: 620px; height: 620px;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(139,70,255,.15), rgba(139,70,255,0) 66%);
  transition: opacity .8s var(--e-out);
  will-change: transform;
}
body.rl-light-on .rl-cursor-light { opacity: 1; }

/* Alles über der Atmosphäre */
.rl-nav, .rl-main, .rl-foot, .rl-drawer, .rl-topline { position: relative; z-index: 2; }

/* ── 04 · TYPOGRAFIE ───────────────────────────────────────────────────── */
.rl-d1, .rl-d2, .rl-d3, .rl-d4 {
  max-width: 100%;
  overflow-wrap: break-word;
  font-family: var(--f-d);
  font-weight: 800;
  font-stretch: 115%;
  letter-spacing: -.035em;
  line-height: .92;
  text-wrap: balance;
}
.rl-d1 {
  font-size: clamp(46px, 8.4vw, 132px);
  font-weight: 900;
  font-stretch: 122%;
  letter-spacing: -.05em;
  line-height: .86;
}
.rl-d2 { font-size: clamp(34px, 5.2vw, 82px);  letter-spacing: -.042em; line-height: .9; }
.rl-d3 { font-size: clamp(26px, 3.1vw, 46px);  letter-spacing: -.032em; line-height: .98; }
.rl-d4 { font-size: clamp(20px, 1.9vw, 27px);  letter-spacing: -.02em;  line-height: 1.15; font-stretch: 108%; }

/* Betontes Wort — der wiederkehrende Kunstgriff der Seite */
.rl-d1 em, .rl-d2 em, .rl-d3 em {
  font-style: italic;
  font-stretch: 100%;
  background: linear-gradient(100deg, var(--vi-300), var(--mag) 55%, var(--vi-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rl-outline {
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(198,168,255,.5);
  paint-order: stroke fill;
}

.rl-lead {
  max-width: 62ch;
  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}
.rl-body { color: var(--ink-2); text-wrap: pretty; }
.rl-body p + p { margin-top: 1em; }
.rl-body strong { color: var(--ink); font-weight: 600; }
.rl-body a:not(.rl-btn) {
  color: var(--vi-300);
  text-decoration: underline;
  text-decoration-color: rgba(198,168,255,.35);
  text-underline-offset: 3px;
  transition: text-decoration-color .25s, color .25s;
}
.rl-body a:not(.rl-btn):hover { color: var(--mag); text-decoration-color: currentColor; }

/* Inline-Auszeichnung für Tasten, Befehle und Ressourcennamen */
code, kbd {
  display: inline;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: rgba(139,70,255,.14);
  font-family: var(--f-m);
  font-size: .82em;
  font-weight: 500;
  line-height: 1.5;
  color: var(--vi-200);
  white-space: nowrap;
}

.rl-list a {
  color: var(--vi-300);
  text-decoration: underline;
  text-decoration-color: rgba(198,168,255,.35);
  text-underline-offset: 3px;
  transition: color .25s, text-decoration-color .25s;
}
.rl-list a:hover { color: var(--mag); text-decoration-color: currentColor; }
.rl-list strong { color: var(--ink); font-weight: 600; }

.rl-mono {
  font-family: var(--f-m);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── 05 · LAYOUT ───────────────────────────────────────────────────────── */
.rl-wrap {
  width: min(var(--maxw), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.rl-wrap--wide { width: min(var(--maxw-wide), 100%); }
.rl-wrap--read { width: min(var(--maxw-read), 100%); }

.rl-sect { padding-block: var(--sect); }
.rl-sect--tight { padding-block: clamp(56px, 7vw, 104px); }
.rl-sect--flush-t { padding-top: 0; }
.rl-sect--flush-b { padding-bottom: 0; }

/* Sektionskopf: Nummer, Kicker, Titel, Beschreibung */
.rl-head { margin-bottom: clamp(38px, 5vw, 72px); }
.rl-head__top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.rl-head__num {
  font-family: var(--f-m);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--vi-400);
}
.rl-head__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-3), transparent);
}
.rl-head__title { margin-bottom: 20px; }
.rl-head--center { text-align: center; }
.rl-head--center .rl-head__top { justify-content: center; }
.rl-head--center .rl-head__rule { max-width: 90px; flex: 0 0 90px; }
.rl-head--center .rl-head__rule:first-child { background: linear-gradient(270deg, var(--line-3), transparent); }
.rl-head--center .rl-lead { margin-inline: auto; }

.rl-grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.rl-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.rl-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.rl-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.rl-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(290px,100%), 1fr)); }
.rl-span-2 { grid-column: span 2; }
.rl-span-3 { grid-column: span 3; }

@media (max-width: 1000px) {
  .rl-grid--3, .rl-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rl-span-3 { grid-column: span 2; }
}
@media (max-width: 620px) {
  .rl-grid--2, .rl-grid--3, .rl-grid--4 { grid-template-columns: minmax(0,1fr); }
  .rl-span-2, .rl-span-3 { grid-column: span 1; }
}

/* ── 06 · NAVIGATION ───────────────────────────────────────────────────── */
/* Dünne Statuszeile ganz oben — der „Stadtpuls" */
.rl-topline {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 92;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 30px;
  padding-inline: var(--gutter);
  background: linear-gradient(90deg, var(--vi-900), #140A28 45%, var(--vi-900));
  border-bottom: 1px solid rgba(198,168,255,.12);
  font-family: var(--f-m);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  overflow: hidden;
}
.rl-topline b { color: var(--ink); font-weight: 700; }
.rl-topline .rl-sep { color: var(--vi-600); }
@media (max-width: 700px) { .rl-topline .rl-hide-sm { display: none; } }

.rl-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0 rgba(61,242,180,.6);
  animation: rl-pulse 2.4s var(--e-io) infinite;
}
.rl-dot--off { background: var(--ink-4); animation: none; box-shadow: none; }
@keyframes rl-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61,242,180,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(61,242,180,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,242,180,0); }
}

.rl-nav {
  position: fixed;
  inset: 30px 0 auto 0;
  z-index: 90;
  height: var(--nav-h);
  transition: background .4s var(--e-soft), border-color .4s var(--e-soft), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.rl-nav.is-stuck {
  background: rgba(8,5,17,.88);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom-color: var(--line-2);
}
.rl-nav__in {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 34px);
  height: 100%;
  width: min(var(--maxw-wide), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Lesefortschritt — greift das Signal-Motiv der Marke auf */
.rl-progress {
  position: fixed;
  inset: calc(30px + var(--nav-h) - 2px) auto auto 0;
  z-index: 91;
  width: 100%;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--vi-600), var(--vi-400) 55%, var(--mag));
  box-shadow: 0 0 14px rgba(139,70,255,.7);
  pointer-events: none;
}

/* Signet */
.rl-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.rl-brand__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--vi-500), var(--vi-800) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 20px -6px rgba(139,70,255,.8);
  font-family: var(--f-d);
  font-size: 15px;
  font-weight: 900;
  font-stretch: 120%;
  letter-spacing: -.06em;
  color: #fff;
  transition: transform .45s var(--e-out);
}
.rl-brand:hover .rl-brand__mark { transform: rotate(-8deg) scale(1.06); }
.rl-brand__txt {
  display: grid;
  line-height: 1;
  font-family: var(--f-d);
  font-weight: 800;
  font-stretch: 112%;
}
.rl-brand__txt b { font-size: 15px; letter-spacing: -.02em; }
.rl-brand__txt span {
  margin-top: 4px;
  font-family: var(--f-m);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .26em;
  color: var(--vi-400);
}
@media (max-width: 420px) { .rl-brand__txt { display: none; } }

.rl-nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
}
.rl-nav__link {
  position: relative;
  padding: 9px 13px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .25s, background .25s;
}
.rl-nav__link::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 4px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--vi-400), var(--mag));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s var(--e-out);
}
.rl-nav__link:hover { color: var(--ink); background: rgba(139,70,255,.09); }
.rl-nav__link:hover::after,
.rl-nav__link.is-active::after { transform: scaleX(1); }
.rl-nav__link.is-active { color: var(--ink); }

.rl-nav__acts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

@media (max-width: 1080px) { .rl-nav__links { display: none; } }

/* Burger */
.rl-burger {
  display: none;
  position: relative;
  width: 42px; height: 42px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(10px);
}
.rl-burger span {
  position: absolute;
  left: 12px;
  width: 18px; height: 1.6px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .4s var(--e-out), opacity .25s;
}
.rl-burger span:nth-child(1) { top: 15px; }
.rl-burger span:nth-child(2) { top: 20.2px; }
.rl-burger span:nth-child(3) { top: 25.4px; }
body.rl-open .rl-burger span:nth-child(1) { transform: translateY(5.2px) rotate(45deg); }
body.rl-open .rl-burger span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
body.rl-open .rl-burger span:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); }
@media (max-width: 1080px) { .rl-burger { display: block; } }

/* Schublade */
.rl-drawer {
  position: fixed;
  inset: 0;
  z-index: 89;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: calc(var(--nav-h) + 58px) var(--gutter) 40px;
  background: linear-gradient(180deg, rgba(9,6,19,.97), rgba(6,4,12,.99));
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: opacity .42s var(--e-out), transform .42s var(--e-out), visibility .42s;
}
body.rl-open .rl-drawer { opacity: 1; visibility: visible; transform: none; }
.rl-drawer__link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--f-d);
  font-size: clamp(24px, 6.5vw, 38px);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -.035em;
  line-height: 1;
  opacity: 0;
  transform: translateY(16px);
  transition: color .25s, padding-left .35s var(--e-out);
}
body.rl-open .rl-drawer__link {
  animation: rl-drawer-in .5s var(--e-out) forwards;
  animation-delay: calc(var(--i, 0) * 42ms + 90ms);
}
@keyframes rl-drawer-in { to { opacity: 1; transform: none; } }
.rl-drawer__link i {
  font-family: var(--f-m);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--vi-500);
}
.rl-drawer__link:hover { color: var(--vi-300); padding-left: 12px; }
.rl-drawer__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.rl-drawer__foot .rl-btn { flex: 1 1 200px; justify-content: center; }

/* ── 07 · BUTTONS ──────────────────────────────────────────────────────── */
.rl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  border-radius: 12px;
  font-family: var(--f-b);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: transform .3s var(--e-out), box-shadow .35s var(--e-out), border-color .3s, background .3s, color .3s;
}
.rl-btn:active { transform: translateY(1px) scale(.99); }

/* Primär — Violett mit Innenlicht und wanderndem Glanz */
.rl-btn--p {
  background: linear-gradient(140deg, var(--vi-500), var(--vi-700) 60%, var(--vi-800));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 30px -12px rgba(139,70,255,.9);
}
.rl-btn--p::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.34) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .8s var(--e-out);
}
.rl-btn--p:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 20px 46px -14px rgba(139,70,255,1);
}
.rl-btn--p:hover::before { transform: translateX(120%); }

/* Glas */
.rl-btn--g {
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
}
.rl-btn--g:hover {
  border-color: var(--line-3);
  background: rgba(139,70,255,.14);
  transform: translateY(-2px);
}

/* Blank */
.rl-btn--t { padding-inline: 12px; color: var(--ink-2); }
.rl-btn--t:hover { color: var(--ink); background: rgba(198,168,255,.08); }

/* Weiß — für seltene, harte Kontrastmomente */
.rl-btn--w { background: var(--ink); color: #0B0716; }
.rl-btn--w:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(247,243,255,.5); }

.rl-btn--sm { height: 38px; padding-inline: 16px; font-size: 13.5px; border-radius: 10px; }
.rl-btn--lg { height: 54px; padding-inline: 30px; font-size: 16px; border-radius: 14px; }
.rl-btn--full { width: 100%; }
.rl-btn[aria-disabled="true"], .rl-btn:disabled { opacity: .45; pointer-events: none; }

.rl-btn__ico { width: 17px; height: 17px; flex: 0 0 17px; }
.rl-arr { display: inline-block; transition: transform .35s var(--e-out); }
.rl-btn:hover .rl-arr, .rl-tlink:hover .rl-arr { transform: translate(3px,-3px); }

/* Textlink mit Pfeil */
.rl-tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-m);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vi-300);
  transition: color .25s;
}
.rl-tlink:hover { color: var(--mag); }

/* ── 08 · KARTEN & GLAS ────────────────────────────────────────────────── */
.rl-card {
  position: relative;
  padding: clamp(20px, 2.1vw, 30px);
  border-radius: var(--r-l);
  background:
    linear-gradient(160deg, rgba(35,24,64,.72), rgba(14,10,26,.82));
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  transition: transform .5s var(--e-out), border-color .4s, box-shadow .5s var(--e-out);
}
/* Haarfeiner Verlaufsrand oben — das „Licht von oben" */
.rl-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,168,255,.55) 22%, rgba(255,79,216,.45) 55%, transparent);
  opacity: .7;
  transition: opacity .4s;
}
/* Weicher Lichtkegel, der beim Hovern aufblüht */
.rl-card::after {
  content: '';
  position: absolute;
  top: -60%; left: 50%;
  width: 130%; height: 130%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at top, rgba(139,70,255,.2), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s var(--e-out);
}
.rl-card:hover {
  transform: translateY(-4px);
  border-color: var(--line);
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(139,70,255,.16);
}
.rl-card:hover::before { opacity: 1; }
.rl-card:hover::after { opacity: 1; }
.rl-card > * { position: relative; z-index: 1; }

.rl-card--flat { box-shadow: none; background: rgba(23,16,43,.42); }
.rl-card--flat:hover { transform: none; }
.rl-card--pad-lg { padding: clamp(26px, 3vw, 44px); }
.rl-card--still::after, .rl-card--still::before { display: none; }
.rl-card--still:hover { transform: none; }

/* Karte mit Akzentfarbe (--acc) */
.rl-card--acc::before {
  background: linear-gradient(90deg, transparent, var(--acc, var(--vi-400)) 30%, transparent);
  opacity: .85;
}
.rl-card--acc:hover { box-shadow: var(--shadow-3), 0 0 0 1px color-mix(in srgb, var(--acc, var(--vi-500)) 30%, transparent); }

/* Icon-Kachel */
.rl-ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(139,70,255,.24), rgba(139,70,255,.05));
  color: var(--vi-300);
  transition: transform .45s var(--e-out), color .3s, border-color .3s;
}
.rl-ico svg { width: 21px; height: 21px; }
.rl-card:hover .rl-ico { transform: translateY(-2px) scale(1.05); color: var(--vi-200); border-color: var(--line-3); }
.rl-ico--acc { color: var(--acc, var(--vi-300)); background: linear-gradient(150deg, color-mix(in srgb, var(--acc,var(--vi-500)) 22%, transparent), transparent); }

.rl-card h3, .rl-card__title {
  margin-bottom: 9px;
  font-family: var(--f-d);
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -.022em;
  line-height: 1.2;
}
.rl-card p { color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* ── 09 · MARKEN-BAUSTEINE ─────────────────────────────────────────────── */
.rl-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-m);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vi-300);
}
.rl-kicker::before {
  content: '';
  width: 22px; height: 1px;
  background: linear-gradient(90deg, var(--vi-500), transparent);
}
.rl-kicker--plain::before { display: none; }

.rl-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 13px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: rgba(139,70,255,.1);
  font-family: var(--f-m);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.rl-pill b { color: var(--ink); font-weight: 700; }
.rl-pill--live { border-color: rgba(61,242,180,.32); background: rgba(61,242,180,.09); color: var(--mint); }
.rl-pill--mag  { border-color: rgba(255,79,216,.32); background: rgba(255,79,216,.09); color: var(--mag); }

.rl-tag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  background: rgba(198,168,255,.06);
  font-family: var(--f-m);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .25s, border-color .25s, background .25s;
}
.rl-card:hover .rl-tag { color: var(--vi-300); border-color: var(--line); }
.rl-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }

/* Kennzahl */
.rl-stat { display: grid; gap: 6px; }
.rl-stat__v {
  font-family: var(--f-d);
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 900;
  font-stretch: 118%;
  letter-spacing: -.05em;
  line-height: 1;
  background: linear-gradient(170deg, var(--ink), var(--vi-300) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rl-stat__l {
  font-family: var(--f-m);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.rl-stats--ruled .rl-stat { padding-left: 20px; border-left: 1px solid var(--line-2); }

/* Trenner mit Signal-Motiv — die Frequenzlinie der Marke */
.rl-signal {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-3) 18%, var(--line-3) 82%, transparent);
  overflow: visible;
}
.rl-signal::after {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 22%; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--vi-400), var(--mag), transparent);
  filter: blur(.4px);
  animation: rl-scan 7s var(--e-io) infinite;
}
@keyframes rl-scan {
  0%   { left: -22%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Laufband */
.rl-marquee {
  --dur: 46s;
  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: 16px;
  border-block: 1px solid var(--line-2);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rl-marquee__track {
  display: flex;
  flex: 0 0 auto;
  gap: 46px;
  padding-right: 46px;
  animation: rl-march var(--dur) linear infinite;
}
.rl-marquee:hover .rl-marquee__track { animation-play-state: paused; }
@keyframes rl-march { to { transform: translateX(-100%); } }
.rl-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-d);
  font-size: clamp(16px, 1.6vw, 24px);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -.02em;
  color: var(--ink-3);
  white-space: nowrap;
}
.rl-marquee__item i {
  font-style: normal;
  color: var(--vi-500);
  font-size: .7em;
}

/* Zitat / Hervorhebung */
.rl-quote {
  position: relative;
  padding-left: clamp(20px, 3vw, 38px);
  border-left: 2px solid var(--vi-600);
  font-family: var(--f-d);
  font-size: clamp(19px, 2.1vw, 30px);
  font-weight: 600;
  font-stretch: 106%;
  letter-spacing: -.028em;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}

/* Notiz-Box */
.rl-note {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-m);
  border: 1px solid var(--line-2);
  background: rgba(139,70,255,.07);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.rl-note__ico { flex: 0 0 20px; color: var(--vi-400); }
.rl-note--warn { border-color: rgba(255,181,71,.28); background: rgba(255,181,71,.07); }
.rl-note--warn .rl-note__ico { color: var(--amber); }
.rl-note--bad { border-color: rgba(255,92,122,.28); background: rgba(255,92,122,.07); }
.rl-note--bad .rl-note__ico { color: var(--rose); }

/* Liste mit Häkchen / Strich */
.rl-list { display: grid; gap: 11px; }
.rl-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.rl-list li::before {
  content: '';
  position: absolute;
  top: .72em;
  left: 0;
  width: 14px;
  height: 1px;
  background: var(--vi-500);
}
.rl-list li em { color: var(--vi-300); font-style: italic; }
.rl-list--check li::before {
  content: '✓';
  top: 0;
  width: auto;
  height: auto;
  background: none;
  color: var(--vi-400);
  font-size: 13px;
  font-weight: 700;
}

/* ── 10 · BILDWELT ─────────────────────────────────────────────────────── */
/* Alle Fotos laufen durch dieselbe Duotone-Behandlung — das stärkste
   Erkennungsmerkmal der Seite: kein Bild wirkt „fremd zugekauft".
   Die Tonwertkurve steckt bereits in den Dateien (siehe tools/tone-images.py,
   Ordner .../v10/); hier wird nur noch Sättigung und Kontrast justiert. */
.rl-shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--bg-2);
  isolation: isolate;
}
.rl-shot img, .rl-shot video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.03);
  transition: transform 1.4s var(--e-out), filter .8s var(--e-out);
}
.rl-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(210deg, rgba(139,70,255,.34), rgba(255,79,216,.16) 45%, rgba(6,4,12,.5) 100%);
  mix-blend-mode: color;
  pointer-events: none;
}
.rl-shot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(6,4,12,0) 38%, rgba(6,4,12,.78) 100%);
  pointer-events: none;
}
.rl-shot--plain::before { display: none; }
.rl-shot--soft::after { opacity: .55; }
a:hover > .rl-shot img,
.rl-card:hover .rl-shot img,
.rl-shot--zoom:hover img { transform: scale(1.06); filter: saturate(1) contrast(1.03) brightness(1.1); }

.rl-shot__cap {
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  padding: clamp(16px, 2vw, 26px);
  display: grid;
  gap: 6px;
}
.rl-shot--r16 { aspect-ratio: 16/9; }
.rl-shot--r43 { aspect-ratio: 4/3; }
.rl-shot--r11 { aspect-ratio: 1/1; }
.rl-shot--r34 { aspect-ratio: 3/4; }
.rl-shot--r219 { aspect-ratio: 21/9; }

/* Sucher-Ecken — eigenes Kind-Element, damit die Duotone-Ebenen
   (.rl-shot::before/::after) unangetastet bleiben. */
.rl-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.rl-frame::before, .rl-frame::after {
  content: '';
  position: absolute;
  width: 26px; height: 26px;
  border: 1px solid rgba(198,168,255,.5);
}
.rl-frame::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.rl-frame::after  { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }

/* ── 11 · FORMULARE & TABELLEN ─────────────────────────────────────────── */
.rl-field { display: grid; gap: 8px; }
.rl-label {
  font-family: var(--f-m);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rl-input, .rl-select, .rl-textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 15px;
  border-radius: var(--r-m);
  border: 1px solid var(--line-2);
  background: rgba(10,7,21,.7);
  color: var(--ink);
  font-size: 15px;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.rl-textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.rl-select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23BCB0DC' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.rl-input::placeholder, .rl-textarea::placeholder { color: var(--ink-4); }
.rl-input:focus, .rl-select:focus, .rl-textarea:focus {
  outline: none;
  border-color: var(--vi-600);
  background: rgba(16,11,31,.9);
  box-shadow: 0 0 0 3px rgba(139,70,255,.16);
}
.rl-hint { font-size: 13px; color: var(--ink-3); }

.rl-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-m);
  border: 1px solid var(--line-2);
  -webkit-overflow-scrolling: touch;
}
.rl-table { min-width: 520px; font-size: 14.5px; }
.rl-table th, .rl-table td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
}
.rl-table th {
  position: sticky; top: 0;
  background: var(--bg-2);
  font-family: var(--f-m);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.rl-table tbody tr { transition: background .25s; }
.rl-table tbody tr:hover { background: rgba(139,70,255,.06); }
.rl-table tbody tr:last-child td { border-bottom: 0; }
.rl-table td b { color: var(--ink); font-weight: 600; }

/* Aufklapper */
.rl-acc { border-top: 1px solid var(--line-2); }
.rl-acc__item { border-bottom: 1px solid var(--line-2); }
.rl-acc__btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 19px 4px;
  text-align: left;
  font-family: var(--f-d);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 600;
  font-stretch: 106%;
  letter-spacing: -.02em;
  color: var(--ink);
  transition: color .25s, padding-left .35s var(--e-out);
}
.rl-acc__btn:hover { color: var(--vi-300); padding-left: 12px; }
.rl-acc__btn i {
  flex: 0 0 auto;
  margin-left: auto;
  font-style: normal;
  color: var(--vi-400);
  font-size: 20px;
  line-height: 1;
  transition: transform .4s var(--e-out);
}
.rl-acc__item.is-open .rl-acc__btn i { transform: rotate(45deg); }
.rl-acc__num {
  font-family: var(--f-m);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--vi-600);
}
.rl-acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--e-out);
}
.rl-acc__item.is-open .rl-acc__body { grid-template-rows: 1fr; }
.rl-acc__body > div { overflow: hidden; }
.rl-acc__body p { padding: 0 4px 22px; color: var(--ink-2); max-width: 74ch; }

/* Reiter */
.rl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: rgba(10,7,21,.6);
}
.rl-tab {
  padding: 9px 15px;
  border-radius: 10px;
  font-family: var(--f-m);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .25s, background .25s;
}
.rl-tab:hover { color: var(--ink-2); background: rgba(198,168,255,.06); }
.rl-tab.is-active {
  color: #fff;
  background: linear-gradient(140deg, var(--vi-600), var(--vi-800));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

/* ── 12 · FOOTER ───────────────────────────────────────────────────────── */
.rl-foot {
  margin-top: var(--sect);
  padding-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--line-2);
  background: linear-gradient(180deg, transparent, rgba(36,11,82,.28));
}
.rl-foot__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(140px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 68px);
}
@media (max-width: 900px) {
  .rl-foot__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rl-foot__brand { grid-column: 1 / -1; }
}
.rl-foot__brand p {
  max-width: 42ch;
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.6;
}
.rl-foot__col h4 {
  margin-bottom: 16px;
  font-family: var(--f-m);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vi-400);
}
.rl-foot__col a {
  display: block;
  padding: 6px 0;
  font-size: 14.5px;
  color: var(--ink-3);
  transition: color .25s, transform .3s var(--e-out);
}
.rl-foot__col a:hover { color: var(--ink); transform: translateX(4px); }
.rl-foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 24px 34px;
  border-top: 1px solid var(--line-2);
  font-family: var(--f-m);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.rl-foot__word {
  padding-block: clamp(10px, 2vw, 24px) 0;
  font-family: var(--f-d);
  font-size: min(12.2vw, calc((var(--maxw-wide) - 2 * var(--gutter)) / 6.6));
  font-weight: 900;
  font-stretch: 122%;
  letter-spacing: -.055em;
  line-height: .8;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198,168,255,.16);
  user-select: none;
  pointer-events: none;
}
.rl-socials { display: flex; gap: 8px; margin-top: 22px; }
.rl-social {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  transition: color .25s, border-color .25s, background .25s, transform .35s var(--e-out);
}
.rl-social:hover {
  color: #fff;
  border-color: var(--line-3);
  background: rgba(139,70,255,.16);
  transform: translateY(-3px);
}
.rl-social svg { width: 18px; height: 18px; }

/* ── 13 · MOTION & REVEAL ──────────────────────────────────────────────── */
[data-rv] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .8s var(--e-out) calc(var(--d, 0) * 1ms),
    transform .8s var(--e-out) calc(var(--d, 0) * 1ms);
  will-change: opacity, transform;
}
[data-rv="l"]  { transform: translateX(-26px); }
[data-rv="r"]  { transform: translateX(26px); }
[data-rv="s"]  { transform: scale(.955); }
[data-rv="m"]  { transform: none; opacity: 0; filter: blur(9px); transition-property: opacity, filter; }
[data-rv].is-in { opacity: 1; transform: none; filter: none; }

/* Wortweises Aufsteigen für große Überschriften */
.rl-split-w {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  vertical-align: bottom;
}
.rl-split-w > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .95s var(--e-out) calc(var(--d, 0) * 1ms);
}
.is-in .rl-split-w > span,
.rl-split-w.is-in > span { transform: none; }

/* Zahlen-Ticker */
.rl-count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rv] { opacity: 1; transform: none; filter: none; }
  .rl-split-w > span { transform: none; }
  .rl-atmo::before, .rl-atmo::after { animation: none; }
}

/* ── 14 · UTILITIES ────────────────────────────────────────────────────── */
.rl-main { padding-top: calc(var(--nav-h) + 30px); }
.rl-main--flush { padding-top: 0; }

.rl-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.rl-skip {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--vi-600);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform .3s var(--e-out);
}
.rl-skip:focus { transform: none; }

.rl-flex   { display: flex; }
.rl-wrapf  { flex-wrap: wrap; }
.rl-ai-c   { align-items: center; }
.rl-jc-b   { justify-content: space-between; }
.rl-jc-c   { justify-content: center; }
.rl-g-6    { gap: 6px; }  .rl-g-10 { gap: 10px; } .rl-g-14 { gap: 14px; }
.rl-g-20   { gap: 20px; } .rl-g-28 { gap: 28px; }
.rl-mt-10  { margin-top: 10px; }  .rl-mt-16 { margin-top: 16px; }
.rl-mt-24  { margin-top: 24px; }  .rl-mt-32 { margin-top: 32px; }
.rl-mt-48  { margin-top: 48px; }  .rl-mt-64 { margin-top: 64px; }
.rl-mb-16  { margin-bottom: 16px; } .rl-mb-24 { margin-bottom: 24px; }
.rl-mb-32  { margin-bottom: 32px; } .rl-mb-48 { margin-bottom: 48px; }
.rl-tc     { text-align: center; }
.rl-full   { grid-column: 1 / -1; }
.rl-dim    { color: var(--ink-2); }
.rl-faint  { color: var(--ink-3); }
.rl-vi     { color: var(--vi-300); }
.rl-mag-c  { color: var(--mag); }
.rl-nowrap { white-space: nowrap; }
@media (max-width: 760px) { .rl-hide-m { display: none !important; } }
@media (min-width: 761px) { .rl-only-m { display: none !important; } }