@charset "UTF-8";
/* ============================================================
 * cjump_components.css — SINGLE-SOURCE der geteilten LP/Legal-Komponenten
 * ============================================================
 * Konventionen 2026-06-23 (Carlo): Button-Doppellinie IMMER 1:1
 *   (Anthrazit = Weiss, gleiche Dicke) — Haupt-CTA 4px+4px, Nav 3px+3px.
 *   Dokument-/Legal-Ueberschriften = Nunito 800 (NICHT Cormorant kursiv).
 *   Schriftskala (Desktop/Handy<=480): H1 48/30, H2 28/22, H3 20/18, Body 17/16, Caption 14/13.
 *   Fliesstext linksbuendig (KEIN Blocksatz).
 *
 * Geladen via @import am Kopf von landing.css + legal.css (nach cjump_tokens.css).
 * Damit ist hier die EINZIGE Definition von Button/Nav/Footer fuer LP + Legal —
 * keine Doppel-Pflege mehr in landing.css/legal.css.
 * REGEL: KEIN Hardcoded Brand-Hex — nur var(--cj-*). rgba()-Glows/Scrims ok.
 * ============================================================ */

/* Reserviert die Scrollleisten-Rinne, damit Seiten mit/ohne Scrollbar den zentrierten Header nicht seitlich verschieben. */
html { scrollbar-gutter: stable; }

:root { --cj-ease-premium: cubic-bezier(0.16, 1, 0.3, 1); }

/* ─── Button — EIN System, Doppellinie 1:1 (Carlo 2026-06-23) ─── */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cj-space-1);
  font-family: var(--cj-font-body);
  font-weight: 800;
  font-size: var(--cj-text-body-lg);
  line-height: 1;
  padding: var(--cj-space-2) var(--cj-space-4);
  border: 0;
  border-radius: var(--cj-r-pill);
  cursor: pointer;
  text-align: center;
  text-decoration: none;   /* lp-btn wird auch als <a> genutzt (Athlete-PWA reactivate) - nie Link-Unterstrich */
  transition: transform 180ms var(--cj-ease-premium), box-shadow 220ms var(--cj-ease-premium), background 220ms var(--cj-ease-premium);
  -webkit-tap-highlight-color: transparent;
}
.lp-btn svg { width: 20px; height: 20px; flex: none; }

/* Haupt-CTA: Anthrazit-Innenrand + weisser Aussenrand, GLEICHE Dicke 4px:4px (= CJ-Monogramm-Look, kraeftig). */
.lp-btn--primary {
  background: var(--cj-grad-primary);
  color: var(--cj-white);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  box-shadow: var(--cj-btn-primary-ring), var(--cj-shadow-cta);
}
.lp-btn--primary:hover {
  background: var(--cj-grad-primary-hover);
  box-shadow: var(--cj-btn-primary-ring), var(--cj-shadow-cta-hover);
  transform: translateY(-2px);
}
.lp-btn--primary:active { transform: translateY(0) scale(0.98); }
.lp-btn--primary svg { transition: transform 220ms var(--cj-ease-premium); }
.lp-btn--primary:hover svg { transform: translateX(4px); }

/* Sekundaer-CTA: ruhig, Hairline-Outline (kein zweiter blauer Block) */
.lp-btn--secondary {
  background: transparent;
  color: var(--cj-white);
  box-shadow: inset 0 0 0 1.5px var(--cj-white-30);
}
.lp-btn--secondary:hover { box-shadow: inset 0 0 0 1.5px var(--cj-white); transform: translateY(-1px); }

/* Ein Kontext, der Links faerbt - `.faq__answer a`, `.cj-lp a`, jede kuenftige `X a`-Regel -
   hat Spezifitaet 0,1,1 und schlaegt damit JEDE Knopf-Klasse (0,1,0). Im Partner-Kit stand
   dadurch electric-blauer Text auf blauem Verlauf (Carlo 29.07.). Statt das in jedem Kontext
   einzeln auszunehmen, steht die Knopf-Farbe hier einmal mit Element-Selektor fest - damit
   gewinnt sie auch gegen Kontexte, die es heute noch gar nicht gibt. */
