/* ============================================================
   Grund-Stylesheet
   Dunkles Design, angelehnt an runway.com
   Farben und Abstände zentral hier ändern (:root).
   ============================================================ */

:root {
  --bg: #08080a;
  --bg-2: #111115;
  --line: rgba(255, 255, 255, 0.10);
  --text: #f3f3f5;
  --muted: #9a9aa3;
  --accent: #8b7cff;      /* Violett */
  --accent-2: #3fd0c9;    /* Türkis */
  --radius: 18px;
  --max: 1240px;
  /* Systemschriften: keine Google Fonts nötig (DSGVO-freundlich) */
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8, 8, 10, 0.75);
  backdrop-filter: blur(14px);
  border-color: var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { font-weight: 700; letter-spacing: -0.02em; font-size: 18px; }
.logo span { color: var(--muted); font-weight: 400; }
.nav ul { display: flex; gap: 32px; list-style: none; align-items: center; }
.nav ul a { color: var(--muted); font-size: 15px; transition: color .2s; }
.nav ul a:hover, .nav ul a.active { color: var(--text); }
.menu-btn { display: none; background: none; border: 0; color: var(--text); font-size: 26px; cursor: pointer; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 600;
  transition: transform .2s, background .2s, color .2s;
}
.btn-primary { background: var(--text); color: #000; }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { background: rgba(255,255,255,.06); }
.nav .btn { padding: 10px 20px; font-size: 14px; }
.nav ul a.btn-primary { color: #000; }

/* ---------- Hero mit Video ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: flex-end;
  overflow: hidden; padding-bottom: 12vh;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video, .hero-media canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-media::after {
  /* Abdunkelung, damit Text immer lesbar bleibt */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,.35) 0%, rgba(8,8,10,.2) 40%, var(--bg) 100%);
}
.hero .wrap { position: relative; z-index: 1; }
.eyebrow {
  display: inline-block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(44px, 8.5vw, 124px); line-height: .98; letter-spacing: -0.045em;
  font-weight: 600; max-width: 13ch;
}
.grad {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { margin-top: 28px; max-width: 560px; color: #c9c9d0; font-size: 19px; }
.hero .actions { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Kleinere Hero-Variante für Unterseiten */
.hero.small { min-height: 62vh; padding-bottom: 8vh; }
.hero.small h1 { font-size: clamp(40px, 7vw, 96px); max-width: 16ch; }

/* ---------- Sektionen ---------- */
section { padding: 120px 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 56px; flex-wrap: wrap; }
h2 { font-size: clamp(34px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; max-width: 18ch; }
h3 { font-size: 22px; letter-spacing: -0.01em; font-weight: 600; margin-bottom: 10px; }
.muted { color: var(--muted); }
.section-head p { max-width: 440px; color: var(--muted); }

/* Laufband */
.marquee { border-block: 1px solid var(--line); overflow: hidden; padding: 22px 0; }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: marquee 38s linear infinite; }
.marquee-track span { font-size: 22px; color: var(--muted); white-space: nowrap; }
.marquee-track span::before { content: "✦"; margin-right: 56px; color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Karten-Raster */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; position: relative; overflow: hidden; transition: border-color .3s, transform .3s;
}
.card:hover { border-color: rgba(139,124,255,.45); transform: translateY(-4px); }
.card .num { font-size: 13px; color: var(--muted); letter-spacing: .1em; margin-bottom: 40px; display: block; }
.card p { color: var(--muted); font-size: 16px; }
.card ul { margin-top: 16px; padding-left: 18px; color: var(--muted); font-size: 15px; }
.card ul li { margin-bottom: 6px; }
.card.highlight {
  background: radial-gradient(120% 120% at 100% 0%, rgba(139,124,255,.22), transparent 55%),
              radial-gradient(120% 120% at 0% 100%, rgba(63,208,201,.14), transparent 55%), var(--bg-2);
}
.tag {
  display: inline-block; font-size: 12px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); margin-bottom: 18px;
}

/* Nischen-Block */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.split p + p, p.muted + p.muted { margin-top: 16px; }
.checks { list-style: none; margin-top: 28px; }
.checks li { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; gap: 14px; }
.checks li::before { content: "→"; color: var(--accent-2); }

/* Zahlen */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.stat { padding: 36px 0; border-right: 1px solid var(--line); padding-right: 24px; }
.stat:last-child { border-right: 0; }
.stat + .stat { padding-left: 32px; }
.stat b { display: block; font-size: clamp(40px, 5vw, 64px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.stat span { color: var(--muted); font-size: 15px; }

/* Ablauf */
.steps { counter-reset: s; }
.step { display: grid; grid-template-columns: 120px 1fr 1.4fr; gap: 32px; padding: 34px 0; border-top: 1px solid var(--line); }
.step::before { counter-increment: s; content: "0" counter(s); color: var(--muted); font-size: 14px; }
.step p { color: var(--muted); }

/* CTA */
.cta {
  border-radius: 28px; padding: 90px 56px; text-align: center; position: relative; overflow: hidden;
  background: radial-gradient(80% 140% at 50% 0%, rgba(139,124,255,.35), transparent 60%), var(--bg-2);
  border: 1px solid var(--line);
}
.cta h2 { margin: 0 auto 20px; }
.cta p { color: var(--muted); max-width: 520px; margin: 0 auto 34px; }

/* Über mich */
.portrait {
  aspect-ratio: 4 / 5; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(160deg, #1a1a22, #0d0d11);
  display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px;
  overflow: hidden; position: relative;
}
/* Foto an die Website-Farben angleichen:
   leicht entsättigt + mehr Kontrast, darüber ein Violett/Türkis-Farbschleier
   und unten ein Verlauf ins Seitenschwarz */
.portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: saturate(.55) contrast(1.12) brightness(.92);
  transition: filter .6s ease, transform .8s ease;
}
.portrait::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(150deg, var(--accent) 0%, transparent 35%, transparent 70%, var(--accent-2) 100%);
  mix-blend-mode: soft-light; opacity: .55;
}
.portrait::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(8,8,10,.85) 100%),
              radial-gradient(90% 70% at 50% 35%, transparent 55%, rgba(8,8,10,.55) 100%);
}
.portrait:hover img { filter: saturate(.8) contrast(1.08) brightness(.98); transform: scale(1.03); }
.portrait-caption {
  position: absolute; left: 28px; bottom: 24px; z-index: 2;
  color: var(--text); font-weight: 600; font-size: 18px; line-height: 1.35;
}
.portrait-caption small { color: var(--muted); font-weight: 400; font-size: 14px; }
.timeline { list-style: none; }
.timeline li { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); }
.timeline li b { font-weight: 600; }
.timeline li span { color: var(--muted); font-size: 15px; }

