/* ================================================================
   mein-riva-info-styles.css  -  Info-/Werbeseite "Mein Riva"
   ================================================================
   VERSION: 1
   ABLAGEORT: /site/templates/styles/mein-riva-info-styles.css

   Wird nur auf der Info-Seite geladen (siehe _main.php,
   $rivaNeedsMeinRivaInfo).

   Basis-Elemente wie .btn, .script, .eyebrow und die Farbvariablen
   kommen aus header-styles.css - hier stehen nur die Bausteine, die
   es sonst nirgends gibt. Alle Klassen mit Praefix "mri-", damit
   nichts mit dem Kundenkonto (mein-riva-styles.css) kollidiert.

   Datei enthaelt nur ASCII-Zeichen.
   ================================================================ */

/* ---------- Hero ---------- */
.mri-hero{
  position:relative;overflow:hidden;background:var(--navy);color:#fff;
  padding:90px 0 100px;
}
.mri-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;}
.mri-hero-bg-plain{background:var(--navy-2);opacity:.5;}
.mri-hero-inner{position:relative;z-index:2;max-width:640px;}
.mri-hero .script{font-size:28px;color:var(--accent);display:inline-block;}
.mri-hero h1{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(38px,6vw,58px);line-height:1.05;letter-spacing:.01em;margin:12px 0 20px;
}
.mri-hero p{font-size:18px;color:#D5D8DF;font-weight:300;line-height:1.7;margin:0 0 32px;max-width:520px;}
.mri-hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- Abschnitts-Kopf ---------- */
.mri-section-head{text-align:center;max-width:600px;margin:0 auto 50px;}
.mri-section-head h2{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:32px;margin-top:6px;
}
.mri-section-head p{font-size:16px;color:var(--text-muted);font-weight:300;margin-top:12px;line-height:1.6;}

/* ---------- Vorteile ---------- */
.mri-benefits{padding:80px 0;}
.mri-benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.mri-benefit-card{
  background:var(--surface-alt);border-radius:4px;padding:32px 28px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  position:relative;overflow:hidden;
}
.mri-benefit-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);}
.mri-benefit-card::before{content:"";position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--accent);}
.mri-benefit-icon{
  width:50px;height:50px;border-radius:50%;background:var(--navy);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px;
}
.mri-benefit-card h3{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:16.5px;letter-spacing:.01em;margin-bottom:10px;
}
.mri-benefit-card p{font-size:14.5px;line-height:1.65;color:var(--text-muted);font-weight:300;margin:0;}

/* ---------- So funktioniert es ---------- */
.mri-steps{background:var(--surface-alt);padding:80px 0;}
.mri-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;position:relative;}
.mri-step{text-align:center;position:relative;}
.mri-step-num{
  width:56px;height:56px;border-radius:50%;background:var(--navy);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:20px;
  margin:0 auto 18px;position:relative;z-index:2;
}
/* Gestrichelte Verbindungslinie zwischen den Schritten */
.mri-step::after{
  content:"";position:absolute;top:28px;left:calc(50% + 40px);right:calc(-50% + 40px);
  height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);
}
.mri-step:last-child::after{display:none;}
.mri-step h4{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:16px;margin-bottom:8px;}
.mri-step p{font-size:14.5px;color:var(--text-muted);font-weight:300;line-height:1.6;max-width:260px;margin:0 auto;}

/* ---------- CTA-Banner ---------- */
.mri-cta{
  background:var(--navy);color:#fff;border-radius:4px;padding:56px 50px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  margin:80px auto;max-width:1100px;position:relative;overflow:hidden;
}
.mri-cta::after{
  content:"";position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,169,127,.18),transparent 70%);
}
.mri-cta-text{position:relative;z-index:1;max-width:480px;}
.mri-cta h2{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:26px;margin-bottom:10px;}
.mri-cta p{font-size:15px;color:#C6CAD4;font-weight:300;line-height:1.6;margin:0;}
.mri-cta-actions{position:relative;z-index:1;display:flex;gap:12px;flex-wrap:wrap;}

@media(max-width:980px){
  .mri-hero{padding:64px 0 70px;}
  .mri-benefit-grid{grid-template-columns:1fr;}
  .mri-steps-grid{grid-template-columns:1fr;gap:44px;}
  .mri-step::after{display:none;}
  .mri-cta{padding:40px 30px;margin:60px 0;}
}

/* ---------- Einblend-Animation ----------
   .reveal ist bewusst hier lokal definiert: Im Projekt bringt jede
   Seite ihre eigene Reveal-Regel mit (vgl. pauschale-feiern,
   termine), es gibt keine globale. Der zugehoerige Beobachter steht
   in mein-riva-info.js. */
.mri-benefits .reveal,
.mri-steps .reveal,
.wrap > .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.mri-benefits .reveal.in,
.mri-steps .reveal.in,
.wrap > .reveal.in{opacity:1;transform:translateY(0);}

/* ---------- Heller Umriss-Button auf dunklem Grund ----------
   Kommt sonst nirgends im Projekt vor, deshalb hier. */
.btn-ghost-white{border:1px solid rgba(255,255,255,.4);color:#fff;}
.btn-ghost-white:hover{border-color:var(--accent);color:var(--accent);}