a.lp-btn--primary   { color: var(--cj-white); }
a.lp-btn--secondary { color: var(--cj-white); }

.lp-btn--lg { padding: var(--cj-space-3) var(--cj-space-5); font-size: var(--cj-text-body-xl); }
/* Block-Variante: full-width (z.B. Checkout-CTA) */
.lp-btn--block { display: flex; width: 100%; }
/* Disabled-State (z.B. Submit-Gate) — Doppellinie bleibt, nur gedimmt */
.lp-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ─── Nav (vereint: LP-Shell-Verhalten + Konventions-CTA 3:3) ─── */
.lp-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--cj-z-sticky);
  padding: var(--cj-space-4) 0;
  transition: background 220ms var(--cj-ease-premium), border-color 220ms var(--cj-ease-premium), padding 220ms var(--cj-ease-premium);
  border-bottom: 1px solid transparent;
}
.lp-nav.is-stuck {
  padding: var(--cj-space-3) 0;
  background: rgba(20, 20, 20, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--cj-white-10);
}
.lp-nav__inner { display: flex; align-items: center; justify-content: space-between; }
.lp-nav__logo img { height: clamp(54px, 4.9vw, 68px); width: auto; }
/* Nav-CTA: Doppellinie 3px:3px (1:1, dezenter als der Haupt-CTA) */
.lp-nav__cta {
  font-weight: 800;
  font-size: var(--cj-text-body-lg);
  padding: var(--cj-space-2) var(--cj-space-4);
  border-radius: var(--cj-r-pill);
  /* Ring-Kompensation: der 6px-Ring sitzt buendig zur Nav-Innenkante (symmetrisch zum Logo).
     MUSS hier (geteilt) stehen, NICHT in landing.css - sonst driftet die CTA-Position auf
     Legal-/Utility-Seiten, die landing.css nicht laden (Carlo 14.07., Baukasten-Fix). */
  margin-right: 6px;
  background: var(--cj-grad-primary);
  color: var(--cj-white);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  box-shadow: 0 0 0 3px var(--cj-anthrazit), 0 0 0 6px #fff, var(--cj-shadow-cta);
  transition: background 220ms var(--cj-ease-premium), transform 180ms var(--cj-ease-premium), filter 180ms var(--cj-ease-premium);
}
.lp-nav__cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
/* SYSTEM (Carlo 14.07.): Nav-CTA ist app-weit DEZENT (3px:6px-Ring, KEIN Glas) - der schwere
   Doppel-Ring+Glas (A+C) bleibt den grossen Seiten-CTAs (Hero/Pricing) vorbehalten. Nutzt eine
   Homepage faelschlich .lp-btn--primary im Nav (z.B. partner), zieht diese Regel sie auf den
   dezenten Nav-Look zurueck -> alle Homepage-Kopfzeilen identisch. EINE Quelle = .lp-nav__cta. */
.lp-nav .lp-btn--primary {
  box-shadow: 0 0 0 3px var(--cj-anthrazit), 0 0 0 6px #fff, var(--cj-shadow-cta);
}
.lp-nav .lp-btn--primary:hover {
  box-shadow: 0 0 0 3px var(--cj-anthrazit), 0 0 0 6px #fff, var(--cj-shadow-cta-hover);
}

