/* ============================================================
   rp-einstieg.css — Einstiegspunkte in die Reverse-Proxy-Blase (RP-8)
   UX-Konzept §3/§4. Liegt auf BoE-/konto-Seiten (nicht injiziert);
   redesign.css ist dort geladen, die Regeln tragen aber eigene
   Token-Fallbacks (self-contained) + sind unter `.rp-einstieg`/
   `.rp-ein-greet` gescoped. Oma-Tinte (Terracotta) nur sparsam.
   ============================================================ */

.rp-einstieg {
  --rpe-leaf: var(--leaf, #609732);
  --rpe-leaf-deep: var(--leaf-deep, #3E7213);
  --rpe-forest: var(--forest, #224C00);
  --rpe-ink: var(--ink, #26301F);
  --rpe-ink-soft: var(--ink-soft, #637056);
  --rpe-paper: var(--paper, #FFFFFF);
  --rpe-warm: var(--warm, #FBFAF5);
  --rpe-line: var(--line, #E4EADA);
  --rpe-meadow: var(--meadow-deep, #CFE3AF);
  --rpe-body: var(--f-body, 'Figtree', system-ui, sans-serif);
  --rpe-shadow: 0 2px 6px rgba(34,76,0,.05), 0 18px 44px -20px rgba(34,76,0,.22);
  display: block;
  margin: 1.4rem 0;
  font-family: var(--rpe-body);
}
.rp-einstieg *, .rp-ein-greet * { box-sizing: border-box; }

.rp-ein-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--rpe-warm);
  border: 1px solid var(--rpe-line);
  border-radius: 16px;
  box-shadow: var(--rpe-shadow);
  padding: 18px 20px;
}
.rp-ein-ava {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--rpe-meadow); color: var(--rpe-forest);
}
.rp-ein-ava svg { width: 26px; height: 26px; display: block; }
.rp-ein-body { min-width: 0; }
.rp-ein-title {
  font-size: 1.12rem; font-weight: 700; color: var(--rpe-forest);
  line-height: 1.3; margin: 0 0 4px;
}
.rp-ein-lede { color: var(--rpe-ink-soft); font-size: .93rem; line-height: 1.5; margin: 0 0 12px; }
.rp-ein-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.rp-ein-btn {
  font-family: inherit; font-size: .92rem; font-weight: 600;
  padding: 9px 15px; border-radius: 11px; cursor: pointer;
  border: 1px solid transparent; text-decoration: none; display: inline-block;
}
.rp-ein-btn--primary { background: var(--rpe-leaf); color: #fff; border-color: var(--rpe-leaf-deep); }
.rp-ein-btn--primary:hover { background: var(--rpe-leaf-deep); }
.rp-ein-btn--ghost { background: transparent; color: var(--rpe-forest); border-color: var(--rpe-line); }
.rp-ein-btn--ghost:hover { background: rgba(34,76,0,.05); }

/* ── Erstkontakt-Begrüßung (§4) — ruhige Oma-Zwischenkarte, kein Wall ── */
.rp-ein-greet {
  --rpe-leaf: var(--leaf, #609732);
  --rpe-leaf-deep: var(--leaf-deep, #3E7213);
  --rpe-forest: var(--forest, #224C00);
  --rpe-ink: var(--ink, #26301F);
  --rpe-ink-soft: var(--ink-soft, #637056);
  --rpe-warm: var(--warm, #FBFAF5);
  --rpe-line: var(--line, #E4EADA);
  --rpe-meadow: var(--meadow-deep, #CFE3AF);
  --rpe-body: var(--f-body, 'Figtree', system-ui, sans-serif);
  /* U2: MUSS über der Begleit-Sidebar/dem Inhalt liegen. Die Sidebar-Panel/-Tab
     liegen bei 2147483000 (rp-sidebar.css) — bei Gleichstand gewann die Sidebar
     und verdeckte diese Erstkontakt-Karte („Ich helf dir …" lag unter „Noch keine
     Buchungen übernommen", nicht klickbar). Über Sidebar, Merken-Overlay
     (…200) und Auto-Login-Ansage (…300), aber unter der Leiste (…400). */
  position: fixed; inset: 0; z-index: 2147483350;
  display: grid; place-items: center;
  font-family: var(--rpe-body);
}
.rp-ein-greet.d-none { display: none; }
.rp-ein-greet-backdrop { position: absolute; inset: 0; background: rgba(34,76,0,.34); }
.rp-ein-greet-card {
  position: relative;
  width: 400px; max-width: calc(100vw - 32px);
  background: var(--rpe-warm); color: var(--rpe-ink);
  border: 1px solid var(--rpe-line); border-radius: 18px;
  box-shadow: 0 24px 60px -18px rgba(34,76,0,.42);
  padding: 24px 24px 20px; text-align: center;
}
.rp-ein-greet-ava {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--rpe-meadow); color: var(--rpe-forest); margin-bottom: 10px;
}
.rp-ein-greet-ava svg { width: 28px; height: 28px; display: block; }
.rp-ein-greet-title { font-size: 1.14rem; font-weight: 700; color: var(--rpe-forest); line-height: 1.35; margin: 0 0 10px; }
.rp-ein-greet-text { font-size: .95rem; color: var(--rpe-ink); line-height: 1.55; margin: 0 0 10px; }
.rp-ein-greet-pw { font-size: .9rem; color: var(--rpe-ink-soft); margin: 0 0 16px; }
.rp-ein-greet-actions { display: flex; flex-direction: column; gap: 8px; }
.rp-ein-greet-actions .rp-ein-btn { width: 100%; padding: 11px 14px; font-size: .95rem; }
.rp-ein-promises {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rpe-line);
}
.rp-ein-promises span { font-size: .8rem; color: var(--rpe-ink-soft); }
.rp-ein-promises span::before { content: "✓ "; color: var(--rpe-leaf); font-weight: 700; }

/* Kill-Switch (§11) — sichtbar, aber ohne Drama: leiser Textlink. */
.rp-ein-kill {
  margin-top: 10px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--rpe-ink-soft); font-family: inherit; font-size: .82rem;
  text-decoration: underline; padding: 2px 0;
}
.rp-ein-kill:hover { color: var(--rpe-tinte, #AA5939); }
.rp-ein-killed { margin: 0; color: var(--rpe-ink-soft); font-size: .92rem; line-height: 1.5; }

/* Payoff-Zeile (§10) — sanfter „das kam dabei rum"-Hinweis. */
[data-rp-payoff] {
  --rpe-leaf: var(--leaf, #609732);
  --rpe-forest: var(--forest, #224C00);
  --rpe-ink: var(--ink, #26301F);
  --rpe-warm: var(--warm, #FBFAF5);
  --rpe-line: var(--line, #E4EADA);
  --rpe-meadow: var(--meadow-deep, #CFE3AF);
  --rpe-body: var(--f-body, 'Figtree', system-ui, sans-serif);
  display: block; font-family: var(--rpe-body);
}
[data-rp-payoff]:empty { display: none; }
.rp-payoff-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 1rem 0;
  background: var(--rpe-warm); border: 1px solid var(--rpe-line);
  border-radius: 14px; padding: 12px 16px;
  color: var(--rpe-ink); font-weight: 600;
}
.rp-payoff-ava {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--rpe-meadow); color: var(--rpe-forest);
}
.rp-payoff-ava svg { width: 20px; height: 20px; display: block; }
.rp-payoff-text { color: var(--rpe-forest); }
.rp-payoff-link { margin-left: auto; color: var(--rpe-leaf); font-weight: 700; text-decoration: none; white-space: nowrap; }
.rp-payoff-link:hover { text-decoration: underline; }

/* ── RP-8b Plattform-Hub ── */
.rp-hub-item { margin: 1.6rem 0; }
.rp-hub-count {
  --rpe-leaf: var(--leaf, #609732);
  --rpe-forest: var(--forest, #224C00);
  --rpe-ink-soft: var(--ink-soft, #637056);
  --rpe-body: var(--f-body, 'Figtree', system-ui, sans-serif);
  font-family: var(--rpe-body); font-size: .9rem; color: var(--rpe-forest);
  margin: 0 0 .4rem; padding: 0 2px;
}
.rp-hub-count:empty { display: none; }
.rp-hub-count-text { font-weight: 600; }
.rp-hub-off {
  --rpe-ink: var(--ink, #26301F);
  --rpe-ink-soft: var(--ink-soft, #637056);
  --rpe-warm: var(--warm, #FBFAF5);
  --rpe-line: var(--line, #E4EADA);
  --rpe-forest: var(--forest, #224C00);
  --rpe-body: var(--f-body, 'Figtree', system-ui, sans-serif);
  display: flex; align-items: center; gap: 12px;
  background: var(--rpe-warm); border: 1px solid var(--rpe-line);
  border-radius: 16px; padding: 16px 18px; font-family: var(--rpe-body);
  opacity: .8;
}
.rp-hub-off-ava {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--line, #E4EADA); color: var(--rpe-ink-soft);
}
.rp-hub-off-ava svg { width: 22px; height: 22px; display: block; }
.rp-hub-off-name { color: var(--rpe-forest); }
.rp-hub-off-note { margin: 2px 0 0; color: var(--rpe-ink-soft); font-size: .92rem; }

/* ── UI-B Relevanz-Gruppen + Status je Plattform (Felix 12.07.) ── */
.rp-hub-group-title {
  --rpe-forest: var(--forest, #224C00);
  --rpe-ink-soft: var(--ink-soft, #637056);
  --rpe-line: var(--line, #E4EADA);
  --rpe-display: var(--f-display, 'Fraunces', Georgia, serif);
  font-family: var(--rpe-display); font-weight: 600;
  font-size: 1.15rem; color: var(--rpe-forest);
  margin: 2.4rem 0 .2rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--rpe-line);
}
.rp-hub-group-title--muted { color: var(--rpe-ink-soft); font-weight: 500; }

/* Status-Zeile über der Einstieg-Karte: Buchungszahl, Zugang, „meine"-Badge. */
.rp-hub-status {
  --rpe-leaf: var(--leaf, #609732);
  --rpe-forest: var(--forest, #224C00);
  --rpe-ink-soft: var(--ink-soft, #637056);
  --rpe-warm: var(--warm, #FBFAF5);
  --rpe-line: var(--line, #E4EADA);
  --rpe-body: var(--f-body, 'Figtree', system-ui, sans-serif);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-family: var(--rpe-body); font-size: .9rem; color: var(--rpe-forest);
  margin: 0 0 .5rem; padding: 0 2px;
}
.rp-hub-badge {
  display: inline-flex; align-items: center;
  background: var(--rpe-leaf); color: #fff;
  font-weight: 700; font-size: .74rem; letter-spacing: .02em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
}
.rp-hub-stat { color: var(--rpe-ink-soft); }
.rp-hub-stat-num { color: var(--rpe-forest); font-weight: 700; }
.rp-hub-cred { color: var(--rpe-forest); text-decoration: none; font-weight: 600; }
a.rp-hub-cred:hover { text-decoration: underline; }
.rp-hub-cred-none { color: var(--rpe-ink-soft); font-style: italic; }

/* „Meine" hervorgehoben, „mögliche" ruhiger. */
.rp-hub-mine { position: relative; }
.rp-hub-possible { opacity: .92; }
.rp-hub-possible .rp-ein-card { background: var(--warm, #FBFAF5); }

/* Die Erstkontakt-Begrüßung ist position:fixed, sitzt im DOM aber IN der
   Plattform-Karte. Karten bilden einen eigenen Stacking-Context (mögliche über
   `opacity`, meine über `position`), der das riesige z-index des Popups kappt —
   dann malt die nächste Karte darüber. Solange eine Karte ein offenes Popup
   trägt, heben wir sie darum über ihre Geschwister und die Seiten-Chrome
   (trip-dialog liegt bei 1090). Braucht `position` + `z-index` am Karten-Element. */
.rp-hub-item:has(.rp-ein-greet:not(.d-none)) {
  position: relative;
  z-index: 2000;
}

@media (max-width: 560px) {
  .rp-ein-card { flex-direction: column; }
  .rp-payoff-link { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-einstieg *, .rp-ein-greet * { transition: none !important; animation: none !important; }
}