/* Kontaktformular */
form { display: grid; gap: 16px; }
label { font-size: 14px; color: var(--muted); display: grid; gap: 8px; }
input, textarea, select {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); padding: 14px 16px; font: inherit; font-size: 16px; width: 100%;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
textarea { min-height: 150px; resize: vertical; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.consent input { width: auto; margin-top: 4px; }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 48px 0; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
footer nav { display: flex; gap: 24px; }
footer a:hover { color: var(--text); }

/* ---------- Parallax-Elemente ---------- */
.parallax-zone { position: relative; overflow: hidden; }
.parallax-zone > .wrap { position: relative; z-index: 1; }
/* Leuchtende Farbkugeln im Hintergrund */
.orb {
  position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0;
  opacity: .45; will-change: translate;
}
.orb.violet { background: var(--accent); }
.orb.teal { background: var(--accent-2); opacity: .3; }
/* Riesiges Hintergrundwort mit Umriss */
.bg-word {
  position: absolute; z-index: 0; pointer-events: none; white-space: nowrap; will-change: translate;
  font-size: clamp(160px, 28vw, 420px); font-weight: 700; letter-spacing: -0.06em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07);
}
.hero-media { will-change: translate, scale; }
.hero .wrap { will-change: translate, opacity; }
/* Foto etwas größer, damit es sich im Rahmen verschieben kann */
.portrait img { scale: 1.15; will-change: translate; }
/* Lichtpunkt, der auf Karten der Maus folgt */
.card { transition: border-color .3s, transform .25s ease-out; }
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 50%), rgba(139,124,255,.16), transparent 60%);
}
.card:hover::after { opacity: 1; }
.card > *, .cta > *:not(.orb) { position: relative; z-index: 1; }

