/* =============================================================================
   pages/index.css — Minimale, NUR für die Startseite gültige Feinheiten
   -----------------------------------------------------------------------------
   Bewusst klein halten. Alles Generische gehört in components.css.
   ============================================================================= */

/* Hero-Textspalte auf großen Schirmen nicht zu breit werden lassen (Lesbarkeit) */
.hero__content { max-width: 42rem; }

/* -----------------------------------------------------------------------------
   Signatur-Hero: interaktives Blueprint-Canvas (hero-blueprint.js)
   Liegt hinter dem Inhalt; wenn aktiv, ersetzt es das statische CSS-Raster.
   -------------------------------------------------------------------------- */
.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;          /* Klicks gehen an den Inhalt durch */
  z-index: 0;
}
.hero.has-canvas .blueprint-grid { display: none; }   /* statischen Fallback ausblenden */
.hero.has-canvas .crosshair { display: none; }        /* Canvas zeichnet eigenes Fadenkreuz */

/* -----------------------------------------------------------------------------
   Live-Spec-Panel: pulsierender Status-Punkt + Tipp-Caret (spec-panel.js)
   -------------------------------------------------------------------------- */
.spec-panel__status { animation: spec-pulse 2.4s var(--ease) infinite; }
@keyframes spec-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(204, 122, 43, .18); }
  50%      { box-shadow: 0 0 0 7px rgba(204, 122, 43, .04); }
}

/* Blinkender Caret, solange ein Wert getippt wird */
.spec-row dd.is-typing::after {
  content: "▌";
  margin-left: .1em;
  color: var(--c-amber);
  animation: spec-caret 1s steps(1) infinite;
}
@keyframes spec-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .spec-panel__status { animation: none; }
  .spec-row dd.is-typing::after { content: none; animation: none; }
}
