/**
 * Startseite – Punktnetz-Globus und Prozess.
 * Seiten-Chrome kommt aus styles.css.
 */

body[data-page="home"] .hero-hub {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(100%, 26rem);
}

  body[data-page="home"] .hero-globe {
    flex-shrink: 0;
  }

  body[data-page="home"] .hero-hub > .hero-hub__panel {
  order: 1;
  position: relative;
  z-index: 6;
  width: 100%;
  margin: 0 0 0.9rem;
}

body[data-page="home"] .hero-hub > .hero-globe {
  order: 2;
}

body[data-page="home"] .hero-hub > .hero-globe__hint {
  order: 3;
}

body[data-page="home"] .hero-hub__panel[hidden] {
  display: none !important;
}

body[data-page="home"] .hero-globe {
  position: relative;
  flex-shrink: 0;
  width: min(100%, 22rem);
  aspect-ratio: 1;
  margin-inline: auto;
}

body[data-page="home"] .hero-globe__orb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 28%, #1e3a8a 0%, #0c1730 52%, #060b18 100%);
  box-shadow:
    0 0 0 1px rgba(147, 197, 253, 0.22),
    0 0 42px rgba(37, 99, 235, 0.28),
    inset -20px -24px 38px rgba(2, 6, 23, 0.5);
}

body[data-page="home"] .hero-globe__glow {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.28), transparent 64%);
  pointer-events: none;
}

body[data-page="home"] .hero-globe__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body[data-page="home"] .hero-globe__highlight {
  position: absolute;
  inset: 10% 20% auto 14%;
  height: 36%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 72%);
  pointer-events: none;
}

body[data-page="home"] .hero-globe__nodes {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

body[data-page="home"] .hero-globe__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(147, 197, 253, 0.45);
  border-radius: 0.5rem;
  color: #e2e8f0;
  background: rgba(8, 15, 32, 0.94);
  box-shadow:
    0 0 0 2px rgba(6, 11, 24, 0.28),
    0 8px 16px rgba(0, 0, 0, 0.3);
  z-index: 5;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition:
    border-color var(--st-transition-fast),
    background var(--st-transition-fast),
    box-shadow var(--st-transition-fast);
}

body[data-page="home"] .hero-globe__node:hover,
body[data-page="home"] .hero-globe__node:focus-visible {
  background: rgba(30, 64, 175, 0.95);
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22), 0 0 18px rgba(37, 99, 235, 0.45);
  outline: none;
}

body[data-page="home"] .hero-globe__node[aria-pressed="true"] {
  background: linear-gradient(160deg, #3b82f6, #1d4ed8);
  border-color: #bfdbfe;
  color: #fff;
}

body[data-page="home"] .hero-globe__icon {
  display: flex;
  color: #93c5fd;
}

body[data-page="home"] .hero-globe__node[aria-pressed="true"] .hero-globe__icon {
  color: #fff;
}

body[data-page="home"] .hero-globe__hint {
  margin: 0.85rem 0 0;
  color: rgba(191, 219, 254, 0.72);
  font-size: 0.75rem;
  text-align: center;
}

body[data-page="home"] .hero-hub.is-open .hero-globe__hint {
  display: none;
}

@media (max-width: 1023px) {
  body[data-page="home"] .hero-hub,
  body[data-page="home"] .hero-globe {
    width: min(100%, 20rem);
  }

  body[data-page="home"] .hero-globe__node {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.48rem;
  }
}

@media (max-width: 699px) {
  body[data-page="home"] .hero-hub,
  body[data-page="home"] .hero-globe {
    width: min(100%, 19rem);
  }

  body[data-page="home"] .hero-globe__node {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.45rem;
  }

  body[data-page="home"] .process-methodik[data-process-scroll] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding: 0;
  }

  body[data-page="home"] .process-methodik[data-process-scroll] .process-card {
    position: relative;
    top: auto;
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    opacity: 1;
    transform: none;
  }

  body[data-page="home"] .process-methodik[data-process-scroll] .process-card.is-active {
    border-color: var(--st-hover-border);
    box-shadow: var(--st-hover-shadow);
  }
}