/* Variante C — Kristall-Schnitt / Lichtfeld (Theo, Korrekturrunde 27.09.2026)
   - Inhalt an Container-/Nav-Kante (linksbündig)
   - Anriss der nächsten Section sichtbar (--hc-peek)
   - weicher Auslauf des Shader-Felds (Maske statt harter Kante)
   - Scroll-Hinweis in der CTA-Zeile (keine Kollision)
   - Masken mit Unterlängen-Reserve („g“ in „Angefragt.“) */
.hero-c {
  --hc-peek: clamp(150px, 21vh, 210px);
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h) - var(--hc-peek));
  min-height: calc(100svh - var(--header-h) - var(--hc-peek));
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

/* Feld: läuft nach unten weich in Graphite aus (keine harte Kante) */
.hc-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,0.55) 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,0.55) 78%, transparent 100%);
}
.hc-canvas,
.hc-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hc-canvas { opacity: 0; transition: opacity 0.8s ease; }
.hc-canvas.is-ready { opacity: 1; }
.hc-fallback {
  /* statisches Lichtfeld (reduced motion / kein WebGL) — gleicher Schnitt wie der Shader */
  background:
    linear-gradient(113deg, transparent 52%, rgba(95,168,211,0.16) 58%, rgba(124,185,232,0.42) 61%, rgba(95,168,211,0.14) 64%, transparent 70%),
    repeating-linear-gradient(58deg, transparent 0 86px, rgba(95,168,211,0.07) 86px 87px),
    repeating-linear-gradient(-32deg, transparent 0 86px, rgba(95,168,211,0.05) 86px 87px),
    linear-gradient(160deg, #22272d 0%, #1A1D21 70%);
}

/* Lese-Schutz: Graphite-Verlauf hinter der Textspalte (Subline AA über dem Lichtstrahl) */
.hc-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(26,29,33,0.86) 0%, rgba(26,29,33,0.7) 34%, rgba(26,29,33,0.25) 58%, rgba(26,29,33,0) 74%);
}
.hc-dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--bg);
  opacity: 0;
}

.hc-inner {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 4vh, 3rem) 0 clamp(2rem, 5vh, 3.5rem);
}

.hc-eyebrow {
  display: block;
  margin: 0 0 clamp(1.1rem, 2.6vh, 1.7rem);
  overflow: hidden;
  padding: 2px; /* Rahmen/Glow der Pill nicht von der Maske abschneiden */
  margin-left: -2px;
}
.hc-eyebrow .hc-in { display: inline-block; }
/* Status-Pill „Start am 01.11.2026 …“ (ersetzt die Eyebrow; Inter 500, AA) */
.hc-status { display: inline-flex; align-items: center; gap: 0.6rem; max-width: 100%; padding: 0.5rem 1rem 0.5rem 0.8rem; border-radius: 999px; background: rgba(20,24,28,0.78); border: 1px solid rgba(95,168,211,0.45); color: var(--text); font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; line-height: 1.3; letter-spacing: 0; text-transform: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hc-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 8px rgba(124,185,232,0.8); }
.hc-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent-hi); animation: hc-pulse 2.4s ease-out infinite; }
@keyframes hc-pulse { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hc-dot::after { animation: none; display: none; } }

.hc-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 clamp(1.1rem, 2.6vh, 1.8rem);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.7rem, min(7.4vw, 11.6vh), 6.6rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--text);
}
/* Maske je Zeile: Reserve für Unterlängen (g) + rechte Kante, per negativer Margin neutralisiert */
.hc-line {
  display: block;
  overflow: hidden;
  padding: 0.04em 0.12em 0.22em 0.02em;
  margin: -0.04em -0.12em -0.2em -0.02em;
  will-change: transform;
}
.hc-word {
  display: inline-block;
  white-space: nowrap;
}

.hc-bottom { max-width: 34rem; }
.hc-lead {
  color: var(--text);
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  max-width: 36ch;
  margin: 0 0 clamp(1.2rem, 3vh, 1.9rem);
  text-shadow: 0 1px 12px rgba(26,29,33,0.9);
}

.hc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

/* Scroll-Hinweis: Text + dünne Linie, Teil der CTA-Zeile */
.hc-scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0;
  color: #C4CAD1;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.hc-scroll:hover { color: var(--text); }
.hc-scroll-line {
  position: relative;
  display: block;
  width: 48px;
  height: 1px;
  background: rgba(242,243,245,0.28);
  overflow: hidden;
}
.hc-scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-100%);
  animation: hcLine 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes hcLine {
  0% { transform: translateX(-100%); }
  55% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* Motion-Startzustände nur, wenn JS-Motion aktiv ist (hero-boot.js) */
.hc-motion .hc-word { transform: translateY(112%); }
.hc-motion .hc-eyebrow .hc-in { transform: translateY(110%); }
.hc-motion .hc-lead,
.hc-motion .hc-actions { opacity: 0; }

@media (max-width: 767px) {
  .hero-c {
    --hc-peek: 84px;
    align-items: flex-end;
  }
  .hc-inner { padding: 2rem 0 2.25rem; }
  .hc-title { font-size: clamp(2.6rem, 13.2vw, 3.6rem); }
  .hc-status { font-size: 0.82rem; padding: 0.45rem 0.85rem 0.45rem 0.7rem; }
  .hc-veil {
    background: linear-gradient(180deg, rgba(26,29,33,0.35) 0%, rgba(26,29,33,0.62) 45%, rgba(26,29,33,0.78) 100%);
  }
  .hc-actions { gap: 0.6rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-canvas { display: none !important; }
  .hc-scroll-line::after { animation: none; transform: none; }
}