/* ══════════════════════════════════════════════════════════════════════════════════════════
   MRP WEBSITE — ELEVATIONS-LAYER (additiv über site.css geladen).
   Hebt die helle Premium-Canvas auf Award-Niveau: gemeinsame Schatten-/Glow-/Glas-Tokens,
   Fluid-Typo-Skala, Sektions-Nähte, Mikro-Interaktionen, feinere Licht-Canvas (Grain gegen
   Banding), volle Fokus-/Reduced-Motion-Abdeckung. Nur presentation, kein Spielertext.
   Farben leiten sich per color-mix aus den brand.yml-Tokens ab. Canvas bleibt HELL.
   WICHTIG: NACH site.css einbinden (Kaskade-Reihenfolge = gleiche Spezifität, spätere gewinnt).
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. ELEVATIONS-TOKENS (zweites :root ERGÄNZT das erste, ersetzt es nicht) ───────────────── */
:root {
  --ink-rgb: 16 70 150;                         /* geteilte Marine-Tinte für alle Tiefe */

  --elev-1: 0 1px 2px rgb(var(--ink-rgb) / .05), 0 2px 6px -1px rgb(var(--ink-rgb) / .06);
  --elev-2: 0 2px 4px rgb(var(--ink-rgb) / .05), 0 10px 24px -8px rgb(var(--ink-rgb) / .16);
  --elev-3: 0 4px 8px -2px rgb(var(--ink-rgb) / .06), 0 22px 46px -14px rgb(var(--ink-rgb) / .24);
  --elev-4: 0 8px 16px -4px rgb(var(--ink-rgb) / .08), 0 38px 76px -22px rgb(var(--ink-rgb) / .32);
  --contact: 0 1px 1px rgb(0 0 0 / .4);
  --hi-top: inset 0 1px 0 color-mix(in srgb, var(--sky) 18%, transparent);   /* dezente BLAUE Kante statt weiß */
  --hi-edge: inset 0 0 0 1px color-mix(in srgb, var(--sky) 10%, transparent);

  --glow-sky:   0 24px 50px -18px color-mix(in srgb, var(--sky)   60%, transparent);
  --glow-sun:   0 24px 50px -18px color-mix(in srgb, var(--sun)   62%, transparent);
  --glow-coral: 0 24px 50px -18px color-mix(in srgb, var(--coral) 55%, transparent);
  --glow-mint:  0 24px 50px -18px color-mix(in srgb, var(--mint)  55%, transparent);

  --c-azure:  var(--primary);
  --c-sky:    var(--sky);
  --c-lemon:  var(--sun);
  --c-gold:   #ffb01f;
  --c-coral:  var(--coral);
  --c-mint:   var(--mint);
  --spark: conic-gradient(from 210deg,
            var(--c-lemon), var(--c-gold), var(--c-coral),
            var(--c-sky), var(--c-azure), var(--c-lemon));

  --glass-bg:     color-mix(in srgb, #0b1322 80%, transparent);
  --glass-bg-hi:  color-mix(in srgb, #0b1322 90%, transparent);
  --glass-border: color-mix(in srgb, #ffffff 12%, transparent);
  --glass-blur:   blur(16px) saturate(1.35);

  --r-xs: 8px;  --r-sm: 12px; --r-md: 16px; --r-lg: 20px;
  --r-xl: 26px; --r-2xl: 36px; --r-pill: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --section-y: clamp(72px, 8vw, 128px);

  --ease-out: cubic-bezier(.16,.84,.28,1);
  --dur-1: .16s; --dur-2: .28s; --dur-3: .5s;

  --focus: color-mix(in srgb, var(--primary) 72%, #fff);
}

/* Bestehende Komponenten auf die Skala heben */
.feature-card   { box-shadow: var(--elev-2), var(--hi-top); }
.feature-card:hover { box-shadow: var(--elev-3), var(--glow-sky); }
.road-col, .step, .trust-item { box-shadow: var(--elev-2), var(--hi-top); }
.feature-big    { box-shadow: var(--elev-3), var(--hi-top); }
.feature-big:hover { box-shadow: var(--elev-4), var(--glow-sun); }
.join-inner, .site-nav.scrolled, .sticky-cta-inner {
  background: var(--glass-bg); border-color: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-4), var(--hi-top);
}

/* ── 2. TYPO-SYSTEM (self-hosted Oswald 500/700 + Segoe, keine neuen Fonts) ─────────────────── */
:root {
  --font-display: "Oswald", "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;

  --fs-display: clamp(2.8rem, 1.4rem + 6.4vw, 6.4rem);
  --fs-h1:      clamp(2.4rem, 1.6rem + 3.6vw, 4.1rem);
  --fs-h2:      clamp(2rem, 1.5rem + 2.3vw, 3.3rem);
  --fs-h3:      clamp(1.35rem, 1.15rem + .9vw, 1.72rem);
  --fs-lead:    clamp(1.12rem, 1rem + .7vw, 1.44rem);
  --fs-body:    1.0625rem;
  --fs-sm:      .9rem;
  --fs-xs:      .78rem;

  --tr-tight: -.022em; --tr-snug: -.012em; --tr-caps: .2em;
  --lh-display: 1.0; --lh-tight: 1.08; --lh-body: 1.62;
}

.hero-title { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-tight); }
.block-head h2, .join-inner h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--tr-snug); }
.story-card h2 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-snug); }
.feature-big h3, .cat-head h3, .road-col-head h3, .step h3 { font-size: var(--fs-h3); letter-spacing: var(--tr-snug); }