/* ---------- three.js-Bühnen ---------- */
.three-stage canvas { display: block; }
.three-box {
  height: 320px; margin-bottom: 8px; border-radius: var(--radius);
  border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(70% 70% at 50% 50%, rgba(139,124,255,.12), transparent 70%), var(--bg-2);
}
.three-box canvas { display: block; width: 100% !important; height: 100% !important; }
/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.legal { max-width: 780px; }
.legal h2 { font-size: clamp(26px, 3vw, 34px); margin: 64px 0 18px; max-width: none; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 19px; margin: 32px 0 10px; }
.legal p, .legal li { color: #c3c3cb; font-size: 16px; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; margin: 12px 0; }
.legal li { margin-bottom: 6px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal address { font-style: normal; color: var(--text); line-height: 1.7; }
/* Platzhalter: gelb markiert, bis echte Daten eingetragen sind */
.ph { background: rgba(255, 210, 0, .18); color: #ffd84d; padding: 0 6px; border-radius: 4px; }

/* Einblend-Animation beim Scrollen */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  section { padding: 84px 0; }
  .grid-3, .grid-2, .split { grid-template-columns: 1fr; }
  .split { gap: 40px; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0 !important; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
  .cta { padding: 64px 24px; }
  .menu-btn { display: block; }
  .nav ul {
    position: fixed; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0;
    background: rgba(8,8,10,.97); border-bottom: 1px solid var(--line);
    display: none; padding: 12px 24px 24px;
  }
  .nav ul.open { display: flex; }
  .nav ul li { width: 100%; }
  .nav ul a { display: block; padding: 14px 0; font-size: 18px; }
  .nav ul a.btn { margin-top: 8px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Feinschliff (Okt. 2026): ruhigeres, professionelleres Erscheinungsbild
   Diese Regeln stehen bewusst am Ende und überschreiben ältere.
   ============================================================ */
::selection { background: rgba(139,124,255,.35); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
body { letter-spacing: -0.005em; }
p { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }

/* Logo mit Monogramm */
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo::before {
  content: "RJ"; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0b0b10;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.nav .wrap { height: 76px; }
.nav.scrolled { background: rgba(8,8,10,.82); }

/* Abschnitts-Label mit Farblinie */
.label {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.label::before { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
h2 { font-size: clamp(32px, 4.4vw, 56px); }

/* Hero */
.hero h1 { font-size: clamp(44px, 7.4vw, 108px); }
.hero p.lead { color: #c4c4cc; max-width: 540px; }
.hero-media::after {
  /* links abdunkeln (Lesbarkeit des Textes), unten in den Seitenhintergrund auslaufen */
  background:
    linear-gradient(90deg, rgba(8,8,10,.8) 0%, rgba(8,8,10,.25) 38%, transparent 52%),
    linear-gradient(180deg, rgba(8,8,10,.1) 0%, transparent 45%, var(--bg) 100%);
}
.hero-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 44px; color: var(--muted); font-size: 14px; }
.hero-meta li { display: inline-flex; align-items: center; gap: 9px; }
.hero-meta li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
.scroll-hint {
  position: absolute; left: 50%; bottom: 32px; z-index: 2; width: 24px; height: 38px; margin-left: -12px;
  border: 1.5px solid rgba(255,255,255,.28); border-radius: 14px;
}
.scroll-hint span {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px; background: #fff; animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* Buttons und Textlinks */
.btn-primary:hover { box-shadow: 0 0 0 5px rgba(255,255,255,.08), 0 10px 30px rgba(139,124,255,.25); }
.btn-ghost:hover { border-color: rgba(255,255,255,.3); }
.text-link {
  display: inline-flex; gap: 8px; font-weight: 600; font-size: 15px;
  border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: border-color .2s;
}
.text-link:hover { border-color: var(--accent-2); }

/* Icons (Linien-Icons als inline-SVG) */
.icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 28px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--accent-2);
}
.icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card .num { position: absolute; top: 34px; right: 34px; margin: 0; }

/* Leiste "Einsatzfelder" */
.fields { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.field { padding: 34px 28px; border-right: 1px solid var(--line); }
.field:last-child { border-right: 0; }
.field .icon { width: 40px; height: 40px; margin-bottom: 18px; }
.field b { display: block; font-weight: 600; margin-bottom: 6px; }
.field span { color: var(--muted); font-size: 15px; }

/* FAQ als Aufklapp-Liste */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; font-size: 19px; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 300; font-size: 28px; line-height: 1; transition: transform .3s, color .3s; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--accent-2); }
.faq summary:hover { color: #fff; }
.faq details p { color: var(--muted); max-width: 760px; padding: 0 0 28px; margin-top: -6px; }

/* Ruhiger: keine Riesen-Hintergrundwörter, dezentere Leuchtkugeln */
.bg-word { display: none; }
.orb { opacity: .22; }
.orb.teal { opacity: .14; }

footer { padding: 56px 0; }
footer .wrap { align-items: center; }

@media (max-width: 900px) {
  .fields { grid-template-columns: 1fr 1fr; }
  .field:nth-child(2) { border-right: 0; }
  .field:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .hero-media::after { background: linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.45) 50%, var(--bg) 100%); }
  .scroll-hint { display: none; }
}
@media (max-width: 560px) {
  .fields { grid-template-columns: 1fr; }
  .field { border-right: 0; border-bottom: 1px solid var(--line); }
  .field:last-child { border-bottom: 0; }
}

/* Persönliche Begrüßung und Angebot (werden von gate.php für angemeldete Benutzer eingefügt) */
.rj-welcome {
  display: inline-block; margin-bottom: 26px; padding: 10px 18px; border-radius: 999px;
  background: rgba(17,17,21,.72); border: 1px solid rgba(63,208,201,.35); backdrop-filter: blur(8px);
  color: #c9c9d0; font-size: 16px; max-width: 100%;
}
.rj-welcome b { color: var(--text); font-weight: 600; }
.rj-h3 { font-size: 20px; font-weight: 600; }
/* Hinweis "Entwurf" im Angebotsprofil */
.rj-draft {
  display: flex; gap: 14px; align-items: baseline; margin-bottom: 48px; padding: 14px 20px; border-radius: 14px;
  background: rgba(139, 124, 255, .08); border: 1px dashed rgba(139, 124, 255, .55); color: #c9c9d0; font-size: 15px;
}
.rj-draft b {
  flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #08080a;
}
.rj-offer-split { align-items: start; }
.rj-offer-split .checks { margin-top: 12px; }
@media (max-width: 560px) {
  .rj-welcome { border-radius: 14px; font-size: 15px; }
}

/* ---------- Preloader (nur Startseite) ----------
   Eine halbdurchsichtige Ebene mit Unschärfe liegt über der Seite, bis das Partikelsystem
   bereit ist (Logik in main.js). Ohne JavaScript bleibt sie ausgeblendet. */
#rj-preloader {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: rgba(8, 8, 10, .5);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  transition: opacity .8s ease, backdrop-filter .8s ease, -webkit-backdrop-filter .8s ease;
}
html:not(.rj-loading) #rj-preloader:not(.rj-preloader-out) { display: none; }
#rj-preloader.rj-preloader-out {
  opacity: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
}
.rj-spinner {
  width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .08);
  border-top-color: var(--accent); border-right-color: var(--accent-2);
  box-shadow: 0 0 24px rgba(139, 124, 255, .25);
  animation: rj-spin .9s linear infinite;
}
.rj-bar { width: min(260px, 70vw); height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.rj-bar span {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px rgba(63, 208, 201, .6);
}
#rj-preloader p { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#rj-preloader p b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes rj-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rj-spinner { animation-duration: 2.4s; }
}

/* ---------- Scrollleiste im Design der Seite ----------
   Chrome, Edge, Safari: schmale dunkle Leiste, Griff mit Verlauf Violett -> Türkis, leuchtet beim Darüberfahren.
   Firefox kennt nur Farben (kein Verlauf), dort schmal in Violett. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  border-radius: 999px; border: 2px solid var(--bg);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
::-webkit-scrollbar-thumb:hover {
  border-width: 1px;
  background: linear-gradient(180deg, #a497ff, #6fe3dd);
  box-shadow: 0 0 10px rgba(63, 208, 201, .6);
}
::-webkit-scrollbar-corner { background: var(--bg); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg); }
}

/* ---------- Hintergrundvideo im Header (eigene Datei, hinter der Partikelkugel) ---------- */
.rj-bgvideo {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; opacity: .6;
}
/* Verlauf im Header: links fast Schwarz (bis ca. 1/4, Video schimmert leicht durch),
   nach rechts transparent (ab ca. 3/4). Liegt über dem Video, aber unter der Partikelkugel. */
.three-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, .55) 25%, transparent 75%);
}