/* ─── Footer ─── */
.lp-footer { padding: var(--cj-space-8) 0; border-top: 1px solid var(--cj-white-10); position: relative; }
.lp-footer__inner { display: flex; flex-direction: column; align-items: center; gap: var(--cj-space-4); text-align: center; }
.lp-footer__social { display: flex; flex-direction: row; gap: var(--cj-space-3); align-items: center; }
.lp-footer__social a { width: 46px; height: 46px; border-radius: var(--cj-r-circle); display: grid; place-items: center; color: var(--cj-white-50); border: 1px solid var(--cj-white-10); transition: color 200ms var(--cj-ease-premium), border-color 200ms var(--cj-ease-premium), background 200ms var(--cj-ease-premium); }
.lp-footer__social a:hover { color: var(--cj-white); border-color: var(--cj-electric); background: rgba(26,140,255,0.12); }
.lp-footer__social svg { width: 23px; height: 23px; }
.lp-footer__links { display: flex; flex-wrap: wrap; gap: var(--cj-space-3); justify-content: center; }
.lp-footer__links a { color: var(--cj-white-50); font-size: var(--cj-text-body-md); transition: color 180ms var(--cj-ease-premium); }
.lp-footer__links a:hover { color: var(--cj-white); }
.lp-footer__copy { color: var(--cj-white-50); font-size: var(--cj-text-body-sm); }
.lp-footer .lp-footer__sdg { font-family: var(--cj-font-body); font-weight: 400; font-size: 12px; letter-spacing: 0.04em; color: var(--cj-white-50); margin-top: calc(-1 * var(--cj-space-4) + 4px); }

/* ─── Heading-Utilities — Document-Mode, Schriftskala (Nunito 800) ─── */
/* Fliesstext linksbuendig: NIE justify. Cormorant bleibt Editorial (Pull-Quotes), nie Doc-Headings. */
.cj-doc-h1 {
  font-family: var(--cj-font-body); font-weight: 800;
  font-size: clamp(30px, 4.2vw, 48px); line-height: 1.12;
  letter-spacing: -0.01em; color: var(--cj-white); text-wrap: balance; text-align: left;
}
.cj-doc-h2 {
  font-family: var(--cj-font-body); font-weight: 800;
  font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; color: var(--cj-white); text-align: left;
}
.cj-doc-h3 {
  font-family: var(--cj-font-body); font-weight: 700;
  font-size: clamp(18px, 2vw, 20px); line-height: 1.3; color: var(--cj-white); text-align: left;
}
.cj-doc-body { font-family: var(--cj-font-body); font-size: 17px; line-height: 1.7; color: var(--cj-white-70); text-align: left; }
.cj-caption { font-size: var(--cj-text-body-md); color: var(--cj-white-50); }

/* ─── Card — hier bewusst NICHT definiert ───
   `.cj-card` / `.cj-card--accent` gehoeren allein movemate_patterns.css (Carlo-Wahl
   "A Deep-Glass" 15.07.). Bis 28.07. stand hier eine zweite Fassung derselben Klasse
   (Weiss-Verlauf statt Glas). Weil diese Datei spaeter eingebunden wird, gewann sie auf
   den vier Seiten, die beide laden (Anmelden, Pausiert, Zahlung offen, Reaktivieren) -
   dort sah dieselbe Karte anders aus als in der App. Gemessen mit
   tools/pwa_audit/_card_doppel_messung.cjs: der Unterschied war rein optisch (Flaeche +
   Schatten), Abstaende setzen die Screens selbst. Carlo-Entscheidung 28.07.: Karten-Glas,
   Kopie raus. Wer hier wieder eine Card-Regel ergaenzt, baut die Doppelbelegung neu auf. */

/* ─── Responsive Nav (Konventions-Skala Handy) ─── */
@media (max-width: 480px) {
  .lp-nav { padding: var(--cj-space-3) 0; }
  .lp-nav__logo img { height: 36px; }
  .lp-nav__cta { font-size: var(--cj-text-body-md); padding: var(--cj-space-1) var(--cj-space-3); box-shadow: 0 0 0 3px var(--cj-anthrazit), 0 0 0 6px #fff, var(--cj-shadow-cta); }
  /* Footer-Links auf Handy: ganze Links umbrechen, nie ein Wort - seit 29.09. sind es 7 Links
     (Vertrag widerrufen + Verträge hier kündigen, § 356a/§ 312k), die passen nicht in eine Zeile. */
  .lp-footer__links { flex-wrap: wrap; gap: var(--cj-space-1) var(--cj-space-2); }
  .lp-footer__links a { font-size: var(--cj-text-body-xs); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-btn, .lp-nav__cta { transition: none !important; }
}