.hero-sub, .block-head p, .story-card p, .join-inner > p {
  font-size: var(--fs-lead); line-height: 1.5; font-weight: 500;
}
.hero-sub { text-wrap: balance; }
.block-head h2, .story-card h2, .join-inner h2 { text-wrap: balance; }

.eyebrow { letter-spacing: var(--tr-caps); font-weight: 600; }

body.site { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); }

/* ── 3. SEKTIONS-CHOREOGRAFIE (Nähte + Tiefe) ──────────────────────────────────────────────── */
.story::before, .story::after,
.join::before, .join::after,
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; height: 120px;
  pointer-events: none; z-index: 1;
}
.story::before, .join::before { top: -1px;  background: linear-gradient(to bottom, var(--bg), transparent); }
.story::after,  .join::after,
.hero::after                  { bottom: -1px; background: linear-gradient(to top,    var(--bg), transparent); }

.block { position: relative; }
/* (Der frühere weiße Platten-Schimmer oben/unten an jedem Block ist auf der dunklen Canvas
    unerwünscht — entfernt. Owner 2026-07-30.) */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .block-head, .story-card, .join-inner {
      animation: seamGlow linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 32%;
    }
    @keyframes seamGlow {
      from { filter: drop-shadow(0 0 0 transparent); }
      to   { filter: drop-shadow(0 8px 26px color-mix(in srgb, var(--sky) 26%, transparent)); }
    }
  }
}

/* ── 4. MIKRO-INTERAKTIONEN ─────────────────────────────────────────────────────────────────── */
.btn { transition: transform var(--dur-1) var(--spring), box-shadow var(--dur-2), filter var(--dur-2); }
.btn-primary { box-shadow: var(--elev-2), var(--hi-top); }
.btn-primary:hover { box-shadow: var(--elev-3), var(--glow-sun); }
.btn:active { transform: translateY(0) scale(.975); transition-duration: .06s; }

.nav-link, .foot-inner a[href], .site-footer a[href] { position: relative; }
.nav-link::after, .foot-inner a[href]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--primary), var(--sky));
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out);
}
.nav-link:hover::after, .foot-inner a[href]:hover::after { transform: scaleX(1); }

.feature-card, .step, .road-col, .trust-item { position: relative; overflow: hidden; }
.feature-card::after, .step::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px 320px at 50% -10%,
              color-mix(in srgb, var(--sky) 22%, transparent), transparent 60%);
  transition: opacity var(--dur-2) var(--ease);
}
.feature-card:hover::after, .step:hover::after { opacity: 1; }

.s-live { display: inline-flex; align-items: center; gap: 7px; }
.s-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent);
  animation: livePulse 2.2s var(--ease-out) infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--success) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); }
}

.ip-card { transition: transform var(--dur-1) var(--spring), border-color var(--dur-1), box-shadow var(--dur-1); }
.ip-card:active { transform: translateY(0) scale(.98); }
.ip-card:hover { box-shadow: var(--elev-3), var(--glow-sky); }

/* ── 5. REICHERE LICHT-CANVAS (bleibt hell) ─────────────────────────────────────────────────── */
body.site {
  background:
    radial-gradient(1100px 640px at 84% -8%,  color-mix(in srgb, var(--sky)     22%, transparent), transparent 58%),
    radial-gradient(900px  580px at 4% 8%,     color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%),
    radial-gradient(760px  540px at 94% 90%,   color-mix(in srgb, var(--coral)   12%, transparent), transparent 62%),
    linear-gradient(180deg, #070b16 0%, #0a1020 42%, #060a14 100%);
  background-attachment: fixed;
}

/* DEAKTIVIERT 2026-07-31: das gekachelte feTurbulence-Rauschen erzeugte bei DPI-/Zoom-Skalierung
   sichtbare diagonale Moiré-Streifen über den Karten (wirkte wie Artefakt). Grain machen die
   seiten-eigenen Overlays (gta.css-Grain / mc.css-Dither) sauberer. */
body.site::after { content: none; }

.bg-orbs::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%,
              color-mix(in srgb, var(--sky) 12%, transparent), transparent 58%);
}

/* ── 6. ACCESSIBILITY + Reduced-Motion für ALLE neuen Effekte ──────────────────────────────── */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.ip-card:focus-visible, .nav-cta:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.btn-primary:focus-visible { box-shadow: var(--elev-2), 0 0 0 6px color-mix(in srgb, var(--sun) 30%, transparent); }
.ip-card:focus-visible { outline-color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
  .s-live::before { animation: none; }
  .nav-link::after, .foot-inner a[href]::after { transition: none; }
  .feature-card::after, .step::after { transition: none; }
  .btn:active, .ip-card:active { transform: none; }
  .block-head, .story-card, .join-inner { animation: none !important; }
}

/* ── Mobile-Hero: kleinerer Display-Titel + Hero wächst mit Inhalt (Titel nicht mehr unter die
      Nav gedrückt). svh statt vh = korrekte Höhe trotz Browser-Leisten. ─────────────────────── */
@media (max-width: 820px) {
  :root { --fs-display: clamp(2.5rem, 1rem + 8.4vw, 3.6rem); }
  .hero { height: auto; min-height: 100svh; padding: 96px 16px 52px; }
  .hero-title { animation: none; }
}
/* Sticky-CTA auf sehr schmalen Schirmen: IP-Chip + Button dürfen umbrechen statt zu clippen. */
@media (max-width: 520px) {
  .sticky-cta-actions { flex-wrap: wrap; width: 100%; }
  .sticky-cta-actions .ip-card { flex: 1 1 100%; justify-content: center; text-align: center; }
  .sticky-cta-actions .btn { flex: 1 1 100%; justify-content: center; }
}