/* ============================================================
   Sharpa — Real World Evidence Initiative (page-specific)
   Used by: real-world-evidence-initiative.html (de + en)
   Builds on assets/css/main.css (tokens, nav, footer, buttons).
   ============================================================ */

:root {
  --rwe-max: 1080px;
  --rwe-narrow: 680px;
  --font-mono: 'Source Code Pro', ui-monospace, monospace;
}

.wrap { max-width: var(--rwe-max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2rem); }
.narrow { max-width: var(--rwe-narrow); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--petrol);
  margin-bottom: 1.4rem;
}

.creme { background: var(--creme); }

p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Hero ---------- */
.hero { padding: clamp(6.5rem, 10vw, 8.5rem) clamp(1.25rem, 4vw, 2rem) clamp(3rem, 5vw, 4.5rem); }
.hero h1 { margin-bottom: 1.5rem; max-width: 20ch; }
.hero .lede { font-size: 1.22rem; max-width: 56ch; color: var(--text-dark); margin-bottom: 2.4rem; }

.btn {
  display: inline-block;
  background: var(--amber); color: var(--text-black);
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 600;
  padding: 15px 30px; border-radius: 4px;
  text-decoration: none; border: 1px solid transparent;
}
.btn:hover { background: #B98D5D; color: var(--text-black); }
.btn-note {
  font-family: var(--font-mono); font-size: .82rem; color: var(--text-muted);
  margin-top: 1rem; letter-spacing: .01em;
}

/* ---------- Facts strip ---------- */
.facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--bg-medium); border: 1px solid var(--bg-medium); border-radius: 6px; overflow: hidden;
}
.fact { background: var(--bg-light); padding: 32px 26px; }
.creme .fact { background: var(--creme); }
.fact .num {
  font-family: var(--font-mono); font-size: 2rem; font-weight: 600;
  color: var(--petrol); display: block; line-height: 1.1; margin-bottom: .5rem;
}
.fact .lbl { font-size: .95rem; color: var(--text-dark); line-height: 1.45; }
@media (max-width: 700px) { .facts { grid-template-columns: 1fr; } }

/* ---------- Icon rows ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 44px; margin-top: 2.8rem; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 36px; } }
.step .ico { margin-bottom: 1rem; display: block; }
.step h3 { margin-bottom: .45rem; }
.step p { font-size: 1rem; color: var(--text-dark); }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 2.6rem; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--bg-light); border: 1px solid var(--bg-medium); border-radius: 6px; padding: 30px 28px; }
.creme .card { background: #F7F4EE; border-color: #E4DED2; }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: 1rem; margin: 0; }

/* ---------- Text + Note Sidebar Row ---------- */
.text-note-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 2rem 2.5rem; align-items: start; margin-top: 1.4rem; }
@media (max-width: 760px) { .text-note-row { grid-template-columns: 1fr; } }

/* ---------- Hinweiskasten ---------- */
.note {
  margin-top: 2rem; padding: 22px 26px;
  background: var(--bg-light); border: 1px solid var(--bg-medium);
  border-left: 3px solid var(--amber); border-radius: 0 6px 6px 0;
}
.text-note-row .note { margin-top: 0; }
.creme .note { background: #F7F4EE; border-color: #E4DED2; border-left-color: var(--amber); }
.note p { font-size: 1rem; margin: 0; }
.note strong { color: var(--petrol); font-weight: 600; }

/* ---------- Closing CTA ---------- */
.close { background: var(--petrol); }
.close .eyebrow { color: #9FB8B8; }
.close h2 { color: var(--creme); max-width: 22ch; margin-bottom: 1.1rem; }
.close p { color: #DCD6C9; max-width: 54ch; margin-bottom: 2rem; }
.close .btn { background: var(--creme); color: var(--petrol); }
.close .btn:hover { background: #fff; color: var(--petrol); }
.close .btn-note { color: #9FB8B8; }

/* ---------- Warum es Sharpa gibt ---------- */
.why h2 { max-width: 26ch; margin-bottom: 1.4rem; }
.why .links { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.why .links a:not(.btn) { font-size: 1rem; }