/* RampUnit Landing — Shared CSS
   Tokens via colors_and_type.css; layout helpers + components below.
   ====================================================================== */
@import url('./colors_and_type.css');

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--ru-white);
  color: var(--ru-slate-900);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* -------- Layout -------- */
.ru-section { padding: var(--space-24) var(--space-8); }
.ru-section.alt { background: var(--ru-off-white); }
.ru-section.deep { background: var(--ru-blue-800); color: var(--ru-white); }
.ru-section.deepest { background: var(--ru-blue-900); color: var(--ru-white); }
@media (max-width: 900px) { .ru-section { padding: var(--space-16) var(--space-5); } }

.ru-container { max-width: var(--content-max); margin: 0 auto; }

/* -------- Buttons -------- */
.ru-btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-hover) var(--ease-standard);
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}
.ru-btn-primary {
  background: var(--ru-amber-500);
  color: var(--ru-blue-900);
  border-color: var(--ru-amber-500);
}
.ru-btn-primary:hover {
  background: var(--ru-amber-600);
  border-color: var(--ru-amber-600);
  color: var(--ru-white);
  text-decoration: none;
}
.ru-btn-outline {
  background: transparent;
  color: var(--ru-slate-900);
  border-color: var(--border-strong);
}
.ru-btn-outline:hover {
  border-color: var(--ru-blue-800);
  color: var(--ru-blue-800);
  text-decoration: none;
}
.ru-section.deep .ru-btn-outline,
.ru-section.deepest .ru-btn-outline {
  color: var(--ru-white);
  border-color: rgba(255,255,255,0.3);
}
.ru-section.deep .ru-btn-outline:hover,
.ru-section.deepest .ru-btn-outline:hover {
  border-color: var(--ru-white);
  color: var(--ru-white);
}

/* -------- Cards / Pills / Hairlines -------- */
.ru-card {
  background: var(--ru-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: all var(--dur-hover) var(--ease-standard);
}
.ru-card:hover {
  border-color: var(--ru-blue-800);
  box-shadow: var(--shadow-md);
}
.ru-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--ru-slate-100);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ru-slate-600);
  letter-spacing: 0.04em;
}
.ru-hairline { border-top: 1px solid var(--border); }

/* -------- Eyebrow override on dark surfaces -------- */
.ru-section.deep .ru-eyebrow,
.ru-section.deepest .ru-eyebrow,
.ru-on-deep .ru-eyebrow { color: var(--ru-amber-500); }
.ru-section.deep .ru-h1, .ru-section.deep .ru-h2, .ru-section.deep .ru-h3,
.ru-section.deepest .ru-h1, .ru-section.deepest .ru-h2, .ru-section.deepest .ru-h3 {
  color: var(--ru-white);
}
.ru-section.deep .ru-body, .ru-section.deep .ru-body-lg,
.ru-section.deepest .ru-body, .ru-section.deepest .ru-body-lg {
  color: rgba(255,255,255,0.78);
}

/* -------- Schraffur background (data-sheet stripes) -------- */
.ru-schraffur {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 9px,
    rgba(27, 53, 89, 0.06) 9px,
    rgba(27, 53, 89, 0.06) 10px
  );
}
.ru-schraffur-dark {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 9px,
    rgba(255, 255, 255, 0.05) 9px,
    rgba(255, 255, 255, 0.05) 10px
  );
}
.ru-grid-bg {
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* -------- Status pill (used in mockups) -------- */
.ru-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.ru-status::before {
  content: "";
  width: 6px; height: 6px; border-radius: 999px; background: currentColor;
}
.ru-status.ok    { background: rgba(22,163,74,0.10); color: #15803D; }
.ru-status.warn  { background: rgba(245,158,11,0.12); color: var(--ru-amber-600); }
.ru-status.info  { background: rgba(27,53,89,0.08); color: var(--ru-blue-800); }
.ru-status.muted { background: var(--ru-slate-100); color: var(--ru-slate-600); }
.ru-status.err   { background: rgba(220,38,38,0.10); color: var(--ru-error); }

/* -------- Slider -------- */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--ru-slate-200);
  border-radius: 999px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--ru-blue-800);
  border: 3px solid var(--ru-white);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--ru-blue-800);
  border: 3px solid var(--ru-white);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

