@import "./journal-themes.css";
/* ==========================================================================
   RE:BELLE™ JOURNAL DESIGN SYSTEM
   --------------------------------------------------------------------------
   Single source of truth for the magazine reading experience.

   • Used by React journal pages via `import "@/styles/journal-system.css"`
     (through src/components/journal/magazine).
   • Copied verbatim to public/journal/_assets/journal.css for the static
     HTML articles (scripts/sync-journal-assets.mjs, runs in prebuild).

   Scope: everything lives under the `.jr` root class so the warm light
   palette never leaks into the dark site chrome (navbar/footer).
   Static pages put `class="jr jr-page"` on <body>.

   Rules of the system
   • mobile-first, rem/clamp typography, 640–720px reading column
   • warm palette: cream / off-white / dusty rose / dark brown
   • ≥44px tap targets, visible focus, reduced-motion respected
   • no external fonts required (system editorial stacks)
   ========================================================================== */

.jr {
  /* Farbdramaturgie kommt aus journal-themes.css (data-jr-theme).
     Die Fallbacks sind der neutrale Editorial-Core, keine Story-Farbe. */
  --jr-bg: var(--jrt-bg, #f5f4f1);
  --jr-band: var(--jrt-band, #eae8e3);
  --jr-surface: var(--jrt-surface, #fbfaf8);
  --jr-fg: var(--jrt-fg, #26241f);
  --jr-fg-strong: var(--jrt-fg-strong, #15130f);
  --jr-fg-soft: var(--jrt-fg-soft, #45413a);
  --jr-muted: var(--jrt-muted, #7a746a);
  --jr-accent: var(--jrt-accent, #8c8478);
  --jr-accent-deep: var(--jrt-accent-deep, #4c463c);
  --jr-accent-dark: var(--jrt-accent-dark, #2c2820);
  --jr-accent-soft: var(--jrt-accent-soft, #e7e4dc);
  --jr-line: var(--jrt-line, #dbd7cf);
  --jr-btn-fg: var(--jrt-btn-fg, #fbfaf8);
  --jr-col: var(--jrt-col, 700px);
  --jr-quote: var(--jrt-quote, 860px);
  --jr-wide: 1080px;
  --jr-gutter: 20px;
  --jr-cover-radius: var(--jrt-cover-radius, 4px);
  --jr-serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --jr-display: "Cormorant Garamond", ui-serif, Georgia, "Iowan Old Style", serif;
  --jr-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --jr-shadow: var(--jrt-shadow, 0 16px 40px rgba(24, 22, 18, 0.07));
  --jr-radius: var(--jrt-radius, 4px);
  --jr-scroll-offset: 96px;

  color-scheme: light;
  background: var(--jr-bg);
  color: var(--jr-fg);
  font-family: var(--jr-serif);
  font-size: 1.125rem;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}
@media (min-width: 720px) {
  .jr { font-size: 1.1875rem; }
}

.jr *,
.jr *::before,
.jr *::after { box-sizing: border-box; }

/* Standalone static document */
html.jr-html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 64px; }
body.jr-page { margin: 0; min-height: 100vh; overflow-x: hidden; }
body.jr-page { --jr-scroll-offset: 24px; }

.jr img { max-width: 100%; height: auto; display: block; }
.jr a { color: inherit; }
.jr a:focus-visible,
.jr button:focus-visible,
.jr summary:focus-visible {
  outline: 2px solid var(--jr-accent-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.jr [id] { scroll-margin-top: var(--jr-scroll-offset); }
.jr strong { font-weight: 600; color: var(--jr-fg-strong); }
.jr em { font-style: italic; }
.jr h1, .jr h2, .jr h3, .jr h4 {
  font-family: var(--jr-display);
  font-style: normal;
  font-weight: 500;
  color: var(--jr-fg-strong);
  overflow-wrap: break-word;
  hyphens: auto;
}
.jr ::selection { background: var(--jr-accent-soft); color: var(--jr-fg-strong); }

@media (prefers-reduced-motion: reduce) {
  html.jr-html { scroll-behavior: auto; }
  .jr *, .jr *::before, .jr *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   Reading progress
   -------------------------------------------------------------------------- */
.jr-progress {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 70;
  pointer-events: none;
  background: transparent;
}
.jr-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--jr-accent);
  transition: width 0.08s linear;
}
@media (prefers-reduced-motion: reduce) {
  .jr-progress i { transition: none; }
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.jr-wrap { max-width: var(--jr-wide); margin: 0 auto; padding: 0 var(--jr-gutter); }
.jr-col { max-width: var(--jr-col); margin: 0 auto; padding: 0 var(--jr-gutter); }

/* --------------------------------------------------------------------------
   Static-page chrome (header/footer). React pages use the site navbar.
   -------------------------------------------------------------------------- */
.jr-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: var(--jr-wide);
  margin: 0 auto;
  padding: 10px var(--jr-gutter);
  border-bottom: 1px solid var(--jr-line);
}
.jr-brand {
  font: 700 0.8125rem/1.2 var(--jr-sans);
  letter-spacing: 0.18em;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.jr-back {
  font: 0.6875rem/1.2 var(--jr-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--jr-muted);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.jr-back:hover { color: var(--jr-accent-deep); }
.jr-backbar { max-width: var(--jr-wide); margin: 0 auto; padding: 8px var(--jr-gutter) 0; }

.jr-footer {
  border-top: 1px solid var(--jr-line);
  padding: 36px var(--jr-gutter) 56px;
  text-align: center;
  color: var(--jr-muted);
  font: 0.75rem/1.9 var(--jr-sans);
}
.jr-footer strong { color: var(--jr-fg); letter-spacing: 0.12em; }
.jr-footer a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.jr-hero { max-width: var(--jr-wide); margin: 0 auto; padding: 44px var(--jr-gutter) 30px; }
@media (min-width: 720px) { .jr-hero { padding-top: 56px; } }
.jr-kicker {
  font: 0.6875rem/1.5 var(--jr-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jr-accent-deep);
  margin: 0 0 18px;
}
.jr-kicker a { text-decoration: none; }
.jr-kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.jr-title {
  font-size: clamp(2.35rem, 8.2vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
  max-width: 16ch;
}
.jr-title em { font-style: italic; color: var(--jr-accent-deep); }
.jr-dek {
  font-family: var(--jr-display);
  font-size: clamp(1.35rem, 3.6vw, 1.95rem);
  line-height: 1.42;
  color: var(--jr-fg-soft);
  max-width: 44ch;
  margin: 24px 0 0;
}
.jr-meta {
  font: 0.8125rem/1.6 var(--jr-sans);
  color: var(--jr-muted);
  margin: 24px 0 0;
}
.jr-meta time { color: inherit; }
.jr-tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jr-tags li {
  font: 0.625rem/1 var(--jr-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jr-fg-soft);
  border: 1px solid var(--jr-line);
  background: var(--jr-surface);
  border-radius: 999px;
  padding: 9px 12px;
}

.jr-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.jr-jump a {
  font: 0.6875rem/1 var(--jr-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--jr-fg);
  border: 1px solid var(--jr-line);
  background: var(--jr-surface);
  border-radius: 999px;
  padding: 0 20px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.jr-jump a:hover { border-color: var(--jr-accent); color: var(--jr-accent-deep); }

/* --------------------------------------------------------------------------
   Cover image
   -------------------------------------------------------------------------- */
.jr-cover { margin: 26px auto 0; max-width: var(--jr-wide); padding: 0 var(--jr-gutter); }
.jr-cover img {
  width: 100%;
  height: auto;
  border-radius: var(--jr-cover-radius, var(--jr-radius));
  border: 1px solid var(--jr-line);
  box-shadow: var(--jr-shadow);
  object-fit: cover;
}
.jr-cover.jr-cover-narrow { max-width: calc(var(--jr-col) + 2 * var(--jr-gutter)); }
.jr-caption {
  font: 0.75rem/1.6 var(--jr-sans);
  color: var(--jr-muted);
  margin: 12px auto 0;
  max-width: var(--jr-col);
}

/* --------------------------------------------------------------------------
   20 Sekunden
   -------------------------------------------------------------------------- */
.jr-tldr {
  margin: 40px auto 0;
  max-width: 760px;
  width: calc(100% - 2 * var(--jr-gutter));
  background: var(--jr-surface);
  border: 1px solid var(--jr-line);
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: var(--jr-shadow);
}
.jr-tldr h2 {
  font: 0.6875rem/1 var(--jr-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--jr-accent-deep);
  margin: 0 0 16px;
}
.jr-tldr ol { margin: 0; padding: 0; list-style: none; counter-reset: jr-t; }
.jr-tldr li {
  counter-increment: jr-t;
  position: relative;
  padding-left: 38px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--jr-fg-soft);
}
.jr-tldr li + li { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--jr-line); }
.jr-tldr li::before {
  content: counter(jr-t);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--jr-accent-soft);
  color: var(--jr-accent-deep);
  font: 600 0.75rem/24px var(--jr-sans);
  text-align: center;
}
.jr-tldr li + li::before { top: calc(0.15em + 14px); }

/* --------------------------------------------------------------------------
   Article body
   -------------------------------------------------------------------------- */
.jr-article { margin: 52px 0 0; }
.jr-sec { padding: 14px 0; }
.jr-sec.jr-band { background: var(--jr-band); padding: 44px 0; margin: 44px 0; }
.jr-sec.jr-soft { background: var(--jr-surface); padding: 44px 0; margin: 44px 0; border-top: 1px solid var(--jr-line); border-bottom: 1px solid var(--jr-line); }

/* Every direct child sits in the reading column unless it opts out. */
.jr-sec > * {
  max-width: var(--jr-col);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--jr-gutter);
  padding-right: var(--jr-gutter);
}
.jr-sec > blockquote,
.jr-sec > .jr-promo,
.jr-sec > .jr-quote-wide { max-width: var(--jr-quote); }
.jr-sec > .jr-figure-wide,
.jr-sec > .jr-wide { max-width: var(--jr-wide); }
.jr-sec > .jr-band-inner { max-width: none; padding: 0; }

.jr-sec p {
  margin-top: 0;
  margin-bottom: 1.3em;
  font-size: 1.125rem;
  line-height: 1.78;
}
@media (min-width: 720px) { .jr-sec p { font-size: 1.1875rem; } }
.jr-sec p.jr-lead { font-size: clamp(1.2rem, 3vw, 1.45rem); line-height: 1.55; color: var(--jr-fg-soft); }
.jr-sec p.jr-small { font-size: 0.9375rem; line-height: 1.7; color: var(--jr-muted); }
.jr-sec p.jr-center { text-align: center; }
.jr-sec p.jr-script { font-family: var(--jr-display); font-size: clamp(1.6rem, 4.6vw, 2.2rem); line-height: 1.3; font-style: italic; color: var(--jr-accent-deep); }

.jr-sec h2 {
  margin-top: 1.9em;
  margin-bottom: 0.7em;
  font-size: clamp(1.85rem, 5.6vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--jr-fg-strong);
}
.jr-sec h2:first-child,
.jr-sec .jr-label + h2 { margin-top: 0.4em; }
.jr-sec h3 {
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  font-size: clamp(1.4rem, 4.2vw, 1.85rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--jr-fg-strong);
}
.jr-sec h4 {
  margin-top: 1.4em;
  margin-bottom: 0.5em;
  font: 600 0.75rem/1.5 var(--jr-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jr-fg-soft);
}

.jr-sec p.jr-label,
.jr-label {
  margin-top: 0;
  margin-bottom: 1.3em;
  font: 0.625rem/1.4 var(--jr-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--jr-accent-deep);
}

.jr-sec ul,
.jr-sec ol {
  margin-top: 0;
  margin-bottom: 1.5em;
  padding-left: calc(var(--jr-gutter) + 1.35em);
  padding-right: var(--jr-gutter);
  list-style: disc;
}
.jr-sec ol { list-style: decimal; }
.jr-sec li { margin: 0 0 0.55em; padding-left: 0.25em; font-size: 1.0625rem; line-height: 1.7; }
@media (min-width: 720px) { .jr-sec li { font-size: 1.125rem; } }
.jr-sec li::marker { color: var(--jr-accent-deep); font-family: var(--jr-sans); font-size: 0.9em; }
.jr-sec li p { margin-bottom: 0.4em; }

.jr-sec a:not([class]) {
  color: var(--jr-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--jr-accent);
}
.jr-sec a:not([class]):hover { color: var(--jr-accent-dark); }

.jr-sec hr,
.jr-rule { max-width: var(--jr-col); margin: 38px auto; padding: 0 var(--jr-gutter); border: 0; }
.jr-rule span, .jr-sec hr { display: block; height: 1px; background: var(--jr-line); }
.jr-rule.jr-rule-dot { display: flex; justify-content: center; }
.jr-rule.jr-rule-dot span { width: 8px; height: 8px; border-radius: 50%; background: var(--jr-accent); }

/* Pullquotes (existing sentences, never new claims) */
.jr blockquote,
.jr-quote {
  margin: 2.2em auto;
  padding: 0 var(--jr-gutter);
  border: 0;
  quotes: none;
}
.jr blockquote p,
.jr-quote p {
  max-width: none;
  margin: 0;
  padding: 0 0 0 22px;
  font-family: var(--jr-display);
  font-size: clamp(1.55rem, 5.6vw, 2.3rem);
  line-height: 1.28;
  color: var(--jr-accent-deep);
  font-weight: 500;
  letter-spacing: -0.005em;
  border-left: 3px solid var(--jr-accent);
  font-style: normal;
}
.jr blockquote p + p { margin-top: 0.6em; }
.jr blockquote footer,
.jr blockquote cite {
  display: block;
  margin: 12px 0 0 25px;
  font: 0.75rem/1.5 var(--jr-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jr-muted);
  font-style: normal;
}
.jr blockquote.jr-quote-center { text-align: center; }
.jr blockquote.jr-quote-center p { border-left: 0; padding-left: 0; }

/* Inline figures */
.jr-figure { margin: 2.2em auto; }
.jr-figure img {
  width: 100%;
  border-radius: var(--jr-cover-radius, var(--jr-radius));
  border: 1px solid var(--jr-line);
  box-shadow: var(--jr-shadow);
}
.jr-figure figcaption {
  font: 0.75rem/1.6 var(--jr-sans);
  color: var(--jr-muted);
  margin: 12px 0 0;
}
.jr-figure.jr-figure-plain img { border: 0; box-shadow: none; border-radius: 12px; }
.jr-gallery { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 2.2em auto; }
@media (min-width: 720px) { .jr-gallery { grid-template-columns: repeat(2, 1fr); } }
.jr-gallery figure { margin: 0; }
.jr-gallery img { width: 100%; border-radius: 14px; border: 1px solid var(--jr-line); }
.jr-gallery figcaption { font: 0.75rem/1.6 var(--jr-sans); color: var(--jr-muted); margin: 8px 0 0; }

/* Soft box for lists, checklists, side notes */
.jr-box { margin: 2em auto; }
.jr-box-inner {
  background: var(--jr-surface);
  border: 1px solid var(--jr-line);
  border-radius: var(--jr-radius);
  padding: 22px 22px 8px;
}
.jr-box-inner > :last-child { margin-bottom: 14px; }
.jr-box .jr-label { margin-bottom: 12px; }
.jr-box-inner ul, .jr-box-inner ol { padding-left: 1.35em; padding-right: 0; }
.jr-box-inner p { font-size: 1.0625rem; }
.jr-box.jr-box-rose .jr-box-inner { background: var(--jr-accent-soft); border-color: transparent; }
.jr-box.jr-box-accent .jr-box-inner { border-top: 3px solid var(--jr-accent); }

/* Definition / stat tiles */
.jr-stats { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin: 1.6em auto 2em; }
@media (min-width: 720px) { .jr-stats { grid-template-columns: repeat(4, 1fr); } }
.jr-stats > div {
  background: var(--jr-surface);
  border: 1px solid var(--jr-line);
  border-radius: 14px;
  padding: 16px 14px;
}
.jr-stats dt { font: 0.625rem/1.4 var(--jr-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--jr-muted); margin: 0 0 6px; }
.jr-stats dd { margin: 0; font-size: 1.35rem; line-height: 1.2; color: var(--jr-fg-strong); font-weight: 500; }

/* Numbered steps */
.jr-steps { list-style: none; padding-left: var(--jr-gutter); padding-right: var(--jr-gutter); counter-reset: jr-s; margin: 1.5em auto 2em; }
.jr-steps > li {
  counter-increment: jr-s;
  position: relative;
  padding: 0 0 18px 46px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--jr-line);
}
.jr-steps > li:last-child { border-bottom: 0; }
.jr-steps > li::before {
  content: counter(jr-s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.35em;
  font: 600 0.6875rem/1 var(--jr-sans);
  letter-spacing: 0.12em;
  color: var(--jr-accent-deep);
  background: var(--jr-accent-soft);
  border-radius: 999px;
  padding: 8px 8px;
}
.jr-steps h3, .jr-steps strong.jr-step-title { display: block; margin: 0 0 0.35em; font-family: var(--jr-display); font-size: 1.35rem; line-height: 1.3; color: var(--jr-fg-strong); }
.jr-steps p { margin-bottom: 0.4em; font-size: 1.0625rem; }

/* Two-column comparison */
.jr-compare { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 1.6em auto 2em; }
@media (min-width: 720px) { .jr-compare { grid-template-columns: repeat(2, 1fr); } }
.jr-compare > div { background: var(--jr-surface); border: 1px solid var(--jr-line); border-radius: 14px; padding: 18px 18px 6px; }
.jr-compare > div.jr-compare-yes { border-color: var(--jr-accent); }
.jr-compare p { font-size: 1.0625rem; }
.jr-compare ul, .jr-compare ol { padding-left: 1.35em; padding-right: 0; }

/* Table */
.jr-table { margin: 1.6em auto 2em; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jr-table table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; min-width: 460px; }
.jr-table th, .jr-table td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--jr-line); vertical-align: top; }
.jr-table th { font: 600 0.6875rem/1.4 var(--jr-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--jr-muted); }
.jr-table tr.jr-hi td { background: var(--jr-accent-soft); }
.jr-table tr.jr-main td { font-weight: 600; color: var(--jr-fg-strong); }

/* Table of contents */
.jr-toc { margin: 1.6em auto 2em; }
.jr-toc ol { list-style: none; padding: 0 var(--jr-gutter); margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jr-toc a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--jr-line); background: var(--jr-surface);
  font: 0.6875rem/1 var(--jr-sans); letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--jr-fg);
}
.jr-toc a:hover { border-color: var(--jr-accent); color: var(--jr-accent-deep); }

/* FAQ */
.jr-faq { margin: 1.6em auto 2em; }
.jr-faq details { border-bottom: 1px solid var(--jr-line); }
.jr-faq summary {
  cursor: pointer; list-style: none;
  padding: 16px 0; min-height: 44px;
  font-size: 1.1rem; line-height: 1.4; color: var(--jr-fg-strong); font-weight: 500;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.jr-faq summary::-webkit-details-marker { display: none; }
.jr-faq summary::after { content: "+"; font-family: var(--jr-sans); color: var(--jr-accent-deep); font-size: 1.3rem; }
.jr-faq details[open] summary::after { content: "–"; }
.jr-faq details p { font-size: 1.0625rem; margin-bottom: 1.2em; color: var(--jr-fg-soft); }

/* Buttons */
.jr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px; border-radius: 999px;
  background: var(--jr-accent-deep); color: var(--jr-btn-fg) !important; text-decoration: none;
  font: 600 0.75rem/1 var(--jr-sans); letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--jr-accent-deep); cursor: pointer;
}
.jr-btn:hover { background: var(--jr-accent-dark); border-color: var(--jr-accent-dark); }
.jr-btn.jr-btn-ghost { background: transparent; color: var(--jr-fg) !important; border-color: var(--jr-line); }
.jr-btn.jr-btn-ghost:hover { border-color: var(--jr-accent); color: var(--jr-accent-deep) !important; background: var(--jr-surface); }
.jr-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4em auto 2em; }
.jr-cta-row p { margin: 0; }

/* --------------------------------------------------------------------------
   Commerce intermezzo — ONE per article, editorial tone
   -------------------------------------------------------------------------- */
.jr-promo { max-width: var(--jr-quote); margin: 56px auto; padding: 0 var(--jr-gutter); }
.jr-promo-inner {
  background: var(--jr-surface);
  border: 1px solid var(--jr-line);
  border-top: 3px solid var(--jr-accent);
  border-radius: 20px;
  padding: 30px 26px;
  box-shadow: var(--jr-shadow);
}
.jr-promo .jr-k {
  font: 0.625rem/1 var(--jr-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--jr-accent-deep);
  margin: 0 0 14px;
}
.jr-promo h3 {
  font-size: clamp(1.5rem, 4.8vw, 2.15rem);
  line-height: 1.18;
  font-weight: 500;
  margin: 0 0 16px;
  color: var(--jr-fg-strong);
  letter-spacing: -0.01em;
}
.jr-promo .jr-prod {
  font: 600 0.8125rem/1.4 var(--jr-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jr-fg);
  margin: 0 0 10px;
}
.jr-promo .jr-copy { font-size: 1.0625rem; line-height: 1.7; color: var(--jr-fg-soft); margin: 0 0 14px; }
.jr-promo .jr-price { font: 0.875rem/1.5 var(--jr-sans); color: var(--jr-muted); margin: 0 0 22px; }
.jr-promo .jr-copy + .jr-btn { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Noch flink schauen? — max. 3 verified internal offers
   -------------------------------------------------------------------------- */
.jr-shelf { background: var(--jr-band); padding: 56px 0; margin: 64px 0 0; }
.jr-shelf .jr-head {
  max-width: var(--jr-wide);
  margin: 0 auto 24px;
  padding: 0 var(--jr-gutter);
  font: 0.6875rem/1 var(--jr-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--jr-accent-deep);
}
.jr-cards {
  max-width: var(--jr-wide);
  margin: 0 auto;
  padding: 0 var(--jr-gutter);
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .jr-cards { grid-template-columns: repeat(3, 1fr); } }
.jr-card {
  position: relative;
  background: var(--jr-surface);
  border: 1px solid var(--jr-line);
  border-radius: var(--jr-radius);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jr-card h3 {
  font: 600 0.8125rem/1.4 var(--jr-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  color: var(--jr-fg);
}
.jr-card p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--jr-fg-soft); }
.jr-card .jr-go {
  margin-top: auto;
  padding-top: 8px;
  font: 600 0.6875rem/1 var(--jr-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jr-accent-deep);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.jr-card .jr-go::after { content: ""; position: absolute; inset: 0; border-radius: var(--jr-radius); }
.jr-card:hover { border-color: var(--jr-accent); }
.jr-card:focus-within { outline: 2px solid var(--jr-accent-deep); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Weiterlesen — 3 related journal articles
   -------------------------------------------------------------------------- */
.jr-more { max-width: var(--jr-col); margin: 56px auto 0; padding: 0 var(--jr-gutter); }
.jr-more h2 {
  font: 0.6875rem/1 var(--jr-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--jr-accent-deep);
  margin: 0 0 8px;
}
.jr-more ul { list-style: none; margin: 0; padding: 0; }
.jr-more li { border-bottom: 1px solid var(--jr-line); }
.jr-more a {
  display: flex;
  align-items: center;
  min-height: 56px;
  gap: 12px;
  text-decoration: none;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--jr-fg);
  padding: 12px 0;
}
.jr-more a:hover { color: var(--jr-accent-deep); }
.jr-more a::after { content: "→"; margin-left: auto; color: var(--jr-accent-deep); font-family: var(--jr-sans); }

/* --------------------------------------------------------------------------
   Note / signoff
   -------------------------------------------------------------------------- */
.jr-note {
  max-width: var(--jr-col);
  margin: 56px auto 0;
  padding: 24px var(--jr-gutter) 0;
  border-top: 1px solid var(--jr-line);
  color: var(--jr-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.jr-note + .jr-note { margin-top: 12px; padding-top: 0; border-top: 0; }
.jr-note a { color: var(--jr-accent-deep); }
.jr-signoff {
  max-width: var(--jr-col);
  margin: 26px auto 0;
  padding: 0 var(--jr-gutter) 72px;
  font-style: italic;
  color: var(--jr-muted);
}
.jr-signoff.jr-signoff-tight { padding-bottom: 32px; }

/* --------------------------------------------------------------------------
   Post navigation (prev/next) inside the light theme
   -------------------------------------------------------------------------- */
.jr-postnav { max-width: var(--jr-col); margin: 0 auto; padding: 0 var(--jr-gutter) 64px; }
.jr-postnav nav { border-top: 1px solid var(--jr-line) !important; margin-top: 0 !important; }
.jr-postnav a { color: var(--jr-muted); }
.jr-postnav a span { color: var(--jr-fg); font-family: var(--jr-serif); }
.jr-postnav a:hover, .jr-postnav a:hover span { color: var(--jr-accent-deep) !important; }
.jr-postnav .text-foreground { color: var(--jr-fg) !important; }
.jr-postnav .text-muted-foreground { color: var(--jr-muted) !important; }
.jr-postnav .group:hover .text-foreground { color: var(--jr-accent-deep) !important; }

/* Legacy DB-content (.journal-content) inside the magazine theme */
.jr .journal-content { color: var(--jr-fg); font-size: inherit; line-height: inherit; }
.jr .journal-content h2, .jr .journal-content h3 { font-style: normal; color: var(--jr-fg-strong); }
.jr .journal-content blockquote { border-left: 3px solid var(--jr-accent); color: var(--jr-accent-deep); font-style: normal; font-size: clamp(1.25rem, 4vw, 1.7rem); line-height: 1.32; }
.jr .journal-content strong { color: var(--jr-fg-strong); }
.jr .journal-content em { color: var(--jr-accent-deep); }
.jr .journal-content .rebelle-kicker,
.jr .journal-content .rebelle-list-card p,
.jr .journal-content .rebelle-question-box p { color: var(--jr-accent-deep); }
.jr .journal-content .rebelle-hero h1,
.jr .journal-content .rebelle-lead { color: var(--jr-fg-strong); font-style: normal; }
.jr .journal-content .rebelle-list-card,
.jr .journal-content .rebelle-question-box { background: var(--jr-surface); border-color: var(--jr-line); border-radius: 14px; }
.jr .journal-content .rebelle-list-card li,
.jr .journal-content .rebelle-question-box li { border-color: var(--jr-line); }
.jr .journal-content img { opacity: 1; border-radius: 14px; }
.jr .journal-content a { color: var(--jr-accent-deep); }