/* ==========================================================================
   PIXEL+MORE — Stage: dunkle Premium-Bühne (geteilte Familien-DNA)
   Hero, Akzent-Bänder, CTA-Anker. Kontrast: Fließtext >= ink-200.
   ========================================================================== */

.stage {
  position: relative;
  background: var(--stage-bg);
  color: var(--stage-text);
  isolation: isolate;
  overflow: hidden;
}
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--stage-bg-grad);
}
.stage--aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glow-aurora);
  pointer-events: none;
}
.stage h1, .stage h2, .stage h3, .stage h4 { color: var(--stage-text-strong); }
.stage .lead { color: var(--stage-text); }
.stage .note, .stage .pillar__num { color: var(--stage-text-muted); }
.stage .eyebrow { color: var(--teal-400); }
.stage .eyebrow--dash::before { background: var(--teal-400); }
.stage a:not(.btn) { color: var(--teal-300); }
.stage a:not(.btn):hover { color: var(--teal-200); }

/* Hero */
.stage-hero { padding-block: var(--space-4xl); }
.hero-xl {
  position: relative;
  min-height: min(84vh, 760px);
  display: flex;
  align-items: center;
  padding-block: var(--space-4xl);
  background: var(--stage-bg);
  color: var(--stage-text);
  isolation: isolate;
  overflow: hidden;
}
.hero-xl::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--glow-aurora);
}
.hero-xl h1 { color: #fff; font-size: var(--fs-hero-fluid); }
.hero-xl .lead { color: var(--stage-text); max-width: 54ch; }
.hero-xl__content { max-width: 62ch; }

/* Headline mit Verlauf (AA-sicher: weiß -> ink-300) */
.headline-grad {
  background: var(--grad-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Glas-Karten auf der Bühne */
.stage-card {
  background: var(--stage-surface);
  border: 1px solid var(--stage-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.stage-card h3 { margin-top: var(--space-4); }
.stage-card p { margin-top: var(--space-3); color: var(--stage-text); }
.stage-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--surface-on-dark);
  color: var(--teal-300);
  border: 1px solid var(--stage-border-strong);
}
.stage-card__icon svg { width: 24px; height: 24px; }

/* CTA-Band */
.cta-band {
  background: var(--stage-bg-grad);
  border: 1px solid var(--stage-border);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl);
  text-align: center;
  color: var(--stage-text);
  box-shadow: var(--shadow-stage);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--glow-aurora);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--stage-text); margin-top: var(--space-4); max-width: 60ch; margin-inline: auto; }
.cta-band .cluster { margin-top: var(--space-xl); }

/* Dunkles Panel (Stage in Karten-Form) */
.panel {
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  border: 1px solid var(--stage-border);
  box-shadow: var(--shadow-stage);
}
.panel h3 { color: #fff; }
.panel p { color: var(--stage-text); }

/* feine Trennlinie */
.hairline { height: 1px; border: 0; background: var(--grad-hairline); margin-block: var(--space-2xl); }