/* -------- Input fields -------- */
.ru-input {
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--ru-white);
  outline: none;
  color: var(--ru-slate-900);
  transition: border-color var(--dur-hover) var(--ease-standard);
}
.ru-input:focus { border-color: var(--ru-blue-800); }
.ru-input::placeholder { color: var(--ru-slate-400); }
.ru-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ru-slate-900);
}

/* -------- Anchor offsets for sticky nav -------- */
section[id] { scroll-margin-top: 96px; }

/* -------- Animation: dataflow dot (variant B) -------- */
@keyframes ru-dataflow {
  0%   { offset-distance: 0%;   opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ru-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@keyframes ru-line-draw {
  from { stroke-dashoffset: 200; }
  to   { stroke-dashoffset: 0; }
}
@keyframes ru-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* -------- Utility: data-sheet stamp -------- */
.ru-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 2px solid var(--ru-blue-800);
  border-radius: 4px;
  color: var(--ru-blue-800);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  background: rgba(255,255,255,0.7);
}

/* ────────────────────────────────────────────────────────────────────────────
   MOBILE-RESPONSIVE LAYER (≤760px)
   Greift via Attribute-Selector auf inline-style="grid-template-columns: ..."
   überall in der Page — komponenten-Code bleibt unverändert auf Desktop.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Alle Inline-Style-Grids zu einer Spalte stapeln */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* gridColumn-Spans (z.B. "span 7" in Bento) auf Mobile resetten */
  [style*="grid-column"] {
    grid-column: 1 / -1 !important;
  }
  /* Section-Padding reduzieren */
  .ru-section { padding: 48px 16px !important; }
  /* Container-Padding reduzieren */
  .ru-container { padding-left: 16px !important; padding-right: 16px !important; }
  /* Headlines responsive */
  .ru-h1 { font-size: clamp(28px, 7vw, 36px); }
  .ru-h2 { font-size: clamp(24px, 6vw, 30px); }
  .ru-h3 { font-size: clamp(18px, 5vw, 22px); }
  .ru-body-lg { font-size: 16px; }
  .ru-data-xl { font-size: clamp(36px, 10vw, 48px); }
}

/* Bilder + SVGs überschreiten nie Container-Breite (auch Desktop, harmlos) */
img, svg, video, iframe { max-width: 100%; height: auto; }
.ru-card { overflow: hidden; }
.ru-btn { white-space: normal; min-height: 44px; }

/* ────────────────────────────────────────────────────────────────────────────
   MOBILE NAV (≤760px)
   - TopBanner auf Mobile NICHT mehr sticky (sonst überlagert er Hero)
   - NavBar-Links + Demo-Button verstecken, nur Logo + Pilot-CTA bleiben
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* TopBanner identifizieren via blue-900 background + sticky position */
  body > div:first-of-type[style*="--ru-blue-900"][style*="sticky"] {
    position: relative !important;
    font-size: 12px !important;
    padding: 8px 14px !important;
    flex-wrap: nowrap !important;
    text-align: left !important;
  }
  /* NavBar header */
  header[style*="sticky"] {
    top: 0 !important;
  }
  header[style*="sticky"] > .ru-container {
    padding: 10px 16px !important;
  }
  header[style*="sticky"] nav {
    display: none !important;
  }
  header[style*="sticky"] .ru-btn-outline {
    display: none !important;
  }
  header[style*="sticky"] img {
    width: 120px !important;
    height: auto !important;
  }
  header[style*="sticky"] .ru-btn-primary {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
}

/* Pricing-Karten 3-Spalt auf Mobile zu 1-Spalt — bereits global durch ru-grid-3 abgedeckt */
/* Footer + FAQ + HowItWorks: durch ru-grid-* Mobile-Defaults abgedeckt (alle ≤760px → 1fr) */