/* ---------- 3D-Seitenübergänge (Würfel-Drehung) ----------
   Beim Wechsel zwischen den Seiten dreht sich die alte Seite wie die Fläche eines Würfels weg,
   die neue dreht sich herein. Technik: CSS View Transitions (Chrome, Edge, Safari ab 18.2).
   Andere Browser wechseln die Seiten einfach normal. Die Drehrichtung setzt transitions.js.
   Wer "Bewegung reduzieren" im Betriebssystem eingestellt hat, bekommt nur eine kurze Überblendung. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  /* Hintergrund hinter dem Würfel: dunkel mit leichtem Violett-Schimmer */
  ::view-transition {
    background: radial-gradient(60% 60% at 50% 50%, rgba(139, 124, 255, .14), transparent 70%), #050507;
  }
  ::view-transition-old(root) {
    animation: rj-cube-out .9s cubic-bezier(.77, 0, .23, 1) both, rj-cube-dip .9s ease-in-out both;
  }
  ::view-transition-new(root) {
    animation: rj-cube-in .9s cubic-bezier(.77, 0, .23, 1) both, rj-cube-dip .9s ease-in-out both;
  }
  /* Zurück (im Menü nach links): Würfel dreht sich in die andere Richtung */
  html.rj-vt-back::view-transition-old(root) { animation-name: rj-cube-in, rj-cube-dip; animation-direction: reverse, normal; }
  html.rj-vt-back::view-transition-new(root) { animation-name: rj-cube-out, rj-cube-dip; animation-direction: reverse, normal; }
}

/* Drehung um die Würfelmitte (eine halbe Bildschirmbreite hinter der Seite) */
@keyframes rj-cube-out {
  from { transform: perspective(150vw) translateZ(-50vw) rotateY(0deg) translateZ(50vw); filter: brightness(1); }
  to   { transform: perspective(150vw) translateZ(-50vw) rotateY(-90deg) translateZ(50vw); filter: brightness(.35); }
}
@keyframes rj-cube-in {
  from { transform: perspective(150vw) translateZ(-50vw) rotateY(90deg) translateZ(50vw); filter: brightness(.35); }
  to   { transform: perspective(150vw) translateZ(-50vw) rotateY(0deg) translateZ(50vw); filter: brightness(1); }
}
/* Während der Drehung rückt der Würfel kurz nach hinten, damit man die Kanten sieht */
@keyframes rj-cube-dip {
  50% { scale: .84; }
}