// ────────────────────────────────────────────────────────────────
// Widget · Hero (Marke · Standort · Center-Swap)
// Aus j3-landing uebernommen, auf Tokens umgestellt.
// ────────────────────────────────────────────────────────────────

.hero-block {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 72px);
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  margin-top: clamp(14px, 3vh, 42px);
  text-align: center;

  &__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    &[hidden] { display: none; }
  }

  &__detail {
    width: min(600px, 100%);
    max-height: calc(100vh - 240px);
    overflow: auto;

    &[hidden] { display: none; }
  }

  &__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 6px 12px;
    font: inherit;
    font-size: var(--fs-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dim);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);

    &:hover,
    &:focus-visible {
      outline: none;
      color: var(--fg);
      border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    }
  }
}

.masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
}

// Marke: nur im Masthead, damit `h1` fuer Doku frei bleibt.
.masthead h1 {
  font-family: var(--font-brand);
  font-size: clamp(34px, 7vw, 72px);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-widest);
  text-indent: var(--tracking-widest); // optische Zentrierung
  text-transform: uppercase;
  text-shadow:
    0 0 12px var(--ember-soft),
    0 0 34px color-mix(in srgb, var(--ember) 32%, transparent),
    0 0 68px color-mix(in srgb, var(--ember) 16%, transparent);

  b {
    font-weight: var(--fw-medium);
    color: var(--accent);
    text-shadow:
      0 0 10px color-mix(in srgb, var(--accent) 50%, transparent),
      0 0 28px color-mix(in srgb, var(--accent) 28%, transparent);
  }
}

.rule {
  width: 90px;
  height: 1px;
  margin: 22px auto 16px;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
  box-shadow: 0 0 10px var(--ember-soft), 0 0 22px color-mix(in srgb, var(--ember) 30%, transparent);
}

// Standortzeile unter der Marke
.location {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: clamp(14px, 2.4vh, 26px);
  text-align: center;

  &__name {
    font-size: clamp(19px, 2.3vw, 29px);
    letter-spacing: .02em;
    color: var(--fg);
  }

  &__coords {
    font-size: clamp(13px, 1.6vw, 18px);
    letter-spacing: .06em;
    color: var(--accent);
  }

  &__stats {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
    font-size: clamp(13px, 1.6vw, 18px);
    letter-spacing: .04em;
    color: var(--dim);
  }

  &__sep {
    color: var(--faint);
  }
}